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

package/src/base/components/_luxTileAc.scss

@@ -0,0 +1,64 @@
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxcommon";
+@use "../luxpalette";
+@use "../../public/global";
+@use "../luxelevations";
+
+
+lux-tile-ac {
+  .mat-card.lux-tile-ac {   
+    box-sizing: border-box;
+    display: flex;
+    height: 100%;
+    min-width: 150px;
+    background-color: luxcommon.$app-data-bg;
+    background-image: luxcommon.$app-gradient;
+    border: 1px solid rgba(black, 0.12);
+    font-size: 16px;
+    
+    .lux-tile-icon {
+      color: map.get(luxpalette.$lux-palette-primary, 500);
+      lux-icon {  
+        width: 2em;
+        height: 2em;
+        i,
+        mat-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
+          padding: 0 !important;
+          font-size: 2em !important;
+        }
+        mat-icon.lux-lx-icon-no-size {
+          width: 2em;
+          height: 2em;
+        }
+      }
+    }
+  
+    .lux-tile-header-titel-ac {
+      mat-card-title {
+        color: luxcommon.$dark-primary-text;
+        font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
+        font-size: 20px;
+        margin-bottom: 8px;
+      }
+      mat-card-subtitle.mat-card-subtitle:not(:first-child){
+        color: luxcommon.$dark-secondary-text;
+        font-size: 14px;
+        font-weight: normal;
+        margin-top: 0px;
+      }
+    }
+    
+    &:not([class*="mat-elevation-z"]) {
+      @include luxelevations.lux-elevation-z2;
+    }
+
+    &[class~=lux-cursor]:focus-visible {
+      @include luxfocus.focus-dark-mixin;
+    }
+    &[class~=lux-cursor]:hover {
+      background-color: luxcommon.$lux-hover-color;
+      background-image: unset;
+    }
+  }
+}

package/src/blue/_custom.scss

@@ -1,17 +1,110 @@
+@use "sass:color";
+@use "luxcommon";
+@use "../base/luxelevations";
+
 // Tabs außerhalb einer LUX-Card (z.B. Master-Detail)
 lux-tabs {
   .mat-tab-label:not(.mat-tab-disabled) {
     &:hover:not(.mat-tab-disabled) {
-      background-color: $app-data-bg !important;
+      background-color: luxcommon.$app-data-bg !important;
     }
   }
 }
 
-/**
- * Theming für LUX-Chips
- */
-.lux-chips-autocomplete-panel {
-  margin-left: 4px;
-  margin-right: 4px;
-  border-radius: 4px;
+// x-Button oben rechts im Dialog-Fenster
+.cdk-overlay-container{
+  .lux-dialog .lux-icon-close { 
+    &:hover {
+      background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
+    }
+  }
+}
+
+lux-button button.lux-button {
+  font-family: luxcommon.$app-font-family;
+
+  &.lux-icon-button {
+  
+    & lux-icon:not(.lux-button-icon-round) {
+      line-height: 0.5;
+      
+      &.lux-lx-icon {
+        height: 22px !important;
+        width: 22px !important;
+      }
+      
+      i.lux-fa-icon {
+        font-size: 1.5em !important;
+      }
+      mat-icon.mat-icon.lux-material-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
+        font-size: 2em !important;
+        padding: 0px !important;
+        height: unset !important;
+        width: unset !important;
+      }
+      mat-icon.mat-icon.lux-lx-icon:not(.lux-fa-icon, .lux-material-icon),
+      mat-icon.mat-icon.lux-lx-icon-no-size:not(.lux-fa-icon, .lux-material-icon) {
+        line-height: 0.5;
+        height: 22px !important;
+        width: 22px !important;
+      }
+    }
+
+    &.lux-button-rounded {
+      
+      font-size: luxcommon.$button-font-size;
+      .mat-button-wrapper {
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+      }
+    
+      & lux-icon.lux-button-icon-round {
+        line-height: 1;
+        height: 20px;
+        width: 20px;
+        i,
+        mat-icon.mat-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
+          font-size: 20px !important;
+        }
+        mat-icon.mat-icon.lux-lx-icon:not(.lux-fa-icon, .lux-material-icon),
+        mat-icon.mat-icon.lux-lx-icon-no-size:not(.lux-fa-icon, .lux-material-icon) {
+          height: 20px;
+          width: 20px;
+        }
+      }
+    }
+  }
 }
