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

package/prebuilt-themes/luxtheme-authentic.css

@@ -1799,6 +1799,36 @@
   --lux-theme-badge-on-pink: var(--lux-theme-custom-on-pink);
   --lux-theme-badge-lightblue: var(--lux-theme-custom-lightblue);
   --lux-theme-badge-on-lightblue: var(--lux-theme-custom-on-lightblue);
+  --lux-theme-badge-muted-red: #ffedea;
+  --lux-theme-badge-muted-on-red: #93000c;
+  --lux-theme-badge-muted-stroke-red: #ffb4ab;
+  --lux-theme-badge-muted-green: #ebffe6;
+  --lux-theme-badge-muted-on-green: #00531d;
+  --lux-theme-badge-muted-stroke-green: #75dc81;
+  --lux-theme-badge-muted-purple: #f4eeff;
+  --lux-theme-badge-muted-on-purple: #4a3597;
+  --lux-theme-badge-muted-stroke-purple: #d2bbff;
+  --lux-theme-badge-muted-blue: #ffffff;
+  --lux-theme-badge-muted-on-blue: #003366;
+  --lux-theme-badge-muted-stroke-blue: #003366;
+  --lux-theme-badge-muted-gray: #f4f0ef;
+  --lux-theme-badge-muted-on-gray: #484646;
+  --lux-theme-badge-muted-stroke-gray: #c9c6c5;
+  --lux-theme-badge-muted-orange: #ffede4;
+  --lux-theme-badge-muted-on-orange: #793100;
+  --lux-theme-badge-muted-stroke-orange: #793100;
+  --lux-theme-badge-muted-black: #ffffff;
+  --lux-theme-badge-muted-on-black: #1c1b1b;
+  --lux-theme-badge-muted-stroke-black: #605e5e;
+  --lux-theme-badge-muted-yellow: #ffefd3;
+  --lux-theme-badge-muted-on-yellow: #5a4400;
+  --lux-theme-badge-muted-stroke-yellow: #f5bf00;
+  --lux-theme-badge-muted-pink: #ffecf2;
+  --lux-theme-badge-muted-on-pink: #8e0051;
+  --lux-theme-badge-muted-stroke-pink: #ffb0ce;
+  --lux-theme-badge-muted-lightblue: #e6f2ff;
+  --lux-theme-badge-muted-on-lightblue: #003366;
+  --lux-theme-badge-muted-stroke-lightblue: #91cdff;
   --lux-theme-breadcrumb-hover-color: var(--lux-theme-link-plain-hover-color);
   --lux-theme-button-text-default-text-color: var(--lux-theme-dark-primary-text);
   --lux-theme-button-text-primary-text-color: var(--lux-theme-primary-color);
