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

package/src/base/components/_luxAppHeaderAc.scss

@@ -0,0 +1,187 @@
+@use "sass:color";
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxcommon";
+@use "../luxpalette";
+@use "../../public/global";
+@use "../luxelevations";
+@use "../luxSvgIcons" as luxicons;
+
+lux-app-header-ac {
+  display: block;
+
+  .lux-image {
+    cursor: pointer;
+    padding: 4px;
+    &:focus-visible {
+      @include luxfocus.focus-dark-mixin;
+      border-radius: 4px;
+    }
+  }
+
+  lux-button {
+    button.lux-button.lux-button-rounded {
+      min-width: 36px; //Weil der Menu-Trigger hier ein andere Min-width setzt- könnte vielleich geändert werden?
+      width: 36px;
+      padding-left: 0px !important;
+      padding-right: 0px !important;
+      background-color: transparent;
+      @include luxelevations.lux-elevation-z0;
+      
+      lux-icon {
+        color: luxpalette.$lux-primary-color;
+      }
+
+      &:hover:not([disabled]).mat-fab:hover.mat-primary {
+        lux-icon { 
+          color: #ffffff !important; 
+        }
+      }
+      &:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
+        background-color: transparent !important;
+        lux-icon {
+          color: map.get(luxpalette.$lux-palette_primary, 700) !important;
+        }
+        @include luxfocus.focus-dark-mixin;
+      }  
+    }
+
+    &.menu-opened {
+      button.lux-button.lux-button-rounded {
+        background-color: map.get(luxpalette.$lux-palette_primary, 300);
+        lux-icon {
+          color: #ffffff !important;
+        }
+      }
+    }
+
+    &.lux-menu-trigger-default {
+      button.mat-button.lux-button {
+        &:hover {
+          background-color: map.get(luxpalette.$lux-palette-primary, 300) !important;
+          color: #ffffff !important;
+        }
+        &:focus-visible:not(:hover) {
+          color: map.get(luxpalette.$lux-palette-primary, 700)!important;
+          background-color: transparent !important;
+        }
+        &:active {
+          color: map.get(luxpalette.$lux-palette-primary, 700)!important;
+        }
+      }
+    }
+  }
+  
+  .lux-app-header-top-bar {
+    padding: 4px 24px;
+    min-height: 52px;
+    font-size: 1rem;
+    color: luxcommon.$dark-primary-text;
+    background-color: #fff;
+
+    &.lux-mobile {
+      padding: 4px;
+    }
+    
+    lux-menu {
+      width: unset;
+      .lux-menu-extended {
+        overflow: unset;
+      }
+    }
+  }
+
+  .lux-app-header-nav-bar {
+    background-color: map.get(luxpalette.$lux-palette-primary, 50);
+    padding: 4px 24px;
+    min-height: 30px;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &.lux-mobile {
+      padding: 4px;
+    }
+
+    .lux-app-title {
+      color:luxcommon.$dark-primary-text;
+      padding: 4px;
+      font-size: 20px;
+      font-weight: 700;
+      font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
+
+      &.lux-mobile {
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .lux-header-ac-nav-menu {
+      lux-button.lux-menu-item {
+        button.lux-button .lux-button-label {
+          font-size: 16px !important;
+          letter-spacing: 0px;
+        }
+
+        &.nav-item-selected  button.lux-button .lux-button-label {
+          font-weight: 600;
+        }
+      }
+
+      .lux-menu-extended {
+        padding: 0;
+      }
+    }
+  }
+}
+.cdk-overlay-pane {
+  button.lux-menu-item {
+    margin: 0px;
+
+    &.lux-selected-item-ac {
+      font-weight: 600;
+      & .lux-button-label::after {
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        right: 0;
+        top: 14px;
+        margin: 0 10px 0 4px;
+        background-color: luxpalette.$lux-primary-color;
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+
+    &:not([disabled=true]):hover {
+      background-color: map-get(luxpalette.$lux-palette_primary, 300) !important;
+      color: #ffffff;
+      .mat-icon-no-color {
+        color: #ffffff;
+      }
+      &::after {
+        background-color: #ffffff;
+      }
+    }
+    
+    &:not([disabled=true]):focus-visible {
+      background-color: map-get(luxpalette.$lux-palette_primary, 300);
+      color: #ffffff;
+      .mat-icon-no-color {
+        color: #ffffff;
+      }
+      @include luxfocus.focus-dark-mixin-inline;
+      &::after {
+        width: 16px;
+        background-color: #ffffff;
+      }
+    }
+  }
+  
+}

package/src/base/components/_luxFormControlWrapper.scss

@@ -0,0 +1,174 @@
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxstyles";
+@use "../luxcommon";
+@use "../luxpalette";
+
+
+
+@mixin crop {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+@mixin form-label {
+  min-height: 1.2em;
+  font-size: 0.75em;
+  line-height: 1.2em;
+  color: luxcommon.$dark-secondary-text;
+}
+lux-form-control-wrapper {
+  width: 100%;
+
+  .lux-form-control-wrapper {
+    display: flex;
+    box-sizing: border-box;
+    font-size: luxcommon.$form-control-font-size;
+    color: luxcommon.$dark-primary-text;
+    margin: 0.25em 0;
+  
+    .lux-form-control-label-authentic {
+      @include form-label;
+      color: map.get(luxpalette.$lux-palette_primary, 500);
+      margin: 0 calc(0.5em + 1px) 0.25em calc(0.5em + 1px);
+      > * {
+        @include crop;
+      }
+      &.lux-label-long-format {
+        > * {
+          white-space: normal;
+          text-overflow: unset;
+          word-wrap: break-word;
+        }
+      }
+    }
+  
+    .lux-form-control-container-authentic {
+      box-sizing: border-box;
+      padding: 0.75em 0.5em;
+      font-size: luxcommon.$form-control-font-size;
+      color: luxcommon.$dark-primary-text;
+      background-color: #fff;
+      line-height: 1.5em;
+      border: 1px solid luxcommon.$form-border-color;
+      border-radius: 4px;
+      &.lux-no-input-row {
+        // lux-toggel-ac, lux-checkbox-ac, lux-slider-ac, lux-radio-ac werden auf der Baseline ausgerichtet
+        // haben aber nicht den Rahmen, den die Input-Elemente haben
+        background-color: transparent;
+        border: none;
+        padding: 0.75em 0em;
+      }
+    }
+  
+    .lux-form-control-misc-authentic {
+      box-sizing: border-box;
+      margin: 0.25em calc(0.5em + 1px) 0 calc(0.5em + 1px);
+   
+      @include form-label;
+      word-wrap: break-word;
+   
+      .lux-form-control-character-counter-authentic {
+        min-width: 40px;
+        margin-left: 2px;
+        color: luxcommon.$dark-secondary-text !important;
+        text-align: end;
+  
+        &:only-child {
+          width: 100%;
+        }
+      }
+    }
+  
+    // zusätzlicher Container für Elemente, die einen input-prefix/input-suffix haben
+    // aktuell: lux-autocomplete-ac und lux-input-ac
+    .lux-input-row-authentic {
+      font-size: luxcommon.$form-control-font-size;
+      min-height: 1.5em;
+
+      .lux-input-prefix-container,
+      .lux-input-suffix-container {
+        width: auto;
+        white-space: nowrap;
+        display: inline-block;
+        max-height: 1.5em;
+        
+      
+        lux-icon {
+          i {
+            padding: 0 !important;
+            margin: 0;
+            font-size: 1em;
+          }
+          mat-icon {
+            padding: 0 !important;
+            margin: 0;
+            font-size: 1.5em !important;
+            &.lux-lx-icon-no-size {
+              width: 1em;
+              height: 1em;
+            }
+          }
+        }
+        
+      }
+    }
+    
+    // Definitionen der einzelnen States der Form-Controls
+    &:hover:not(.lux-form-control-disabled-authentic):not(.lux-focused-authentic):not(.lux-form-control-error-authentic) {
+      .lux-form-control-container-authentic:not(.lux-no-input-row) {
+        border-color: black;
+        box-shadow: 0 0 0 1px black inset;   
+      }
+    }
+    &.lux-focused-authentic{
+      .lux-form-control-label-authentic > * {
+        color: map.get(luxpalette.$lux-palette_primary, 400);
+      }
+      .lux-form-control-container-authentic:not(.lux-no-input-row) {
+        border-color: map.get(luxpalette.$lux-palette_primary, 500);
+        box-shadow: 0 0 0 1px  map.get(luxpalette.$lux-palette_primary, 500) inset;   
+      }
+    }
+  
+    &.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) {
+      .lux-form-control-label-authentic > * {
+        color: map.get(luxpalette.$lux-palette_warn, 500);
+      }
+      .lux-form-control-container-authentic:not(.lux-no-input-row) {
+        border-color: map.get(luxpalette.$lux-palette_warn, 500);
+        box-shadow: 0 0 0 1px map.get(luxpalette.$lux-palette_warn, 500) inset;   
+      }
+    }
+  
+    &.lux-form-control-disabled-authentic {
+      .lux-form-control-container-authentic,
+      .lux-form-control-label-authentic,
+      .lux-form-control-misc-authentic > * {
+        color: luxcommon.$dark-disabled-text;
+      }
+    }
+  
+    &.lux-form-control-readonly-authentic, 
+    &.lux-form-control-disabled-authentic {
+      pointer-events: none;
+    }
+  
+
+  }
+
+  /* Change Autocomplete styles in Chrome*/
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover, 
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    box-shadow: 0 0 0px 1000px var(--lux-theme-primary-50) inset;
+    -webkit-box-shadow: 0 0 0px 1000px var(--lux-theme-primary-50) inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+}

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -0,0 +1,357 @@
+@use "sass:map";
+@use "../luxcommon";
+@use "../luxpalette";
+@use "../../public/global";
+@use "../luxelevations";
+@use "../luxfocus";
+@use "../../base/luxSvgIcons" as luxicons;
+
+/*
+ * Theming for LUX-Select
+ */
+ lux-select-ac, lux-lookup-combobox-ac {
+  
+  & .lux-panel-opened {
+    //duch das Verschieben des Panels, verdeckt ein Teil der Overlay-Pane das Selectfeld 
+    // dieses ist damit als Trigger zum Schließen des Panels nicht mehr erreichbar
+    // daher wird temporär der z-index erhöht
+    .lux-form-control-container-authentic {
+      z-index: 10000;
+    }
+  }
+  
+  mat-select {
+    font-family: luxcommon.$app-font-family;
+    height: calc( 1.5em - 1px) !important;
+    // bisher noch nicht klar, warum das mat-select einen Pixel an Höhe mehr beansprucht, als es tatsächlich Hoch ist
+    // daher wird hier die Höhe korrigiert, damit die Baseline eingehalten ist
+
+    .mat-select-arrow-wrapper{
+      margin-left: 2px;
+      height: 24px;
+      width: 24px;
+      
+      .mat-select-arrow {
+        border: none;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background-color: luxpalette.$lux-primary-color;
+        -webkit-mask: url(luxicons.$arrow-button-down);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$arrow-button-down);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+    
+    &[aria-disabled="true"] .mat-select-arrow {
+      background-color: luxcommon.$dark-disabled-text;
+    }
+
+    &[aria-disabled="false"] .mat-select-arrow {
+      background-color: luxpalette.$lux-primary-color;
+    }
+  }
+}
+
+// Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
+.lux-select-panel-ac .mat-pseudo-checkbox-checked,
+.lux-select-panel-ac-multiple .mat-pseudo-checkbox-checked {
+  background-color: luxpalette.$lux-primary-color;
+}
+.cdk-overlay-pane {
+  .mat-option {
+    font-family: luxcommon.$app-font-family;
+  }
+  .mat-autocomplete-panel.lux-autocomplete-panel-ac,
+  .mat-select-panel.lux-select-panel-ac,
+  .mat-select-panel.lux-select-panel-ac-multiple {
+    min-width: calc(100% + 14px) !important;
+    max-width: calc(100% + 14px) !important;
+    margin: 34px 7px;
+    border: 2px solid luxpalette.$lux-primary-color;
+    border-radius: 4px;
+    box-shadow: none !important;
+    
+    .mat-pseudo-checkbox {
+      color: luxpalette.$lux-primary-color;
+    }
+  }
+  .mat-select-panel.lux-select-panel-ac-multiple {
+    margin: 34px 31px;
+  }
+
+  .mat-autocomplete-panel.lux-autocomplete-panel-ac {
+    min-width: calc(100% + 14px) !important;
+    max-width: calc(100% + 14px) !important;
+    margin: 13px -9px;
+    border: 2px solid luxpalette.$lux-primary-color;
+    border-radius: 4px;
+    box-shadow: none !important;
+  }
+}
+
+/*
+* Theming für Lux-Checkbox
+*/
+lux-checkbox-ac {
+  label {
+    font-family: luxcommon.$app-font-family;
+    font-size: luxcommon.$form-control-font-size;
+    color: luxcommon.$dark-primary-text;
+    cursor: pointer;
+
+    .mat-checkbox-label {
+      -ms-word-break: break-word;
+      word-break: break-word;
+      white-space: normal;
+    }
+  }
+
+  .mat-checkbox-ripple {
+    display: none;
+  }
+  .mat-checkbox-inner-container {
+    // die Checkbox soll größer sein, als von Material vorgegeben
+    width: 1.25em;
+    height: 1.25em;
+    margin-top: 3px; 
+    //bei mehrzeiligen Labels wird die Checkbox oben und nicht zentriert angezeigt 
+    //dieses wird von material über das Margin gelöst und nicht über align-items o.ä.
+    //da wir die Größe der Box geändert haben mussten wir das Margin ebenfalls anpassen
+    .mat-checkbox-frame {
+      border-color: luxpalette.$lux-primary-color;
+    }
+  }
+
+  & .mat-checkbox-disabled {
+    label {
+      color: luxcommon.$dark-disabled-text;
+    }
+    .mat-checkbox-inner-container .mat-checkbox-frame {
+      border-color: luxcommon.$dark-disabled-text;
+    }
+  }
+}
+
+lux-datepicker-ac, lux-datetimepicker-ac {
+  mat-datepicker-toggle {
+    height: 24px !important;
+    width: 24px !important;
+
+    .mat-icon-button {
+      height: 24px !important;
+      width: 24px !important;
+      line-height: 1.5;
+      font-size: inherit;
+
+      lux-icon.lux-datepicker-toggle-icon, mat-icon.mat-icon {
+        height: 24px !important;
+        width: 24px !important;
+        padding: 0px !important;
+      }
+
+      &.mat-button-disabled {
+        svg {
+          color: luxcommon.$dark-disabled-text;
+        }
+      }
+    }
+  }
+}
+.cdk-overlay-pane .mat-datepicker-content,
+.lux-datetimepicker-overlay .mat-card.lux-card {
+  border: 2px solid luxpalette.$lux-primary-color;
+  box-shadow: none !important;
+  margin: 13px -9px;
+
+  & .mat-calendar-header button:hover {
+    background-color: #fff !important;
+    color: map-get(luxpalette.$lux-palette_primary, 300);
+  }
+}
+
+/*
+* Theming für lux-Toggle
+*/
+lux-toggle-ac {
+  .mat-slide-toggle {
+    label {
+      color: luxcommon.$dark-primary-text;
+      font-family: luxcommon.$app-font-family;
+    }
+
+    .mat-slide-toggle-thumb {
+      @include luxelevations.lux-elevation-z1;
+    }
+
+    &.mat-disabled {
+      label .mat-slide-toggle-content {
+        color: luxcommon.$dark-disabled-text;
+      }
+
+      &.mat-checked {
+        .mat-slide-toggle-bar {
+          background-color: luxcommon.$dark-disabled-text;
+        }
+
+        .mat-slide-toggle-thumb {
+          background-color: #666666 ;
+          // $dark-secondary-text als Hex ohne Transparenz
+        }
+      }
+
+      &:not(.mat-checked) {
+        .mat-slide-toggle-bar {
+          background-color: luxcommon.$dark-disabled-text;
+          //Hintergrund zur Schriftfarbe anpassen
+        }
+      }
+    }
+  }
+}
+
+/*
+ * Theming for LUX-Radio
+ */
+lux-radio-ac {
+  // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
+  .mat-radio-container {
+    border-radius: 50%;
+  }
+  .mat-radio-label {
+    color: luxcommon.$dark-primary-text;
+    font-family: luxcommon.$app-font-family;
+  }
+
+  .mat-radio-checked {
+    
+    &.mat-radio-disabled label .mat-radio-container {
+      span.mat-radio-inner-circle {
+        background-color: luxcommon.$dark-disabled-text;
+      }
+
+      span.mat-radio-outer-circle {
+        border-color: luxcommon.$dark-disabled-text;
+      }
+    }
+  }
+
+  .mat-radio-disabled label.mat-radio-label {
+    .mat-radio-label-content {
+      color: luxcommon.$dark-disabled-text;
+    }
+
+    .mat-radio-container {
+      span.mat-radio-inner-circle {
+        background-color: luxcommon.$dark-disabled-text;
+      }
+
+      span.mat-radio-outer-circle {
+        border-color: luxcommon.$dark-disabled-text;
+      }
+    }
+  }
+}
+
+/*
+ * Theming for LUX-Input/LUX-Textarea
+*/
+// Umstylen des Standard-Aussehens von Inputs/Textareas
+input, input.mat-input-element,
+textarea {
+  font: inherit;
+  background: 0 0;
+  color: currentColor;
+  border: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: bottom;
+  text-align: inherit;
+  font-size: luxcommon.$form-control-font-size;
+}
+
+
+/**
+ * Theming für LUX-Chips
+ */
+ lux-chips-ac {
+  .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)
+      &.mat-chip-selected .mat-chip-remove {
+        color: luxcommon.$app-data-bg !important;
+        opacity: 1 !important;
+      }
+
+      // Löschicon (luxSelected=false)
+      &:not(.mat-chip-selected) .mat-chip-remove {
+        color: luxcommon.$app-data-bg !important;
+        opacity: 1 !important;
+      }
+
+      &.mat-chip-disabled {
+        background-color: luxcommon.$dark-disabled-text !important;
+        color: luxcommon.$app-data-bg !important;
+        opacity: 1;
+
+        lux-icon {
+          i,
+          mat-icon {
+            color: luxcommon.$app-data-bg;
+          }
+        }
+      }
+    }
+    mat-chip-list {
+      & div.mat-chip-list-wrapper {
+        margin: 0px 0px 0px -4px;
+      }
+    }
+  }
+} 
+.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel {
+  margin-top: -21px;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 4px;
+
+  box-shadow: none !important;
+  border: 2px solid luxpalette.$lux-primary-color;
+}
+
+/*
+ * Theming for LUX-Slider
+ */
+lux-slider-ac {
+  mat-slider.lux-slider-ac {
+    &.mat-slider-horizontal {
+      height: 1.5em;
+    }
+  }
+  .lux-show-thumb-label-always {
+    &.mat-slider-disabled {
+      .mat-slider-thumb-label {
+        background-color: luxcommon.$dark-disabled-text;
+      }
+    }
+  }
+}