@ihk-gfi/lux-components-theme 18.2.0 → 18.4.0

package/src/authentic/_custom.scss

@@ -102,6 +102,10 @@ lux-accordion {
       mask-position: center;
       mask-size: cover;
     }
+
+    &:hover::after {
+      background-color: map.get(luxpalette.$lux-palette-primary, 300);
+    }
   }
 
   mat-expansion-panel-header.mat-expansion-panel-header,
@@ -117,12 +121,72 @@ lux-accordion {
       font-weight: 500;
     }
 
-    &[aria-disabled="false"] {
-      background-color: map.get(luxpalette.$lux-palette-primary, 50);
+    &[aria-disabled="false"] .mat-expansion-panel-header-description {
       color: luxcommon.$dark-primary-text;
-      &:hover {
-        background-color: map.get(luxpalette.$lux-palette-primary, 50) !important;
-      }
+    }
+
+    &[aria-disabled="true"] {
+      background-color: white !important;
+    }
+  }
+
+  .mat-accordion.lux-primary {
+    mat-expansion-panel-header.mat-expansion-panel-header,
+    mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+      background-color: map.get(luxpalette.$lux-palette-primary, 100);
+      @include mat.expansion-overrides(
+        (
+          header-hover-state-layer-color: map.get(luxpalette.$lux-palette-primary, 100)
+        )
+      );
+    }
+  }
+
+  .mat-accordion.lux-accent {
+    mat-expansion-panel-header.mat-expansion-panel-header,
+    mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+      background-color: map.get(luxpalette.$lux-palette-accent, 100);
+      @include mat.expansion-overrides(
+        (
+          header-hover-state-layer-color: map.get(luxpalette.$lux-palette-accent, 100)
+        )
+      );
+    }
+  }
+
+  .mat-accordion.lux-warn {
+    mat-expansion-panel-header.mat-expansion-panel-header,
+    mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+      background-color: map.get(luxpalette.$lux-palette-warn, 50);
+      @include mat.expansion-overrides(
+        (
+          header-hover-state-layer-color: map.get(luxpalette.$lux-palette-warn, 50)
+        )
+      );
+    }
+  }
+
+  .mat-accordion.lux-neutral {
+    mat-expansion-panel-header.mat-expansion-panel-header,
+    mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+      background-color: white;
+      @include mat.expansion-overrides(
+        (
+          header-hover-state-layer-color: white
+        )
+      );
+    }
+  }
+
+  @include mat.expansion-overrides(
+    (
+      header-disabled-state-text-color: luxcommon.$dark-disabled-text
+    )
+  );
+  
+  lux-panel-content lux-card mat-card {
+    .lux-card-title {
+      line-height: normal;
     }
   }
 }

package/src/authentic/_luxcommon.scss

@@ -86,6 +86,10 @@ $lux-stepper-large-nav-item-completed-bg: #ffffff;
 // Overlay
 $lux-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
 
+// Options in Panels (z.B. Select, AutoComplete und Menu)
+$lux-panel-option-min-height: 24px;
+$lux-panel-option-padding: 12px 0;
+
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
   "red": luxpalette.$lux-warn-color,

package/src/authentic/luxtheme.scss

@@ -79,6 +79,10 @@
   // Overlay
   $lux-overlay-backdrop-color: themeCommon.$lux-overlay-backdrop-color,
 
+  // Options in Panels (z.B. Select, AutoComplete und Menu)
+  $lux-panel-option-min-height: themeCommon.$lux-panel-option-min-height,
+  $lux-panel-option-padding: themeCommon.$lux-panel-option-padding,
+
   // Hintergrundfarben (z.B. Badge oder Progress)
   $componentBgColors: themeCommon.$componentBgColors,
 

package/src/base/_luxSvgIcons.scss

@@ -3,3 +3,6 @@ $checkmark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width=
 
 //luxIconName = lux-interface-arrows-button-down
 $arrow-button-down: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,3.85 L6.65,10 C6.74073333,10.0966772 6.86741409,10.1515186 7,10.1515186 C7.13258591,10.1515186 7.25926667,10.0966772 7.35,10 L13.5,3.85'/%3E%3C/svg%3E";
+
+// luxIconName = lux-interface-alert-warning-triangle
+$warn-triangle: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' x2='7' y1='5' y2='8' stroke='currentColor'/%3E%3Ccircle cx='7' cy='11' r='1' stroke='currentColor'/%3E%3Cpath stroke='currentColor' d='M7.89,1.05 C7.71890403,0.716033783 7.37524294,0.505960525 7,0.505960525 C6.62475706,0.505960525 6.28109597,0.716033783 6.11,1.05 L0.61,12.05 C0.454030755,12.3595182 0.46945474,12.7277279 0.650763073,13.0231178 C0.832071406,13.3185078 1.15340679,13.4989511 1.5,13.5 L12.5,13.5 C12.8465932,13.4989511 13.1679286,13.3185078 13.3492369,13.0231178 C13.5305453,12.7277279 13.5459692,12.3595182 13.39,12.05 L7.89,1.05 Z'/%3E%3C/g%3E%3C/svg%3E";

package/src/base/_luxcommon.scss

@@ -61,6 +61,10 @@ $lux-stepper-large-nav-item-completed-bg: mustOverriden !default;
 // Overlay
 $lux-overlay-backdrop-color: mustOverriden !default;
 
+// Options in Panels (z.B. Select, AutoComplete und Menu)
+$lux-panel-option-min-height: mustOverriden !default;
+$lux-panel-option-padding: mustOverriden !default;
+
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
   "red": mustOverriden,

package/src/base/_luxcomponents.scss

