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

package/src/authentic/_luxcommon.scss

@@ -119,3 +119,9 @@ $colorsForDarkBg: (
   "brown": #eb7c05,
   "white": #ffffff
 );
+
+// Tile
+$lux-tile-font-hover-color: #2e8533;
+$lux-tile-icon-color: #56bd66;
+$lux-tile-borderradius: 24px;
+$lux-tile-bottom-line-color: #56bd66;

package/src/authentic/luxtheme.scss

@@ -76,7 +76,6 @@
   $lux-stepper-large-nav-item-completed-fg: themeCommon.$lux-stepper-large-nav-item-completed-fg,
   $lux-stepper-large-nav-item-completed-bg: themeCommon.$lux-stepper-large-nav-item-completed-bg,
 
-
   // Overlay
   $lux-overlay-backdrop-color: themeCommon.$lux-overlay-backdrop-color,
 
@@ -87,7 +86,13 @@
   $componentFontColors: themeCommon.$componentFontColors,
 
   // Farben für einen dunklen Hintergrund (z.B. Snackbar).
-  $colorsForDarkBg: themeCommon.$colorsForDarkBg
+  $colorsForDarkBg: themeCommon.$colorsForDarkBg,
+
+  // Tile
+  $lux-tile-font-hover-color: themeCommon.$lux-tile-font-hover-color,
+  $lux-tile-icon-color: themeCommon.$lux-tile-icon-color,
+  $lux-tile-borderradius: themeCommon.$lux-tile-borderradius,
+  $lux-tile-bottom-line-color: themeCommon.$lux-tile-bottom-line-color
 );
 @use "../base/luxSvgIcons";
 @use "../base/luxelevations";

package/src/base/_luxcommon.scss

@@ -91,3 +91,9 @@ $colorsForDarkBg: (
   "brown": mustOverriden,
   "white": mustOverriden
 ) !default;
+
+// Tile
+$lux-tile-font-hover-color: mustOverriden !default;
+$lux-tile-icon-color: mustOverriden !default;
+$lux-tile-borderradius: mustOverriden !default;
+$lux-tile-bottom-line-color: mustOverriden !default;

package/src/base/_luxfocus.scss

@@ -99,11 +99,21 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   background-color: luxcommon.$lux-hover-color;
 }
 
+/** ########## Green ########## **/
 @mixin lux-hovered-mixin-green {
   background-color: #e3ebf5 !important;
   border-radius: 4px;
 }
 
