@ihk-gfi/lux-components-theme 11.4.0

package/src/base/_luxstyles.scss

@@ -0,0 +1,503 @@
+html,
+body,
+.lux-app-container {
+  height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $app-font-family;
+}
+
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-block-start: 1.2em;
+  margin-block-end: 14px;
+}
+
+h2 {
+  font-size: 24px;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 14px;
+}
+
+h3 {
+  font-size: 20px;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 14px;
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-block-start: 1.2em;
+  margin-block-end: 14px;
+}
+
+h5 {
+  font-size: 14px;
+  font-weight: 700;
+  margin-block-start: 2em;
+  margin-block-end: 14px;
+}
+
+h6 {
+  font-size: 12px;
+  font-weight: 700;
+  margin-block-start: 2em;
+  margin-block-end: 14px;
+}
+
+.lux-app-header-bg {
+  background-color: $app-header-bg;
+}
+
+.lux-app-content-bg {
+  background-color: $app-content-bg;
+}
+
+.lux-app-footer-bg {
+  background-color: $app-footer-bg;
+}
+
+.lux-app-data-bg {
+  background-color: $app-data-bg;
+}
+
+.lux-selected-bg {
+  background-color: $lux-selected-bg-color;
+}
+
+.lux-hover-bg {
+  background-color: $lux-hover-color;
+}
+
+.lux-hover-dark-bg {
+  background-color: $lux-hover-color-for-dark-background;
+}
+
+.lux-color-dark-divider {
+  color: $dark-dividers;
+}
+
+.lux-color-light-divider {
+  color: $light-dividers;
+}
+
+.lux-outline-color-light {
+  color: $outline-color-bright;
+}
+
+.lux-outline-color-dark {
+  color: $outline-color-dark;
+}
+
+.lux-outline-width {
+  outline-width: $outline-width;
+}
+
+.lux-outline-style {
+  outline-style: $outline-style;
+}
+
+.lux-outline-light {
+  color: $outline-color-bright;
+  outline-width: $outline-width;
+  outline-style: $outline-style;
+}
+
+.lux-outline-dark {
+  color: $outline-color-dark;
+  outline-width: $outline-width;
+  outline-style: $outline-style;
+}
+
+.lux-highlight-section {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  padding: 8px;
+  border: 1px solid $dark-dividers;
+  display: flex;
+  margin: 0 0 16px 0;
+  word-break: break-word;
+}
+
+.lux-highlight-section-label {
+  margin-top: 0;
+  margin-left: 0;
+}
+
+.lux-app-container {
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 100%;
+}
+
+body {
+  -webkit-overflow-scrolling: touch;
+}
+
+div {
+  font-family: $app-font-family;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  &.lux-file-preview-backdrop {
+    background: #000;
+    opacity: 0.8 !important;
+  }
+}
+
+.mat-dialog-container {
+  background-color: $app-content-bg !important;
+}
+
+lux-card.lux-card-grow {
+  display: flex;
+  flex: 1 1 auto;
+  width: 400px;
+  min-width: 0;
+
+  mat-card {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  mat-card-content {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+.lux-crop {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.lux-label {
+  color: $dark-secondary-text;
+  font-size: 75%;
+}
+
+.lux-hint {
+  color: $dark-secondary-text;
+  font-size: 12px;
+}
+
+.lux-display-none {
+  display: none;
+}
+
+.lux-hidden {
+  visibility: hidden;
+}
+
+.lux-nowrap {
+  white-space: nowrap;
+}
+
+.lux-cursor {
+  cursor: pointer;
+}
+
+.lux-block-pointer-events {
+  pointer-events: none;
+}
+
+.lux-vertical-align-baseline {
+  vertical-align: baseline !important;
+}
+
+.lux-black-semi-transparent {
+  color: $dark-primary-text;
+}
+
+.lux-semi-transparent {
+  opacity: 0.6;
+}
+
+.lux-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.lux-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.lux-overflow-wrap-break-word {
+  overflow-wrap: break-word;
+}
+
+.lux-bold {
+  font-weight: bold !important;
+}
+
+.lux-uppercase {
+  text-transform: uppercase !important;
+}
+
+.lux-lowercase {
+  text-transform: lowercase !important;
+}
+
+.lux-hyphenate {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: normal;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  overflow-x: auto;
+}
+
+/* <MARGINS / PADDINGS> */
+
+.lux-p-footer {
+  padding: 8px;
+}
+
+.lux-p-header {
+  padding: 8px;
+}
+
+.lux-snackbar {
+  top: 68px;
+  right: 8px;
+  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.
+  visibility: hidden;
+}
+
+.mat-snack-bar-handset .lux-snackbar {
+  left: 8px;
+  width: auto !important;
+}
+
+/*
+  Berechnet das Quadrat einer Zahl und gibt das Ergebnis mit
+  einer Einheit (z.B. px) zurueck.
+*/
+@function pow($number, $exponent, $unit) {
+  $value: 0;
+
+  @if $exponent > 0 {
+    $value: 1;
+    @for $i from 1 through $exponent {
+      $value: ($value * $number);
+    }
+  }
+
+  @return $value + $unit;
+}
+
+/*
+  Zum Anpassen der Schritte einfach pxStep erhoehen oder fuer Weitere CSS-Klassen
+  steps um zusaetzliche Eintraege ergaenzen (z.B. 1,2,4, etc.).
+
+  Generiert fuer Padding: lux-p[t,b,l,r]-xx
+  Generiert fuer Margin: lux-m[t,b,l,r]-xx
+ */
+$directions: "t", "b", "l", "r";
+$directionsLong: "top", "bottom", "left", "right";
+$pxStep: 2;
+$steps: 0, 1, 2, 3, 4;
+
+@for $i from 1 through length($directions) {
+  @each $step in $steps {
+    .lux-m-#{$step} {
+      margin: pow($pxStep, $step, px);
+    }
+    .lux-m#{nth($directions, $i)}-#{$step} {
+      margin-#{nth($directionsLong, $i)}: pow($pxStep, $step, px);
+    }
+    .lux-p-#{$step} {
+      padding: pow($pxStep, $step, px);
+    }
+    .lux-p#{nth($directions, $i)}-#{$step} {
+      padding-#{nth($directionsLong, $i)}: pow($pxStep, $step, px);
+    }
+  }
+}
+
+/*
+  Erstellt die Layout-Gaps (Margin-Abstände für Children von fxLayouts).
+  Um weitere Steps hinzufuegen die Variable gapSteps um die entsprechenden Werte ergaenzen.
+ */
+$gapSteps: 10, 20, 30;
+
+@each $gapStep in $gapSteps {
+  .lux-flex-layout-gap-#{$gapStep}[style*="row"] > *:not(:last-child) {
+    margin-right: #{$gapStep}px;
+  }
+  .lux-flex-layout-gap-#{$gapStep}[style*="column"] > *:not(:last-child) {
+    margin-bottom: #{$gapStep}px;
+  }
+}
+
+/*
+  Erstellt die Z-Indizes.
+  Um weitere Z-Indizes anzulegen, die Variable zindexSteps um die entsprechenden Werte ergaenzen.
+ */
+$zindexSteps: 100, 500, 1000;
+
+@each $zindexStep in $zindexSteps {
+  .lux-z-index-#{$zindexStep} {
+    z-index: #{$zindexStep};
+  }
+}
+
+/*
+  Für die Darstellung von uppercase-Labels wenn die Configuration das erlaubt.
+ */
+.lux-uppercase > lux-button,
+lux-button.lux-uppercase {
+  .lux-button-label {
+    text-transform: uppercase;
+  }
+}
+
+@each $colorName, $colorNameHex in $componentBgColors {
+  .lux-color-#{''+$colorName+''} {
+    color: $colorNameHex;
+  }
+}
+
+@each $colorName, $colorNameHex in $componentBgColors {
+  .lux-bg-color-#{''+$colorName+''} {
+    background: $colorNameHex;
+  }
+}
+
+@each $colorName, $colorNameHex in $componentFontColors {
+  .lux-font-color-#{''+$colorName+''} {
+    color: $colorNameHex;
+  }
+}
+
+.lux-color-dark-primary-text {
+  color: $dark-primary-text;
+}
+
+.lux-color-dark-secondary-text {
+  color: $dark-secondary-text;
+}
+
+.lux-color-dark-disabled-text {
+  color: $dark-disabled-text;
+}
+
+.lux-color-dark-focused {
+  color: $dark-focused;
+}
+
+.lux-color-light-primary-text {
+  color: $light-primary-text;
+}
+
+.lux-color-light-secondary-text {
+  color: $light-secondary-text;
+}
+
+.lux-color-light-disabled-text {
+  color: $light-disabled-text;
+}
+
+.lux-color-light-focused {
+  color: $light-focused;
+}
+
+$sizes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A300, A400, A700;
+$paletten: $lux-palette_primary, $lux-palette_accent, $lux-palette_warn;
+$paletteNamen: primary, accent, warn;
+
+@each $size in $sizes {
+  @for $i from 1 through 3 {
+    .lux-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)} {
+      color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)}-contrast {
+      color: map-get(nth($paletten, $i), contrast, $size);
+    }
+
+    .lux-bg-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)} {
+      background-color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-bg-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)}-contrast {
+      background-color: map-get(nth($paletten, $i), contrast, $size);
+    }
+
+    .lux-border-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)} {
+      border-color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-border-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)}-contrast {
+      border-color: map-get(nth($paletten, $i), contrast, $size);
+    }
+
+    .lux-outline-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)} {
+      outline-color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-outline-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)}-contrast {
+      outline-color: map-get(nth($paletten, $i), contrast, $size);
+    }
+
+    .lux-text-decoration-#{nth($paletteNamen, $i)}-color-#{to-lower-case("" + $size)} {
+      text-decoration-color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-text-decoration-#{nth($paletteNamen, $i)}-color-#{to-lower-case("" + $size)}-contrast {
+      text-decoration-color: map-get(nth($paletten, $i), contrast, $size);
+    }
+
+    .lux-column-rule-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)} {
+     column-rule-color: map-get(nth($paletten, $i), $size);
+    }
+
+    .lux-column-rule-color-#{nth($paletteNamen, $i)}-#{to-lower-case("" + $size)}-contrast {
+      column-rule-color: map-get(nth($paletten, $i), contrast, $size);
+    }
+  }
+}
+
+.lux-badge-notification {
+  &.mat-badge-large {
+    .mat-badge-content {
+      font-size: 15px;
+    }
+  }
+
+  &.mat-badge .mat-badge-content {
+    border: 2px solid white;
+  }
+
+  &.mat-badge.lux-badge-no-border .mat-badge-content {
+    border: 2px solid transparent;
+  }
+
+  &.mat-badge:not(.mat-badge-disabled).mat-badge-accent .mat-badge-content {
+    background-color: map-get($componentBgColors, "green");
+  }
+
+  &.lux-badge-color-default {
+    &.mat-badge:not(.mat-badge-disabled) .mat-badge-content {
+      color: white;
+      background: #595959;
+    }
+  }
+}

