@ihk-gfi/lux-components-theme 16.3.0 → 18.1.0

package/src/base/components/_luxList.scss

@@ -20,7 +20,7 @@ lux-list {
     color: map.get(luxcommon.$componentBgColors, "gray");
     padding: 0 8px;
   }
-  .mat-card:not([class*="mat-elevation-z"]) {
+  .mat-mdc-card:not([class*="mat-elevation-z"]) {
     @include luxelevations.lux-elevation-z0;
   }
 
@@ -28,7 +28,7 @@ lux-list {
     margin-bottom: 4px;
   }
 
-  .mat-card-content.menu-item-content {
+  .mat-mdc-card-content.menu-item-content {
     margin-bottom: 0;
   }
 
@@ -75,7 +75,7 @@ lux-list {
 
     lux-card {
       &.lux-list-item-selected {
-        mat-card.mat-card.lux-card {
+        mat-card.mat-mdc-card.lux-card {
           @include luxfocus.lux-selected-mixin-ac;
         }
       }

package/src/base/components/_luxMasterDetailAc.scss

@@ -106,7 +106,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
     h2 {
       font-size: 1rem;
     }
-    mat-card-subtitle.mat-card-subtitle {
+    mat-card-subtitle.mat-mdc-card-subtitle {
       font-size: 0.875rem;
     }
     .lux-master-header-content-container-ac {
@@ -118,14 +118,14 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
   lux-filter-form .lux-filter-card,
   .detail-header-container .lux-detail-header-ac,
   .lux-master-view-ac lux-list-item {
-    mat-card.mat-card {
+    mat-card.mat-mdc-card {
       padding: 12px;
     }
     mat-card-title,
     h2 {
       font-size: 1rem;
     }
-    mat-card-subtitle.mat-card-subtitle {
+    mat-card-subtitle.mat-mdc-card-subtitle {
       font-size: 0.875rem;
     }
   }
@@ -157,7 +157,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
       * Die List-Items basieren auf einer Card, für die Masterliste werden hier die Schriftgrößen und der White-Space verkleinert
       */
 
-      mat-card.mat-card {
+      mat-card.mat-mdc-card {
         margin: 0px;
 
         lux-list-item-content :last-child {
@@ -214,7 +214,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
     }
 
     .lux-detail-header-ac {
-      mat-card.mat-card.lux-card {
+      mat-card.mat-mdc-card.lux-card {
         border: none;
       }
     }
@@ -228,7 +228,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
       border: none;
       background-color: unset;
       .lux-detail-header-ac {
-        mat-card.mat-card.lux-card {
+        mat-card.mat-mdc-card.lux-card {
           border: 2px solid luxpalette.$lux-primary-color;
         }
       }

package/src/base/components/_luxMenu.scss

@@ -3,6 +3,10 @@
 @use "../luxpalette";
 @use "../luxfocus";
 
+.mat-mdc-menu-panel {
+  --mat-menu-container-shape: #{luxcommon.$app-border-radius};
+}
+
 lux-menu {
   display: block;
   width: 100%;
@@ -10,7 +14,7 @@ lux-menu {
   .lux-menu-extended,
   .lux-menu-trigger {
     > lux-button {
-      button {
+      button.mat-mdc-button {
         padding-left: 8px;
         padding-right: 8px;
         min-width: 36px;
@@ -29,6 +33,7 @@ lux-menu {
   > lux-button {
     margin-right: 8px;
     &.lux-menu-item .lux-button-label {
+      white-space: nowrap;
       font-weight: 400;
       letter-spacing: 1px;
       font-family: luxcommon.$app-font-family;
@@ -46,7 +51,8 @@ lux-menu {
 }
 
 .lux-menu-trigger-default {
-  button.mat-button {
+  button.mat-mdc-button {
+    white-space: nowrap;
     color: map.get(luxpalette.$lux-palette_primary, 500);
   }
 }
@@ -56,30 +62,36 @@ lux-menu {
   border: 2px solid luxpalette.$lux-primary-color;
   box-shadow: none !important;
 
+  .mat-mdc-menu-item,
+  .mat-mdc-menu-item:has(.material-icons, mat-icon, [matButtonIcon]) {
+    padding: 0 16px;
+  }
+
+  .mat-mdc-menu-item-text {
+    display: flex;
+  }
+
   .lux-menu-item {
     font-size: 1rem;
     display: block;
     color: luxpalette.$lux-primary-color;
     margin-top: luxcommon.$outline-width;
     margin-bottom: luxcommon.$outline-width;
+    hyphens: auto;
+    word-break: break-all;
 
     .mat-icon-no-color {
       color: luxpalette.$lux-primary-color;
     }
 
-    &.with-badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-wrap: nowrap;
-      width: 100%;
-      max-width: 100%;
+    .lux-button-label {
+      hyphens: auto;
+      word-break: break-word;
     }
-    .lux-button-label.with-badge {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .lux-button-badge-container {
+      min-width: 38px;
+      vertical-align: middle;
+      align-self: center;
     }
     .lux-button-badge {
       color: #fff;
@@ -87,6 +99,7 @@ lux-menu {
       padding: 1px 4px;
       font-size: 11px;
       line-height: normal;
+      max-height: 16px;
       min-width: 15px;
       max-width: 38px;
       display: inline-block;
@@ -98,6 +111,7 @@ lux-menu {
     }
   }
   .lux-menu-item-icon {
+    align-self: center;
     vertical-align: middle;
     mat-icon {
       margin: 0;

package/src/base/components/_luxMessagebox.scss

@@ -31,32 +31,19 @@ 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.mat-fab.lux-button-rounded.lux-icon-button:not([disabled]) {
+        & button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
           color: luxpalette.$lux-primary-color;
-          &:hover {
-            color: #fff;
-          }
-        }
-      }
-
-      &:not(.lux-bg-color-white) {
-        & button:not([disabled]):hover {
-          .mat-icon-no-color {
-            color: #fff;
-          }
         }
       }
 
       & lux-button {
-        button.mat-fab.lux-icon-button.lux-button-rounded:not([class*="mat-elevation-z"]) {
+        button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
           color: #fff;
           background-color: transparent;
-          height: 36px;
-          width: 36px;
           @include luxelevations.lux-elevation-z0();
         }
-        .mat-button-ripple,
-        .mat-button-focus-overlay {
+
+        .mat-mdc-button-ripple {
           display: none;
         }
       }
@@ -91,20 +78,27 @@ lux-message-box {
       @include luxfocus.focus-dark-mixin;
     }
 
+    .mat-mdc-fab.mat-unthemed,
+    .mat-mdc-mini-fab.mat-unthemed {
+      background-color: transparent;
+    }
+
     & .lux-message-container.lux-bg-color-white {
       & .lux-message-text:focus-visible {
         @include luxfocus.focus-dark-mixin;
         border-radius: 4px;
       }
 
-      & button:not([disabled]):focus-visible {
-        @include luxfocus.focus-dark-mixin;
-        background-color: transparent !important;
-      }
+      & lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default {
+        &:hover {
+          color: #ffffff;
+          background-color: luxpalette.$lux-primary-color !important;
+        }
 
-      & button:not([disabled]):hover {
-        @include luxfocus.lux-hovered-mixin;
-        border-radius: 50%;
+        &:focus-visible {
+          @include luxfocus.focus-dark-mixin;
+          background-color: transparent !important;
+        }
       }
     }
 
@@ -114,16 +108,17 @@ lux-message-box {
         border-radius: 4px;
       }
 
-      & button:not([disabled]):focus-visible {
-        @include luxfocus.focus-bright-mixin;
-        background-color: transparent !important;
-      }
+      & lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default {
+        &:hover {
+          color: white;
+          background-color: rgba(1, 1, 1, 0.2) !important;
+        }
 
-      & button:not([disabled]):hover {
-        @include luxfocus.lux-hovered-mixin;
-        border-radius: 50%;
-        color: luxpalette.$lux-primary-color;
-        background-color: rgba(1, 1, 1, 0.2) !important;
+        &:focus-visible {
+          @include luxfocus.focus-bright-mixin;
+          color: white;
+          background-color: transparent !important;
+        }
       }
     }
   }

package/src/base/components/_luxProgressBar.scss

@@ -0,0 +1,5 @@
+lux-progress {
+  .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
+    border-color: unset;
+  }
+}

package/src/base/components/_luxProgressSpinner.scss

@@ -0,0 +1,13 @@
+@use "../luxcommon";
+
+@each $colorName, $colorNameHex in luxcommon.$componentBgColors {
+  .mat-mdc-progress-spinner.lux-color-#{"" + $colorName + ""} .mdc-circular-progress__determinate-circle {
+    stroke: $colorNameHex;
+  }
+}
+
+@each $colorName, $colorNameHex in luxcommon.$componentBgColors {
+  .mat-mdc-progress-spinner.lux-color-#{"" + $colorName + ""} .mdc-circular-progress__indeterminate-circle-graphic {
+    stroke: $colorNameHex;
+  }
+}

package/src/base/components/_luxSnackbar.scss

@@ -3,17 +3,26 @@
 @use "../luxelevations";
 
 .cdk-overlay-container {
-  .mat-snack-bar-container.lux-snackbar {
+  .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
+    min-width: unset;
+    border-radius: 4px;
+  }
+
+  .mat-mdc-snack-bar-container.lux-snackbar {
     @include luxelevations.lux-elevation-z6();
 
     position: relative;
     margin: 0 !important;
-    min-width: unset !important;
+
     // Die Snackbar wird durch die App umpositioniert, bevor sie sichtbar geschaltet wird.
     // Würde man die Snackbar nicht verstecken, würde sie von der initialen Position zur neuen
     // springen.
     visibility: hidden;
 
+    .mat-mdc-snack-bar-label {
+      visibility: hidden;
+    }
+
     @each $colorName, $colorNameHex in luxcommon.$colorsForDarkBg {
       .lux-snackbar-content .lux-bg-color-#{"" + $colorName + ""} {
         color: $colorNameHex;
@@ -25,13 +34,8 @@
       width: 2em;
       height: 2em;
     }
-
-    .snackbar-action {
-      .mat-button-focus-overlay {
-        display: none;
-      }
-    }
   }
+
   .mat-snack-bar-handset snack-bar-container.mat-snack-bar-container.lux-snackbar {
     left: 8px;
     width: auto !important;

package/src/base/components/_luxStepper.scss

@@ -243,6 +243,7 @@ lux-stepper {
   // HOVER / FOCUS / SELECTED
 
   mat-step-header {
+    --mat-stepper-header-hover-state-layer-shape: #{luxcommon.$app-border-radius};
     &:hover {
       background-color: transparent !important;
       border-radius: 0;

package/src/base/components/_luxTable.scss

@@ -8,9 +8,16 @@ lux-table {
   display: flex;
   height: 100%;
 
-  table.mat-table {
+  th.mat-mdc-header-cell:first-of-type,
+  td.mat-mdc-cell:first-of-type,
+  td.mat-mdc-footer-cell:first-of-type {
+    padding-left: 24px;
+  }
+
+  table.mat-mdc-table {
     font-family: luxcommon.$app-font-family;
   }
+
   .lux-row-selected {
     background-color: luxcommon.$lux-selected-bg-color;
   }
@@ -37,19 +44,22 @@ lux-table {
     th {
       padding: 0.5em 1em;
     }
+
     th {
       padding-top: 1em;
     }
-    tr.mat-header-row {
+
+    tr.mat-mdc-header-row {
       height: auto;
     }
 
-    th.mat-header-cell,
-    td.mat-cell {
+    th.mat-mdc-header-cell,
+    td.mat-mdc-cell {
       border: none;
       font-size: 1rem;
     }
-    td.mat-footer-cell {
+
+    td.mat-mdc-footer-cell {
       border: none;
       border-top: 1px solid luxcommon.$app-border-color;
       font-size: 0.9375rem;
@@ -67,28 +77,36 @@ lux-table {
       overflow: auto;
       height: 100%;
       width: 100%;
-      border: 1px solid luxcommon.$app-border-color;
       border-radius: 4px;
 
+      &:not(.lux-hide-borders) {
+        border: 1px solid luxcommon.$app-border-color;
+      }
+
       table {
         width: 100%;
         border-spacing: 0 !important;
+
         td .lux-form-control-wrapper {
           margin: 0;
+
           .lux-form-control-container-authentic {
             padding: 0.25em 0.5em; // bei den Form-Controls in einer Tabellen-Zelle wird die Höhe reduziert
+
             &.lux-no-input-row {
               padding: 0em;
             }
           }
         }
+
         tbody tr:last-of-type td {
           border-bottom: none;
         }
 
-        .mat-footer-row > td {
+        .mat-mdc-footer-row > td {
           border-top: 1px solid rgba(0, 0, 0, 0.12);
         }
+
         .lux-header-title,
         .lux-moved-header-title {
           font-size: 0.75rem;
@@ -106,10 +124,11 @@ lux-table {
         font-weight: 700;
       }
 
-      .mat-row:nth-child(odd) {
-        background-color: map.get(luxpalette.$lux-palette_primary, 50);
+      .mat-mdc-row:nth-child(odd) {
+        background-color: #f0f3f6;
       }
-      .mat-row:nth-child(even) {
+
+      .mat-mdc-row:nth-child(even) {
         background-color: #ffffff;
       }
 
@@ -126,10 +145,16 @@ lux-table {
         display: none;
       }
     }
-    .mat-paginator,
-    .mat-paginator-page-size .mat-select-trigger {
+
+    .mat-mdc-paginator,
+    .mat-mdc-paginator-page-size .mat-mdc-select-trigger {
       font-size: 0.75rem;
+
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) {
+        background-color: #ffffff;
+      }
     }
+
     .lux-table-overlay {
       -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
@@ -152,12 +177,13 @@ lux-table {
     .lux-hide {
       display: none !important;
     }
+
     .lux-multiselect-th,
     .lux-multiselect-td,
     .lux-multiselect-tf {
-      max-width: 70px;
-      min-width: 70px;
-      width: 70px;
+      max-width: 110px;
+      min-width: 110px;
+      width: 110px;
     }
 
     .lux-multiselect-th {
@@ -188,16 +214,7 @@ lux-table {
       height: 0;
     }
 
-    .reset-icon {
-      display: inline-block;
-
-      &:hover {
-        border-radius: 50%;
-        background-color: luxcommon.$lux-hover-color;
-        cursor: pointer;
-      }
-    }
-    lux-checkbox-ac .mat-checkbox-inner-container {
+    lux-checkbox-ac .mat-mdc-checkbox-inner-container {
       margin: 0px;
     }
 
@@ -212,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

@@ -11,18 +11,29 @@ lux-tabs {
     font-size: 1rem;
   }
 
+  .mat-mdc-tab-label-container {
+    border: none;
+  }
+
+  .mdc-tab {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   mat-tab-group div[role="tab"] {
     font-size: 0.875rem;
     font-weight: 600;
+    letter-spacing: normal;
     min-height: unset !important;
-    &:not(.mat-tab-disabled) {
+    height: unset !important;
+    &:not(.mat-tab-disabled) .mdc-tab__text-label {
       color: map.get(luxpalette.$lux-palette_primary, 500);
       opacity: 1;
     }
   }
 
-  mat-tab-group.lux-tabs-no-divider mat-tab-header {
-    border-bottom: none;
+  mat-tab-group.lux-tabs-show-divider mat-tab-header {
+    border-bottom: 1px solid luxcommon.$app-border-color;
   }
 
   .lux-tab-title {
@@ -43,10 +54,6 @@ lux-tabs {
     padding-top: 4px;
   }
 
-  .lux-tabs-no-anim .mat-ink-bar {
-    transition: none !important;
-  }
-
   .lux-notification-new {
     background-color: map.get(luxcommon.$componentBgColors, "green");
   }
@@ -64,12 +71,13 @@ 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
-  .mat-tab-label {
-    padding-left: 40px;
-    padding-right: 40px;
+  .mdc-tab__text-label {
+    padding-left: 48px;
+    padding-right: 48px;
     height: auto;
     position: relative;
 
@@ -88,7 +96,7 @@ lux-tabs {
     }
   }
 
-  .mat-tab-label.lux-tab-with-icon {
+  .mat-mdc-tab-label.lux-tab-with-icon {
     @include luxbreakpoints.sm {
       min-width: 125px;
       width: 125px;
@@ -103,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;
     }
   }
@@ -112,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,
@@ -181,20 +194,29 @@ lux-tabs {
 /** ########## HOVER / FOCUS ########## **/
 lux-tabs,
 mat-card lux-tabs {
-  mat-tab-group div[role="tab"]:not(.mat-tab-disabled) {
+  mat-tab-group div[role="tab"]:not(.mat-mdc-tab-disabled) {
     &:focus-visible {
       @include luxfocus.focus-dark-mixin-inline;
-      border-radius: 4px;
+      border-radius: luxcommon.$app-border-radius;
     }
 
-    &:hover:not(.mat-tab-label-active) {
-      color: luxcommon.$lux-hover-color;
+    &:hover {
+      background-color: transparent;
+
+      &:not(.mdc-tab--active) .lux-tab-title,
+      &:not(.mdc-tab--active) lux-icon {
+        color: luxcommon.$lux-hover-color;
+      }
+    }
+
+    &:hover .mdc-tab__ripple::before {
+      background-color: transparent;
     }
   }
 
-  mat-ink-bar.mat-ink-bar {
+  .mdc-tab-indicator__content {
     background-color: map.get(luxpalette.$lux-palette_primary, 500) !important;
     height: 4px;
-    border-radius: 4px;
+    border-radius: luxcommon.$app-border-radius;
   }
 }