+$dark-green: #2e8533;
+
+@mixin lux-focus-mixin-green {
+  box-shadow:
+    0 0 0 2px $dark-green,
+    0 0 8px 2px $dark-green !important;
+  outline: 0 !important;
+}
+
 /** ########## Chips ########## **/
 lux-chips-ac {
   mat-chip-row.cdk-focused:not(.cdk-mouse-focused):not(.cdk-program-focused) {

package/src/base/_luxstyles.scss

@@ -573,67 +573,10 @@ lux-button.lux-uppercase {
 
 $notificationSizes: (18, 24, 30);
 
-$notificationSizeNames: ("small", "medium", "large");
-
-$notificationPositions1: ("before", "after");
-
-$notificationPositions2: ("above", "below");
-
-@each $position1 in $notificationPositions1 {
-  @each $position2 in $notificationPositions2 {
-    @each $notificationSize in $notificationSizes {
-      $i: index($notificationSizes, $notificationSize);
-      .lux-badge-notification {
-        &.mat-badge-#{$position1}.mat-badge-#{$position2} {
-          // Nicht überlappend
-          &.mat-badge-#{nth($notificationSizeNames, $i)} {
-            .mat-badge-content {
-              @if $position1 == "before" {
-                left: -#{$notificationSize}px;
-                right: unset;
-              } @else if $position1 == "after" {
-                left: unset;
-                right: -#{$notificationSize}px;
-              }
-
-              @if $position2 == "above" {
-                top: -#{calc($notificationSize / 2)}px;
-                bottom: unset;
-              } @else if $position2 == "below" {
-                top: unset;
-                bottom: -#{calc($notificationSize / 2)}px;
-              }
-            }
-
-            // Überlappend
-            &.mat-badge-overlap .mat-badge-content {
-              @if $position1 == "before" {
-                left: -#{calc($notificationSize / 2)}px;
-                right: unset;
-              } @else if $position1 == "after" {
-                left: unset;
-                right: -#{calc($notificationSize / 2)}px;
-              }
-
-              @if $position2 == "above" {
-                top: -#{calc($notificationSize / 2)}px;
-                bottom: unset;
-              } @else if $position2 == "below" {
-                top: unset;
-                bottom: -#{calc($notificationSize / 2)}px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .lux-badge-notification {
   &.mat-badge-small {
     .mat-badge-content {
-      padding-top: 2px;
+      padding-top: 0;
       font-size: 9px;
       width: #{nth($notificationSizes, 1)}px;
       height: #{nth($notificationSizes, 1)}px;
@@ -642,7 +585,7 @@ $notificationPositions2: ("above", "below");
 
   &.mat-badge-medium {
     .mat-badge-content {
-      padding-top: 4px;
+      padding-top: 0;
       font-size: 12px;
       width: #{nth($notificationSizes, 2)}px;
       height: #{nth($notificationSizes, 2)}px;
@@ -651,7 +594,7 @@ $notificationPositions2: ("above", "below");
 
   &.mat-badge-large {
     .mat-badge-content {
-      padding-top: 5px;
+      padding-top: 0;
       font-size: 15px;
       width: #{nth($notificationSizes, 3)}px;
       height: #{nth($notificationSizes, 3)}px;

package/src/base/_luxtheme.scss

@@ -2,22 +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: mat.m2-define-palette(luxpalette.$lux-palette_primary);
+$lux-accent: mat.m2-define-palette(luxpalette.$lux-palette_accent);
+$lux-warn: mat.m2-define-palette(luxpalette.$lux-palette_warn);
+$lux-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $lux-primary,
       accent: $lux-accent,
       warn: $lux-warn
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0
   )
 );
 
-@include mat.all-component-themes($lux-theme);
-@include mat.all-legacy-component-themes($lux-theme);
+html {
+  @include mat.all-component-themes($lux-theme);
+}

package/src/base/components/_luxAppFooter.scss

@@ -3,6 +3,7 @@
 @use "../luxpalette";
 
 lux-app-footer {
+  display: flex;
   flex: 0 0 auto;
   height: 60px;
   min-height: 60px;

package/src/base/components/_luxButton.scss

@@ -17,6 +17,11 @@ lux-button button.lux-button {
 
   &.mat-mdc-fab {
     border-radius: 50%;
+
+    .mat-mdc-button-touch-target {
+      width: 36px;
+      height: 36px;
+    }
   }
 
   &:not(.mat-mdc-fab) {

package/src/base/components/_luxCard.scss

@@ -31,8 +31,15 @@ lux-card {
       @include luxelevations.lux-elevation-z0;
     }
     .mat-mdc-card-content {
-      padding: 16px 0 0 0;
       font-size: 1rem;
+      padding: 0;
+
+      .lux-card-content {
+        padding: 16px 0 0 0;
+        &:empty {
+          padding: 0;
+        }
+      }
     }
   }
 
@@ -81,8 +88,19 @@ lux-card {
     }
     .lux-card-info-container {
       margin-left: 10px;
-      grid-row: 1 / span 2;
       grid-column-start: 3;
+
+      &.lux-title.lux-subtitle {
+        grid-row: 1 / span 2;
+      }
+
+      &.lux-title:not(.lux-subtitle) {
+        grid-row: 1;
+      }
+
+      &.lux-subtitle:not(.lux-title) {
+        grid-row: 2;
+      }
     }
 
     .lux-card-title,
@@ -112,7 +130,6 @@ lux-card {
     &.lux-card-actions {
       margin-right: 0;
       margin-left: 0;
-      padding: luxcommon.$outline-width 0 0 0;
     }
   }
 

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -115,6 +115,11 @@ lux-lookup-combobox-ac {
 /*
 * Theming für Lux-Checkbox
 */
+html .mat-mdc-checkbox .mat-internal-form-field {
+  --mat-switch-label-text-size: 16px;
+  --mat-checkbox-label-text-line-height: 24px;
+}
+
 lux-checkbox-ac {
   input:focus ~ .mdc-checkbox__background,
   input:hover ~ .mdc-checkbox__background,
@@ -138,12 +143,18 @@ lux-checkbox-ac {
       top: 0;
       left: 0;
     }
+
+    .mat-mdc-checkbox-touch-target {
+      width: 24px;
+      height: 24px;
+    }
   }
 
   label {
     font-family: luxcommon.$app-font-family;
     font-size: luxcommon.$form-control-font-size;
     color: luxcommon.$dark-primary-text;
+    letter-spacing: normal;
     cursor: pointer;
   }
 
@@ -209,16 +220,39 @@ lux-datetimepicker-ac {
 /*
 * Theming für lux-Toggle
 */
-$toggleControlWidth: 50;
-$toggleControlHeight: 30;
-$toggleBorderRadius: 15;
+$toggleHandleSize: 23;
 $toggleBorderWidth: 2;
-$toggleImageWidth: $toggleControlHeight - (2 * $toggleBorderWidth) - 3;
-$toggleImageHeight: $toggleControlHeight - (2 * $toggleBorderWidth) - 3;
 $toggleMarginLeft: $toggleBorderWidth + 1;
 
+html lux-toggle-ac .mat-mdc-slide-toggle {
+  --mat-switch-label-text-size: 16px;
+  --mdc-switch-track-width: 50px;
+  --mdc-switch-track-height: 30px;
+  --mdc-switch-track-shape: 15px;
+  --mdc-switch-handle-width: 30px;
+  --mat-switch-track-outline-width: #{$toggleBorderWidth}px !important;
+  --mat-switch-track-outline-color: #{luxcommon.$dark-disabled-text} !important;
+  --mat-switch-selected-track-outline-width: #{$toggleBorderWidth}px !important;
+  --mat-switch-selected-track-outline-color: #{luxpalette.$lux-primary-color} !important;
+  --mat-switch-selected-handle-size: #{$toggleHandleSize}px;
+  --mat-switch-pressed-handle-size: #{$toggleHandleSize}px;
+  --mat-switch-with-icon-handle-size: #{$toggleHandleSize}px;
+  --mdc-switch-selected-icon-size: #{$toggleHandleSize}px;
+  --mdc-switch-selected-handle-size: #{$toggleHandleSize}px;
+  --mdc-switch-unselected-icon-size: #{$toggleHandleSize}px;
+  --mat-switch-unselected-handle-size: #{$toggleHandleSize}px;
+  --mdc-switch-selected-icon-color: #{luxpalette.$lux-primary-color};
+  --mdc-switch-state-layer-size: 40px;
+
+  .mat-internal-form-field {
+    letter-spacing: normal;
+  }
+}
+
 lux-toggle-ac {
   mat-slide-toggle {
+    max-height: 26px;
+
     .mdc-switch__ripple {
       display: none;
     }
@@ -227,41 +261,22 @@ lux-toggle-ac {
     button {
       &.mdc-switch--disabled {
         &.mdc-switch--checked {
-          .mdc-switch__track {
-            &::before {
-              border-color: #e0e0e0 !important;
-            }
-
-            &::after {
-              border-color: #e0e0e0 !important;
-              background: #e0e0e0;
-            }
-          }
-
           .mdc-switch__icons {
+            --mdc-switch-disabled-selected-icon-opacity: 1;
             svg.mdc-switch__icon--on {
               fill: luxcommon.$dark-disabled-text;
-              background-color: white;
+              background: white;
             }
           }
         }
 
         &:not(.mdc-switch--checked) {
           .mdc-switch__track {
+            opacity: 1;
+            --mat-switch-disabled-unselected-track-outline-color: #e0e0e0;
+            --mat-switch-disabled-unselected-track-outline-width: #{$toggleBorderWidth}px;
             &::before {
-              border-color: #e0e0e0 !important;
-              background: White;
-            }
-
-            &::after {
-              border-color: #e0e0e0 !important;
-            }
-          }
-
-          .mdc-switch__icons {
-            svg.mdc-switch__icon--off {
-              fill: white;
-              background-color: #a9a9a9;
+              background: transparent;
             }
           }
         }
@@ -269,77 +284,28 @@ lux-toggle-ac {
 
       &:not(.mdc-switch--disabled) {
         &.mdc-switch--checked {
-          .mdc-switch__track {
-            &::before {
-              border-color: map-get(luxpalette.$lux-palette_primary, 500) !important;
-            }
-
-            &::after {
-              border-color: map-get(luxpalette.$lux-palette_primary, 500) !important;
-            }
-          }
-
           .mdc-switch__icons {
             svg.mdc-switch__icon--on {
-              fill: map-get(luxpalette.$lux-palette_primary, 500);
               background-color: white;
             }
           }
         }
-
-        &:not(.mdc-switch--checked) {
-          .mdc-switch__track {
-            &::before {
-              border-color: luxcommon.$dark-secondary-text !important;
-            }
-
-            &::after {
-              border-color: luxcommon.$dark-secondary-text !important;
-            }
-          }
-        }
       }
     }
 
     // Layout
     button {
-      width: #{$toggleControlWidth}px;
-      height: #{$toggleImageHeight + 1}px;
-
-      .mdc-switch__track {
-        width: #{$toggleControlWidth}px;
-        height: #{$toggleControlHeight}px;
-        border-radius: #{$toggleBorderRadius}px;
-
-        &::before {
-          border-width: #{$toggleBorderWidth}px !important;
-        }
-        &::after {
-          border-width: #{$toggleBorderWidth}px !important;
-        }
-      }
-
       .mdc-switch__handle {
-        width: #{$toggleImageWidth}px;
-        height: #{$toggleImageHeight}px;
         margin-left: #{$toggleMarginLeft}px !important;
-        border-radius: #{$toggleBorderRadius}px;
-      }
-
-      .mdc-switch__handle-track {
-        width: #{$toggleControlWidth - $toggleImageWidth - $toggleMarginLeft - (2 * $toggleBorderWidth)}px;
       }
 
       .mdc-switch__icons {
-        width: #{$toggleImageWidth}px;
-        height: #{$toggleImageHeight}px;
-
         svg.mdc-switch__icon--on {
-          border-radius: #{$toggleBorderRadius}px;
+          border-radius: 50%;
         }
 
         svg.mdc-switch__icon--off {
-          border-radius: #{$toggleBorderRadius}px;
+          border-radius: 50%;
         }
       }
     }
@@ -389,6 +355,18 @@ lux-toggle-ac {
 /*
  * Theming for LUX-Radio
  */
+html .mat-mdc-radio-button {
+  --mat-radio-label-text-size: 16px;
+}
+
+.mat-mdc-radio-button .mat-internal-form-field {
+  --mat-radio-label-text-line-height: 24px;
+
+  label {
+    letter-spacing: normal;
+  }
+}
+
 lux-radio-ac {
   .mat-mdc-radio-button .mdc-radio {
     padding: 0;
@@ -413,6 +391,7 @@ lux-radio-ac {
       display: none;
     }
   }
+
   .mdc-label {
     color: luxcommon.$dark-primary-text;
     font-family: luxcommon.$app-font-family;
@@ -455,6 +434,11 @@ lux-radio-ac {
   &.lux-form-control-readonly {
     pointer-events: none;
   }
+
+  .mdc-radio .mat-mdc-radio-touch-target {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 /*
@@ -633,31 +617,24 @@ lux-slider-ac {
       }
     }
 
-    .mdc-slider__track {
-      background-color: luxcommon.$dark-disabled-text;
-      height: 2px;
-    }
-
-    .mdc-slider__value-indicator-container {
-      left: 26%;
+    .mat-mdc-slider-visual-thumb .mat-ripple {
+      display: none;
     }
 
-    .mdc-slider__thumb-knob {
-      height: 15px;
-      width: 15px;
-      top: 27%;
-      border-radius: 50%;
+    .mdc-slider__thumb {
+      height: 24px;
     }
 
     mat-slider-visual-thumb div.mdc-slider__value-indicator-container {
-      bottom: 48px;
+      bottom: 27px;
 
       .mdc-slider__value-indicator {
         border-radius: 50%;
-        min-height: 25px;
+        max-height: 23px;
         min-width: 20px;
         padding-left: 2px;
         padding-right: 2px;
+        opacity: 1;
       }
 
       .mdc-slider__value-indicator-text {

package/src/base/components/_luxTable.scss

@@ -125,7 +125,7 @@ lux-table {
       }
 
       .mat-mdc-row:nth-child(odd) {
-        background-color: map.get(luxpalette.$lux-palette_primary, 50);
+        background-color: #f0f3f6;
       }
 
       .mat-mdc-row:nth-child(even) {
@@ -229,6 +229,10 @@ lux-table {
     // damit die Events der eigentliche Checkbox nicht zusätzlich gezählt werden
     pointer-events: none;
   }
+
+  .lux-element-align-top {
+    vertical-align: text-top;
+  }
 }
 
 /** ########## HOVER / FOCUS ########## **/

package/src/base/components/_luxTabs.scss

@@ -71,6 +71,7 @@ lux-tabs {
   .lux-tabs-show-border {
     border: 1px solid luxcommon.$app-border-color;
     border-radius: 4px;
+    background-color: luxcommon.$app-content-bg;
   }
 
   // Anpassungen für kleine Screensizes
@@ -110,7 +111,9 @@ lux-tabs {
   // luxCounter (z.B. 10) neben dem Tablabel auf normalen bis großen Auflösungen
   .lux-tab-group .lux-tab-title.lux-badge-notification {
     &.mat-badge.lux-badge-no-border .mat-badge-content {
-      top: -5px;
+      left: unset;
+      bottom: unset;
+      top: 6px;
       right: -30px;
     }
   }
@@ -119,7 +122,10 @@ lux-tabs {
   .lux-tab-group lux-icon.lux-badge-notification,
   .lux-tab-group lux-image.lux-badge-notification {
     &.mat-badge.lux-badge-no-border .mat-badge-content {
-      top: 5px;
+      left: unset;
+      bottom: unset;
+      top: 20px;
+      right: -22px;
     }
   }
   .lux-tab-header-image-right,