@ihk-gfi/lux-components-theme 14.7.0 → 15.0.0

package/src/base/_luxfocus.scss

@@ -29,6 +29,12 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   outline: $outline-bright;
 }
 
+@mixin lux-button-focus {
+  $width: calc(#{luxcommon.$outline-width} - 1px);
+  outline: $width luxcommon.$outline-style luxcommon.$outline-color-dark !important;
+  outline-offset: 1px;
+}
+
 @mixin lux-selectable-mixin {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -231,7 +237,6 @@ lux-filter-form {
 }
 
 /** ########## Chips ########## **/
-lux-chips,
 lux-chips-ac {
   & .mat-standard-chip:focus-visible {
     @include focus-dark-mixin;
@@ -243,42 +248,6 @@ lux-chips-ac {
 }
 
 /** ########## Form-Control ########## **/
-lux-form-control {
-  .lux-form-control:not(.lux-form-control-disabled).lux-focused {
-    .lux-form-control-label {
-      > * {
-        color: luxcommon.$lux-selected-border-color;
-      }
-    }
-
-    .cdk-keyboard-focused .mat-radio-container,
-    .cdk-keyboard-focused .mat-checkbox-inner-container,
-    .cdk-keyboard-focused .mat-slide-toggle-thumb {
-      position: relative;
-      @include focus-dark-mixin;
-    }
-
-    .lux-form-control-container:after {
-      content: "";
-      display: block;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-      left: 0;
-      right: 0;
-      position: absolute;
-      height: 2px;
-      border-bottom: 2px solid luxcommon.$lux-selected-border-color;
-    }
-
-    &.lux-form-control-error {
-      .lux-form-control-container:after {
-        border-bottom: 2px solid luxpalette.$lux-warn-color;
-      }
-    }
-  }
-}
-
 .lux-form-control-wrapper {
   &.lux-focused-authentic .cdk-keyboard-focused {
     .mat-radio-container,
@@ -295,22 +264,6 @@ lux-icon.lux-error-icon:focus-visible {
 }
 
 /** ########## Datepicker ########## **/
-lux-datepicker {
-  mat-datepicker-toggle {
-    button:focus-visible {
-      @include focus-dark-mixin;
-      border-radius: 4px;
-    }
-
-    button:hover {
-      @include lux-hovered-mixin();
-      border-radius: 4px;
-    }
-    .mat-button-focus-overlay {
-      display: none;
-    }
-  }
-}
 lux-datepicker-ac,
 lux-datetimepicker-ac {
   mat-datepicker-toggle {
@@ -325,7 +278,7 @@ lux-datetimepicker-ac {
         color: luxcommon.$lux-hover-color;
       }
     }
-    .mat-button-focus-overlay {
+    .mat-mdc-button-persistent-ripple::before {
       display: none;
     }
   }
@@ -365,23 +318,6 @@ lux-datetimepicker-ac {
 }
 
 /** ########## Datetimepicker ########## **/
-lux-datetimepicker {
-  mat-datepicker-toggle {
-    button:focus-visible {
-      @include focus-dark-mixin;
-      border-radius: 4px;
-    }
-
-    button:hover {
-      @include lux-hovered-mixin();
-      border-radius: 4px;
-    }
-    .mat-button-focus-overlay {
-      display: none;
-    }
-  }
-}
-
 // Class, welche das aufgeklappte Panel referenziert
 .lux-datetimepicker-overlay {
   .mat-calendar-header {
@@ -460,27 +396,6 @@ lux-table {
   }
 }
 
-/** ########## Select ########## **/
-// Class, welche das aufgeklappte Panel referenziert
-.lux-select-panel {
-  mat-option {
-    &.mat-selected.mat-option:not(.mat-option-disabled) {
-      @include lux-selected-mixin;
-    }
-
-    // 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) {
-      @include focus-dark-mixin-inline;
-      border-radius: 4px;
-    }
-
-    &:hover {
-      @include lux-hovered-mixin;
-    }
-  }
-}
-
 /** ########## Select-AC ########## **/
 @mixin lux-option-highlight-mixin {
   background-color: map-get(luxpalette.$lux-palette_primary, 300);
@@ -557,94 +472,6 @@ lux-table {
   }
 }
 
-/** ########## Button ########## **/
-lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) {
-  button:not([disabled]) {
-    .mat-button-focus-overlay {
-      display: none;
-    }
-
-    &:focus-visible {
-      @include focus-dark-mixin;
-    }
-
-    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button),
-    &.mat-stroked-button {
-      &:hover {
-        background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%);
-
-        &.mat-accent {
-          color: map.get(luxpalette.$lux-palette_accent, 900);
-        }
-
-        &.mat-warn {
-        }
-
-        &.mat-primary {
-        }
-      }
-    }
-
-    &.mat-fab:hover,
-    &.mat-raised-button:hover,
-    &.mat-flat-button:hover {
-      background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important; // $lux-hover-color !important;
-      //background-color: luxcommon.$lux-hover-color !important; // $lux-hover-color !important;
-
-      &.mat-accent {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 10%) !important;
-      }
-
-      &.mat-warn {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 10%) !important;
-      }
-
-      &.mat-primary {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 10%) !important;
-      }
-    }
-
-    &.mat-fab:focus-visible:not(:hover),
-    &.mat-raised-button:focus-visible:not(:hover),
-    &.mat-flat-button:focus-visible:not(:hover) {
-      background-color: white !important;
-
-      &.mat-accent {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 5%) !important;
-      }
-
-      &.mat-warn {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 5%) !important;
-      }
-
-      &.mat-primary {
-        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 5%) !important;
-      }
-    }
-  }
-}
-
-/** ########## Autocomplete ########## **/
-// Class, welche das aufgeklappte Panel referenziert
-.lux-autocomplete-panel,
-.lux-chips-autocomplete-panel {
-  mat-option {
-    &:focus-visible {
-      @include focus-dark-mixin-inline;
-      border-radius: 4px;
-    }
-
-    &.mat-active {
-      @include focus-dark-mixin-inline;
-      border-radius: 4px;
-    }
-
-    &:hover:not(.invalid, .mat-option-disabled) {
-      @include lux-hovered-mixin;
-    }
-  }
-}
-
 /** ########## Tabs ########## **/
 @mixin tab-label-mixin {
   color: map.get(luxpalette.$lux-palette_primary, 400) !important;
@@ -760,31 +587,6 @@ lux-panel {
   }
 }
 