package/src/base/_luxtheme.scss

@@ -0,0 +1,7 @@
+$lux-primary: mat-palette($lux-palette_primary);
+$lux-accent: mat-palette($lux-palette_accent);
+$lux-warn: mat-palette($lux-palette_warn);
+$lux-theme: mat-light-theme($lux-primary, $lux-accent, $lux-warn);
+
+@include mat-core();
+@include angular-material-theme($lux-theme);

package/src/blue/_luxcommon.scss

@@ -0,0 +1,64 @@
+// Allgemein
+$dark-primary-text: rgba(black, 0.87);
+$dark-secondary-text: rgba(black, 0.65);
+$dark-disabled-text: rgba(black, 0.40);
+$dark-dividers: rgba(black, 0.20);
+$dark-focused: rgba(black, 0.12);
+
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.7);
+$light-disabled-text: rgba(white, 0.5);
+$light-dividers: rgba(white, 0.20);
+$light-focused: rgba(white, 0.12);
+
+// App
+$app-header-bg: #335c85;
+$app-content-bg: #f0f0f2;
+$app-footer-bg: #c6d1dc;
+$app-data-bg: #ffffff;
+
+// Form
+$form-border-color: rgba(0, 0, 0, 0.42);
+
+// Fokus
+$outline-color-bright: #ffffff;
+$outline-color-dark: #000000;
+
+// Hover
+$lux-hover-color: #f2f2f2;
+$lux-hover-color-for-dark-background: #335c85;
+
+// Selektion
+$lux-selected-border-color: #0073b3;
+$lux-selected-bg-color: #e2e8ee;
+
+// Hintergrundfarben (z.B. Badge oder Progress)
+$componentBgColors: (
+  "red": #b01211,
+  "green": #3e8320,
+  "purple": #9900B8,
+  "blue": #00569a,
+  "gray": $dark-secondary-text,
+  "orange": #c75000,
+  "brown": #783f04,
+  "black": $dark-primary-text,
+  "white": #ffffff
+);
+
+// Vordergrundfarben (z.B. Badge)
+$componentFontColors: (
+  black: #000000,
+  white: #ffffff
+);
+
+// Farben für einen dunklen Hintergrund (z.B. Snackbar).
+$colorsForDarkBg: (
+  "red": #f17474,
+  "green": #53b12b,
+  "purple": #e561ff,
+  "blue": #729eca,
+  "gray": #c8c8c8,
+  "orange": #ec9c1b,
+  "brown": #eb7c05,
+  "white": #ffffff
+);

