@ihk-gfi/lux-components-theme 14.0.0 → 14.1.0

package/src/base/_luxcomponents.scss

@@ -9,6 +9,7 @@
 @use "luxpalette";
 @use "../public/global";
 @use "luxelevations";
+@use "../base/luxSvgIcons" as luxicons;
 
 
 /*
@@ -733,7 +734,7 @@ lux-file-progress {
     }
   }
 
-  .lux-form-control-misc {
+  .lux-form-control-misc div {
     > * {
       color: luxpalette.$lux-warn-color !important;
     }
@@ -750,6 +751,26 @@ lux-file-progress {
   }
 }
 
+lux-icon.lux-error-icon {
+  font-size: 12px;
+  max-height: 12px;
+  max-width: 12px;
+  padding: 0 4px 0 4px;
+
+  mat-icon {
+    padding: 0 !important;
+    min-width: 12px;
+    max-width: 12px;
+    min-height: 12px;
+    max-height: 12px;
+    color: luxpalette.$lux-warn-color;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
 /*
  * Theming for LUX-Layout-Card-Row
  */
@@ -1149,7 +1170,7 @@ lux-filter-form {
       background-color: transparent;
       color: map.get(luxpalette.$lux-palette_primary, 500);
       padding: 0px !important;
-      //margin: 0px !important;
+      margin: 0px 4px !important;
 
       @include luxelevations.lux-elevation-z0;
     }
@@ -1431,7 +1452,7 @@ lux-stepper-large {
   flex-direction: column;
   flex: 0 1 30%;
   gap: 12px;
-  padding: 12px;
+  padding: 12px 33px 12px 12px;
 
   overflow-y: auto;
   min-width: 400px;
@@ -1470,6 +1491,25 @@ lux-stepper-large {
 
       a {
         color: #2E8533;
+        position: relative;
+      }
+
+      a::after {
+        content: '';
+        position: absolute;
+        display: inline-block;
+        width: 23px;
+        height: 23px;
+        margin: 5px 10px 0px;
+        background-color: #2E8533;
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
       }
     }
 
@@ -1708,4 +1748,10 @@ lux-stepper-large {
       font-size: 18px;
     }
   }
+
+  &.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after{
+    width: 18px;
+    height: 18px;
+    margin-top: 4px;
+  }
 }

package/src/base/_luxfocus.scss

@@ -3,6 +3,7 @@
 @use "luxcommon";
 @use "luxpalette";
 @use "../public/global";
