@ihk-gfi/lux-components-theme 18.5.0 → 19.0.0

package/src/authentic/_custom.scss

@@ -83,6 +83,7 @@ lux-accordion {
     transform-origin: center;
     width: 1em;
     height: 1em;
+
     &::after {
       content: "";
       position: absolute;
@@ -113,10 +114,12 @@ lux-accordion {
   mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded:focus {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
+
     .mat-expansion-panel-header-title,
     .mat-expansion-panel-header-description {
       font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
     }
+
     .mat-expansion-panel-header-title {
       font-weight: 500;
     }
@@ -195,9 +198,6 @@ lux-accordion {
 * Theming für lux-Badge-notification
 */
 .lux-badge-notification {
-  &.mat-badge:not(.mat-badge-disabled).mat-badge-accent .mat-badge-content {
-    background-color: map.get(luxpalette.$lux-palette_accent, 500);
-  }
 
   &.mat-badge .mat-badge-content {
     font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
@@ -214,6 +214,7 @@ lux-accordion {
       background: map.get(luxcommon.$componentBgColors, "gray");
     }
   }
+
   &.mat-badge-disabled .mat-badge-content {
     color: white;
   }
@@ -233,6 +234,7 @@ example-root {
         transform-origin: center;
         width: 1rem;
         height: 1rem;
+
         &::after {
           content: "";
           position: absolute;
@@ -261,14 +263,14 @@ example-root {
 
     .example-component-list-item {
       line-height: normal;
+
       &.example-component-list-item-selected {
-        text-shadow:
-          0 0 0.65px #003366,
-          0 0 0.65px #003366;
+        text-shadow: 0 0 0.65px #003366, 0 0 0.65px #003366;
         line-height: normal;
         color: luxpalette.$lux-primary-color;
         border: none;
         background-color: #fff !important;
+
         &::after {
           content: "";
           position: absolute;
@@ -291,6 +293,7 @@ example-root {
           border: none;
         }
       }
+
       &:hover,
       &:focus-visible,
       &.example-component-list-item-selected:hover,
@@ -298,6 +301,7 @@ example-root {
         color: #fff;
         background-color: luxcommon.$lux-hover-color !important;
         border-radius: 0;
+
         &::after {
           background-color: #fff;
         }
@@ -306,294 +310,12 @@ example-root {
   }
 }
 
-/*
- * Theming for LUX-Button
- */
-lux-button button.lux-button {
-  letter-spacing: 1.25px;
-
-  //Theming für den Text-Button
-  &.mat-mdc-button:not([disabled]) {
-    &:hover {
-      color: luxcommon.$dark-secondary-text;
-      background-color: transparent !important;
-    }
-    &:focus-visible:not(:hover) {
-      background-color: transparent !important;
-      @include luxfocus.lux-button-focus;
-    }
-    &:active {
-      color: luxcommon.$dark-primary-text !important;
-    }
-
-    &.mat-primary {
-      &:hover {
-        color: map.get(luxpalette.$lux-palette-primary, 300);
-        background-color: transparent !important;
-      }
-      &:focus-visible:not(:hover) {
-        background-color: transparent !important;
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: map.get(luxpalette.$lux-palette-primary, 700) !important;
-      }
-    }
-
-    &.mat-accent {
-      &:hover {
-        color: map.get(luxpalette.$lux-palette-accent, 300) !important;
-        background-color: transparent !important;
-      }
-      &:focus-visible:not(:hover) {
-        background-color: transparent !important;
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: map.get(luxpalette.$lux-palette-accent, 700) !important;
-      }
-    }
-
-    &.mat-warn {
-      &:hover {
-        color: map.get(luxpalette.$lux-palette-warn, 300);
-        background-color: transparent !important;
-      }
-      &:focus-visible:not(:hover) {
-        color: map.get(luxpalette.$lux-palette-warn, 500);
-        background-color: transparent !important;
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: map.get(luxpalette.$lux-palette-warn, 700) !important;
-      }
-    }
-  }
-
-  //Theming für den Stroked-Button
-  &.mat-mdc-outlined-button:not([disabled]) {
-    border-color: luxcommon.$dark-secondary-text;
-
-    &:hover {
-      color: luxcommon.$dark-secondary-text;
-      background-color: transparent !important;
-      border-color: luxcommon.$dark-primary-text;
-    }
-
-    &:focus-visible:not(:hover) {
-      color: luxcommon.$dark-primary-text;
-      background-color: transparent !important;
-      border-color: luxcommon.$dark-primary-text;
-      @include luxfocus.lux-button-focus;
-    }
-    &:active {
-      color: luxcommon.$dark-primary-text;
-      background-color: transparent !important;
-    }
-    &.mat-primary {
-      border-color: map.get(luxpalette.$lux-palette-primary, 400);
-
-      &:hover {
-        color: map.get(luxpalette.$lux-palette-primary, 300);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-primary, 300);
-      }
-      &:focus-visible:not(:hover) {
-        color: map.get(luxpalette.$lux-palette-primary, 500);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-primary, 500);
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: map.get(luxpalette.$lux-palette-primary, 700);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-primary, 700);
-      }
-    }
-
-    &.mat-accent {
-      color: luxcommon.$dark-primary-text;
-      border-color: map.get(luxpalette.$lux-palette-accent, 400);
-      &:hover {
-        color: luxcommon.$dark-secondary-text !important;
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-accent, 300);
-      }
-      &:focus-visible:not(:hover) {
-        color: luxcommon.$dark-primary-text;
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-accent, 500);
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: luxcommon.$dark-primary-text !important;
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-accent, 700);
-      }
-    }
-
-    &.mat-warn {
-      border-color: map.get(luxpalette.$lux-palette-warn, 500);
-      &:hover {
-        color: map.get(luxpalette.$lux-palette-warn, 300);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-warn, 300);
-      }
-      &:focus-visible:not(:hover) {
-        color: map.get(luxpalette.$lux-palette-warn, 500);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-warn, 500);
-        @include luxfocus.lux-button-focus;
-      }
-      &:active {
-        color: map.get(luxpalette.$lux-palette-warn, 700);
-        background-color: transparent !important;
-        border-color: map.get(luxpalette.$lux-palette-warn, 700);
-      }
-    }
-  }
-
-  &.mat-mdc-button:disabled,
-  &.mat-mdc-raised-button:disabled,
-  &.mat-mdc-fab:disabled,
-  &.mat-mdc-outlined-button:disabled,
-  &.mat-mdc-unelevated-button:disabled {
-    color: luxcommon.$dark-disabled-text;
-    &.lux-stroked {
-      color: luxcommon.$dark-disabled-text;
-      border-color: luxcommon.$dark-disabled-text;
-    }
-  }
-
-  //Theming für den Raised-Button, Flat-Button, Fab(Rounded)-Button
-  &.mat-mdc-raised-button:not([disabled]),
-  &.mat-mdc-unelevated-button:not([disabled]),
-  &.mat-mdc-fab:not([disabled]) {
-    &:hover {
-      color: luxcommon.$dark-secondary-text;
-      background-color: #ffffff !important;
-      &.lux-stroked {
-        color: map.get(luxpalette.$lux-palette-primary, 300);
-        background-color: #ffffff !important;
-      }
-    }
-
-    &:focus-visible:not(:hover) {
-      color: luxcommon.$dark-primary-text;
-      background-color: #ffffff !important;
-      @include luxfocus.lux-button-focus;
-      &.lux-stroked {
-        background-color: transparent !important;
-      }
-    }
-    &:active {
-      color: luxcommon.$dark-primary-text;
-      background-color: #ffffff !important;
-      &.lux-stroked {
-        color: map.get(luxpalette.$lux-palette-primary, 700);
-        background-color: transparent !important;
-      }
-    }
-
-    &.mat-primary {
-      &:hover {
-        color: #ffffff;
-        background-color: map.get(luxpalette.$lux-palette-primary, 300) !important;
-        &.lux-stroked {
-          color: map.get(luxpalette.$lux-palette-primary, 300);
-          background-color: #ffffff !important;
-        }
-      }
-      &:focus-visible:not(:hover) {
-        color: #ffffff;
-        background-color: map.get(luxpalette.$lux-palette-primary, 500) !important;
-        @include luxfocus.lux-button-focus;
-        &.lux-stroked {
-          color: luxpalette.$lux-primary-color;
-          background-color: transparent !important;
-        }
-      }
-      &:active {
-        background-color: map.get(luxpalette.$lux-palette-primary, 700) !important;
-        &.lux-stroked {
-          color: map.get(luxpalette.$lux-palette-primary, 700);
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    &.mat-accent {
-      color: luxcommon.$dark-primary-text;
-      &.lux-fab-rounded-default:hover {
-        background-color: #ffffff !important;
-        &.lux-stroked {
-          color: luxcommon.$dark-secondary-text;
-          background-color: #ffffff !important;
-        }
-      }
-      &:not(.lux-fab-rounded-default):hover {
-        background-color: map.get(luxpalette.$lux-palette-accent, 300) !important;
-        &.lux-stroked {
-          color: luxcommon.$dark-secondary-text;
-          background-color: transparent !important;
-        }
-      }
-      &:focus-visible:not(:hover) {
-        background-color: map.get(luxpalette.$lux-palette-accent, 500) !important;
-        @include luxfocus.lux-button-focus;
-        &.lux-stroked {
-          background-color: transparent !important;
-        }
-      }
-      &:active {
-        background-color: map.get(luxpalette.$lux-palette-accent, 700) !important;
-        &.lux-stroked {
-          color: map.get(luxpalette.$lux-palette-accent, 700) !important;
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    &.mat-warn {
-      &:hover {
-        color: #ffffff;
-        background-color: map.get(luxpalette.$lux-palette-warn, 300) !important;
-        &.lux-stroked {
-          color: map.get(luxpalette.$lux-palette-warn, 300);
-          background-color: transparent !important;
-        }
-      }
-      &:focus-visible:not(:hover) {
-        color: #ffffff;
-        background-color: map.get(luxpalette.$lux-palette-warn, 500) !important;
-        @include luxfocus.lux-button-focus;
-        &.lux-stroked {
-          color: luxpalette.$lux-warn-color;
-          background-color: transparent !important;
-        }
-      }
-      &:active {
-        background-color: map.get(luxpalette.$lux-palette-warn, 700) !important;
-        &.lux-stroked {
-          color: map.get(luxpalette.$lux-palette-warn, 700);
-          background-color: transparent !important;
-        }
-      }
-    }
-  }
-
-  //Mat-Fab soll in Authentic flat sein
-  &.mat-mdc-fab,
-  &.mat-mdc-fab:not([disabled]):active {
-    @include luxelevations.lux-elevation-z0;
-  }
-}
-
 /*
 * Theming für Stepper-Large
 */
 lux-stepper-large {
   background-color: transparent;
+
   .lux-stepper-large-nav-container,
   .lux-stepper-large-content-container {
     border: 1px solid luxcommon.$app-border-color;
@@ -626,6 +348,7 @@ lux-stepper-large {
         font-weight: 600;
         text-decoration-thickness: 2px;
       }
+
       .lux-stepper-large-nav-item-number-container {
         color: luxcommon.$lux-stepper-large-nav-item-active-fc;
         background-color: luxcommon.$lux-stepper-large-nav-item-active-bg;
@@ -650,6 +373,7 @@ lux-stepper-large {
 
         a {
           font-weight: 600;
+
           &::after {
             width: 16px;
             height: 16px;
@@ -664,6 +388,7 @@ lux-stepper-large {
           background-color: luxcommon.$lux-stepper-large-nav-item-completed-bg;
           border: 1px solid luxcommon.$app-border-color;
         }
+
         .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
           color: luxcommon.$lux-hover-color;
         }
@@ -680,6 +405,7 @@ lux-stepper-large {
         border: 1px solid luxcommon.$app-border-color;
       }
     }
+
     &.lux-disabled {
       .lux-stepper-large-nav-item-number-container {
         color: luxcommon.$dark-disabled-text;
@@ -700,6 +426,7 @@ lux-stepper-large {
     font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
   }
 }
+
 .lux-stepper-large-mobile-nav-item {
   display: flex;
   flex-direction: row;
@@ -716,6 +443,7 @@ lux-stepper-large {
     a {
       font-weight: 600;
     }
+
     .lux-stepper-large-mobile-nav-item-number-container {
       color: luxcommon.$lux-stepper-large-nav-item-active-fc;
       background-color: luxcommon.$lux-stepper-large-nav-item-active-bg;
@@ -761,6 +489,7 @@ lux-stepper-large {
       border: 1px solid luxcommon.$app-border-color;
     }
   }
+
   &.lux-disabled {
     .lux-stepper-large-nav-item-number-container {
       color: luxcommon.$dark-disabled-text;
@@ -782,16 +511,99 @@ lux-stepper-large {
 }
 
 lux-file-upload {
-  .lux-file-upload-view-item-delete-button button.lux-button.mat-mdc-button {
+  .lux-file-upload-view-item-button button.lux-button.mat-mdc-button {
     color: luxpalette.$lux-primary-color;
 
+    mat-icon {
+      width: 1.125rem !important;
+      height: 1.125rem !important;
+    }
+
     &:hover {
       color: luxcommon.$lux-hover-color;
     }
   }
 
-  .lux-file-upload-container .lux-file-upload-view-item-container {
-    margin-left: luxcommon.$outline-width;
-    margin-right: luxcommon.$outline-width;
+  .lux-file-upload-container {
+    .lux-file-upload-drop-container {
+      &:not(.lux-file-upload-drag-active):not(.lux-file-upload-drop-container-disabled) {
+        background-image: luxcommon.$app-gradient;
+      }
+
+      .lux-file-upload-drop-label-container {
+        padding: 16px 48px 12px 48px;
+      }
+    }
+  }
+
+  .lux-file-upload-error-container {
+    margin-top: 16px;
+    margin-bottom: 0;
+
+    .lux-file-upload-error-button {
+      button.mat-mdc-button {
+        border-radius: 8px;
+        min-width: 24px;
+        min-height: 24px;
+
+        .lux-button-icon mat-icon.mat-icon.lux-icon {
+          width: 1.125rem !important;
+          height: 1.125rem !important;
+        }
+      }
+    }
+  }
+
+  .lux-file-upload-view-container {
+    &:not(.lux-empty) {
+      margin-top: 16px;
+      margin-bottom: 16px;
+      border-radius: 4px;
+      border: 1px solid rgba(black, 0.12);
+    }
+  }
+
+  .lux-file-upload-view-item-container {
+    background-color: white;
+    padding: 11px 15px 11px 26px;
+    border-radius: 4px;
+    border-bottom: 1px solid rgba(black, 0.12);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
+
+    &:last-child {
+      border: none;
+      border-radius: 4px;
+    }
+
+    .lux-file-upload-label-text lux-link-plain .link-wrapper .lux-link-plain-text {
+      color: luxpalette.$lux-primary-color;
+      text-decoration: underline;
+    }
+
+    .lux-file-upload-view-item {
+      .lux-file-upload-view-item-icon {
+        display: flex;
+        flex: 0 0 20px;
+      }
+
+      .lux-file-upload-label-file-size {
+        margin-right: 20px;
+      }
+
+      lux-button.lux-file-upload-view-item-button {
+        button.mat-mdc-button {
+          border-radius: 8px;
+          min-width: 24px;
+          min-height: 24px;
+
+          .lux-button-icon mat-icon.mat-icon.lux-icon {
+            width: 1.125rem;
+            height: 1.125rem;
+          }
+        }
+      }
+    }
   }
 }

package/src/authentic/_custombutton.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "sass:color";
+@use "../base/luxfocus";
+@use "../base/luxelevations";
+@use "luxpalette";
+@use "luxcommon";
+
+@mixin textButton($color, $bgColor, $hoverColor, $hoverBgColor) {
+  color: $color !important;
+  background-color: $bgColor !important;
+
+  &:hover {
+    color: $hoverColor !important;
+    background-color: $hoverBgColor !important;
+  }
+  &:focus-visible:not(:hover) {
+    @include luxfocus.lux-button-focus;
+  }
+  &:active {
+    color: $color !important;
+    background-color: $bgColor !important;
+  }
+}
+
+@mixin strokedButton($color, $bgColor, $hoverColor, $hoverBgColor) {
+  color: $color !important;
+  background-color: $bgColor !important;
+  border-color: $color !important;
+
+  &:hover {
+    color: $hoverColor !important;
+    background-color: $hoverBgColor !important;
+  }
+
+  &:focus-visible:not(:hover) {
+    @include luxfocus.lux-button-focus;
+  }
+  &:active {
+    color: $color !important;
+    background-color: $bgColor !important;
+  }
+}
+
+@mixin raisedFlatFabButton($color, $bgColor, $hoverColor, $hoverBgColor, $activeBg) {
+  color: $color !important;
+  background-color: $bgColor !important;
+
+  &:hover {
+    color: $hoverColor !important;
+    background-color: $hoverBgColor !important;
+  }
+
+  &:focus-visible:not(:hover) {
+    color: $color !important;
+    background-color: $bgColor !important;
+    @include luxfocus.lux-button-focus;
+  }
+
+  &:active {
+    color: $color !important;
+    background-color: $activeBg !important;
+  }
+}
+
+/*
+ * Theming for LUX-Button
+ */
+lux-button button.lux-button {
+  letter-spacing: 1.25px;
+
+  // Mat-Fab soll in Authentic flat sein
+  &.mat-mdc-fab,
+  &.mat-mdc-fab:not([disabled]):active {
+    @include luxelevations.lux-elevation-z0;
+  }
+
+  // Disabled-Buttons
+  &.mat-mdc-button:disabled,
+  &.mat-mdc-raised-button:disabled,
+  &.mat-mdc-fab:disabled,
+  &.mat-mdc-outlined-button:disabled,
+  &.mat-mdc-unelevated-button:disabled {
+    color: luxcommon.$dark-disabled-text;
+    &.lux-stroked {
+      color: luxcommon.$dark-disabled-text;
+      border-color: luxcommon.$dark-disabled-text;
+    }
+  }
+
+  //Theming für den Text-Button
+  &.mat-mdc-button:not([disabled]) {
+    @include textButton(#1c1b1b, transparent, #1c1b1b, #e5e2e1);
+
+    &.mat-primary {
+      @include textButton(#003366, transparent, #003366, #d5e3ff);
+    }
+
+    &.mat-accent {
+      @include textButton(#00531d, transparent, #00531d, #c6ffc5);
+    }
+
+    &.mat-warn {
+      @include textButton(#c00013, transparent, #93000c, #ffdad6);
+    }
+  }
+
+  //Theming für den Stroked-Button
+  &.mat-mdc-outlined-button:not([disabled]),
+  &.mat-mdc-fab.lux-stroked:not([disabled]) {
+    @include strokedButton(#1c1b1b, transparent, #1c1b1b, #e5e2e1);
+
+    &.mat-primary {
+      @include strokedButton(#003366, transparent, #003366, #d5e3ff);
+    }
+
+    &.mat-accent {
+      @include strokedButton(#00531d, transparent, #00531d, #c6ffc5);
+    }
+
+    &.mat-warn {
+      @include strokedButton(#c00013, transparent, #93000c, #ffdad6);
+    }
+  }
+
+  //Theming für den Raised-Button, Flat-Button, Fab(Rounded)-Button
+  &.mat-mdc-raised-button:not([disabled]),
+  &.mat-mdc-unelevated-button:not([disabled]),
+  &.mat-mdc-fab:not(.lux-stroked):not([disabled]) {
+    @include raisedFlatFabButton(#1c1b1b, transparent, #1c1b1b, #e5e2e1, #ffffff);
+
+    &.mat-primary {
+      @include raisedFlatFabButton(#ffffff, #003366, #003366, #d5e3ff, #001b3c);
+    }
+
+    &.mat-accent {
+      @include raisedFlatFabButton(#1c1b1b, #56bd66, #1c1b1b, #c6ffc5, #3ca450);
+    }
+
+    &.mat-warn {
+      @include raisedFlatFabButton(#ffffff, #c00013, #93000c, #ffdad6, #93000c);
+    }
+  }
+}