-/** ########## Master-Detail ########## **/
-lux-button.lux-master-toggle button:not([disabled]):focus {
-  &:focus-visible {
-    @include focus-bright-mixin;
-  }
-
-  &:hover {
-    @include lux-hovered-mixin;
-  }
-}
-
-lux-master-detail {
-  lux-master-header {
-    .lux-master-header-collapse {
-      button.lux-button {
-        // Wir benötigen hier die spezielle CSS-Abfrage um die für die Buttons zu überschreiben
-        // Wir nutzen $lux-hover-color, weil sich die normale lux-focus-color hier nicht genug abhebt
-        &:not(.mat-fab):not(.mat-raised-button):focus-visible {
-          background-color: luxcommon.$lux-hover-color !important;
-        }
-      }
-    }
-  }
-}
-
 /** ########## File-List ########## **/
 lux-file-list {
   .lux-file-list {

package/src/base/_luxstyles.scss

@@ -13,7 +13,11 @@ $paletteNamen: primary, accent, warn;
   @for $i from 1 through 3 {
     @each $size in $sizes {
       --lux-theme-#{list.nth($paletteNamen, $i)}-#{string.to-lower-case("" + $size)}: #{map.get(list.nth($paletten, $i), $size)};
-      --lux-theme-#{list.nth($paletteNamen, $i)}-#{string.to-lower-case("" + $size)}-contrast: #{map.get(list.nth($paletten, $i), contrast, $size)};
+      --lux-theme-#{list.nth($paletteNamen, $i)}-#{string.to-lower-case("" + $size)}-contrast: #{map.get(
+          list.nth($paletten, $i),
+          contrast,
+          $size
+        )};
     }
   }
 
