@ihk-gfi/lux-components-theme 19.3.0 → 21.1.0

package/src/{base → base-templates}/components/_luxStepper.scss

@@ -1,12 +1,21 @@
-@use "sass:map";
-@use "../luxpalette";
-@use "../luxcommon";
-@use "../luxfocus";
+@use "@angular/material" as mat;
+@use "../common/luxfocus";
 
 /*
  * Theming for LUX-Stepper bisheriges styling
  */
 lux-stepper {
+  @include mat.stepper-overrides(
+    (
+      header-hover-state-layer-shape: var(--lux-theme-app-border-radius),
+      header-focus-state-layer-shape: var(--lux-theme-app-border-radius),
+      line-color: var(--lux-theme-app-border-color),
+      header-label-text-size: 1rem,
+      header-selected-state-label-text-size: 1rem,
+      header-error-state-label-text-size: 1rem,
+    )
+  );
+
   position: relative;
   display: block;
 
@@ -22,7 +31,7 @@ lux-stepper {
     margin: 8px 8px 0 8px;
   }
   mat-step-header {
-    margin: luxcommon.$outline-width;
+    margin: var(--lux-theme-outline-width);
 
     // Anpassungen an standard Step-Aussehen, die Stepper Icons/Zahlen sollen größer sein, als bei Material
     .mat-step-icon,
@@ -38,7 +47,7 @@ lux-stepper {
       display: flex;
       align-items: center;
       position: relative;
-      font-size: luxcommon.$form-control-font-size;
+      font-size: var(--lux-theme-form-control-font-size);
       font-weight: normal;
     }
   }
@@ -54,10 +63,6 @@ lux-stepper {
   lux-step-content > lux-card > mat-card {
     margin: 0 !important;
   }
-  .mat-stepper-horizontal,
-  .mat-stepper-vertical {
-    background-color: transparent;
-  }
 
   .mat-horizontal-content-container {
     padding: 0;
@@ -98,7 +103,7 @@ lux-stepper {
   // not selected und/oder nicht bearbeitete steps: background-color: #fff; color: primary; border: 1px solid $app-border-color;
   .lux-ignore-mat-step-icons {
     mat-step-header {
-      color: luxpalette.$lux-primary-color;
+      color: var(--lux-theme-primary-color);
 
       // Die standard Icons ausblenden
       .mat-step-icon,
@@ -132,13 +137,13 @@ lux-stepper {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
           mat-icon {
-            color: luxcommon.$app-data-bg;
-            background-color: luxpalette.$lux-primary-color;
+            color: var(--lux-theme-app-data-bg);
+            background-color: var(--lux-theme-primary-color);
           }
         }
 
         lux-step-header {
-          color: luxpalette.$lux-primary-color;
+          color: var(--lux-theme-primary-color);
         }
       }
 
@@ -146,8 +151,8 @@ lux-stepper {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
           mat-icon {
-            color: luxcommon.$app-data-bg;
-            background-color: luxcommon.$dark-secondary-text;
+            color: var(--lux-theme-app-data-bg);
+            background-color: var(--lux-theme-dark-secondary-text);
           }
         }
       }
@@ -156,32 +161,32 @@ lux-stepper {
 
   // luxUseCustomIcons=false
   mat-step-header.mat-step-header {
-    color: luxpalette.$lux-primary-color;
+    color: var(--lux-theme-primary-color);
     &[aria-selected="true"] {
       .mat-step-icon,
       .mat-step-icon-selected {
-        color: luxcommon.$app-data-bg;
-        background-color: luxpalette.$lux-primary-color;
+        color: var(--lux-theme-app-data-bg);
+        background-color: var(--lux-theme-primary-color);
       }
       lux-step-header {
-        color: luxpalette.$lux-primary-color;
+        color: var(--lux-theme-primary-color);
       }
     }
 
     &[aria-selected="false"] {
-      color: luxpalette.$lux-primary-color;
+      color: var(--lux-theme-primary-color);
       .mat-step-icon,
       .mat-step-label {
-        color: luxpalette.$lux-primary-color;
+        color: var(--lux-theme-primary-color);
         background-color: transparent;
       }
       .mat-step-icon {
-        border: 1px solid luxcommon.$app-border-color;
+        border: 1px solid var(--lux-theme-app-border-color);
       }
 
       .mat-step-icon-state-edit {
-        color: luxcommon.$app-data-bg;
-        background-color: luxpalette.$lux-primary-color;
+        color: var(--lux-theme-app-data-bg);
+        background-color: var(--lux-theme-primary-color);
       }
     }
   }
@@ -244,110 +249,9 @@ 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;
-      &[aria-selected="false"],
-      &[aria-selected="true"] {
-        div.mat-step-icon.mat-step-icon-state-number,
-        div.mat-step-icon.mat-step-icon-state-edit {
-          background-color: luxcommon.$lux-hover-color;
-          color: #fff;
-          border-color: luxcommon.$lux-hover-color;
-        }
-        div.mat-step-label lux-step-header {
-          color: luxcommon.$lux-hover-color;
-        }
-      }
-    }
-  }
-
-  mat-step-header[tabindex="0"]:focus-visible {
-    background-color: transparent !important;
-    @include luxfocus.focus-dark-mixin;
-    border-radius: 4px;
-  }
-
-  lux-stepper-vertical mat-step-header {
-    &[aria-selected="true"] {
-      @include luxfocus.lux-selected-mixin-reverse-ac;
-    }
-
-    &[aria-selected="false"] {
-      div.mat-step-icon.mat-step-icon-state-number,
-      div.mat-step-icon.mat-step-icon-state-edit {
-        background-color: #fff;
-        color: luxpalette.$lux-primary-color;
-        border: 1px solid luxcommon.$app-border-color;
-      }
-      div.mat-step-label lux-step-header {
-        color: luxpalette.$lux-primary-color;
-      }
-    }
-  }
-
-  lux-stepper-horizontal mat-step-sheader {
-    &[aria-selected="true"] {
-      div.mat-step-label.mat-step-label-active.mat-step-label-selected lux-step-header {
-        font-weight: 500;
-      }
-      &:after {
-        border-bottom: none;
-      }
-    }
-
-    &[aria-selected="false"] {
-      div.mat-step-icon.mat-step-icon-state-number,
-      div.mat-step-icon.mat-step-icon-state-edit {
-        background-color: #fff;
-        color: luxpalette.$lux-primary-color;
-        border: 1px solid luxcommon.$app-border-color;
-      }
-      div.mat-step-label lux-step-header {
-        color: luxpalette.$lux-primary-color;
-      }
-    }
-  }
-
-  .lux-ignore-mat-step-icons mat-step-header {
-    &[aria-selected="false"] {
-      .lux-stepper-edited-icon,
-      .lux-stepper-normal-icon {
-        mat-icon {
-          color: luxpalette.$lux-primary-color;
-          background-color: #fff;
-          border: 1px solid luxcommon.$app-border-color;
-        }
-      }
-    }
-    &[aria-selected="true"] {
-      .lux-stepper-edited-icon,
-      .lux-stepper-normal-icon {
-        mat-icon {
-          color: #fff;
-          background-color: luxpalette.$lux-primary-color;
-          border: 1px solid luxcommon.$app-border-color;
-        }
-      }
-    }
-    &:hover {
-      background-color: transparent !important;
-      border-radius: 0;
-      &[aria-selected="false"],
-      &[aria-selected="true"] {
-        .lux-stepper-edited-icon,
-        .lux-stepper-normal-icon {
-          mat-icon {
-            background-color: luxcommon.$lux-hover-color;
-            color: #fff;
-            border-color: luxcommon.$lux-hover-color;
-          }
-        }
-      }
-      div.mat-step-label lux-step-header {
-        color: luxcommon.$lux-hover-color;
-      }
+    &[tabindex="0"]:focus-visible {
+      @include luxfocus.focus-dark-mixin;
+      border-radius: var(--lux-theme-app-border-radius);
     }
   }
 }

package/src/base-templates/components/_luxStepperLarge.scss

@@ -0,0 +1,435 @@
+@use "../common/luxSvgIcons" as luxicons;
+
+lux-stepper-large {
+  display: flex;
+  flex-direction: row;
+
+  height: 100%;
+  overflow-y: hidden;
+  background-color: transparent;
+
+  .lux-stepper-large-nav-container,
+  .lux-stepper-large-content-container {
+    border: 1px solid var(--lux-theme-app-border-color);
+    border-radius: 4px;
+    background-color: var(--lux-theme-app-content-bg);
+  }
+}
+
+.lux-stepper-large-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  gap: 30px;
+
+  .lux-stepper-large-button-container {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 30px;
+  }
+}
+
+.lux-stepper-large-button-container {
+  margin-top: 30px;
+}
+
+.lux-stepper-large-nav-container {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 30%;
+  gap: 12px;
+  padding: 12px 33px 12px 12px;
+
+  overflow-y: auto;
+  min-width: 400px;
+}
+
+.lux-stepper-large-nav-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  font-size: var(--lux-theme-stepper-large-nav-item-font-size);
+  font-weight: var(--lux-theme-stepper-large-nav-item-font-weight);
+  line-height: var(--lux-theme-stepper-large-nav-item-line-height);
+
+  &.lux-active:not(.lux-disabled) {
+    a {
+      cursor: text;
+      font-weight: var(--lux-theme-stepper-large-nav-item-font-weight);
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+    }
+
+    .lux-stepper-large-nav-item-number-container {
+      color: var(--lux-theme-stepper-large-nav-item-active-fc);
+      background-color: var(--lux-theme-stepper-large-nav-item-active-bg);
+      border: 1px solid var(--lux-theme-stepper-large-nav-item-active-bg);
+    }
+
+    .lux-stepper-large-nav-item-label {
+      color: #003366;
+    }
+  }
+
+  &.lux-touched:not(.lux-disabled, .lux-active) {
+    a {
+      text-decoration: underline;
+      font-weight: var(--lux-theme-stepper-large-nav-item-font-weight);
+    }
+
+    &.lux-completed:not(.lux-active) {
+      .lux-stepper-large-nav-item-number-container {
+        color: var(--lux-theme-stepper-large-nav-item-completed-fg);
+        background-color: var(--lux-theme-stepper-large-nav-item-completed-bg);
+        border: 1px solid var(--lux-theme-app-border-color);
+      }
+
+      a {
+        font-weight: var(--lux-theme-stepper-large-nav-item-font-weight);
+        color: #2e8533;
+        position: relative;
+      }
+
+      a::after {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        width: var(--lux-theme-stepper-large-nav-item-completed-icon-width);
+        height: var(--lux-theme-stepper-large-nav-item-completed-icon-height);
+        margin: var(--lux-theme-stepper-large-nav-item-completed-icon-margin);
+        background-color: #2e8533;
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+
+    &:not(.lux-completed):not(.lux-active) {
+      .lux-stepper-large-nav-item-number-container {
+        color: var(--lux-theme-primary-color);
+        background-color: var(--lux-theme-stepper-large-nav-item-completed-bg);
+        border: 1px solid var(--lux-theme-app-border-color);
+      }
+
+      a::after {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin: 3px 10px 0px;
+        background-color: var(--lux-theme-stepper-large-nav-item-active-bg);
+        -webkit-mask: url(luxicons.$warn-triangle);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$warn-triangle);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+  }
+
+  &:not(.lux-touched) {
+    opacity: 1;
+    color: #003366;
+
+    font-size: var(--lux-theme-stepper-large-nav-item-completed-font-size);
+    font-weight: var(--lux-theme-stepper-large-nav-item-completed-font-weight);
+    line-height: var(--lux-theme-stepper-large-nav-item-completed-line-height);
+
+    .lux-stepper-large-nav-item-number-container {
+      color: var(--lux-theme-stepper-large-nav-item-not-touched-fg);
+      background-color: var(--lux-theme-stepper-large-nav-item-not-touched-bg);
+      border: 1px solid var(--lux-theme-app-border-color);
+    }
+  }
+
+  &.lux-disabled {
+    opacity: 0.6;
+
+    .lux-stepper-large-nav-item-number-container {
+      color: var(--lux-theme-stepper-large-nav-item-disabled-fg);
+      background-color: var(--lux-theme-stepper-large-nav-item-disabled-bg);
+      border: 1px solid var(--lux-theme-app-border-color);
+    }
+
+    .lux-stepper-large-nav-item-label {
+      color: var(--lux-theme-stepper-large-nav-item-disabled-fg);
+    }
+  }
+
+  .lux-stepper-large-nav-item-number-container {
+    box-sizing: border-box;
+    min-width: var(--lux-theme-stepper-large-nav-item-number-container-width);
+    min-height: var(--lux-theme-stepper-large-nav-item-number-container-height);
+    max-width: var(--lux-theme-stepper-large-nav-item-number-container-width);
+    max-height: var(--lux-theme-stepper-large-nav-item-number-container-height);
+    margin: 0 15px 0 0;
+    padding: var(--lux-theme-stepper-large-nav-item-number-container-padding);
+    border-radius: var(--lux-theme-stepper-large-nav-item-number-container-radius);
+    font-size: var(--lux-theme-stepper-large-nav-item-font-size);
+    font-weight: var(--lux-theme-stepper-large-nav-item-font-weight);
+    background-color: var(--lux-theme-app-content-bg);
+
+    .lux-stepper-large-nav-item-number {
+      text-align: center;
+    }
+  }
+
+  .lux-stepper-large-nav-item-label-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .lux-stepper-large-nav-item-label-link {
+      cursor: pointer;
+      color: var(--lux-theme-primary-color);
+    }
+
+    .lux-stepper-large-nav-item-label {
+    }
+
+    .lux-stepper-large-nav-item-complete {
+      color: var(--lux-theme-stepper-large-completed-fc);
+      font-size: 1.4375rem;
+      height: 1.4375em;
+      width: 1.4375em;
+    }
+  }
+}
+
+.lux-stepper-large-content {
+  display: flex;
+  flex-direction: column;
+
+  // Kein Abstand der Überschrift nach oben, wenn sie das erste Element im Inhalt ist.
+  // Mobil und Desktop
+  & > h1:first-child,
+  & a#luxstepperlargecontentanchor + h1,
+  & > h2:first-child,
+  & a#luxstepperlargecontentanchor + h2,
+  & > h3:first-child,
+  & a#luxstepperlargecontentanchor + h3,
+  & > h4:first-child,
+  & a#luxstepperlargecontentanchor + h4,
+  & > h5:first-child,
+  & a#luxstepperlargecontentanchor + h5,
+  & > h6:first-child,
+  & a#luxstepperlargecontentanchor + h6 {
+    margin-top: 0;
+  }
+}
+
+.lux-stepper-large-content-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 70%;
+
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.lux-stepper-large-mobile-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  overflow-y: auto;
+  padding: 12px;
+
+  lux-button {
+    display: flex;
+
+    & button {
+      display: flex;
+      flex: 1 1 auto;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .lux-stepper-large-button-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    gap: 30px;
+  }
+}
+
+.lux-stepper-large-mobile-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 2px;
+
+  font-size: 0.75rem;
+
+  .lux-stepper-large-mobile-header-label {
+    display: flex;
+    flex: 0 1 auto;
+  }
+
+  .lux-stepper-large-mobile-header-button {
+    display: flex;
+    flex: 0 0 auto;
+    padding: 0;
+
+    button {
+      padding: 0;
+      min-height: 45px;
+      min-width: 45px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+// Lux-Stepper-Large - Overlay
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  &.lux-stepper-large-mobile-overlay-backdrop {
+    opacity: 0.6;
+    background-color: var(--lux-theme-stepper-large-backdrop-bg);
+  }
+}
+
+.lux-stepper-large-mobile-nav-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: calc(100% - 0px);
+  max-height: calc(100% - 0px);
+
+  padding: 0;
+  background: var(--lux-theme-app-data-bg);
+}
+
+.lux-stepper-large-mobile-nav-close-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 13px;
+}
+
+.lux-stepper-large-mobile-nav-header {
+  display: flex;
+  flex-direction: row;
+
+  padding: 0 30px 24px 30px;
+
+  div {
+    font-family: var(--lux-theme-app-headline-font), var(--lux-theme-app-font-family);
+    font-size: 1.75rem;
+  }
+}
+
+.lux-stepper-large-mobile-nav-item-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  padding: 0 30px 30px 30px;
+}
+
+.lux-stepper-large-mobile-nav-item.lux-stepper-large-nav-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  font-weight: 400;
+  font-size: 1.125rem;
+  line-height: unset;
+
+  .lux-stepper-large-mobile-nav-item-number-container {
+  }
+
+  &.lux-completed .lux-stepper-large-mobile-nav-item-number-container {
+  }
+
+  &.lux-active .lux-stepper-large-mobile-nav-item-number-container {
+  }
+
+  &.lux-touched .lux-stepper-large-mobile-nav-item-number-container {
+  }
+
+  &.lux-disabled .lux-stepper-large-mobile-nav-item-number-container {
+  }
+
+  .lux-stepper-large-mobile-nav-item-number-container {
+    margin: 0 10px 0 0;
+    border-radius: 50%;
+    font-weight: 400;
+
+    .lux-stepper-large-mobile-nav-item-number {
+    }
+  }
+
+  .lux-stepper-large-mobile-nav-item-label-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .lux-stepper-large-mobile-nav-item-label-link {
+      cursor: pointer;
+    }
+  }
+
+  &.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after {
+    width: 18px;
+    height: 18px;
+    margin-top: 4px;
+  }
+
+  // Links allgemein
+  a {
+    &:focus-visible {
+      outline: none;
+    }
+
+    &.lux-focused {
+      outline: var(--lux-theme-outline-dark);
+    }
+  }
+
+  &.lux-active:not(.lux-disabled) {
+    a {
+      font-weight: 400;
+      text-decoration-thickness: 1px;
+    }
+  }
+
+  &.lux-touched:not(.lux-disabled, .lux-active) {
+    a {
+      font-weight: 400;
+    }
+
+    &.lux-completed:not(.lux-active) {
+      a {
+        font-weight: 400;
+      }
+    }
+  }
+
+  &.lux-completed:not(.lux-active) {
+    a {
+      font-weight: 400;
+    }
+  }
+}