@ihk-gfi/lux-components-theme 11.10.0 → 11.13.0

package/src/base/_luxcomponents.scss

@@ -168,6 +168,18 @@ lux-card {
  * Theming für LUX-Chips
  */
 lux-chips {
+  .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)
@@ -198,6 +210,17 @@ lux-chips {
   }
 }
 
+.lux-chips-autocomplete-panel {
+  padding: $outline-width;
+  margin-left: 6px;
+  margin-right: 6px;
+  border-radius: 4px;
+
+  mat-option:not(:last-of-type) {
+    margin-bottom: $outline-width;
+  }
+}
+
 /*
  * Theming for LUX-Datepicker
  */
@@ -300,6 +323,241 @@ 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
  */
@@ -799,6 +1057,7 @@ lux-stepper-large {
 
 .lux-stepper-large-container {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: row;
   gap: 30px;
 
@@ -835,42 +1094,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 {

package/src/base/_luxfocus.scss

@@ -442,7 +442,7 @@ lux-button {
 
 /** ########## Autocomplete ########## **/
 // Class, welche das aufgeklappte Panel referenziert
-.lux-autocomplete-panel {
+.lux-autocomplete-panel, .lux-chips-autocomplete-panel {
   mat-option {
 
     &:focus {
@@ -698,17 +698,62 @@ lux-message-box {
 
 /** ########## Stepper large ########## **/
 lux-stepper-large {
-  a {
-    &:focus {
-      outline: none;
+  .lux-stepper-large-nav-item {
+
+    // Links allgemein
+    a {
+      &:focus {
+        outline: none;
+      }
+
+      &.lux-focused {
+        outline: $outline-dark;
+      }
     }
 
-    &:hover {
-      @include lux-hovered-mixin;
+    // Link ausgewählt
+    &.lux-active {
+      .lux-stepper-large-nav-item-label-container {
+        a.lux-stepper-large-nav-item-label-link {
+          cursor: text;
+          &:hover {
+            color: unset;
+          }
+        }
+      }
     }
 
-    &.lux-focused {
-      @include lux-hovered-mixin;
+    // Links nicht ausgewählt
+    &:not(.lux-active) {
+      &:not(.lux-completed) {
+        .lux-stepper-large-nav-item-label-container {
+          a.lux-stepper-large-nav-item-label-link {
+            &:hover {
+              color: #2E8533;
+            }
+          }
+        }
+      }
+
+        &.lux-completed {
+          .lux-stepper-large-nav-item-label-container {
+            a.lux-stepper-large-nav-item-label-link {
+              &:hover {
+                color: #56BD66;
+              }
+            }
+          }
+        }
     }
   }
 }
+
+/** ########## File-Upload ########## **/
+.lux-file-upload-drop-container {
+  margin-left: $outline-width;
+  margin-right: $outline-width;
+
+  &:focus {
+    outline: $outline-dark;
+  }
+}

package/src/blue/_custom.scss

@@ -6,3 +6,12 @@ lux-tabs {
     }
   }
 }
+
+/**
+ * Theming für LUX-Chips
+ */
+.lux-chips-autocomplete-panel {
+  margin-left: 4px;
+  margin-right: 4px;
+  border-radius: 4px;
+}

package/src/blue/luxtheme.scss

@@ -4,7 +4,6 @@
 @import "../base/luxcomponents";
 @import "../base/luxfocus";
 @import "../base/luxstyles";
-@import "../base/luxicons";
 @import "../../node_modules/@angular/material/theming";
 @import "../base/luxtheme";
 @import "custom";

package/src/green/_custom.scss

@@ -259,6 +259,15 @@ lux-button button.lux-button {
   }
 }
 
+/**
+ * Theming für LUX-Chips
+ */
+.lux-chips-autocomplete-panel {
+  margin-left: 6px;
+  margin-right: 6px;
+  border-radius: 4px;
+}
+
 /*
  * Theming for LUX-Menu
  */
@@ -361,6 +370,10 @@ lux-checkbox, lux-toggle, lux-radio, lux-slider {
   }
 }
 
+.mat-select-value {
+  color: currentColor;
+}
+
 lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datepicker, lux-datetimepicker, lux-chips {
   & .lux-form-control {
     margin-right: 4px;

package/src/green/luxtheme.scss

@@ -7,7 +7,6 @@ $outline-width: 1px;
 $lux-hover-color: #e3ebf5;
 @import "../base/luxfocus";
 @import "../base/luxstyles";
-@import "../base/luxicons";
 @import "../../node_modules/@angular/material/theming";
 @import "../base/luxtheme";
 @import "custom";

package/src/orange/luxtheme.scss

@@ -4,7 +4,6 @@
 @import "../base/luxcomponents";
 @import "../base/luxfocus";
 @import "../base/luxstyles";
-@import "../base/luxicons";
 @import "../../node_modules/@angular/material/theming";
 @import "../base/luxtheme";
 @import "custom";

package/src/base/_luxicons.scss

@@ -1,2 +0,0 @@
-@import 'https://use.fontawesome.com/releases/v5.13.0/css/all.css';
-@import 'https://fonts.googleapis.com/icon?family=Material+Icons';