@@ -41,17 +45,9 @@ $paletteNamen: primary, accent, warn;
 
   // Form
   --lux-theme-form-border-color: #{luxcommon.$form-border-color};
-  --lux-theme-form-control-default-height-not-scalable: #{luxcommon.$form-control-default-height-not-scalable};
-  --lux-theme-form-control-height: #{luxcommon.$form-control-height};
-  --lux-theme-form-control-height-small: #{luxcommon.$form-control-height-small};
   --lux-theme-form-control-font-size: #{luxcommon.$form-control-font-size};
   --lux-theme-form-control-font-size-small: #{luxcommon.$form-control-font-size-small};
-  --lux-theme-form-control-label-padding: #{luxcommon.$form-control-label-padding};
-  --lux-theme-form-control-container-padding: #{luxcommon.$form-control-container-padding};
-  --lux-theme-form-control-misc-margin: #{luxcommon.$form-control-misc-margin};
-  --lux-theme-form-control-complete-height: #{luxcommon.$form-control-complete-height};
   --lux-theme-form-control-buffer: #{luxcommon.$form-control-buffer};
-  --lux-theme-form-control-margin: #{luxcommon.$form-control-margin};
 
   // Button
   --lux-theme-button-font-size: #{luxcommon.$button-font-size};
@@ -97,7 +93,12 @@ body,
   height: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: luxcommon.$app-headline-font, global.$app-font-family;
 }
 
@@ -221,7 +222,7 @@ h6 {
   border: 1px solid luxcommon.$dark-dividers;
   display: flex;
   word-break: break-word;
-  
+
   &.column {
     flex-direction: column;
     gap: 16px;
@@ -495,19 +496,19 @@ lux-button.lux-uppercase {
 }
 
 @each $colorName, $colorNameHex in luxcommon.$componentBgColors {
-  .lux-color-#{''+$colorName+''} {
+  .lux-color-#{"" + $colorName + ""} {
     color: $colorNameHex;
   }
 }
 
 @each $colorName, $colorNameHex in luxcommon.$componentBgColors {
-  .lux-bg-color-#{''+$colorName+''} {
+  .lux-bg-color-#{"" + $colorName + ""} {
     background: $colorNameHex;
   }
 }
 
 @each $colorName, $colorNameHex in luxcommon.$componentFontColors {
-  .lux-font-color-#{''+$colorName+''} {
+  .lux-font-color-#{"" + $colorName + ""} {
     color: $colorNameHex;
   }
 }
@@ -587,7 +588,7 @@ lux-button.lux-uppercase {
     }
 
     .lux-column-rule-color-#{list.nth($paletteNamen, $i)}-#{string.to-lower-case("" + $size)} {
-     column-rule-color: map.get(list.nth($paletten, $i), $size);
+      column-rule-color: map.get(list.nth($paletten, $i), $size);
     }
 
     .lux-column-rule-color-#{list.nth($paletteNamen, $i)}-#{string.to-lower-case("" + $size)}-contrast {

package/src/base/_luxtheme.scss

@@ -2,10 +2,22 @@
 @use "luxpalette";
 
 @include mat.core();
+@include mat.legacy-core();
 
 $lux-primary: mat.define-palette(luxpalette.$lux-palette_primary);
 $lux-accent: mat.define-palette(luxpalette.$lux-palette_accent);
 $lux-warn: mat.define-palette(luxpalette.$lux-palette_warn);