package/src/blue/_luxpalette.scss

@@ -0,0 +1,105 @@
+/*
+  Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
+*/
+$lux-palette_primary: (
+  50 : #e7ebf0,
+  100 : #c6d1dc,
+  200 : #99aec2,
+  300 : #708daa,
+  400 : #527497,
+  500 : #335c85,
+  600 : #2e547d,
+  700 : #274a72,
+  800 : #204168,
+  900 : #143055,
+  A100 : #b5d5e8,
+  A200 : #4d9dca,
+  A400 : #0073b3,
+  A700 : #00569a,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #000000,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #000000,
+  )
+);
+
+$lux-palette_accent: (
+  50 : #e6ebe3,
+  100 : #c0ceb9,
+  200 : #96ad8b,
+  300 : #6c8c5c,
+  400 : #4d7339,
+  500 : #2d5a16,
+  600 : #285213,
+  700 : #224810,
+  800 : #1c3f0c,
+  900 : #112e06,
+  A100 : #9ae288,
+  A200 : #5cff35,
+  A400 : #33ff02,
+  A700 : #2de700,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #000000,
+  )
+);
+
+$lux-palette_warn: (
+  50 : #F6E3E2,
+  100 : #e7b8b8,
+  200 : #d88988,
+  300 : #c85958,
+  400 : #bc3635,
+  500 : #b01211,
+  600 : #a9100f,
+  700 : #a00d0c,
+  800 : #970a0a,
+  900 : #870505,
+  A100 : #eccaca,
+  A200 : #ff8181,
+  A400 : #ff4e4e,
+  A700 : #ff3535,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #ffffff,
+  )
+);
+
+$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

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