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

package/src/base/components/_luxFormControlWrapper.scss

@@ -0,0 +1,173 @@
+@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
+        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,279 @@
+@use "sass:map";
+@use "../luxcommon";
+@use "../luxpalette";
+@use "../../public/global";
+@use "../luxelevations";
+@use "../luxfocus";
+
+/*
+ * Theming for LUX-Select
+ */
+ lux-select-ac {
+  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;
+    }
+    &[aria-disabled="true"] .mat-select-arrow {
+      border-width: 10px;
+      margin: 0 2px 0 0;
+      color: luxcommon.$dark-disabled-text;
+    }
+
+    &[aria-disabled="false"] .mat-select-arrow {
+      border-width: 10px;
+      margin: 0 2px 0 0;
+      color: map.get(luxpalette.$lux-palette_primary, 500);
+    }
+  }
+  
+}
+
+// Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
+.lux-select-panel-ac .mat-pseudo-checkbox-checked {
+  background-color: map.get(luxpalette.$lux-palette_primary, 500);
+}
+
+/*
+* 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-disabled label {
+    color: luxcommon.$dark-disabled-text;
+  }
+  
+  .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
+  }
+
+}
+
+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;
+        }
+      }
+    }
+  }
+}
+
+
+/*
+* 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 {
+  margin-top: -20px;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 4px;
+}
+
+/*
+ * 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;
+      }
+    }
+  }
+}

package/src/base/components/_luxLinkPlain.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxcommon";
+@use "../luxpalette";
+
+
+lux-link-plain {
+  .link-wrapper {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: map.get(luxpalette.$lux-palette-primary, A700);
+    
+    .lux-link-plain-text {
+      text-decoration: none;
+    }
+
+    lux-icon {
+      font-size: inherit;
+      vertical-align: middle;
+      line-height: 1;
+      i, mat-icon {
+        color: map.get(luxpalette.$lux-palette-primary, A700);
+        padding: 0 !important;
+      }   
+    }
+
+    &.lux-disabled {
+      color: luxcommon.$dark-disabled-text;
+      cursor: text;
+      lux-icon {
+        i, mat-icon {
+          color: luxcommon.$dark-disabled-text;
+        }
+      }
+    }
+
+    &:hover:not(.lux-disabled) {
+      @include luxfocus.lux-hovered-mixin;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    
+    &:focus:not(.lux-disabled, :hover) {
+      @include luxfocus.focus-dark-mixin;
+      border-radius: 2px;
+    }
+  }
+  &.breadcrump-item .link-wrapper{
+    color: inherit;
+    lux-icon mat-icon {
+      color: inherit;
+    }
+  }
+}

package/src/base/components/_luxMasterDetailAc.scss

@@ -0,0 +1,193 @@
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxcommon";
+@use "../luxpalette";
+@use "../luxelevations";
+
+.lux-master-detail-ac {
+  max-width: 100%;
+  z-index: 10;
+  .lux-master-ac-container {
+    &.lux-master-closed {
+      border: 1px solid luxcommon.$app-border-color;
+      border-left-style: none;
+      border-radius: 0 4px 4px 0;
+      padding: 0;
+      width: 35px;
+      min-width: 35px;
+      max-width: 35px;
+      background-color: #fff;
+    }
+    &.lux-master-ac-container-mobile {
+      border: none;
+      background-color: unset;
+    }
+  }
+ 
+  .lux-master-header-container-ac  {
+    z-index: 100;
+    position:relative;
+
+    lux-button.master-ac-toggle {
+      position: absolute;
+      right: -18px;
+      top: 20px;
+      z-index: 1000;
+      
+      button.lux-button.lux-button-rounded {
+        @include luxelevations.lux-elevation-z0;  
+        border: 1px solid luxcommon.$app-border-color;
+        color: map.get(luxpalette.$lux-palette-primary, 500);
+        
+        &:hover:not([disabled]){
+          background-color: luxcommon.$lux-hover-color !important;
+          color: #fff;
+          border-radius: 50%
+        }
+      }
+      
+      .lux-button-icon-round.lux-lx-icon.lux-no-size {
+        // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
+        // Anpassung erforderlich, falls das Icon ausgetauscht wird
+        padding-bottom: 2px;
+      }
+    }
+    .lux-menu-extended {
+      padding: 0px;
+    }
+  }
+
+  lux-filter-form .lux-filter-card,
+  .detail-header-container .lux-detail-header-ac,
+  .lux-master-view-ac lux-list-item {
+    mat-card.mat-card {
+      padding: 12px;
+    }
+    mat-card-title, h2 {
+      font-size: 16px;
+    }
+    mat-card-subtitle.mat-card-subtitle {
+      font-size: 14px;
+    }
+  }
+
+  .lux-empty-master-header {
+    div.lux-master-header-container-ac {
+      border: 1px solid luxcommon.$app-border-color;
+      border-radius: 4px;
+      background-color: #fff;
+      height: 72px;
+      lux-button.master-ac-toggle {
+        top: 18px;
+      }
+    }
+  }
+
+  .lux-master-view-ac {
+    margin: 10px 0;
+    z-index: 100;
+    
+    lux-list {
+      border: none !important;
+    }
+    
+    lux-list-item {
+      margin-bottom: 4px;  
+      mat-card.mat-card {
+        margin: 0px;
+
+        lux-list-item-content :last-child {
+          margin-bottom: 0px;
+          padding-bottom: 0px;
+        }
+
+        lux-icon.lux-lx-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+    
+    lux-list-item,
+    lux-list-item-content {
+      display: block;
+    }    
+  }
+
+  lux-master-footer-ac {
+    padding: 10px 16px;
+    z-index: 100;
+    border: 1px solid luxcommon.$app-border-color;
+    border-radius: 4px;
+    background-color: #fff;
+    .lux-menu-extended {
+      padding: 0;
+    }
+  }
+
+  .lux-detail-ac-container {
+    position: relative;
+    border: 1px solid luxcommon.$app-border-color;
+    border-radius: 4px;
+    background-color: #fff;
+    
+    .lux-detail-header-ac {
+      mat-card.mat-card.lux-card {
+        border: none;
+      }
+    }
+    
+    .lux-detail-empty {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  
+    .lux-detail-empty-icon,
+    .lux-detail-empty-icon-text {
+      opacity: 0.6;
+      padding: 0 8px;
+    }
+    &.lux-detail-ac-container-mobile {
+      border: none;
+      background-color: unset;
+      .lux-detail-header-ac {
+        mat-card.mat-card.lux-card {
+          border: 2px solid luxpalette.$lux-primary-color;
+        }
+      }
+      .back-to-master-button-container {
+        padding: 4px;
+      
+        &:hover {
+          background-color: luxcommon.$lux-hover-color;
+          cursor: pointer;
+        }
+
+        lux-button.back-to-master-button {
+          button.lux-button.lux-button-rounded {
+            @include luxelevations.lux-elevation-z0;  
+            border: 1px solid luxcommon.$app-border-color;
+            color: map.get(luxpalette.$lux-palette-primary, 500);
+          }
+          .lux-button-icon-round.lux-lx-icon.lux-no-size {
+            // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
+            // Anpassung erforderlich, falls das Icon ausgetauscht wird
+            padding-bottom: 2px;
+          }
+        }
+        .back-to-master-label {
+          font-size: 16px;
+          color: map.get(luxpalette.$lux-palette-primary, 300);
+        }
+      }
+      .lux-detail-view-container {
+        border: 1px solid luxcommon.$app-border-color;
+        border-radius: 4px;
+        background-color: #fff;
+      }
+    }
+  }
+ }