@ihk-gfi/lux-components-theme 19.2.0 → 21.0.0

package/src/base-templates/common/_luxbreakpoints.scss

@@ -0,0 +1,96 @@
+@use "sass:map";
+
+$breakpoints: (
+  "xs": 599px,
+  "sm": 959px,
+  "md": 1279px,
+  "lg": 1919px,
+  "xl": 4999px
+);
+
+@mixin xs {
+  @media screen and (max-width: map.get($breakpoints, "xs")) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "xs")} + 1px)) and (max-width: map.get($breakpoints, "sm")) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "sm")} + 1px)) and (max-width: map.get($breakpoints, "md")) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "md")} + 1px)) and (max-width: map.get($breakpoints, "lg")) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "lg")} + 1px)) and (max-width: map.get($breakpoints, "xl")) {
+    @content;
+  }
+}
+@mixin xxl {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "xl")} + 1px)) {
+    @content;
+  }
+}
+
+@mixin breakpoint($bp: 0) {
+  @media (max-width: $bp) {
+    @content;
+  }
+}
+
+@mixin lt-sm {
+  @media screen and (max-width: map.get($breakpoints, "xs")) {
+    @content;
+  }
+}
+@mixin lt-md {
+  @media screen and (max-width: map.get($breakpoints, "sm")) {
+    @content;
+  }
+}
+@mixin lt-lg {
+  @media screen and (max-width: map.get($breakpoints, "md")) {
+    @content;
+  }
+}
+@mixin lt-xl {
+  @media screen and (max-width: map.get($breakpoints, "lg")) {
+    @content;
+  }
+}
+@mixin gt-xs {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "xs")} + 1px)) {
+    @content;
+  }
+}
+@mixin gt-sm {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "sm")} + 1px)) {
+    @content;
+  }
+}
+@mixin gt-md {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "md")} + 1px)) {
+    @content;
+  }
+}
+@mixin gt-lg {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "lg")} + 1px)) {
+    @content;
+  }
+}
+@mixin gt-xl {
+  @media screen and (min-width: calc(#{map.get($breakpoints, "xl")} + 1px)) {
+    @content;
+  }
+}

package/src/{base → base-templates/common}/_luxelevations.scss

@@ -39,7 +39,7 @@
   @include mat.elevation(4);
 }
 @mixin lux-elevation-z6 {
-@include mat.elevation(6);
+  @include mat.elevation(6);
 }
 @mixin lux-elevation-z16 {
   @include mat.elevation(16);

package/src/base-templates/common/_luxfocus.scss

@@ -0,0 +1,84 @@
+@mixin focus-dark-mixin {
+  outline: var(--lux-theme-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: var(--lux-theme-outline-dark);
+  outline-offset: calc(var(--lux-theme-outline-width) * -1);
+}
+
+@mixin focus-bright-mixin {
+  outline: var(--lux-theme-outline-bright);
+}
+
+@mixin lux-button-focus {
+  $width: calc(var(--lux-theme-outline-width) - 1px);
+  outline: $width var(--lux-theme-outline-style) var(--lux-theme-outline-color-dark) !important;
+  outline-offset: 1px;
+}
+
+@mixin lux-selectable-mixin {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+@mixin lux-selected-mixin {
+  background-color: var(--lux-theme-selected-bg-color) !important;
+  position: relative;
+  border-radius: 4px;
+
+  &:after {
+    content: "";
+    left: 0;
+    width: 6px;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    border-left: 4px solid var(--lux-theme-selected-border-color);
+    border-radius: 4px 0 0 4px;
+  }
+}
+
+@mixin lux-selected-mixin-ac {
+  background: var(--lux-theme-app-gradient);
+  background-color: #fff;
+  border: 1px solid var(--lux-theme-primary-20);
+  box-shadow: 0 0 0 1px var(--lux-theme-primary-500) inset;
+  position: relative;
+  border-radius: 4px;
+}
+@mixin lux-selected-mixin-reverse-ac {
+  background: var(--lux-theme-app-gradient-reverse);
+  background-color: #fff;
+  border: 1px solid var(--lux-theme-primary-20);
+  box-shadow: 0 0 0 1px var(--lux-theme-primary-500) inset;
+  position: relative;
+  border-radius: 4px;
+}
+
+@mixin lux-selected-bottom-mixin {
+  position: relative;
+
+  &:after {
+    content: "";
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    border-bottom: 4px solid var(--lux-theme-selected-border-color);
+  }
+}
+
+@mixin lux-hovered-mixin {
+  background-color: var(--lux-theme-hover-color) !important;
+  border-radius: 4px;
+}
+
+@mixin lux-hovered-mixin-inverted {
+  color: #fff;
+  background-color: var(--lux-theme-hover-color);
+}

package/src/{base → base-templates/common}/_luxlayout.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use "sass:list";
 @use "luxbreakpoints" as luxbp;
 

package/src/base-templates/common/_luxstyles.scss

@@ -0,0 +1,510 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "luxbreakpoints";
+
+body {
+  color: var(--lux-theme-dark-primary-text);
+  font-family: var(--lux-theme-app-font-family);
+}
+
+h1 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 2rem;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 0.8rem;
+}
+
+h2 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 0.8rem;
+}
+
+h3 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 0.8rem;
+}
+
+h4 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1rem;
+  font-weight: 500;
+  margin-block-start: 1.2em;
+  margin-block-end: 0.8rem;
+}
+
+h5 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 0.875rem;
+  font-weight: 700;
+  margin-block-start: 2em;
+  margin-block-end: 0.8rem;
+}
+
+h6 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin-block-start: 2em;
+  margin-block-end: 0.8rem;
+}
+
+a:not(.lux-link) {
+  background-color: var(--lux-theme-link-plain-background-color);
+  color: var(--lux-theme-link-plain-color);
+  text-decoration: underline;
+
+  &:hover:not(:disabled):not(.lux-disabled) {
+    background-color: var(--lux-theme-link-plain-hover-background-color);
+    color: var(--lux-theme-link-plain-hover-color);
+    cursor: pointer;
+  }
+
+  &:disabled,
+  &.lux-disabled {
+    color: var(--lux-theme-dark-disabled-text);
+    cursor: text;
+    text-decoration: none;
+  }
+}
+
+.lux-app-header-bg {
+  background-color: var(--lux-theme-app-header-bg);
+}
+
+.lux-app-content-bg {
+  background-color: var(--lux-theme-app-content-bg);
+}
+
+.lux-app-footer-bg {
+  background-color: var(--lux-theme-app-footer-bg);
+}
+
+.lux-app-data-bg {
+  background-color: var(--lux-theme-app-data-bg);
+}
+
+.lux-selected-bg {
+  background-color: var(--lux-theme-selected-bg-color);
+}
+
+.lux-hover-bg {
+  background-color: var(--lux-theme-hover-color);
+}
+
+.lux-hover-dark-bg {
+  background-color: var(--lux-theme-hover-color)-for-dark-background;
+}
+
+.lux-gradient-bg {
+  background-color: #fff; //Fallback
+  background-image: var(--lux-theme-app-gradient);
+}
+
+.lux-color-dark-divider {
+  color: var(--lux-theme-dark-dividers);
+}
+
+.lux-color-light-divider {
+  color: var(--lux-theme-light-dividers);
+}
+
+.lux-outline-color-light {
+  color: var(--lux-theme-outline-color-bright);
+}
+
+.lux-outline-color-dark {
+  color: var(--lux-theme-outline-color-dark);
+}
+
+.lux-outline-width {
+  outline-width: var(--lux-theme-outline-width);
+}
+
+.lux-outline-style {
+  outline-style: var(--lux-theme-outline-style);
+}
+
+.lux-outline-light {
+  color: var(--lux-theme-outline-color-bright);
+  outline-width: var(--lux-theme-outline-width);
+  outline-style: var(--lux-theme-outline-style);
+}
+
+.lux-outline-dark {
+  color: var(--lux-theme-outline-color-dark);
+  outline-width: var(--lux-theme-outline-width);
+  outline-style: var(--lux-theme-outline-style);
+}
+
+.lux-highlight-section {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  margin: 16px 0;
+  padding: 16px 16px;
+  border: 1px solid var(--lux-theme-dark-dividers);
+  display: flex;
+  word-break: break-word;
+
+  &.column {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &.row {
+    flex-direction: row;
+    gap: 16px;
+  }
+}
+
+.lux-highlight-section-label {
+  margin-top: 0;
+  margin-left: 0;
+}
+
+.lux-simple-form {
+  margin: 4px 0;
+  display: flex;
+
+  &.column {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &.row {
+    flex-direction: row;
+    gap: 16px;
+  }
+}
+
+html,
+body,
+.lux-app-container {
+  height: 100%;
+}
+
+.lux-app-container {
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 100%;
+}
+
+body {
+  -webkit-overflow-scrolling: touch;
+}
+
+.mat-mdc-dialog-container {
+  background-color: var(--lux-theme-app-content-bg) !important;
+}
+
+// für Demo
+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-crop-2-lines {
+  overflow: hidden;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.lux-label {
+  color: var(--lux-theme-dark-secondary-text);
+  font-size: 0.75rem;
+}
+
+.lux-hint {
+  color: var(--lux-theme-dark-secondary-text);
+  font-size: 0.75rem;
+}
+
+.lux-sr-only {
+  // sr=screen-reader vgl. https://webaim.org/techniques/css/invisiblecontent/
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.lux-border-box {
+  box-sizing: border-box;
+}
+
+.lux-content-box {
+  box-sizing: content-box;
+}
+
+.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: var(--lux-theme-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;
+}
+
+.lux-reset-icon {
+  display: inline-block;
+
+  .lux-icon:hover {
+    border-radius: 50%;
+    color: var(--lux-theme-on-hover-color);
+    background-color: var(--lux-theme-hover-color);
+    cursor: pointer;
+  }
+}
+
+/* <MARGINS / PADDINGS> */
+
+/*
+  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;
+  }
+}
+
+$componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "black", "white", "yellow", "pink", "lightblue");
+
+@each $colorName in $componentColorNames {
+  .lux-color-#{"" + $colorName + ""} {
+    color: var(--lux-theme-custom-#{$colorName});
+  }
+}
+
+@each $colorName in $componentColorNames {
+  .lux-bg-color-#{"" + $colorName + ""} {
+    background-color: var(--lux-theme-custom-#{$colorName});
+  }
+}
+
+@each $colorName in $componentColorNames {
+  .lux-font-color-#{"" + $colorName + ""} {
+    color: var(--lux-theme-custom-on-#{$colorName});
+  }
+}
+
+.lux-color-dark-primary-text {
+  color: var(--lux-theme-dark-primary-text);
+}
+
+.lux-color-dark-secondary-text {
+  color: var(--lux-theme-dark-secondary-text);
+}
+
+.lux-color-dark-disabled-text {
+  color: var(--lux-theme-dark-disabled-text);
+}
+
+.lux-color-dark-focused {
+  color: var(--lux-theme-dark-focused);
+}
+
+.lux-color-light-primary-text {
+  color: var(--lux-theme-light-primary-text);
+}
+
+.lux-color-light-secondary-text {
+  color: var(--lux-theme-light-secondary-text);
+}
+
+.lux-color-light-disabled-text {
+  color: var(--lux-theme-light-disabled-text);
+}
+
+.lux-color-light-focused {
+  color: var(--lux-theme-light-focused);
+}
+
+.lux-text-highlight-primary,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-primary,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-primary {
+  color: var(--mat-sys-on-primary-container);
+  background-color: var(--mat-sys-primary-container);
+
+  @media (prefers-contrast: more) {
+    color: var(--lux-theme-dark-primary-text);
+    background-color: var(--lux-theme-primary-70);
+  }
+}
+
+.lux-text-highlight-primary-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-primary-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-primary-strong {
+  color: var(--lux-theme-dark-primary-text);
+  background-color: var(--lux-theme-primary-70);
+}
+
+.lux-text-highlight-success,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-success,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-success {
+  color: var(--mat-sys-on-tertiary-container);
+  background-color: var(--mat-sys-tertiary-container);
+
+  @media (prefers-contrast: more) {
+    color: var(--mat-sys-on-tertiary);
+    background-color: var(--mat-sys-tertiary);
+  }
+}
+
+.lux-text-highlight-success-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-success-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-success-strong {
+  color: #1c1b1b;
+  background-color: #56bd66;
+}
+
+.lux-text-highlight-alert,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-alert,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-alert {
+  color: #1c1b1b;
+  background-color: #fdedab;
+
+  @media (prefers-contrast: more) {
+    color: var(--lux-theme-custom-on-yellow);
+    background-color: var(--lux-theme-custom-yellow);
+  }
+}
+
+.lux-text-highlight-alert-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-alert-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-alert-strong {
+  color: var(--lux-theme-custom-on-yellow);
+  background-color: var(--lux-theme-custom-yellow);
+}
+
+.lux-text-highlight-error,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-error,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-error {
+  color: #93000c;
+  background-color: #ffdad6;
+
+  @media (prefers-contrast: more) {
+    color: var(--lux-theme-dark-primary-text);
+    background-color: var(--lux-theme-warn-70);
+  }
+}
+
+.lux-text-highlight-error-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even).lux-text-highlight-error-strong,
+lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-highlight-error-strong {
+  color: var(--lux-theme-dark-primary-text);
+  background-color: var(--lux-theme-warn-70);
+}