@ihk-gfi/lux-components-theme 21.4.0 → 21.5.0

package/prebuilt-themes/luxtheme-green.css

@@ -1625,7 +1625,9 @@
   --lux-theme-radius-xxl: 999px;
   --lux-theme-spacing-xxs: 2px;
   --lux-theme-spacing-xs: 4px;
+  --lux-theme-spacing-1-5: 6px;
   --lux-theme-spacing-sm: 8px;
+  --lux-theme-spacing-3: 12px;
   --lux-theme-spacing-md: 16px;
   --lux-theme-spacing-lg: 24px;
   --lux-theme-spacing-xl: 32px;
@@ -1636,6 +1638,7 @@
   --lux-theme-font-size-md: 1rem;
   --lux-theme-font-size-lg: 1.125rem;
   --lux-theme-font-size-xl: 1.25rem;
+  --lux-theme-font-size-2xl: 1.5rem;
   --lux-theme-primary-color: #003366;
   --lux-theme-accent-color: #003911;
   --lux-theme-accent-secondary-color: #247929;
@@ -3585,14 +3588,6 @@ lux-card.lux-card-grow mat-card-content {
   opacity: 0.6;
 }
 
-.lux-overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.lux-overflow-y-auto {
-  overflow-y: auto;
-}
-
 .lux-overflow-wrap-break-word {
   overflow-wrap: break-word;
 }
@@ -3660,6 +3655,7 @@ lux-card.lux-card-grow mat-card-content {
 }
 
 /*
+  @deprecated Verwende stattdessen .lux-z-{n} aus _luxutilities.scss (z.B. .lux-z-100).
   Erstellt die Z-Indizes.
   Um weitere Z-Indizes anzulegen, die Variable zindexSteps um die entsprechenden Werte ergaenzen.
  */
@@ -36330,6 +36326,386 @@ lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-hig
     grid-auto-rows: minmax(0, 1fr);
   }
 }
