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

package/src/base/_luxelevations.scss

@@ -0,0 +1,51 @@
+@import "../../node_modules/@angular/material/core/style/elevation";
+
+
+/* 
+  Mixins für die Bestimmung der Schatten, um den Components eine "Höhe" zu geben
+  Sortierung erfolgt nach "Material Design Specification" 
+  https://material.io/design/environment/elevation.html#default-elevations
+  und nutzt die "Elevation Sass mixins" von @angular/material/core/style/elevation.scss
+  https://material.angular.io/guide/elevation
+  Wichtig: Hierbei handelt es sich um eine reine optische Elevation.
+  Der z-index wird dadurch nicht verändert!
+
+  Folgenden Components wurden die lux-elevation-z# mixins zugewiesen
+  lux-elevation-z0: (kein Schatten/niedrigste Ebene)
+  - im lux-Master-Detail wird die Card ohne Schatten genutzt, im Header der lux-rounded-Button ohne Schatten
+  lux-elevation-z1: (Strukturierende Elemente ohne Funktion)
+  - lux-card,lux-master-header/-footer/detail-contianer, wegen der geringen Größe Toggle-Thumb,
+  lux-elevation-z2: ("klickbare" Elemente)
+  - lux-buttons (luxRaised/luxRounded), lux-tile, lux-accordion
+  lux-elevation-z4: (Listen/Menüs im cdk-overlay)
+  - lux-message-box, lux-datepicker, lux-datetimepicker, lux-autocomplete, lux-select, lux-menu
+  lux-elevation-z6:
+  - lux-snackbar, lux-app-header
+  lux-elevation-z16:
+  - lux-side-nav (drawer)
+  lux-elevation-z24: (höchste Ebene)
+  - lux-dialog 
+*/
+
+@mixin lux-elevation-z0 {
+  @include mat-elevation(0);
+}
+@mixin lux-elevation-z1 {
+  @include mat-elevation(1);
+}
+@mixin lux-elevation-z2 {
+  @include mat-elevation(2);
+}
+@mixin lux-elevation-z4 {
+  @include mat-elevation(4);
+}
+@mixin lux-elevation-z6 {
+@include mat-elevation(6);
+}
+@mixin lux-elevation-z16 {
+  @include mat-elevation(16);
+}
+@mixin lux-elevation-z24 {
+  @include mat-elevation(24);
+}
+

package/src/base/_luxfocus.scss

@@ -11,6 +11,13 @@ $outline-bright: $outline-width $outline-style $outline-color-bright !important;
   outline: $outline-dark;
 }
 
+@mixin focus-dark-mixin-inline {
+  // der Focus um Elemente in Panels wird mit negativen Margin nach in das Element verlegt
+  // damit wird er nicht mehr am Rand abgeschnitten oder verdeckt
+  outline: $outline-dark;
+  outline-offset: -$outline-width;
+}
+
 @mixin focus-bright-mixin {
   outline: $outline-bright;
 }
@@ -198,6 +205,9 @@ lux-chips {
   & .mat-standard-chip:focus {
     @include focus-dark-mixin;
   }
+  .mat-chip.mat-standard-chip:after { //mat-overlay für focus deaktivieren
+    background-color: unset;
+  }
 }
 
 /** ########## Form-Control ########## **/
@@ -228,6 +238,12 @@ lux-form-control {
       height: 2px;
       border-bottom: 2px solid $lux-selected-border-color;
     }
+     
+    &.lux-form-control-error {
+      .lux-form-control-container:after {
+        border-bottom: 2px solid $lux-warn-color;
+      }
+    }
   }
 }
 
