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

package/src/base/components/_luxAppHeader.scss

@@ -66,10 +66,6 @@ lux-app-header {
               min-width: 45px;
               max-height: 45px !important;
               min-height: 45px !important;
-              .mat-button-wrapper {
-                display: inline-flex;
-                height: 100%;
-              }
             }
 
             &.lux-button-with-label button {
@@ -100,23 +96,23 @@ lux-app-header {
             font-weight: normal !important;
           }
 
-          &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
+          &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not([disabled]) {
             color: map.get(luxpalette.$lux-palette-primary, 500);
           }
 
-          &:not(.mat-accent):not(.mat-warn):not(.mat-primary).mat-button-disabled {
+          &:not(.mat-accent):not(.mat-warn):not(.mat-primary):disabled {
             color: luxcommon.$dark-disabled-text;
           }
 
-          &.mat-accent:not(.mat-button-disabled) {
+          &.mat-accent:not([disabled]) {
             color: map.get(luxpalette.$lux-palette_accent, A100);
           }
 
-          &.mat-warn:not(.mat-button-disabled) {
+          &.mat-warn:not([disabled]) {
             color: map.get(luxpalette.$lux-palette_warn, A100);
           }
 
-          &.mat-primary:not(.mat-button-disabled) {
+          &.mat-primary:not([disabled]) {
             color: map.get(luxpalette.$lux-palette_primary, A100);
           }
 
@@ -191,10 +187,6 @@ lux-app-header {
       cursor: pointer;
       padding-right: 8px;
       padding-left: 8px;
-
-      .mat-button-wrapper > span {
-        display: inline-block;
-      }
     }
 
     .lux-side-nav-trigger-active {
@@ -315,32 +307,12 @@ $sideNavZIndex: 11000;
   }
 }
 
-// Anpassungen an den (ausgeklappten) Menus im Header
-.lux-right-nav-menu,
-.lux-side-nav .lux-side-nav-content {
-  lux-button,
-  .lux-menu-item,
-  .lux-action-nav-menu lux-button {
-    .mat-button-wrapper {
-      font-weight: normal !important;
-      font-size: 1rem;
-    }
-  }
-}
-
 // Anpassungen für die Mobile Ansicht
 .lux-header-menu-mobile {
   .lux-menu-trigger {
     padding: 0 4px;
     margin: 0;
 
-    .mat-button-wrapper {
-      display: inherit;
-      lux-icon {
-        align-items: center;
-      }
-    }
-
     button {
       padding: 0 6px;
     }
@@ -435,10 +407,6 @@ lux-app-header {
       }
     }
   }
-
-  .lux-menu-trigger-default .mat-button-wrapper {
-    display: block;
-  }
 }
 /** ########## Side-Nav ########## **/
 lux-side-nav {

package/src/base/components/_luxAppHeaderAc.scss

@@ -40,12 +40,12 @@ lux-app-header-ac {
         box-sizing: border-box;
       }
 
-      &:hover:not([disabled]).mat-fab:hover.mat-primary {
+      &:hover:not([disabled]).mat-mdc-fab:hover.mat-primary {
         lux-icon {
           color: #ffffff !important;
         }
       }
-      &:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
+      &:focus-visible:not([disabled]).mat-mdc-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
         background-color: transparent !important;
         lux-icon {
           color: map.get(luxpalette.$lux-palette_primary, 700) !important;
@@ -64,7 +64,7 @@ lux-app-header-ac {
     }
 
     &.lux-menu-trigger-default {
-      button.mat-button.lux-button {
+      button.mat-mdc-button.lux-button {
         &:hover {
           background-color: map.get(luxpalette.$lux-palette-primary, 300) !important;
           color: #ffffff !important;
@@ -153,7 +153,9 @@ lux-app-header-ac {
         }
 
         &.nav-item-selected button.lux-button .lux-button-label {
-          text-shadow: 0 0 0.65px #003366, 0 0 0.65px #003366;
+          text-shadow:
+            0 0 0.65px #003366,
+            0 0 0.65px #003366;
         }
       }
     }

package/src/base/components/_luxBreadcrumb.scss

@@ -0,0 +1,90 @@
+@use "../luxfocus";
+@use "../luxpalette";
+@use "../luxcommon";
+@use "../luxbreakpoints";
+@use "sass:map";
+
+lux-breadcrumb {
+  padding: 8px; //Für Focusindicator
+  margin: 20px 0 36px 0; //Stylevorgaben
+  display: flex;
+  box-sizing: border-box;
+
+  @include luxbreakpoints.lt-md {
+    margin: 14px 0;
+  }
+
+  .lux-breadcrumb {
+    margin: -8px; //Fü Focusindicator
+    padding: 8px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    justify-content: flex-start;
+    gap: 9px;
+    align-items: baseline;
+    overflow: auto;
+    max-width: 100%;
+  }
+
+  .lux-breadcrumb-container {
+    padding: 0%;
+    margin: 0px -2px;
+  }
+
+  .lux-breadcrumb-item {
+    display: inline-flex;
+    font-family: luxcommon.$app-font-family;
+    font-size: 1.125rem;
+    font-weight: 500;
+    text-decoration: underline;
+    color: var(--lux-theme-primary-color);
+    list-style-type: none;
+    box-sizing: border-box;
+
+    &.lux-breadcrumb-item-mobile {
+      font-size: 1rem;
+      gap: 6px;
+    }
+
+    :focus-visible {
+      @include luxfocus.focus-dark-mixin;
+      border-radius: 2px;
+    }
+
+    :hover {
+      color: luxcommon.$lux-hover-color;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    lux-icon {
+      cursor: default;
+      :hover {
+        color: var(--lux-theme-primary-color);
+        cursor: default;
+      }
+    }
+
+    a {
+      padding: 2px 4px;
+      color: var(--lux-theme-primary-color);
+      margin: 0px -2px;
+      white-space: nowrap;
+    }
+  }
+
+  .lux-breadcrumb-current-item {
+    font-family: luxcommon.$app-font-family;
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: var(--lux-theme-primary-color);
+    list-style-type: none;
+    padding: 4px;
+    box-sizing: border-box;
+
+    &.lux-breadcrumb-current-item-mobile {
+      font-size: 1rem;
+    }
+  }
+}

package/src/base/components/_luxButton.scss

@@ -15,6 +15,24 @@ lux-button button.lux-button {
   font-weight: 600;
   height: luxcommon.$button-height;
 
+  &.mat-mdc-fab {
+    border-radius: 50%;
+  }
+
+  &:not(.mat-mdc-fab) {
+    border-radius: 4px;
+    border-width: 1px;
+  }
+
+  &.mdc-button {
+    padding: 0 16px;
+    letter-spacing: 1.25px;
+  }
+
+  &.mat-mdc-button.mat-unthemed {
+    color: map.get(luxpalette.$lux-palette_primary, 500);
+  }
+
   .lux-button-content-container {
     display: flex;
     justify-content: center;
@@ -23,17 +41,17 @@ lux-button button.lux-button {
     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 {
+  &.mat-mdc-button:disabled,
+  &.mat-mdc-raised-button:disabled,
+  &.mat-mdc-raised-button:disabled:not([class*="mat-elevation-z"]),
+  &.mat-mdc-unelevated-button:disabled,
+  &.mat-mdc-outlined-button:disabled,
+  &.mat-mdc-fab:disabled {
     color: luxcommon.$dark-disabled-text;
     @include luxelevations.lux-elevation-z0;
   }
 
-  &.mat-raised-button:not([class*="mat-elevation-z"]) {
+  &.mat-mdc-raised-button:not([class*="mat-elevation-z"]) {
     @include luxelevations.lux-elevation-z2;
   }
 
@@ -43,13 +61,6 @@ lux-button button.lux-button {
 
     @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;
     }
@@ -94,18 +105,40 @@ lux-button button.lux-button {
 /*
  * 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) {
+lux-button {
   button:not([disabled]) {
-    .mat-button-focus-overlay {
-      display: none;
+    .mat-mdc-button-persistent-ripple::before {
+      background-color: transparent;
+    }
+
+    &.mat-mdc-fab:active,
+    &.mat-mdc-fab:focus {
+      box-shadow: none;
+    }
+
+    &.lux-button-rounded.mat-accent.lux-fab-rounded-default {
+      background-color: white;
+    }
+
+    &.lux-button-rounded.mat-primary:not(.lux-stroked) {
+      color: white;
+    }
+
+    &.lux-button-rounded.mat-warn {
+      color: white;
+    }
+
+    &.lux-button-rounded.lux-stroked.mat-accent.lux-fab-stroked-default {
+      background-color: white;
+      border-color: rgba(0, 0, 0, 0.2);
     }
 
     &:focus-visible {
       @include luxfocus.lux-button-focus;
     }
 
-    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button),
-    &.mat-stroked-button {
+    &:not(.mat-mdc-fab):not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button),
+    &.mat-mdc-outlined-button {
       &:hover {
         background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%);
 
@@ -121,9 +154,9 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
       }
     }
 
-    &.mat-fab:hover,
-    &.mat-raised-button:hover,
-    &.mat-flat-button:hover {
+    &.mat-mdc-fab:hover,
+    &.mat-mdc-raised-button:hover,
+    &.mat-mdc-unelevated-button:hover {
       background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
 
       &.mat-accent {
@@ -138,13 +171,13 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
         background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 10%) !important;
       }
     }
-    &.mat-fab.lux-button-rounded.lux-stroked:active {
+    &.mat-mdc-fab.lux-button-rounded.lux-stroked:active {
       box-shadow: unset;
     }
 
-    &.mat-fab:focus-visible:not(:hover),
-    &.mat-raised-button:focus-visible:not(:hover),
-    &.mat-flat-button:focus-visible:not(:hover) {
+    &.mat-mdc-fab:focus-visible:not(:hover),
+    &.mat-mdc-raised-button:focus-visible:not(:hover),
+    &.mat-mdc-unelevated-button:focus-visible:not(:hover) {
       background-color: white !important;
 
       &.mat-accent {
@@ -160,4 +193,8 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
       }
     }
   }
+
+  button.mat-mdc-fab span.mdc-button__label {
+    display: inline-flex;
+  }
 }

package/src/base/components/_luxCard.scss

@@ -4,6 +4,10 @@
 @use "../luxelevations";
 @use "sass:map";
 
+.mat-mdc-card-outlined {
+  --mdc-outlined-card-container-shape: #{luxcommon.$app-border-radius};
+}
+
 lux-card {
   // Falls die lux-card in einem lux-grid verwendet wird und alle Cards einer Reihe dieselbe Höhe erhalten sollen
   // müssen mat-card und mat-card-content entsprechend angepasst werden.
@@ -16,8 +20,9 @@ lux-card {
   }
 
   // Umstylen der Mat-Card
-  .mat-card.lux-card {
+  .mat-mdc-card.lux-card {
     border: 1px solid luxcommon.$app-border-color;
+    border-radius: luxcommon.$app-border-radius;
     background-color: #fff;
     display: flex;
     box-sizing: border-box;
@@ -25,7 +30,8 @@ lux-card {
     &:not([class*="mat-elevation-z"]) {
       @include luxelevations.lux-elevation-z0;
     }
-    .mat-card-content {
+    .mat-mdc-card-content {
+      padding: 16px 0 0 0;
       font-size: 1rem;
     }
   }
@@ -97,10 +103,17 @@ lux-card {
     background: luxcommon.$app-data-bg;
   }
 
-  mat-card-actions.lux-card-actions {
-    margin-right: 0;
-    margin-left: 0;
-    padding: luxcommon.$outline-width 0 0 0;
+  mat-card-actions {
+    &.mat-mdc-card-actions {
+      justify-content: flex-end;
+      min-height: 36px;
+    }
+
+    &.lux-card-actions {
+      margin-right: 0;
+      margin-left: 0;
+      padding: luxcommon.$outline-width 0 0 0;
+    }
   }
 
   /*
@@ -116,6 +129,7 @@ lux-card {
   // HOVER / FOCUS
 
   mat-card {
+    padding: 16px;
     &[class~="lux-cursor"]:hover {
       background-image: luxcommon.$app-gradient-reverse;
       background-color: #ffffff;

package/src/base/components/_luxDialog.scss

@@ -5,6 +5,10 @@
 @use "../luxelevations";
 @use "../luxbreakpoints";
 
+.cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-container {
+  border-radius: luxcommon.$app-border-radius;
+}
+
 lux-dialog-preset {
   height: 100%;
 }
@@ -19,15 +23,21 @@ lux-dialog-action {
 lux-dialog-structure {
   display: flex;
   min-height: 100%;
+
   .lux-dialog {
     // Das Element kann fokussiert werden, das muss aber nicht zwingend mit der Outline gezeigt werden
     outline-width: 0;
+    padding: 24px;
 
-    .lux-dialog-title.mat-dialog-title {
+    .lux-dialog-title.mat-mdc-dialog-title {
+      display: flex;
+      padding-left: 0;
+      padding-right: 0;
       color: luxcommon.$dark-primary-text;
       font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
     }
-    .mat-dialog-container {
+
+    .mat-mdc-dialog-container {
       @include luxelevations.lux-elevation-z24;
       border: 1px solid luxcommon.$dark-disabled-text;
     }
@@ -38,12 +48,17 @@ lux-dialog-structure {
       margin: 0;
       padding: 0;
       max-height: 100%;
+      font-family: luxcommon.$app-font-family;
+      letter-spacing: normal;
+      color: luxcommon.$dark-primary-text;
     }
 
     // Leichten Abstand zum Content setzen
     .lux-dialog-actions {
       margin: 20px 0 0 0;
+      justify-content: center;
     }
+
     .lux-icon-close {
       margin: -15px -15px 0 0;
       width: 24px;
@@ -53,11 +68,11 @@ lux-dialog-structure {
   }
 
   @include luxbreakpoints.lt-md {
-    .mat-dialog-container {
+    .mat-mdc-dialog-container {
       padding: 8px;
     }
 
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
       margin-bottom: 8px;
     }
 
@@ -65,6 +80,7 @@ lux-dialog-structure {
       .lux-dialog-actions {
         margin: 8px 0 0 0;
       }
+
       .lux-icon-close {
         margin: -5px -5px 0 0;
       }
@@ -78,11 +94,14 @@ lux-dialog-structure {
   .lux-icon-close {
     &:hover {
       background-color: #fff !important;
+
       mat-icon.mat-icon-no-color {
         color: luxcommon.$lux-hover-color;
       }
+
       cursor: pointer;
     }
+
     &:focus-visible {
       @include luxfocus.focus-dark-mixin;
       border-radius: 4px;

package/src/base/components/_luxFilter.scss

@@ -5,6 +5,11 @@
 @use "../luxelevations";
 
 lux-filter-form {
+  lux-menu div.lux-menu-custom-trigger {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
   .no-filter-active {
     padding: 8px 25px;
   }
@@ -13,6 +18,21 @@ lux-filter-form {
     padding: 8px 12px;
   }
 
+  // Filter-Chips anpassen
+  mat-chip-row.mat-mdc-standard-chip {
+    height: 24px;
+
+    span.mat-mdc-chip-action {
+      padding-left: 6px !important;
+    }
+
+    lux-icon {
+      margin: 0 !important;
+      padding-left: 4px !important;
+      padding-right: 4px !important;
+    }
+  }
+
   .filter-item {
     .mat-standard-chip {
       min-height: 24px;
@@ -111,8 +131,8 @@ lux-filter-save-dialog {
 lux-filter-load-dialog {
   .filter-content {
     button,
-    button.lux-button.mat-button,
-    button.lux-button.mat-raised-button {
+    button.lux-button.mat-mdc-button,
+    button.lux-button.mat-mdc-raised-button {
       height: 25px;
       line-height: 25px;
     }

package/src/base/components/_luxFormControlWrapper.scss

@@ -164,12 +164,15 @@ lux-form-control-wrapper {
             box-sizing: border-box;
           }
         }
-        .mat-error {
+        .mat-mdc-form-field-error {
           background-color: $light-red;
           border-radius: 4px;
           padding-right: 2px;
           color: map-get(luxpalette.$lux-palette_warn, 900) !important;
-          box-shadow: -18px 0px 0 0 $light-red, -18px -1px 0 0 $light-red, 0 -1px 0 0 $light-red;
+          box-shadow:
+            -18px 0px 0 0 $light-red,
+            -18px -1px 0 0 $light-red,
+            0 -1px 0 0 $light-red;
         }
       }
     }