+:root {
+  --lux-focus-state-layer-color: color-mix(in srgb, var(--lux-theme-primary-color) 12%, transparent);
+  --lux-z-action-bar: 8;
+  --lux-z-header: 100;
+  --lux-z-backdrop: 199;
+  --lux-z-drawer: 200;
+  --lux-z-skip-link: 10000;
+}
+
+.lux-static {
+  position: static;
+}
+
+.lux-relative {
+  position: relative;
+}
+
+.lux-absolute {
+  position: absolute;
+}
+
+.lux-fixed {
+  position: fixed;
+}
+
+.lux-sticky {
+  position: sticky;
+}
+
+.lux-inset-0 {
+  inset: 0;
+}
+
+.lux-top-0 {
+  top: 0;
+}
+
+.lux-right-0 {
+  right: 0;
+}
+
+.lux-bottom-0 {
+  bottom: 0;
+}
+
+.lux-left-0 {
+  left: 0;
+}
+
+.lux-inset-auto {
+  inset: auto;
+}
+
+.lux-top-auto {
+  top: auto;
+}
+
+.lux-right-auto {
+  right: auto;
+}
+
+.lux-bottom-auto {
+  bottom: auto;
+}
+
+.lux-left-auto {
+  left: auto;
+}
+
+.lux-z-auto {
+  z-index: auto;
+}
+
+.lux-z-0 {
+  z-index: 0;
+}
+
+.lux-z-1 {
+  z-index: 1;
+}
+
+.lux-z-5 {
+  z-index: 5;
+}
+
+.lux-z-8 {
+  z-index: 8;
+}
+
+.lux-z-9 {
+  z-index: 9;
+}
+
+.lux-z-10 {
+  z-index: 10;
+}
+
+.lux-z-100 {
+  z-index: 100;
+}
+
+.lux-z-199 {
+  z-index: 199;
+}
+
+.lux-z-200 {
+  z-index: 200;
+}
+
+.lux-z-500 {
+  z-index: 500;
+}
+
+.lux-z-1000 {
+  z-index: 1000;
+}
+
+.lux-z-10000 {
+  z-index: 10000;
+}
+
+.lux-overflow-auto {
+  overflow: auto;
+}
+
+.lux-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.lux-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.lux-overflow-hidden {
+  overflow: hidden;
+}
+
+.lux-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.lux-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.lux-overflow-visible {
+  overflow: visible;
+}
+
+.lux-overflow-x-visible {
+  overflow-x: visible;
+}
+
+.lux-overflow-y-visible {
+  overflow-y: visible;
+}
+
+.lux-overflow-scroll {
+  overflow: scroll;
+}
+
+.lux-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.lux-overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.lux-border-0 {
+  border: none;
+}
+
+.lux-rounded-none {
+  border-radius: 0;
+}
+
+.lux-rounded-xs {
+  border-radius: var(--lux-theme-radius-xs);
+}
+
+.lux-rounded-sm {
+  border-radius: var(--lux-theme-radius-sm);
+}
+
+.lux-rounded-md {
+  border-radius: var(--lux-theme-radius-md);
+}
+
+.lux-rounded-lg {
+  border-radius: var(--lux-theme-radius-lg);
+}
+
+.lux-rounded-xl {
+  border-radius: var(--lux-theme-radius-xl);
+}
+
+.lux-rounded-xxl {
+  border-radius: var(--lux-theme-radius-xxl);
+}
+
+.lux-rounded-full {
+  border-radius: 50%;
+}
+
+.lux-rounded-theme {
+  border-radius: var(--lux-theme-app-border-radius);
+}
+
+.lux-shadow-none {
+  box-shadow: none;
+}
+
+.lux-cursor-pointer {
+  cursor: pointer;
+}
+
+.lux-cursor-default {
+  cursor: default;
+}
+
+.lux-pointer-events-none {
+  pointer-events: none;
+}
+
+.lux-pointer-events-auto {
+  pointer-events: auto;
+}
+
+.lux-text-xs {
+  font-size: var(--lux-theme-font-size-xs);
+}
+
+.lux-text-sm {
+  font-size: var(--lux-theme-font-size-sm);
+}
+
+.lux-text-base {
+  font-size: var(--lux-theme-font-size-md);
+}
+
+.lux-text-lg {
+  font-size: var(--lux-theme-font-size-lg);
+}
+
+.lux-text-xl {
+  font-size: var(--lux-theme-font-size-xl);
+}
+
+.lux-text-2xl {
+  font-size: var(--lux-theme-font-size-2xl);
+}
+
+.lux-font-light {
+  font-weight: 300;
+}
+
+.lux-font-normal {
+  font-weight: 400;
+}
+
+.lux-font-medium {
+  font-weight: 500;
+}
+
+.lux-font-semibold {
+  font-weight: 600;
+}
+
+.lux-font-bold {
+  font-weight: 700;
+}
+
+.lux-font-headline {
+  font-family: var(--lux-theme-app-headline-font, inherit);
+}
+
+.lux-font-body {
+  font-family: var(--lux-theme-app-font-family, inherit);
+}
+
+.lux-leading-none {
+  line-height: 1;
+}
+
+.lux-leading-tight {
+  line-height: 1.2;
+}
+
+.lux-leading-normal {
+  line-height: 1.5;
+}
+
+.lux-leading-relaxed {
+  line-height: 1.75;
+}
+
+.lux-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.lux-whitespace-normal {
+  white-space: normal;
+}
+
+.lux-bg-transparent {
+  background: transparent;
+}
+
+.lux-bg-header {
+  background-color: var(--lux-theme-app-header-bg);
+}
+
+.lux-bg-content {
+  background-color: var(--lux-theme-app-content-bg);
+}
+
+.lux-bg-footer {
+  background-color: var(--lux-theme-app-footer-bg);
+}
+
+.lux-bg-primary {
+  background-color: var(--lux-theme-primary-color);
+}
+
+.lux-text-primary {
+  color: var(--lux-theme-primary-color);
+}
+
+.lux-text-dark {
+  color: var(--lux-theme-dark-primary-text);
+}
+
+.lux-text-light {
+  color: var(--lux-theme-light-primary-text);
+}
+
+.lux-text-secondary {
+  color: var(--lux-theme-dark-secondary-text);
+}
+
+.lux-text-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+}
+
+.lux-outline-none {
+  outline: none;
+}
+
+.lux-transition-none {
+  transition: none;
+}
+
+.lux-skip-link:focus-visible {
+  position: fixed;
+  top: var(--lux-theme-spacing-sm);
+  left: var(--lux-theme-spacing-sm);
+  width: auto;
+  height: auto;
+  padding: var(--lux-theme-spacing-sm) var(--lux-theme-spacing-md);
+  background-color: var(--lux-theme-primary-20);
+  color: var(--lux-theme-primary-100);
+  font-size: var(--lux-theme-font-size-sm);
+  font-weight: 600;
+  border-radius: var(--lux-theme-radius-sm);
+  z-index: var(--lux-z-skip-link);
+  outline: 3px solid var(--lux-theme-custom-lightblue);
+}
+
+.lux-interactive:hover:not(:focus-visible) {
+  background-color: var(--lux-theme-hover-color);
+}
+.lux-interactive:active {
+  background-color: var(--lux-theme-selected-bg-color);
+}
+.lux-interactive:focus-visible {
+  outline: calc(var(--lux-theme-outline-width) - 1px) var(--lux-theme-outline-style) var(--lux-theme-outline-color-dark) !important;
+  outline-offset: 1px;
+}
+
 lux-accordion {
   --mat-expansion-container-text-color: var(--lux-theme-dark-primary-text);
 }
@@ -37681,17 +38057,17 @@ lux-card .lux-card .lux-card-actions {
     width: 100%;
   }
 }