@@ -236,6 +252,7 @@ lux-datepicker {
   mat-datepicker-toggle {
     button:focus {
       @include focus-dark-mixin;
+      border-radius: 4px;
     }
 
     .mat-button-focus-overlay {
@@ -282,6 +299,7 @@ lux-datetimepicker {
   mat-datepicker-toggle {
     button:focus {
       @include focus-dark-mixin;
+      border-radius: 4px;
     }
 
     .mat-button-focus-overlay {
@@ -364,11 +382,13 @@ lux-table {
     }
 
     &:focus {
-     @include focus-dark-mixin;
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &.mat-active {
-      @include focus-dark-mixin;
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &:hover {
@@ -442,15 +462,17 @@ lux-button {
 
 /** ########## Autocomplete ########## **/
 // Class, welche das aufgeklappte Panel referenziert
-.lux-autocomplete-panel {
+.lux-autocomplete-panel, .lux-chips-autocomplete-panel {
   mat-option {
 
     &:focus {
-      @include focus-dark-mixin;
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &.mat-active {
-      @include focus-dark-mixin;
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &:hover {
@@ -698,17 +720,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/base/_luxicons.scss

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

package/src/base/_luxstyles.scss

@@ -36,6 +36,12 @@ $paletteNamen: primary, accent, warn;
   --lux-theme-form-control-height-small: #{$form-control-height-small};
   --lux-theme-form-control-font-size: #{$form-control-font-size};
   --lux-theme-form-control-font-size-small: #{$form-control-font-size-small};
+  --lux-theme-form-control-label-padding: #{$form-control-label-padding};
+  --lux-theme-form-control-container-padding: #{$form-control-container-padding};
+  --lux-theme-form-control-misc-margin: #{$form-control-misc-margin};
+  --lux-theme-form-control-complete-height: #{$form-control-complete-height};
+  --lux-theme-form-control-buffer: #{$form-control-buffer};
+  --lux-theme-form-control-margin: #{$form-control-margin};
 
   // Button
   --lux-theme-button-height: #{$button-height};
@@ -192,11 +198,20 @@ h6 {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  padding: 8px;
+  margin: 16px 0;
+  padding: 16px 16px;
   border: 1px solid $dark-dividers;
   display: flex;
-  margin: 0 0 16px 0;
   word-break: break-word;
+  
+  &.column {
+    flex-direction: column;
+    gap: 16px;
+  }
+  &.row {
+    flex-direction: row;
+    gap: 16px;
+  }
 }
 
 .lux-highlight-section-label {
@@ -204,6 +219,19 @@ h6 {
   margin-left: 0;
 }
 
+.lux-simple-form {
+  margin: 4px 0;
+  display: flex;
+  &.column {
+    flex-direction: column;
+    gap: 16px;
+  }
+  &.row {
+    flex-direction: row;
+    gap: 16px;
+  }
+}
+
 .lux-app-container {
   flex-direction: column;
   box-sizing: border-box;
@@ -266,7 +294,7 @@ lux-card.lux-card-grow {
 }
 
 .lux-display-none {
-  display: none;
+  display: none !important;
 }
 
 .lux-display-none-important {
@@ -356,7 +384,6 @@ lux-card.lux-card-grow {
   position: relative;
   margin: 0 !important;
   min-width: unset !important;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
   // 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.

package/src/blue/_luxcommon.scss

@@ -24,6 +24,12 @@ $form-control-height: 24px;
 $form-control-height-small: 18px;
 $form-control-font-size: 15px;
 $form-control-font-size-small: 12px;
+$form-control-label-padding: 2px 0 0 0;
+$form-control-container-padding: 6px 0 0 0;
+$form-control-misc-margin: 4px 0 2px 0;
+$form-control-complete-height: 70px;
+$form-control-buffer: 4px;
+$form-control-margin: 0px;
 
 // Button
 $button-height: 45px;

package/src/blue/luxtheme.scss

@@ -1,10 +1,10 @@
 @import "luxpalette";
 @import "../public/global";
 @import "luxcommon";
+@import "../base/luxelevations";
 @import "../base/luxcomponents";
 @import "../base/luxfocus";
 @import "../base/luxstyles";
 @import "../../node_modules/@angular/material/theming";
 @import "../base/luxtheme";
 @import "custom";
-

package/src/green/_custom.scss

@@ -2,6 +2,7 @@ $button-font-size: 22px;
 $light-green: #E4F1E4;
 $light-gray: #EFF3F6;
 $light-blue: #E3EBF5;
+$dark-green: #2E8533;
 
 body {
   color: #003366;
@@ -211,8 +212,9 @@ lux-app-header {
  */
 lux-button button.lux-button {
 
-  font-weight: lighter !important;
-
+  font-weight: normal !important;
+  align-items: center;
+  
   &.mat-button, &.mat-raised-button {
     border-radius: 18px;
     height: $button-height;
@@ -234,14 +236,15 @@ lux-button button.lux-button {
   &.lux-icon-button {
     border-radius: 18px;
     height: $button-height;
-    padding-top: 4px;
-    padding-bottom: 2px;
 
     & lux-icon {
-      i,
-      mat-icon {
+      line-height: 1;
+      i {
         font-size: 1em;
       }
+      mat-icon {
+        font-size: 1.2em !important;
+      }
     }
   }
 
@@ -249,11 +252,12 @@ lux-button button.lux-button {
     border-radius: 16px !important;
     height: $button-fav-height;
     width: $button-fav-height;
-
+    font-size: $button-font-size;
     & lux-icon {
+      line-height: 1;
       i,
       mat-icon {
-        font-size: 1.5em;
+        font-size: 1.2em !important;
       }
     }
   }
@@ -291,6 +295,13 @@ lux-tile {
   .lux-highlight {
     color: #003366;
   }
+
+  .lux-tile-label {
+    flex-shrink: 1;
+    flex-grow: 0;
+    min-height: 70px;
+    max-height: 70px;
+  }
 }
 
 lux-tile {
@@ -301,18 +312,17 @@ lux-tile {
 
   mat-card[class~=lux-cursor] {
 
-    box-shadow: 0px 2px 1px -1px rgb(0 51 102 / 60%), 0px 1px 1px 0px rgb(0 51 102 / 50%), 0px 1px 3px 0px rgb(0 51 102 / 40%) !important;
-
     &:focus {
       @include focus-dark-mixin;
     }
 
     &:hover {
       background-color: white !important;
-      box-shadow: 0px 2px 1px -1px rgb(46 133 51 / 60%), 0px 1px 1px 0px rgb(46 133 51 / 50%), 0px 1px 3px 0px rgb(46 133 51 / 40%) !important;
+      // farbiger Schatten beim Hover
+      @include mat-elevation(2, $dark-green, 1);
 
       h2 {
-        color: #56BD66;
+        color: #56bd66;
       }
     }
   }
@@ -333,16 +343,12 @@ lux-tile {
 /*
  * Theming for LUX-Form-Controls
  */
-$form-control-padding: 10px 5px 10px 5px;
 $form-control-label-padding-bottom: 4px;
 $form-control-border-radius: 4px;
 $form-control-old-border-bottom: 0px;
 
 lux-checkbox, lux-toggle, lux-radio, lux-slider {
   & .lux-form-control {
-    margin-right: 4px;
-    margin-left: 4px;
-
     .lux-form-control-label {
       padding-bottom: $form-control-label-padding-bottom;
     }
@@ -361,11 +367,12 @@ lux-checkbox, lux-toggle, lux-radio, lux-slider {
   }
 }
 
+.mat-select-value {
+  color: $dark-secondary-text;
+}
+
 lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datepicker, lux-datetimepicker, lux-chips {
   & .lux-form-control {
-    margin-right: 4px;
-    margin-left: 4px;
-
     .lux-form-control-label {
       padding-bottom: $form-control-label-padding-bottom;
     }
@@ -373,7 +380,7 @@ lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datep
     .lux-form-control-container {
       border: 1px solid $form-border-color;
       border-radius: $form-control-border-radius;
-      padding: $form-control-padding;
+      padding: $form-control-container-padding;
 
       &:after {
         border-bottom: $form-control-old-border-bottom;
@@ -395,6 +402,10 @@ lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datep
     .lux-form-control-container {
       border-color: $lux-selected-border-color !important;
       box-shadow: 0 0 0 2px $lux-warn-color, 0 0 4px 2px $lux-warn-color;
+      
+      &:after {
+        border-bottom: $form-control-old-border-bottom;
+      }
     }
 
     .lux-form-control-misc {
@@ -409,7 +420,7 @@ lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datep
       color: $dark-disabled-text !important;
       border: 1px dashed $dark-disabled-text !important;
       border-radius: $form-control-border-radius;
-      padding: $form-control-padding;
+      padding: $form-control-container-padding;
 
       &:after {
         border-bottom: $form-control-old-border-bottom;
@@ -428,7 +439,17 @@ lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datep
       box-shadow: 0 0 0 2px $lux-selected-border-color, 0 0 4px 2px $lux-selected-border-color;
 
       &:after {
-        border-bottom: $form-control-old-border-bottom;
+        border-bottom: $form-control-old-border-bottom !important;
+      }
+    }
+
+    &.lux-form-control-error {
+      .lux-form-control-container {
+        border-color: $lux-warn-color !important;
+        box-shadow: 0 0 0 2px $lux-warn-color, 0 0 4px 2px $lux-warn-color;
+      }
+      &:after {
+        border-bottom: $form-control-old-border-bottom !important;
       }
     }
   }
@@ -452,6 +473,18 @@ lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datep
   }
 }
 
+/*
+ * Theming für LUX-Layout-Form-Row
+ */
+lux-layout-form-row {
+  lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datepicker, lux-datetimepicker, lux-chips {
+    & .lux-form-control {
+      margin-right: 0px;
+      margin-left: 0px;
+    }
+  }
+}
+
 /*
  * Theming für LUX-Checkbox
  */

package/src/green/_luxcommon.scss

@@ -24,6 +24,12 @@ $form-control-height: 24px;
 $form-control-height-small: 18px;
 $form-control-font-size: 15px;
 $form-control-font-size-small: 12px;
+$form-control-label-padding: 2px 0 4px 0;
+$form-control-container-padding: 10px 5px 10px 5px;
+$form-control-misc-margin: 4px 0 2px 0;
+$form-control-complete-height: 84px;
+$form-control-buffer: 6px;
+$form-control-margin: 0px;
 
 // Button
 $button-height: 45px;

package/src/green/luxtheme.scss

@@ -3,6 +3,7 @@
 $app-font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 $outline-width: 1px;
 @import "luxcommon";
+@import "../base/luxelevations";
 @import "../base/luxcomponents";
 $lux-hover-color: #e3ebf5;
 @import "../base/luxfocus";

package/src/orange/_luxcommon.scss

@@ -24,6 +24,12 @@ $form-control-height: 24px;
 $form-control-height-small: 18px;
 $form-control-font-size: 15px;
 $form-control-font-size-small: 12px;
+$form-control-label-padding: 2px 0 0 0;
+$form-control-container-padding: 6px 0 0 0;
+$form-control-misc-margin: 4px 0 2px 0;
+$form-control-complete-height: 70px;
+$form-control-buffer: 4px;
+$form-control-margin: 0px;
 
 // Button
 $button-height: 45px;

package/src/orange/luxtheme.scss

@@ -1,10 +1,10 @@
 @import "luxpalette";
 @import "../public/global";
 @import "luxcommon";
+@import "../base/luxelevations";
 @import "../base/luxcomponents";
 @import "../base/luxfocus";
 @import "../base/luxstyles";
 @import "../../node_modules/@angular/material/theming";
 @import "../base/luxtheme";
-@import "custom";
-
+@import "custom";

package/CHANGELOG.md

@@ -1,73 +0,0 @@
-# Version 11.11.0
-- **allgemein**: Die Font Awesome- und Material-Icons sollen nicht über die Server von Google und Font Awesome direkt importiert werden. [Issue 17](https://github.com/IHK-GfI/lux-components-theme/issues/17)
-- **stepper-large**: lux-stepper-larger - Der Inhaltscontainer soll sich automatisch der Größe seines Containers anpassen. [Issue 18](https://github.com/IHK-GfI/lux-components-theme/issues/18)
-
-# Version 11.10.0
-## New - Theme "green"
-- **stepper-large**: Styles für den neuen Stepper (lux-stepper-large) entwickeln. [Issue 16](https://github.com/IHK-GfI/lux-components-theme/issues/16)
-
-# Version 11.9.0
-- **allgemein**: Die folgenden neuen CSS-Klassen wurden eingeführt: [Issue 15](https://github.com/IHK-GfI/lux-components-theme/issues/15)
-  - lux-display-none-important
-  - lux-hidden-important
- 
-# Version 11.8.0
-## New - Theme "green"
-- **tabs**: Die Schrift der Tablabels soll auf die Schrift "Korb (700) 22px" umgestellt werden. [Issue 14](https://github.com/IHK-GfI/lux-components-theme/issues/14)
-- **tabs**: Die Hover- und Active-Farbe soll auf den Wert "E3EBF5" eingestellt werden. [Issue 14](https://github.com/IHK-GfI/lux-components-theme/issues/14)
-
-# Version 11.7.1
-## Bug Fixes - Theme "green"
-- **checkbox**: Deaktivierte Checkbox wird nicht angezeigt. [Issue 13](https://github.com/IHK-GfI/lux-components-theme/issues/13)
-
-# Version 11.7.0
-## New
-- **allgemein**: Die folgenden neuen CSS-Variablen wurden eingeführt: [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
- - `--lux-theme-form-control-default-height-not-scalable` 
- - `--lux-theme-form-control-height`
- - `--lux-theme-form-control-height-small`
- - `--lux-theme-form-control-font-size`
- - `--lux-theme-form-control-font-size-small`
-
-## New - Theme "green"
-- **checkbox**: Checkboxen abgerundet darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **radio**: Aktivierte Radio-Buttons mit Haken-Icon darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **form-fields**: Eingabefelder mit abgerundetem Rahmen und Label darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **table**: Die Zeilenhintergrundfarbe alternierend in Weiß und Hellgrau darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **table**: Den Tabellenheader in Grün darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Überschriften (Wochentage) mit zwei Buchstaben darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Tagehintergrund in hellblauen Kästchen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Selektierter Tag als dunkelblaues Kästchen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Monatsname unterhalb der Tagesspaltenköpfe soll entfallen (falls möglich). [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-
-# Version 11.6.1
-## Bug Fixes
-- **table**: Falsche Fokusdarstellung bei den Tabellenzellen (td-Tags) [Issue 11](https://github.com/IHK-GfI/lux-components-theme/issues/11)
-
-# Version 11.6.0
-## New
-- **badge-notification**: Accent-Farbe noch ans Theme anpassen [Issue 7](https://github.com/IHK-GfI/lux-components-theme/issues/7)
-- **allgemein**: Themefarben auch als Css-Variablen zur Verfügung stellen [Issue 8](https://github.com/IHK-GfI/lux-components-theme/issues/8)
-
-# Version 11.5.0
-## New
-- **green**: Die Buttons und Schriften im Theme "green" überarbeiten. [Issue 6](https://github.com/IHK-GfI/lux-components-theme/issues/6)
-
-## Bug Fixes
-- **button**: Unterschiedliche Buttonhöhen (mit/ohne Icons) korrigieren [Issue 5](https://github.com/IHK-GfI/lux-components-theme/issues/5)
-
-# Version 11.4.0
-## New
-- **lux-datetimepicker**: Styles für den neuen Datetimepicker inklusive Uhrzeit bereitstellen. [Issue 4](https://github.com/IHK-GfI/lux-components/issues/4)
-
-# Version 11.3.0
-## New
-- **green**: Theme "green" vollständig überarbeiten. [Issue 3](https://github.com/IHK-GfI/lux-components-theme/issues/3)
-
-# Version 11.2.1
-## Bug Fixes
-- **tab-notification**: "Tab Notification"-Icons haben fälschlicherweise einen roten Rand. [Issue 2](https://github.com/IHK-GfI/lux-components-theme/issues/2)
-
-# Version 11.2.0
-## New
-- **tooltip**: Schriftgröße erhöhen. [Issue 1](https://github.com/IHK-GfI/lux-components-theme/issues/1)