@@ -37463,6 +37493,85 @@ lux-autocomplete-ac .lux-input-suffix-container {
 .lux-badge.lux-badge-on-black {
   color: var(--lux-theme-badge-on-black);
 }
+.lux-badge.lux-badge-muted.lux-badge-red {
+  background-color: var(--lux-theme-badge-muted-red);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-red);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-red {
+  color: var(--lux-theme-badge-muted-on-red);
+}
+.lux-badge.lux-badge-muted.lux-badge-green {
+  background-color: var(--lux-theme-badge-muted-green);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-green);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-green {
+  color: var(--lux-theme-badge-muted-on-green);
+}
+.lux-badge.lux-badge-muted.lux-badge-purple {
+  background-color: var(--lux-theme-badge-muted-purple);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-purple);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-purple {
+  color: var(--lux-theme-badge-muted-on-purple);
+}
+.lux-badge.lux-badge-muted.lux-badge-blue {
+  background-color: var(--lux-theme-badge-muted-blue);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-blue);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-blue {
+  color: var(--lux-theme-badge-muted-on-blue);
+}
+.lux-badge.lux-badge-muted.lux-badge-gray {
+  background-color: var(--lux-theme-badge-muted-gray);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-gray);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-gray {
+  color: var(--lux-theme-badge-muted-on-gray);
+}
+.lux-badge.lux-badge-muted.lux-badge-orange {
+  background-color: var(--lux-theme-badge-muted-orange);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-orange);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-orange {
+  color: var(--lux-theme-badge-muted-on-orange);
+}
+.lux-badge.lux-badge-muted.lux-badge-yellow {
+  background-color: var(--lux-theme-badge-muted-yellow);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-yellow);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-yellow {
+  color: var(--lux-theme-badge-muted-on-yellow);
+}
+.lux-badge.lux-badge-muted.lux-badge-pink {
+  background-color: var(--lux-theme-badge-muted-pink);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-pink);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-pink {
+  color: var(--lux-theme-badge-muted-on-pink);
+}
+.lux-badge.lux-badge-muted.lux-badge-lightblue {
+  background-color: var(--lux-theme-badge-muted-lightblue);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-lightblue);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-lightblue {
+  color: var(--lux-theme-badge-muted-on-lightblue);
+}
+.lux-badge.lux-badge-muted.lux-badge-black {
+  background-color: var(--lux-theme-badge-muted-black);
+  box-shadow: inset 0 0 0 1px var(--lux-theme-badge-muted-stroke-black);
+}
+.lux-badge.lux-badge-muted.lux-badge-on-black {
+  color: var(--lux-theme-badge-muted-on-black);
+}
+.lux-badge.lux-badge-size-small {
+  font-size: 0.75rem;
+}
+.lux-badge.lux-badge-size-medium {
+  font-size: 1rem;
+}
+.lux-badge.lux-badge-size-large {
+  font-size: 1.25rem;
+}
 
 .lux-badge.lux-badge-uppercase * {
   text-transform: uppercase;
@@ -37481,6 +37590,9 @@ lux-autocomplete-ac .lux-input-suffix-container {
     font-weight: 600;
     line-height: normal;
   }
+  .lux-badge.lux-badge-size-small {
+    font-size: 1rem;
+  }
 }
 .lux-badge-notification {
   --mat-badge-background-color: #605e5e;
@@ -38942,7 +39054,7 @@ lux-filter-load-dialog lux-dialog-actions.lux-filter-dialog-action {
   max-width: 100%;
   box-sizing: border-box;
   gap: 12px;
-  place-content: center end;
+  place-content: center center;
   align-items: center;
 }
 
@@ -39327,6 +39439,44 @@ lux-input-ac lux-input-ac-suffix {
   white-space: nowrap;
 }
 
+lux-button.lux-icon-button.lux-input-clear-btn {
+  display: flex;
+  --mat-icon-button-container-shape: var(--lux-theme-button-icon-container-shape);
+  --mat-icon-button-icon-color: var(--lux-theme-primary-color);
+  --mat-icon-button-icon-size: var(--mat-icon-button-icon-size);
+  --mat-icon-button-state-layer-size: 40px;
+  --mat-icon-button-state-layer-color: var(--mat-sys-on-surface-variant);
+  --mat-icon-button-touch-target-size: calc(var(--lux-theme-form-min-height) - 2 * var(--lux-theme-form-border-width));
+}
+lux-button.lux-icon-button.lux-input-clear-btn lux-icon,
+lux-button.lux-icon-button.lux-input-clear-btn .lux-icon {
+  width: var(--mat-icon-button-icon-size);
+  height: var(--mat-icon-button-icon-size);
+}
+lux-button.lux-icon-button.lux-input-clear-btn button:not([disabled]):focus,
+lux-button.lux-icon-button.lux-input-clear-btn button:not([disabled]):focus-visible {
+  outline-color: transparent !important;
+}
+
+.lux-dense-authentic lux-button.lux-icon-button.lux-input-clear-btn {
+  display: flex;
+  --mat-icon-button-container-shape: var(--lux-theme-button-icon-container-shape);
+  --mat-icon-button-icon-color: var(--lux-theme-primary-color);
+  --mat-icon-button-icon-size: var(--mat-icon-button-icon-size);
+  --mat-icon-button-state-layer-size: 36px;
+  --mat-icon-button-state-layer-color: var(--mat-sys-on-surface-variant);
+  --mat-icon-button-touch-target-size: calc(var(--lux-theme-form-dense-min-height) - 2 * var(--lux-theme-form-border-width));
+}
+.lux-dense-authentic lux-button.lux-icon-button.lux-input-clear-btn lux-icon,
+.lux-dense-authentic lux-button.lux-icon-button.lux-input-clear-btn .lux-icon {
+  width: var(--mat-icon-button-icon-size);
+  height: var(--mat-icon-button-icon-size);
+}
+.lux-dense-authentic lux-button.lux-icon-button.lux-input-clear-btn button:not([disabled]):focus,
+.lux-dense-authentic lux-button.lux-icon-button.lux-input-clear-btn button:not([disabled]):focus-visible {
+  outline-color: transparent !important;
+}
+
 lux-link-plain {
   display: inline-flex;
   align-items: baseline;
@@ -39743,6 +39893,15 @@ lux-menu .lux-menu-trigger > lux-button button {
 }
 
 /* Menu-Overlay-Panel anpassen */
+.lux-menu-panel:not(.lux-menu-section-panel) .lux-menu-item-color-warn:not([disabled]) {
+  --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
+  --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
+}
+.lux-menu-panel:not(.lux-menu-section-panel) .lux-menu-item-color-accent:not([disabled]) {
+  --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
+  --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
+}
+
 .lux-menu-panel {
   --mat-menu-container-shape: var(--lux-theme-app-border-radius);
   --mat-menu-container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
@@ -39804,7 +39963,9 @@ lux-menu .lux-menu-trigger > lux-button button {
   letter-spacing: 1.25px;
 }
 .lux-menu-panel .lux-menu-item-icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   align-self: center;
   vertical-align: middle;
   width: var(--lux-theme-menu-item-icon-size);
@@ -39812,13 +39973,24 @@ lux-menu .lux-menu-trigger > lux-button button {
 }
 .lux-menu-panel .lux-menu-item-icon .lux-icon,
 .lux-menu-panel .lux-menu-item-icon mat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  max-width: var(--lux-theme-menu-item-icon-size);
+  max-height: var(--lux-theme-menu-item-icon-size);
   font-size: var(--lux-theme-menu-item-icon-size);
 }
 .lux-menu-panel .lux-menu-item-icon mat-icon {
   margin: 0;
 }
+.lux-menu-panel .lux-menu-item-icon mat-icon svg {
+  width: 100%;
+  height: 100%;
+  max-width: var(--lux-theme-menu-item-icon-size);
+  max-height: var(--lux-theme-menu-item-icon-size);
+}
 
 .lux-menu-section-panel,
 .lux-menu-section-panel:not(.lux-menu-panel-large) {
@@ -39900,6 +40072,22 @@ lux-menu .lux-menu-trigger > lux-button button {
 .lux-menu-section-panel .lux-menu-item-divider {
   padding: 4px;
 }
+.lux-menu-section-panel .lux-menu-item-color-warn:not([disabled]) {
+  --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
+  --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
+}
+.lux-menu-section-panel .lux-menu-item-color-warn:not([disabled]) .lux-button-label,
+.lux-menu-section-panel .lux-menu-item-color-warn:not([disabled]) .lux-button-label-subtitle {
+  color: var(--lux-theme-button-text-warn-text-color);
+}
+.lux-menu-section-panel .lux-menu-item-color-accent:not([disabled]) {
+  --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
+  --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
+}
+.lux-menu-section-panel .lux-menu-item-color-accent:not([disabled]) .lux-button-label,
+.lux-menu-section-panel .lux-menu-item-color-accent:not([disabled]) .lux-button-label-subtitle {
+  color: var(--lux-theme-button-text-accent-text-color);
+}
 .lux-menu-section-panel .lux-menu-item-selected {
   background-color: var(--lux-theme-primary-90) !important;
   text-decoration-line: underline;
@@ -39935,8 +40123,14 @@ lux-menu .lux-menu-trigger > lux-button button {
 }
 .lux-menu-section-panel.lux-menu-panel-large .lux-menu-item-icon .lux-icon,
 .lux-menu-section-panel.lux-menu-panel-large .lux-menu-item-icon mat-icon {
+  max-width: var(--lux-theme-menu-item-icon-size-large);
+  max-height: var(--lux-theme-menu-item-icon-size-large);
   font-size: var(--lux-theme-menu-item-icon-size-large);
 }
+.lux-menu-section-panel.lux-menu-panel-large .lux-menu-item-icon mat-icon svg {
+  max-width: var(--lux-theme-menu-item-icon-size-large);
+  max-height: var(--lux-theme-menu-item-icon-size-large);
+}
 
 lux-message-box {
   display: block;
@@ -40080,8 +40274,22 @@ lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-mess
     line-height: normal;
   }
 }
-:root {
+lux-paginator {
   --mat-paginator-container-background-color: transparent;
+  --mat-form-field-filled-container-color: transparent;
+}
+lux-paginator mat-paginator.lux-no-wrap .mat-mdc-paginator-container {
+  flex-wrap: nowrap;
+}
+lux-paginator mat-paginator .mat-mdc-paginator-range-label {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+lux-paginator mat-paginator.lux-dense {
+  --mat-form-field-container-vertical-padding: 4px;
+}
+lux-paginator mat-paginator.lux-dense .mat-mdc-form-field-infix {
+  min-height: 0;
 }
 
 lux-progress {