-lux-card .lux-card[class~=lux-cursor]:hover {
+lux-card .lux-card[class~=lux-cursor-pointer]:hover {
   background-image: var(--lux-theme-app-gradient-reverse);
   background-color: #ffffff;
   border-color: var(--lux-theme-dark-primary-text);
 }
-lux-card .lux-card[class~=lux-cursor]:hover .lux-card-content-expanded {
+lux-card .lux-card[class~=lux-cursor-pointer]:hover .lux-card-content-expanded {
   background-image: var(--lux-theme-app-gradient-reverse);
   background-color: #ffffff;
   border-color: var(--lux-theme-dark-primary-text);
 }
-lux-card .lux-card[class~=lux-cursor]:focus-visible {
+lux-card .lux-card[class~=lux-cursor-pointer]:focus-visible {
   outline: var(--lux-theme-outline-dark);
   outline-offset: calc(var(--lux-theme-outline-width) * -1);
 }
@@ -38531,6 +38907,7 @@ lux-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-co
 lux-select-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
 lux-lookup-combobox-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
 lux-datepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
+lux-timepicker lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
 lux-datetimepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
 lux-file-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
 lux-textarea-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic {
@@ -38543,6 +38920,7 @@ lux-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-co
 lux-select-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
 lux-lookup-combobox-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
 lux-datepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
+lux-timepicker lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
 lux-datetimepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
 lux-file-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
 lux-textarea-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow {
@@ -38998,12 +39376,12 @@ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-mdc-card.lux
   position: relative;
   border-radius: 4px;
 }
-lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor]:not([class*=mat-elevation-z]) {
+lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor-pointer]:not([class*=mat-elevation-z]) {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor]:not([class*=mat-elevation-z]):hover {
+lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor-pointer]:not([class*=mat-elevation-z]):hover {
   border: 1px solid var(--lux-theme-primary-color);
   background: var(--lux-theme-app-gradient-reverse);
   background-color: #fff !important;
@@ -40726,8 +41104,18 @@ lux-tabs .lux-counter-offset {
 lux-tabs .lux-label-lower {
   padding-top: 4px;
 }
+lux-tabs .lux-notification-color-primary {
+  background-color: var(--lux-theme-primary-color);
+}
+lux-tabs .lux-notification-color-accent,
 lux-tabs .lux-notification-new {
-  background-color: var(--lux-theme-custom-green);
+  background-color: var(--lux-theme-accent-70);
+}
+lux-tabs .lux-notification-color-warn {
+  background-color: var(--mat-sys-error);
+}
+lux-tabs .lux-notification-color-default {
+  background-color: #605e5e;
 }
 lux-tabs .lux-tabs-notification-icon {
   border: 2px solid var(--lux-theme-app-content-bg);
@@ -40988,18 +41376,18 @@ lux-tile {
 lux-tile .lux-notification-new {
   background-color: var(--lux-theme-accent-70);
 }
-lux-tile mat-card[class~=lux-cursor].mat-mdc-card {
+lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card {
   border-radius: var(--lux-theme-tile-border-radius);
   overflow: hidden !important;
   padding: 24px;
 }
-lux-tile mat-card[class~=lux-cursor] .mat-mdc-card-content {
+lux-tile mat-card[class~=lux-cursor-pointer] .mat-mdc-card-content {
   padding-top: 0px !important;
 }
-lux-tile mat-card[class~=lux-cursor].mat-mdc-card.lux-tile-mobile {
+lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card.lux-tile-mobile {
   padding: 14px;
 }
-lux-tile mat-card[class~=lux-cursor].mat-mdc-card::before {
+lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card::before {
   content: "";
   position: absolute;
   display: block;
@@ -41010,7 +41398,7 @@ lux-tile mat-card[class~=lux-cursor].mat-mdc-card::before {
   background-color: var(--lux-theme-tile-bottom-line-color);
   transition: 0.2s ease;
 }
-lux-tile mat-card[class~=lux-cursor].lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
+lux-tile mat-card[class~=lux-cursor-pointer].lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
   right: 2px;
   top: 5px;
   padding-top: 0px;
@@ -41115,18 +41503,18 @@ lux-tile .lux-tile-small-font ::ng-deep .mat-badge-content {
   top: -4px !important;
   right: -4px !important;
 }
-lux-tile mat-card[class~=lux-cursor].mat-mdc-card:focus-visible {
+lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card:focus-visible {
   box-shadow: 0 0 0 2px #2e8533, 0 0 8px 2px #2e8533 !important;
   outline: 0 !important;
 }
-lux-tile mat-card[class~=lux-cursor]:hover {
+lux-tile mat-card[class~=lux-cursor-pointer]:hover {
   background-image: none !important;
   background-color: white !important;
 }
-lux-tile mat-card[class~=lux-cursor]:hover h2 {
+lux-tile mat-card[class~=lux-cursor-pointer]:hover h2 {
   color: var(--lux-theme-tile-font-hover-color);
 }
-lux-tile mat-card[class~=lux-cursor].mat-mdc-card:hover::before {
+lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card:hover::before {
   height: 14px;
 }
 
@@ -41186,6 +41574,10 @@ lux-toggle-ac.lux-form-control-readonly .mdc-switch__handle {
   pointer-events: none;
 }
 
+lux-timepicker button:not(:disabled) .lux-timepicker-toggle-icon {
+  color: var(--lux-theme-datepicker-icon-color);
+}
+
 .lux-popup-panel {
   background-color: var(--lux-theme-popup-background-color);
   border: 1px solid var(--lux-theme-app-border-color);