+
+/*
+ * Theming for LUX-Master-Detail-ac
+ */
+ .lux-master-detail-ac {
+
+  .lux-master-header-container-ac lux-button.master-light-toggle {
+    right: -23px;
+  }
+
+  .lux-detail-header-ac {
+    mat-card.mat-card {
+      @include luxelevations.lux-elevation-z0;
+    }
+  }
+
+  .lux-master-ac-container {
+    padding: 2px 0 2px 2px;
+    &.lux-master-closed {
+      flex: 1 1 30px !important;
+      max-width: 30px !important;
+      min-width: 30px !important;
+    }
+  }
+
+  lux-master-footer-ac {
+    margin-bottom: 4px;
+    border: none;
+    @include luxelevations.lux-elevation-z2
+  }
+ }

package/src/blue/_luxcommon.scss

@@ -16,6 +16,11 @@ $app-header-bg: #335c85;
 $app-content-bg: #f0f0f2;
 $app-footer-bg: #c6d1dc;
 $app-data-bg: #ffffff;
+$app-gradient: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
+$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
+$app-border-color: rgba(black, 0.12);
+$app-headline-font: Roboto;
+$app-font-family: Roboto, Helvetica Neue, sans-serif;
 
 // Form
 $form-border-color: rgba(0, 0, 0, 0.42);
@@ -24,12 +29,21 @@ $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;
+$button-font-size: 14px;
 $button-fav-height: 45px;
 
 // Fokus
+$outline-width: 2px;
+$outline-style: dotted;
 $outline-color-bright: #ffffff;
 $outline-color-dark: #000000;
 
@@ -58,11 +72,14 @@ $componentBgColors: (
   "green": #3e8320,
   "purple": #9900B8,
   "blue": #00569a,
-  "gray": $dark-secondary-text,
+  "gray": #595959,
   "orange": #c75000,
   "brown": #783f04,
   "black": $dark-primary-text,
-  "white": #ffffff
+  "white": #ffffff,
+  "yellow": rgba(244, 203, 37, 1),
+  "pink": rgba(237, 95, 122, 1),
+  "lightblue":  rgba(63, 155, 218, 1)
 );
 
 // Vordergrundfarben (z.B. Badge)

package/src/blue/_luxpalette.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /*
   Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
 */
@@ -100,6 +101,6 @@ $lux-palette_warn: (
   )
 );
 
-$lux-primary-color: map-get($lux-palette_primary, 500);
-$lux-accent-color: map-get($lux-palette_accent, 500);
-$lux-warn-color: map-get($lux-palette_warn, 500);
+$lux-primary-color: map.get($lux-palette_primary, 500);
+$lux-accent-color: map.get($lux-palette_accent, 500);
+$lux-warn-color: map.get($lux-palette_warn, 500);

package/src/blue/luxtheme.scss

@@ -1,10 +1,102 @@
-@import "luxpalette";
-@import "../public/global";
-@import "luxcommon";
-@import "../base/luxcomponents";
-@import "../base/luxfocus";
-@import "../base/luxstyles";
-@import "../../node_modules/@angular/material/theming";
-@import "../base/luxtheme";
-@import "custom";
+@use "../public/global";
 
