@ihk-gfi/lux-components-theme 11.11.0 → 13.0.0

package/src/base/_luxcomponents.scss

@@ -24,6 +24,7 @@ lux-app-footer {
 lux-app-header {
   .lux-app-header {
     background-color: $app-header-bg;
+    @include lux-elevation-z6();
 
     .lux-show-border {
       border-left: 1px solid $light-dividers;
@@ -36,7 +37,6 @@ lux-app-header {
     div.lux-header-action {
       lux-button {
         button {
-
           &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
             color: map-get(map-get($lux-palette-primary, contrast), 500);
           }
@@ -56,6 +56,10 @@ lux-app-header {
           &.mat-primary:not(.mat-button-disabled) {
             color: map-get($lux-palette_primary, A100);
           }
+
+          &.lux-button-rounded {
+            @include lux-elevation-z0;
+          }
         }
       }
     }
@@ -110,19 +114,29 @@ lux-button button.lux-button {
 
   &.mat-button.mat-button-disabled,
   &.mat-raised-button.mat-button-disabled,
+  &.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]),
   &.mat-fab.mat-button-disabled {
     color: $dark-disabled-text;
+    @include lux-elevation-z0;
+  }
+
+  &.mat-raised-button:not([class*=mat-elevation-z]) {
+    @include lux-elevation-z2;
   }
 
   &.lux-icon-button {
-    height: $button-height;;
-    padding-top: 4px;
-    padding-bottom: 2px;
+    height: $button-height;
   }
 
   &.lux-button-rounded {
     height: $button-fav-height;
     width: $button-fav-height;
+    
+    &.lux-icon-button {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+    @include lux-elevation-z2;
   }
 }
 
@@ -151,6 +165,15 @@ lux-card {
     border-color: $app-data-bg;
   }
 
+  .lux-card-content-container {
+    overflow-x: hidden;
+    padding: $form-control-buffer;
+
+    > * {
+      margin-bottom: 0;
+    }
+  }
+
   .lux-highlight {
     color: $dark-primary-text;
   }
@@ -162,12 +185,31 @@ lux-card {
   .lux-card-content-expanded {
     background: $app-data-bg;
   }
+
+  .mat-card:not([class*="mat-elevation-z"]) {
+    @include lux-elevation-z1;
+  }
 }
 
 /**
  * Theming für LUX-Chips
  */
 lux-chips {
+  min-height: calc(#{$form-control-complete-height} + 20px);
+  margin-bottom: 20px;
+
+  .lux-chips-autocomplete-icon {
+    color: var(--lux-theme-primary-500);
+    font-size: 24px;
+    padding-right: 4px;
+    cursor: pointer;
+
+    &.lux-disabled {
+      color: var(--lux-theme-dark-disabled-text);
+      cursor: default;
+    }
+  }
+
   .lux-chips {
     mat-chip {
       // Löschicon (luxSelected=true)
@@ -195,6 +237,23 @@ lux-chips {
         }
       }
     }
+    mat-chip-list {
+      & div.mat-chip-list-wrapper {
+        margin: 0px 0px 0px -4px;
+      }
+    }
+  }
+}
+
+.lux-chips-autocomplete-panel {
+  padding: $outline-width;
+  margin-top: -20px;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 4px;
+
+  mat-option:not(:last-of-type) {
+    margin-bottom: $outline-width;
   }
 }
 
@@ -228,6 +287,18 @@ lux-datetimepicker {
   }
 }
 
+.lux-datetime-overlay-content {
+  mat-card.mat-card {
+    @include lux-elevation-z4();
+
+    lux-input div.lux-form-control {
+      min-height: unset;
+      margin: $form-control-buffer;
+      text-align: center;
+    }
+  }
+}
+
 /*
  * Theming for LUX-Dialog
  */
@@ -235,9 +306,11 @@ lux-datetimepicker {
   .lux-dialog-title {
     color: $dark-primary-text;
   }
+  .mat-dialog-container {
+    @include lux-elevation-z24;
+  }
 }
 
-
 /*
  * Theming for LUX-Divider
  */
@@ -251,6 +324,8 @@ lux-divider {
  * Theming for LUX-File-List
  */
 lux-file-list .lux-file-list {
+  margin: $form-control-margin;
+
   .lux-file-list-entry-label, .lux-file-list-entry-icon {
     color: $dark-secondary-text;
   }
@@ -281,6 +356,16 @@ lux-file-list .lux-file-list {
       }
     }
   }
+  
+  &.lux-file-list-error {
+    mat-card-title .lux-card-title-container {
+      color: $lux-warn-color;
+    }
+  }
+
+  mat-card {
+    margin: 0 !important;
+  }
 }
 
 /*
@@ -300,21 +385,267 @@ lux-file-progress {
   }
 }
 
+/*
+* Theming für Lux-File-Upload
+*/
+.lux-file-upload-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  .lux-file-upload-drop-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 1 auto;
+
+    border: 1px solid var(--lux-theme-primary-500);
+    border-radius: 4px;
+    color: var(--lux-theme-primary-500);
+
+    .lux-file-upload-drop-label-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      flex: 1 1 auto;
+      gap: 12px;
+
+      padding: 24px 48px;
+    }
+
+    .lux-file-upload-drop-container-progress, .lux-file-upload-drop-container-no-progress{
+      height: 8px;
+    }
+
+    &.lux-file-upload-drop-container-disabled {
+      color: var(--lux-theme-dark-disabled-text);
+      background-color: var(--lux-theme-app-data-bg);
+      border: 1px solid var(--lux-theme-dark-disabled-text);
+
+      .lux-file-upload-link {
+        cursor: default;
+      }
+    }
+
+    &.lux-file-upload-drag-active {
+      background-color: var(--lux-theme-selected-bg-color);
+    }
+
+    .lux-file-upload-icon {
+      display: flex;
+      flex: 0 0 auto;
+    }
+
+    .lux-file-upload-label-container {
+      display: flex;
+      flex: 1 1 auto;
+    }
+
+    .lux-file-upload-link {
+      cursor: pointer;
+      text-decoration: underline;
+
+      white-space: nowrap;
+    }
+  }
+
+  .lux-file-upload-error-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: 12px;
+
+    border: 1px solid var(--lux-theme-warn-500);
+    border-radius: 4px;
+    color: var(--lux-theme-warn-500);
+    padding: 18px 15px 15px 26px;
+    margin-bottom: 12px;
+
+    .lux-file-upload-error-icon {
+      display: flex;
+      flex: 0 0 30px;
+    }
+
+    .lux-file-upload-error-message {
+      display: flex;
+      flex: 1 1 auto;
+    }
+
+    .lux-file-upload-error-button {
+      display: flex;
+      flex: 0 0 auto;
+
+      button {
+        padding: 0;
+        margin: 0;
+        border-radius: 8px;
+        min-width: 40px;
+        min-height: 30px;
+
+        i {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  .lux-file-upload-hint-container {
+    margin-top: 4px;
+    margin-bottom: 12px;
+  }
+
+  .lux-file-upload-no-hint-container {
+    min-height: 12px;
+  }
+
+  .lux-file-upload-view-item-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: 12px;
+
+    background-color: var(--lux-theme-selected-bg-color);
+    border: 1px solid var(--lux-theme-accent-500);
+    border-radius: 4px;
+    color: var(--lux-theme-primary-500);
+    padding: 18px 15px 18px 26px;
+    margin-bottom: 12px;
+
+    &.lux-file-upload-view-item-disabled {
+      color: var(--lux-theme-dark-disabled-text);
+      background-color: var(--lux-theme-app-data-bg);
+      border: 1px solid var(--lux-theme-dark-disabled-text);
+    }
+
+    .lux-file-upload-view-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      flex: 1 1 auto;
+      gap: 12px;
+
+      .lux-file-upload-view-item-icon {
+        display: flex;
+        flex: 0 0 30px;
+      }
+
+      .lux-file-upload-view-item-label-container {
+        display: flex;
+        flex: 1 1 auto;
+      }
+
+      lux-button.lux-file-upload-view-item-delete-button {
+        display: flex;
+        align-items: center;
+
+        button {
+          padding: 0;
+          margin: 0;
+          border-radius: 8px;
+          min-width: 40px;
+          min-height: 30px;
+
+          i {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  /* Die eigentliche File-Inputs und den Download-Anchor blenden wir aus */
+  .lux-file-upload-input {
+    display: none;
+  }
+}
+
+.file-upload-dialog-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .file-upload-dialog-close-button-container {
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: flex-end;
+    align-items: center;
+
+    .file-upload-dialog-close-button {
+      display: flex;
+      flex: 0 0 auto;
+
+      button {
+        padding: 0;
+        margin: 0;
+        border-radius: 8px;
+        min-width: 40px;
+        min-height: 40px;
+
+        i,
+        mat-icon {
+          font-size: 30px !important;
+        }
+      }
+    }
+  }
+
+  .file-upload-dialog-title {
+    padding-right: 50px;
+  }
+
+  .file-upload-dialog-content-text {
+    padding-bottom: 30px;
+  }
+}
+
+.file-dialog {
+  div.mat-dialog-title.lux-dialog-title {
+    font-size: 28px;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  p {
+    margin: 0;
+    padding-top: 12px;
+    padding-bottom: 30px;
+  }
+}
+
+
 /*
  * Theming for LUX-Form-Controls
  */
 .lux-form-control {
+  margin: $form-control-margin;
+  min-height: $form-control-complete-height;
+  
+  .lux-label,
+  mat-hint,
+  mat-error {
+    color: $dark-secondary-text;
+  }
+
   .lux-form-control-container {
     padding: 6px 0 0 0;
 
+    input, textarea {
+      &:required {
+        @include lux-elevation-z0;
+      }
+    }
+
     &:after {
       border-bottom: 1px solid $form-border-color;
     }
   }
-
-  .lux-label, mat-hint, mat-error {
-    color: $dark-secondary-text;
-  }
 }
 
 .lux-form-control-error {
@@ -325,7 +656,10 @@ lux-file-progress {
   }
 
   .lux-form-control-container {
-    border-color: $lux-warn-color !important;
+    $lux-selected-border-color: $lux-warn-color !important;
+    &:after { // inaktives form-control hat auch eine rote Linie (anstatt schwarz)
+      border-bottom: 1px solid $lux-warn-color;
+    }
   }
 
   .lux-form-control-misc {
@@ -403,6 +737,18 @@ lux-lookup-combobox {
   }
 }
 
+/* 
+ * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
+ */
+.cdk-overlay-pane {
+  & > .mat-autocomplete-panel:not([class*="mat-elevation-z"]),
+  .mat-datepicker-content,
+  .mat-select-panel:not([class*="mat-elevation-z"]),
+  .mat-menu-panel {
+    @include lux-elevation-z4;
+  }
+}
+
 /*
  * Theming for LUX-Master-Detail
  */
@@ -413,6 +759,16 @@ lux-master-detail {
       color: $dark-primary-text;
     }
   }
+
+  .lux-master-container.lux-empty-elements-aligned {
+    @include lux-elevation-z1;
+  }
+
+  lux-list {
+    .mat-card:not([class*="mat-elevation-z"]) {
+      @include lux-elevation-z0;
+    }
+  }
 }
 
 /*
@@ -420,6 +776,7 @@ lux-master-detail {
  */
 lux-master-footer {
   background-color: $app-data-bg;
+  @include lux-elevation-z1;
 }
 
 /*
@@ -427,6 +784,7 @@ lux-master-footer {
  */
 lux-master-header {
   background-color: $app-data-bg;
+  @include lux-elevation-z1;
 }
 
 /*
@@ -446,7 +804,7 @@ lux-master-header {
  */
 lux-message-box {
   &.mat-elevation-z4 {
-    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    @include lux-elevation-z4();
   }
 }
 
@@ -454,11 +812,14 @@ lux-message-box {
  * Theming for LUX-Snackbar
  */
 @each $colorName, $colorNameHex in $colorsForDarkBg {
-  .lux-snackbar-content .lux-bg-color-#{'' + $colorName + ''} {
+  .lux-snackbar-content .lux-bg-color-#{"" + $colorName + ""} {
     color: $colorNameHex;
     background-color: transparent;
   }
 }
+snack-bar-container.mat-snack-bar-container {
+  @include lux-elevation-z6();
+}
 
 /*
  * Theming for LUX-Progress
@@ -471,7 +832,7 @@ lux-progress {
   }
 
   @each $colorName, $colorNameHex in $componentBgColors {
-    .lux-bg-color-#{'' + $colorName + ''} {
+    .lux-bg-color-#{"" + $colorName + ""} {
       .mat-progress-bar-primary:after,
       .mat-progress-bar-secondary:after {
         background: $colorNameHex;
@@ -480,7 +841,7 @@ lux-progress {
   }
 
   @each $colorName, $colorNameHex in $componentBgColors {
-    mat-progress-spinner.lux-bg-color-#{'' + $colorName + ''} {
+    mat-progress-spinner.lux-bg-color-#{"" + $colorName + ""} {
       circle {
         stroke: $colorNameHex;
       }
@@ -489,6 +850,11 @@ lux-progress {
 }
 
 lux-radio {
+  // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
+  .mat-radio-container {
+    border-radius: 50%;
+  }
+
   .mat-radio-checked {
     label.mat-radio-label .mat-radio-container {
       span.mat-radio-inner-circle {
@@ -554,7 +920,7 @@ lux-select {
 lux-side-nav {
   .lux-side-nav {
     background: $app-data-bg;
-    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
+    @include lux-elevation-z16();
 
     .lux-side-nav-header {
       border-bottom: 1px solid $dark-dividers;
@@ -616,27 +982,35 @@ lux-spinner {
  * Theming for LUX-Stepper
  */
 lux-stepper {
+  .mat-stepper-horizontal, .mat-stepper-vertical {
+    background-color: transparent;
+  }
 
   // luxUseCustomIcons=true
   .lux-ignore-mat-step-icons {
-
     mat-step-header {
       color: $dark-secondary-text;
-
+    
       &.lux-step-header-touched {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i, mat-icon {
+          i,
+          mat-icon {
             color: $app-data-bg;
             background-color: map-get($lux-palette_primary, 500);
           }
         }
+
+        lux-step-header {
+          color: map-get($lux-palette_primary, 500);
+        }
       }
 
       &:not(.lux-step-header-touched) {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i, mat-icon {
+          i,
+          mat-icon {
             color: $app-data-bg;
             background-color: $dark-secondary-text;
           }
@@ -647,11 +1021,10 @@ lux-stepper {
 
   // luxUseCustomIcons=false
   .mat-step-header {
-
     lux-step-header {
-      color: $dark-secondary-text;
+      color: $dark-secondary-text;;
     }
-
+    
     &.lux-step-header-touched {
       .mat-step-icon {
         color: $app-data-bg;
@@ -662,6 +1035,10 @@ lux-stepper {
         color: $app-data-bg;
         background-color: map-get($lux-palette_primary, 500);
       }
+
+      lux-step-header {
+        color: map-get($lux-palette_primary, 500);
+      }
     }
 
     &:not(.lux-step-header-touched) {
@@ -685,13 +1062,26 @@ lux-table {
   .lux-row-selected {
     background-color: $lux-selected-bg-color;
   }
+
+  table td {
+    div.lux-form-control {
+      min-height: $form-control-height-small;
+
+      .lux-form-control-label,
+      .lux-form-control-misc {
+        display: none;
+      }
+    }
+   
+  }
 }
 
 /*
  * Theming for LUX-Tabs
  */
 lux-tabs {
-  .mat-tab-nav-bar, .mat-tab-header {
+  .mat-tab-nav-bar,
+  .mat-tab-header {
     border-color: $dark-dividers;
   }
 
@@ -719,19 +1109,35 @@ lux-tile {
   .lux-highlight {
     color: map-get($lux-palette_primary, A400);
   }
+
+  .mat-card:not([class*="mat-elevation-z"]) {
+    @include lux-elevation-z2;
+  }
+
+  .lux-tile-label {
+    margin: 0;
+    display: flex;
+    flex-shrink: 1;
+    flex-grow: 0;
+    min-height: 65px;
+    max-height: 65px;
+  }
 }
 
 /*
  * Theming for LUX-Toggle
  */
 lux-toggle {
-
   .mat-slide-toggle {
     label {
       color: $dark-primary-text;
       font-family: $app-font-family;
     }
 
+    .mat-slide-toggle-thumb {
+      @include lux-elevation-z1;
+    }
+
     &.mat-checked {
       .mat-slide-toggle-bar {
         background-color: map-get($lux-palette_primary, 100);
@@ -785,6 +1191,26 @@ mat-tooltip-component .mat-tooltip {
   font-size: 14px;
 }
 
+/*
+ * Theming for LUX-Accordion
+ */
+mat-expansion-panel.mat-expansion-panel:not([class*="mat-elevation-z"]) {
+  @include lux-elevation-z2;
+}
+
+
+/*
+ * Theming for LUX-Errorpage
+ */
+ lux-error-page {
+  lux-card:not(.lux-error-page-desktop) {
+      .mat-card:not([class*="mat-elevation-z"]) {
+        @include lux-elevation-z0;
+      }
+      
+    } 
+ }
+
 /*
 * Theming für Lux-Stepper-Large
 */
@@ -836,42 +1262,62 @@ lux-stepper-large {
   font-size: 22px;
   line-height: 1.5;
 
-  &.lux-active {
-    font-weight: bold;
-  }
+  &.lux-active:not(.lux-disabled) {
+    .lux-stepper-large-nav-item-number-container {
+      color: $lux-stepper-large-nav-item-active-fc;
+      background-color: $lux-stepper-large-nav-item-active-bg;
+    }
 
-  &.lux-completed {
-    color: $lux-stepper-large-completed-fc;
+    .lux-stepper-large-nav-item-label {
+      color: #003366;
+    }
+  }
 
+  &.lux-touched:not(.lux-disabled) {
     a {
       text-decoration: underline;
     }
-  }
 
-  &.lux-disabled {
-    opacity: 0.6;
-  }
+    &.lux-completed:not(.lux-active) {
+      .lux-stepper-large-nav-item-number-container {
+        color: $lux-stepper-large-nav-item-completed-fg;
+        background-color: $lux-stepper-large-nav-item-completed-bg;
+      }
 
-  &.lux-completed .lux-stepper-large-nav-item-number-container {
-    color: $lux-stepper-large-nav-item-completed-fg;
-    background-color: $lux-stepper-large-nav-item-completed-bg;
-  }
+      a {
+        color: #2E8533;
+      }
+    }
 
-  &.lux-active .lux-stepper-large-nav-item-number-container {
-    color: $lux-stepper-large-nav-item-active-fc;
-    background-color: $lux-stepper-large-nav-item-active-bg;
+    &:not(.lux-completed):not(.lux-active) {
+      .lux-stepper-large-nav-item-number-container {
+        color: $lux-stepper-large-nav-item-completed-fg;
+        background-color: $lux-stepper-large-nav-item-completed-bg;
+      }
+    }
   }
 
-  &.lux-touched .lux-stepper-large-nav-item-number-container {
-  }
+  &:not(.lux-touched) {
+    opacity: 0.6;
+    color: #003366;
 
-  &.lux-disabled .lux-stepper-large-nav-item-number-container {
-    color: $lux-stepper-large-nav-item-disabled-fg;
-    background-color: $lux-stepper-large-nav-item-disabled-bg;
+    .lux-stepper-large-nav-item-number-container {
+      color: $lux-stepper-large-nav-item-disabled-fg;
+      background-color: $lux-stepper-large-nav-item-disabled-bg;
+    }
   }
 
-  &.lux-disabled .lux-stepper-large-nav-item-label {
-    color: $lux-stepper-large-nav-item-disabled-fg;
+  &.lux-disabled {
+    opacity: 0.6;
+
+    .lux-stepper-large-nav-item-number-container {
+      color: $lux-stepper-large-nav-item-disabled-fg;
+      background-color: $lux-stepper-large-nav-item-disabled-bg;
+    }
+
+    .lux-stepper-large-nav-item-label {
+      color: $lux-stepper-large-nav-item-disabled-fg;
+    }
   }
 
   .lux-stepper-large-nav-item-number-container {