-$lux-theme: mat.define-light-theme($lux-primary, $lux-accent, $lux-warn);
+$lux-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $lux-primary,
+      accent: $lux-accent,
+      warn: $lux-warn
+    ),
+    typography: mat.define-typography-config(),
+    density: 0
+  )
+);
 
 @include mat.all-component-themes($lux-theme);
+@include mat.all-legacy-component-themes($lux-theme);

package/src/base/components/_luxAppHeaderAc.scss

@@ -14,7 +14,7 @@ lux-app-header-ac {
     cursor: pointer;
     padding: 0px;
     &:focus-visible {
-      @include luxfocus.focus-dark-mixin;
+      @include luxfocus.lux-button-focus;
       border-radius: 4px;
     }
   }
@@ -37,6 +37,7 @@ lux-app-header-ac {
         max-height: 20px;
         .lux-no-size {
           display: block;
+          font-size: 20px;
         }
       }
 
@@ -85,7 +86,7 @@ lux-app-header-ac {
   }
 
   .lux-app-header-top-bar {
-    padding: 10px 24px;
+    padding: 8px 24px;
     min-height: 64px;
     font-size: 1rem;
     color: luxcommon.$dark-primary-text;

package/src/base/components/_luxButton.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "sass:color";
+@use "../luxpalette";
+@use "../luxcommon";
+@use "../luxelevations";
+@use "../luxfocus";
+@use "../../public/global";
+
+/*
+ * Styling for LUX-Button
+ */
+lux-button button.lux-button {
+  font-family: global.$app-font-family;
+  font-size: luxcommon.$button-font-size;
+  font-weight: 600;
+  height: luxcommon.$button-height;
+
+  .lux-button-content-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
+  }
+
+  &.mat-button.mat-button-disabled,
+  &.mat-raised-button.mat-button-disabled,
+  &.mat-flat-button.mat-button-disabled,
+  &.mat-stroked-button.mat-button-disabled,
+  &.mat-raised-button.mat-button-disabled:not([class*="mat-elevation-z"]),
+  &.mat-fab.mat-button-disabled {
+    color: luxcommon.$dark-disabled-text;
+    @include luxelevations.lux-elevation-z0;
+  }
+
+  &.mat-raised-button:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z2;
+  }
+
+  &.lux-button-rounded {
+    height: luxcommon.$button-fav-height;
+    width: luxcommon.$button-fav-height;
+
+    @include luxelevations.lux-elevation-z2;
+
+    .mat-button-wrapper {
+      padding: 0;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    lux-icon.lux-button-icon-round {
+      line-height: 1;
+    }
+  }
+
+  lux-icon.lux-button-icon:not(.lux-button-icon-round) {
+    line-height: 1;
+  }
+
+  .lux-button-badge {
+    color: #fff;
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: 11px;
+    line-height: normal;
+    max-width: 38px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+}
+
+/*
+ * Focus / Hover / Disabled
+ */
+lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) {
+  button:not([disabled]) {
+    .mat-button-focus-overlay {
+      display: none;
+    }
+
+    &:focus-visible {
+      @include luxfocus.focus-dark-mixin;
+    }
+
+    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button),
+    &.mat-stroked-button {
+      &:hover {
+        background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%);
+
+        &.mat-accent {
+          color: map.get(luxpalette.$lux-palette_accent, 900);
+        }
+
+        &.mat-warn {
+        }
+
+        &.mat-primary {
+        }
+      }
+    }
+
+    &.mat-fab:hover,
+    &.mat-raised-button:hover,
+    &.mat-flat-button:hover {
+      background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
+
+      &.mat-accent {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 10%) !important;
+      }
+
+      &.mat-warn {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 10%) !important;
+      }
+
+      &.mat-primary {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 10%) !important;
+      }
+    }
+
+    &.mat-fab:focus-visible:not(:hover),
+    &.mat-raised-button:focus-visible:not(:hover),
+    &.mat-flat-button:focus-visible:not(:hover) {
+      background-color: white !important;
+
+      &.mat-accent {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 5%) !important;
+      }
+
+      &.mat-warn {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 5%) !important;
+      }
+
+      &.mat-primary {
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 5%) !important;
+      }
+    }
+  }
+}