@@ -563,6 +563,24 @@ lux-stepper-large {
         color: luxcommon.$lux-stepper-large-nav-item-completed-fg;
         background-color: luxcommon.$lux-stepper-large-nav-item-completed-bg;
       }
+
+      a::after {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin: 3px 10px 0px;
+        background-color: luxcommon.$lux-stepper-large-nav-item-active-bg;
+        -webkit-mask: url(luxicons.$warn-triangle);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$warn-triangle);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
     }
   }
 

package/src/base/_luxfocus.scss

@@ -326,11 +326,6 @@ lux-panel {
       //background-color: white !important;
       @include focus-dark-mixin-inline;
     }
-
-    &:hover {
-      color: luxcommon.$lux-hover-color !important;
-      background-color: #fff !important;
-    }
   }
 }
 

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -18,6 +18,13 @@ div.mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac {
       display: none;
     }
   }
+
+  .mat-mdc-option {
+    .mdc-list-item__primary-text {
+      min-height: #{luxcommon.$lux-panel-option-min-height};
+      padding: #{luxcommon.$lux-panel-option-padding};
+    }
+  }
 }
 
 /*
@@ -27,15 +34,31 @@ div.mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac {
   --mat-full-pseudo-checkbox-selected-checkmark-color: #ffffff;
 }
 
-div.mat-mdc-select-panel.lux-select-panel-ac {
-  padding-top: 0;
-  padding-bottom: 0;
+div.mat-mdc-select-panel {
+  &.lux-select-panel-ac {
+    padding-top: 0;
+    padding-bottom: 0;
 
-  .mat-mdc-option {
-    --mat-option-selected-state-label-text-color: #ffffff;
-    --mat-option-selected-state-layer-color: #{luxcommon.$lux-hover-color};
-    --mat-option-focus-state-layer-color: #{luxcommon.$lux-hover-color};
-    --mat-option-hover-state-layer-color: #{luxcommon.$lux-hover-color};
+    .mat-mdc-option {
+      --mat-option-selected-state-label-text-color: #ffffff;
+      --mat-option-selected-state-layer-color: #{luxcommon.$lux-hover-color};
+      --mat-option-focus-state-layer-color: #{luxcommon.$lux-hover-color};
+      --mat-option-hover-state-layer-color: #{luxcommon.$lux-hover-color};
+
+      .mdc-list-item__primary-text {
+        min-height: #{luxcommon.$lux-panel-option-min-height};
+        padding: #{luxcommon.$lux-panel-option-padding};
+      }
+    }
+  }
+
+  &.lux-select-panel-ac-multiple {
+    .mat-mdc-option {
+      .mdc-list-item__primary-text {
+        min-height: #{luxcommon.$lux-panel-option-min-height};
+        padding: #{luxcommon.$lux-panel-option-padding};
+      }
+    }
   }
 }
 

package/src/base/components/_luxMenu.scss

@@ -5,6 +5,11 @@
 
 .mat-mdc-menu-panel {
   --mat-menu-container-shape: #{luxcommon.$app-border-radius};
+
+  .mat-mdc-menu-item-text {
+    min-height: #{luxcommon.$lux-panel-option-min-height};
+    padding: #{luxcommon.$lux-panel-option-padding};
+  }
 }
 
 lux-menu {

package/src/base/components/_luxMessagebox.scss

@@ -31,13 +31,14 @@ lux-message-box {
         // da im Theme authentic der Schatten entfernt wurde, muss eine Weiße Messagebox eine Border erhalten.
         border: 1px solid luxpalette.$lux-primary-color;
         box-sizing: border-box;
-        & button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
+
+        & lux-button button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
           color: luxpalette.$lux-primary-color;
         }
       }
 
       & lux-button {
-        button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
+        button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
           color: #fff;
           background-color: transparent;
           @include luxelevations.lux-elevation-z0();

package/src/green/_custom.scss

@@ -450,17 +450,19 @@ mat-card lux-tabs {
   justify-content: space-between;
   padding: 10px 10px 18px 10px;
 
-  button,
-  .mat-icon-button {
-    font-size: 1.125rem;
-    color: map.get(luxpalette.$lux-palette_primary, 500);
+  lux-button {
+    &.lux-datepicker-prev-month button.lux-button.mat-mdc-button {
+      padding: 0;
+      min-width: 24px;
+    }
 
-    &:focus {
-      @include luxfocus.focus-dark-mixin;
+    &.lux-datepicker-year button.lux-button.mat-mdc-button {
+      font-size: 1.125rem;
     }
 
-    &:hover {
-      @include luxfocus.lux-hovered-mixin;
+    &.lux-datepicker-next-month button.lux-button.mat-mdc-button {
+      padding: 0;
+      min-width: 24px;
     }
   }
 }

package/src/green/_luxcommon.scss

@@ -62,6 +62,10 @@ $lux-stepper-large-nav-item-completed-bg: #2e8533;
 // Overlay
 $lux-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
 
+// Options in Panels (z.B. Select, AutoComplete und Menu)
+$lux-panel-option-min-height: 24px;
+$lux-panel-option-padding: 12px 0;
+
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
   "red": #db272e,

package/src/green/luxtheme.scss

@@ -85,6 +85,10 @@
   // Overlay
   $lux-overlay-backdrop-color: themeCommon.$lux-overlay-backdrop-color,
 
+  // Options in Panels (z.B. Select, AutoComplete und Menu)
+  $lux-panel-option-min-height: themeCommon.$lux-panel-option-min-height,
+  $lux-panel-option-padding: themeCommon.$lux-panel-option-padding,
+
   // Hintergrundfarben (z.B. Badge oder Progress)
   $componentBgColors: themeCommon.$componentBgColors,