+@use "../base/luxSvgIcons" as luxicons;
 
 /*
   Dieses Partial-SCSS dient der Verwaltung der Styles für Fokus, Hover und Selected für die LUX-Components und
@@ -55,7 +56,7 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   background: luxcommon.$app-gradient;
   background-color: #fff;
   border: 1px solid map.get(luxpalette.$lux-palette-primary, 500);
-  box-shadow: 0 0 0 2px var(--lux-theme-primary-500) inset;
+  box-shadow: 0 0 0 1px var(--lux-theme-primary-500) inset;
   position: relative;
   border-radius: 4px;
   &:after {
@@ -175,7 +176,7 @@ lux-side-nav {
 /** ########## Card ########## **/
 lux-card mat-card {
   &[class~=lux-cursor]:focus-visible {
-    @include focus-dark-mixin;
+    @include focus-dark-mixin-inline;
   }
 
   &[class~=lux-cursor]:hover {
@@ -196,10 +197,6 @@ lux-list {
   lux-list-item {
     &:focus-visible {
       outline: none;
-
-      mat-card {
-        @include focus-dark-mixin-inline;
-      }
     }
 
     lux-card {
@@ -287,11 +284,15 @@ lux-form-control {
       position: relative;
       @include focus-dark-mixin;
     }
-    
    }
 }
+
+lux-icon.lux-error-icon:focus-visible {
+  @include focus-dark-mixin;
+}
+
 /** ########## Datepicker ########## **/
-lux-datepicker, lux-datepicker-ac {
+lux-datepicker {
   mat-datepicker-toggle {
     button:focus-visible {
       @include focus-dark-mixin;
@@ -307,6 +308,25 @@ lux-datepicker, lux-datepicker-ac {
     }
   }
 }
+lux-datepicker-ac, lux-datetimepicker-ac {
+  mat-datepicker-toggle {
+    button:focus-visible {
+      @include focus-dark-mixin;
+      border-radius: 4px;
+    }
+
+    button:hover {
+      background-color: #fff;
+      border-radius: 4px;
+      lux-icon.lux-datepicker-toggle-icon.lux-color-blue {
+        color: luxcommon.$lux-hover-color;
+      }
+    }
+    .mat-button-focus-overlay {
+      display: none;
+    }
+  }
+}
 
 // Class, welche das aufgeklappte Panel referenziert
 .lux-datepicker-panel {
@@ -342,7 +362,7 @@ lux-datepicker, lux-datepicker-ac {
 }
 
 /** ########## Datetimepicker ########## **/
-lux-datetimepicker, lux-datetimepicker-ac {
+lux-datetimepicker {
   mat-datepicker-toggle {
     button:focus-visible {
       @include focus-dark-mixin;
@@ -458,21 +478,73 @@ lux-table {
   }
 }
 
+/** ########## Select-AC ########## **/
+@mixin lux-option-highlight-mixin {
+  background-color: map-get(luxpalette.$lux-palette_primary, 300);
+  color: #ffffff;
+  .mat-pseudo-checkbox {
+    color: #ffffff;
+  }
+  .mat-pseudo-checkbox-checked {
+    background-color: #ffffff;
+  } 
+  .mat-pseudo-checkbox-checked::after {
+    border-color: map.get(luxpalette.$lux-palette_primary, 500) !important;
+  } 
+}
+
 .lux-select-panel-ac {
   mat-option {
-    &.mat-selected.mat-option:not(.mat-option-disabled) {
-      @include lux-selected-mixin-ac;
-    }
-
-    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert 
-    // bisher noch keine Lösung um den mouse-focus auszuschalten
-    &.mat-active:not(.cdk-mouse-focused) {
+    &.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        top: 14px;
+        margin: 0 6px;
+        background-color: luxpalette.$lux-primary-color;
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+  }
+}
+
+.lux-select-panel-ac, .lux-select-panel-ac-multiple, .lux-autocomplete-panel-ac, .lux-chips-ac-autocomplete-panel {
+  &.mat-select-panel mat-option,
+  &.mat-autocomplete-panel mat-option {
+    &.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active) {
+      color: map-get(luxpalette.$lux-palette_primary, 500);
+      background-color: #ffffff;
+      font-weight: 600;
+    }
+
+    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert
+    &.mat-option.mat-active:not(.cdk-mouse-focused) {
       @include focus-dark-mixin-inline;
-      border-radius: 4px;
+      @include lux-option-highlight-mixin;
+      & .mat-option-text::after {
+        background-color: #fff;
+      }
     }
 
     &:hover:not(.invalid, .mat-option-disabled) {
-      @include lux-hovered-mixin;
+      @include lux-option-highlight-mixin;
+      border-radius: 0px !important;
+      .mat-pseudo-checkbox {
+        color: #ffffff;
+      }
+      & .mat-option-text::after {
+        background-color: #fff;
+      }
     }
   }
 }
@@ -589,7 +661,8 @@ lux-tabs {
     
   
     &:hover:not(.mat-tab-disabled) {
-      @include lux-hovered-mixin;
+      background-color: luxcommon.$lux-hover-color;
+      border-radius: 4px;
     } 
   }
 
@@ -611,7 +684,8 @@ mat-card lux-tabs {
     }
 
     &:hover:not(.mat-tab-disabled) {
-      @include lux-hovered-mixin;
+      background-color: luxcommon.$lux-hover-color;
+      border-radius: 4px;
     }
   }
 
@@ -673,7 +747,6 @@ lux-panel {
       @include focus-dark-mixin-inline;
     }
     
-
     &:hover {
       @include lux-hovered-mixin;
     }

package/src/base/_luxstyles.scss

@@ -257,13 +257,6 @@ h6 {
   flex: 1 1 100%;
 }
 
-.lux-tile-ac-wrapper-demo {
-  .lux-tile-ac {
-    width: 260px;
-    min-height: 120px;
-  }
-}
-
 body {
   -webkit-overflow-scrolling: touch;
 }

package/src/base/components/_luxAppHeaderAc.scss

@@ -5,7 +5,7 @@
 @use "../luxpalette";
 @use "../../public/global";
 @use "../luxelevations";
-
+@use "../luxSvgIcons" as luxicons;
 
 lux-app-header-ac {
   display: block;
@@ -17,9 +17,6 @@ lux-app-header-ac {
       @include luxfocus.focus-dark-mixin;
       border-radius: 4px;
     }
-    &:hover {
-      @include luxfocus.lux-hovered-mixin;
-    }
   }
 
   lux-button {
@@ -36,8 +33,9 @@ lux-app-header-ac {
       }
 
       &:hover:not([disabled]).mat-fab:hover.mat-primary {
-        lux-icon { color: #ffffff !important; }
-        
+        lux-icon { 
+          color: #ffffff !important; 
+        }
       }
       &:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
         background-color: transparent !important;
@@ -45,10 +43,7 @@ lux-app-header-ac {
           color: map.get(luxpalette.$lux-palette_primary, 700) !important;
         }
         @include luxfocus.focus-dark-mixin;
-
-      }
-      
-  
+      }  
     }
 
     &.menu-opened {
@@ -138,3 +133,55 @@ lux-app-header-ac {
     }
   }
 }
+.cdk-overlay-pane {
+  button.lux-menu-item {
+    margin: 0px;
+
+    &.lux-selected-item-ac {
+      font-weight: 600;
+      & .lux-button-label::after {
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        right: 0;
+        top: 14px;
+        margin: 0 10px 0 4px;
+        background-color: luxpalette.$lux-primary-color;
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+
+    &:not([disabled=true]):hover {
+      background-color: map-get(luxpalette.$lux-palette_primary, 300) !important;
+      color: #ffffff;
+      .mat-icon-no-color {
+        color: #ffffff;
+      }
+      &::after {
+        background-color: #ffffff;
+      }
+    }
+    
+    &:not([disabled=true]):focus-visible {
+      background-color: map-get(luxpalette.$lux-palette_primary, 300);
+      color: #ffffff;
+      .mat-icon-no-color {
+        color: #ffffff;
+      }
+      @include luxfocus.focus-dark-mixin-inline;
+      &::after {
+        width: 16px;
+        background-color: #ffffff;
+      }
+    }
+  }
+  
+}

package/src/base/components/_luxFormControlWrapper.scss

@@ -55,6 +55,7 @@ lux-form-control-wrapper {
       &.lux-no-input-row {
         // lux-toggel-ac, lux-checkbox-ac, lux-slider-ac, lux-radio-ac werden auf der Baseline ausgerichtet
         // haben aber nicht den Rahmen, den die Input-Elemente haben
+        background-color: transparent;
         border: none;
         padding: 0.75em 0em;
       }

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -4,11 +4,22 @@
 @use "../../public/global";
 @use "../luxelevations";
 @use "../luxfocus";
+@use "../../base/luxSvgIcons" as luxicons;
 
 /*
  * Theming for LUX-Select
  */
- lux-select-ac {
+ lux-select-ac, lux-lookup-combobox-ac {
+  
+  & .lux-panel-opened {
+    //duch das Verschieben des Panels, verdeckt ein Teil der Overlay-Pane das Selectfeld 
+    // dieses ist damit als Trigger zum Schließen des Panels nicht mehr erreichbar
+    // daher wird temporär der z-index erhöht
+    .lux-form-control-container-authentic {
+      z-index: 10000;
+    }
+  }
+  
   mat-select {
     font-family: luxcommon.$app-font-family;
     height: calc( 1.5em - 1px) !important;
@@ -17,25 +28,71 @@
 
     .mat-select-arrow-wrapper{
       margin-left: 2px;
+      height: 24px;
+      width: 24px;
+      
+      .mat-select-arrow {
+        border: none;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background-color: luxpalette.$lux-primary-color;
+        -webkit-mask: url(luxicons.$arrow-button-down);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$arrow-button-down);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
     }
+    
     &[aria-disabled="true"] .mat-select-arrow {
-      border-width: 10px;
-      margin: 0 2px 0 0;
-      color: luxcommon.$dark-disabled-text;
+      background-color: luxcommon.$dark-disabled-text;
     }
 
     &[aria-disabled="false"] .mat-select-arrow {
-      border-width: 10px;
-      margin: 0 2px 0 0;
-      color: map.get(luxpalette.$lux-palette_primary, 500);
+      background-color: luxpalette.$lux-primary-color;
     }
   }
-  
 }
 
 // Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
-.lux-select-panel-ac .mat-pseudo-checkbox-checked {
-  background-color: map.get(luxpalette.$lux-palette_primary, 500);
+.lux-select-panel-ac .mat-pseudo-checkbox-checked,
+.lux-select-panel-ac-multiple .mat-pseudo-checkbox-checked {
+  background-color: luxpalette.$lux-primary-color;
+}
+.cdk-overlay-pane {
+  .mat-option {
+    font-family: luxcommon.$app-font-family;
+  }
+  .mat-autocomplete-panel.lux-autocomplete-panel-ac,
+  .mat-select-panel.lux-select-panel-ac,
+  .mat-select-panel.lux-select-panel-ac-multiple {
+    min-width: calc(100% + 14px) !important;
+    max-width: calc(100% + 14px) !important;
+    margin: 34px 7px;
+    border: 2px solid luxpalette.$lux-primary-color;
+    border-radius: 4px;
+    box-shadow: none !important;
+    
+    .mat-pseudo-checkbox {
+      color: luxpalette.$lux-primary-color;
+    }
+  }
+  .mat-select-panel.lux-select-panel-ac-multiple {
+    margin: 34px 31px;
+  }
+
+  .mat-autocomplete-panel.lux-autocomplete-panel-ac {
+    min-width: calc(100% + 14px) !important;
+    max-width: calc(100% + 14px) !important;
+    margin: 13px -9px;
+    border: 2px solid luxpalette.$lux-primary-color;
+    border-radius: 4px;
+    box-shadow: none !important;
+  }
 }
 
 /*
@@ -54,10 +111,7 @@ lux-checkbox-ac {
       white-space: normal;
     }
   }
-  .mat-checkbox-disabled label {
-    color: luxcommon.$dark-disabled-text;
-  }
-  
+
   .mat-checkbox-ripple {
     display: none;
   }
@@ -69,8 +123,19 @@ lux-checkbox-ac {
     //bei mehrzeiligen Labels wird die Checkbox oben und nicht zentriert angezeigt 
     //dieses wird von material über das Margin gelöst und nicht über align-items o.ä.
     //da wir die Größe der Box geändert haben mussten wir das Margin ebenfalls anpassen
+    .mat-checkbox-frame {
+      border-color: luxpalette.$lux-primary-color;
+    }
   }
 
+  & .mat-checkbox-disabled {
+    label {
+      color: luxcommon.$dark-disabled-text;
+    }
+    .mat-checkbox-inner-container .mat-checkbox-frame {
+      border-color: luxcommon.$dark-disabled-text;
+    }
+  }
 }
 
 lux-datepicker-ac, lux-datetimepicker-ac {
@@ -98,7 +163,17 @@ lux-datepicker-ac, lux-datetimepicker-ac {
     }
   }
 }
-
+.cdk-overlay-pane .mat-datepicker-content,
+.lux-datetimepicker-overlay .mat-card.lux-card {
+  border: 2px solid luxpalette.$lux-primary-color;
+  box-shadow: none !important;
+  margin: 13px -9px;
+
+  & .mat-calendar-header button:hover {
+    background-color: #fff !important;
+    color: map-get(luxpalette.$lux-palette_primary, 300);
+  }
+}
 
 /*
 * Theming für lux-Toggle
@@ -253,11 +328,14 @@ textarea {
     }
   }
 } 
-.lux-chips-ac-autocomplete-panel {
-  margin-top: -20px;
+.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel {
+  margin-top: -21px;
   margin-left: 0;
   margin-right: 0;
   border-radius: 4px;
+
+  box-shadow: none !important;
+  border: 2px solid luxpalette.$lux-primary-color;
 }
 
 /*

package/src/base/components/_luxLinkPlain.scss

@@ -37,9 +37,14 @@ lux-link-plain {
     }
 
     &:hover:not(.lux-disabled) {
-      @include luxfocus.lux-hovered-mixin;
+      color: luxcommon.$lux-hover-color;
       text-decoration: underline;
       cursor: pointer;
+      lux-icon {
+        i, mat-icon {
+          color: luxcommon.$lux-hover-color;
+        }
+      }
     }
     
     &:focus:not(.lux-disabled, :hover) {

package/src/base/components/_luxMasterDetailAc.scss

@@ -13,9 +13,9 @@
       border-left-style: none;
       border-radius: 0 4px 4px 0;
       padding: 0;
-      width: 35px;
-      min-width: 35px;
-      max-width: 35px;
+      width: 25px;
+      min-width: 25px;
+      max-width: 25px;
       background-color: #fff;
     }
     &.lux-master-ac-container-mobile {
@@ -31,30 +31,43 @@
     lux-button.master-ac-toggle {
       position: absolute;
       right: -18px;
-      top: 20px;
+      top: 17px;
       z-index: 1000;
       
       button.lux-button.lux-button-rounded {
         @include luxelevations.lux-elevation-z0;  
         border: 1px solid luxcommon.$app-border-color;
         color: map.get(luxpalette.$lux-palette-primary, 500);
-        
-        &:hover:not([disabled]){
-          background-color: luxcommon.$lux-hover-color !important;
-          color: #fff;
-          border-radius: 50%
-        }
+        background-color: #fff !important;
       }
       
       .lux-button-icon-round.lux-lx-icon.lux-no-size {
         // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
         // Anpassung erforderlich, falls das Icon ausgetauscht wird
         padding-bottom: 2px;
+        padding-right: 1px;
+        padding-left: 1px;
+      }
+    }
+    button.lux-button.lux-button-rounded {
+      &:hover:not([disabled]){
+        color: luxcommon.$lux-hover-color;
+        border-radius: 50%
+      }
+      &:active:not([disabled]) {
+        color: map.get(luxpalette.$lux-palette-primary, 700);
+        background-color: #fff !important;
       }
     }
     .lux-menu-extended {
       padding: 0px;
     }
+    mat-card-title, h2 {
+      font-size: 16px;
+    }
+    mat-card-subtitle.mat-card-subtitle {
+      font-size: 14px;
+    }
   }
 
   lux-filter-form .lux-filter-card,

package/src/base/components/_luxTileAc.scss

@@ -57,8 +57,7 @@ lux-tile-ac {
       @include luxfocus.focus-dark-mixin;
     }
     &[class~=lux-cursor]:hover {
-      background-color: luxcommon.$lux-hover-color;
-      background-image: unset;
+      border-color: luxpalette.$lux-primary-color;
     }
   }
 }

package/src/blue/luxtheme.scss

@@ -92,7 +92,7 @@
     // Farben für einen dunklen Hintergrund (z.B. Snackbar).
     $colorsForDarkBg: themeCommon.$colorsForDarkBg
 );
-
+@use "../base/luxSvgIcons";
 @use "../base/luxelevations";
 @use "../base/luxcomponents";
 @use "../base/luxfocus";

package/src/green/luxtheme.scss

@@ -93,7 +93,7 @@
     // Farben für einen dunklen Hintergrund (z.B. Snackbar).
     $colorsForDarkBg: themeCommon.$colorsForDarkBg
 );
-    
+@use "../base/luxSvgIcons";
 @use "../base/luxelevations";
 @use "../base/luxcomponents";
 @use "../base/luxfocus";