package/src/base/components/_luxFormControlWrapper.scss

@@ -92,21 +92,17 @@ lux-form-control-wrapper {
         white-space: nowrap;
         display: inline-block;
         max-height: 1.5em;
+        align-items: center;
+
+        lux-input-ac-suffix,
+        lux-input-ac-prefix {
+          display: inline-flex;
+        }
 
         lux-icon {
-          i {
-            padding: 0 !important;
-            margin: 0;
-            font-size: 1em;
-          }
-          mat-icon {
-            padding: 0 !important;
-            margin: 0;
-            font-size: 1.5em !important;
-            &.lux-lx-icon-no-size {
-              width: 1em;
-              height: 1em;
-            }
+          mat-icon.lux-icon {
+            box-sizing: border-box;
+            padding: 0px !important;
           }
         }
       }

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -50,8 +50,8 @@ lux-lookup-combobox-ac {
 }
 
 // Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
-.lux-select-panel-ac .mat-pseudo-checkbox-checked,
-.lux-select-panel-ac-multiple .mat-pseudo-checkbox-checked {
+.lux-select-panel-ac .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
+.lux-select-panel-ac-multiple .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full {
   background-color: luxpalette.$lux-primary-color;
 }
 .cdk-overlay-pane {
@@ -131,23 +131,22 @@ lux-checkbox-ac {
 lux-datepicker-ac,
 lux-datetimepicker-ac {
   mat-datepicker-toggle {
-    height: 24px !important;
-    width: 24px !important;
+    height: 24px;
+    width: 24px;
 
-    .mat-icon-button {
-      height: 24px !important;
-      width: 24px !important;
-      line-height: 1.5;
-      font-size: inherit;
+    .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base {
+      height: 24px;
+      width: 24px;
+      padding: 0;
 
       lux-icon.lux-datepicker-toggle-icon,
       mat-icon.mat-icon {
-        height: 24px !important;
-        width: 24px !important;
+        height: 24px;
+        width: 24px;
         padding: 0px !important;
       }
 
-      &.mat-button-disabled {
+      &[disabled="true"] {
         svg {
           color: luxcommon.$dark-disabled-text;
         }
@@ -184,7 +183,14 @@ lux-toggle-ac {
     }
 
     &.mat-disabled {
-      label .mat-slide-toggle-content {
+      //von Material wird beim gesamten Element die Opacity auf 0.38 gesetzt.
+      //wir wollen aber nur den "Schalter" änderen, das Label wird bei uns über die Color gesteuert
+      opacity: 1;
+      .mat-slide-toggle-bar {
+        opacity: 0.38;
+      }
+
+      .lux-form-label {
         color: luxcommon.$dark-disabled-text;
       }
 
@@ -318,7 +324,6 @@ lux-chips-ac {
         opacity: 1;
 
         lux-icon {
-          i,
           mat-icon {
             color: luxcommon.$app-data-bg;
           }

package/src/base/components/_luxIcon.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../luxpalette";
+
+lux-icon {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+
+  &.lux-icon-rounded {
+    mat-icon.lux-icon {
+      border-radius: 50%;
+
+      &.lux-icon-rounded-1em {
+        padding: 4px !important;
+      }
+      &.lux-icon-rounded-2em {
+        padding: 8px !important;
+      }
+      &.lux-icon-rounded-3em {
+        padding: 12px !important;
+      }
+      &.lux-icon-rounded-4em,
+      &.lux-icon-rounded-5em {
+        padding: 16px !important;
+      }
+    }
+  }
+
+  &.lux-error-icon {
+    font-size: 12px;
+
+    mat-icon.lux-icon {
+      padding: 0 !important;
+      color: luxpalette.$lux-warn-color;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}