+@use "luxpalette" as themePalette;
+@use "../base/luxpalette" with (
+    // Farbpaletten    
+    $lux-palette_primary: themePalette.$lux-palette_primary,
+    $lux-palette_accent: themePalette.$lux-palette_accent,
+    $lux-palette_warn: themePalette.$lux-palette_warn,
+
+    // Hauptfarben
+    $lux-primary-color: themePalette.$lux-primary-color,
+    $lux-accent-color:themePalette.$lux-accent-color,
+    $lux-warn-color: themePalette.$lux-warn-color
+);
+
+@use "luxcommon" as themeCommon;
+@use "../base/luxcommon" with ( 
+    // Allgemein
+    $dark-primary-text: themeCommon.$dark-primary-text,
+    $dark-secondary-text: themeCommon.$dark-secondary-text,
+    $dark-disabled-text: themeCommon.$dark-disabled-text,
+    $dark-dividers: themeCommon.$dark-dividers,
+    $dark-focused: themeCommon.$dark-focused,
+
+    $light-primary-text: themeCommon.$light-primary-text,
+    $light-secondary-text: themeCommon.$light-secondary-text,
+    $light-disabled-text: themeCommon.$light-disabled-text,
+    $light-dividers: themeCommon.$light-dividers,
+    $light-focused: themeCommon.$light-focused,
+
+    // App
+    $app-header-bg: themeCommon.$app-header-bg,
+    $app-content-bg: themeCommon.$app-content-bg,
+    $app-footer-bg: themeCommon.$app-footer-bg,
+    $app-data-bg: themeCommon.$app-data-bg,
+    $app-gradient: themeCommon.$app-gradient,
+    $app-gradient-reverse: themeCommon.$app-gradient-reverse,
+    $app-border-color: themeCommon.$app-border-color,
+    $app-headline-font: themeCommon.$app-headline-font,
+    $app-font-family: themeCommon.$app-font-family,
+
+    // Form
+    $form-border-color: themeCommon.$form-border-color,
+    $form-control-default-height-not-scalable: themeCommon.$form-control-default-height-not-scalable,
+    $form-control-height: themeCommon.$form-control-height,
+    $form-control-height-small: themeCommon.$form-control-height-small,
+    $form-control-font-size: themeCommon.$form-control-font-size,
+    $form-control-font-size-small: themeCommon.$form-control-font-size-small,
+    $form-control-label-padding: themeCommon.$form-control-label-padding,
+    $form-control-container-padding: themeCommon.$form-control-container-padding,
+    $form-control-misc-margin: themeCommon.$form-control-misc-margin,
+    $form-control-complete-height: themeCommon.$form-control-complete-height,
+    $form-control-buffer: themeCommon.$form-control-buffer,
+    $form-control-margin: themeCommon.$form-control-margin,
+
+    // Button
+    $button-height: themeCommon.$button-height,
+    $button-fav-height: themeCommon.$button-fav-height,
+    $button-font-size: themeCommon.$button-font-size,
+
+    // Fokus
+    $outline-width: themeCommon.$outline-width,
+    $outline-style: themeCommon.$outline-style,
+    $outline-color-bright: themeCommon.$outline-color-bright,
+    $outline-color-dark: themeCommon.$outline-color-dark,
+
+    // Hover
+    $lux-hover-color: themeCommon.$lux-hover-color,
+    $lux-hover-color-for-dark-background: themeCommon.$lux-hover-color-for-dark-background,
+
+    // Selektion
+    $lux-selected-border-color: themeCommon.$lux-selected-border-color,
+    $lux-selected-bg-color: themeCommon.$lux-selected-bg-color,
+
+    // Stepper (large)
+    $lux-stepper-large-backdrop-bg: themeCommon.$lux-stepper-large-backdrop-bg,
+    $lux-stepper-large-completed-fc: themeCommon.$lux-stepper-large-completed-fc,
+
+    $lux-stepper-large-nav-item-active-fc: themeCommon.$lux-stepper-large-nav-item-active-fc,
+    $lux-stepper-large-nav-item-active-bg: themeCommon.$lux-stepper-large-nav-item-active-bg,
+    $lux-stepper-large-nav-item-disabled-fg: themeCommon.$lux-stepper-large-nav-item-disabled-fg,
+    $lux-stepper-large-nav-item-disabled-bg: themeCommon.$lux-stepper-large-nav-item-disabled-bg,
+    $lux-stepper-large-nav-item-completed-fg: themeCommon.$lux-stepper-large-nav-item-completed-fg,
+    $lux-stepper-large-nav-item-completed-bg: themeCommon.$lux-stepper-large-nav-item-completed-bg,
+
+    // Hintergrundfarben (z.B. Badge oder Progress)
+    $componentBgColors: themeCommon.$componentBgColors,
+
+    // Vordergrundfarben (z.B. Badge)
+    $componentFontColors: themeCommon.$componentFontColors,
+
+    // Farben für einen dunklen Hintergrund (z.B. Snackbar).
+    $colorsForDarkBg: themeCommon.$colorsForDarkBg
+);
+
+@use "../base/luxelevations";
+@use "../base/luxcomponents";
+@use "../base/luxfocus";
+@use "../base/luxstyles";
+@use "../base/luxtheme";
+
+@use "custom";