@ihk-gfi/lux-components-theme 14.3.0 → 14.5.0

package/src/base/components/_luxFormControlWrapper.scss

@@ -4,19 +4,19 @@
 @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%;
 
@@ -26,7 +26,7 @@ lux-form-control-wrapper {
     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);
@@ -42,7 +42,7 @@ lux-form-control-wrapper {
         }
       }
     }
-  
+
     .lux-form-control-container-authentic {
       box-sizing: border-box;
       padding: 0.75em 0.5em;
@@ -60,26 +60,26 @@ lux-form-control-wrapper {
         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 {
@@ -92,8 +92,7 @@ lux-form-control-wrapper {
         white-space: nowrap;
         display: inline-block;
         max-height: 1.5em;
-        
-      
+
         lux-icon {
           i {
             padding: 0 !important;
@@ -110,37 +109,43 @@ lux-form-control-wrapper {
             }
           }
         }
-        
       }
     }
-    
+
+    &.lux-dense-authentic {
+      margin: 0;
+      .lux-form-control-container-authentic {
+        padding: 0.375em 0.5em;
+        &.lux-no-input-row {
+          padding: 0.375em 0em;
+        }
+      }
+    }
+
     // 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;   
+        border-color: luxcommon.$dark-primary-text;
       }
     }
-    &.lux-focused-authentic{
+    &.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;   
+        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;   
+        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,
@@ -148,18 +153,15 @@ lux-form-control-wrapper {
         color: luxcommon.$dark-disabled-text;
       }
     }
-  
-    &.lux-form-control-readonly-authentic, 
+    &.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:hover,
   input:-webkit-autofill:focus,
   textarea:-webkit-autofill,
   textarea:-webkit-autofill:hover,

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -9,19 +9,19 @@
 /*
  * Theming for LUX-Select
  */
- lux-select-ac, lux-lookup-combobox-ac {
-  
+lux-select-ac,
+lux-lookup-combobox-ac {
   mat-select {
     font-family: luxcommon.$app-font-family;
-    height: calc( 1.5em - 1px) !important;
+    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{
+    .mat-select-arrow-wrapper {
       margin-left: 2px;
       height: 24px;
       width: 24px;
-      
+
       .mat-select-arrow {
         border: none;
         width: 100%;
@@ -38,7 +38,7 @@
         mask-size: cover;
       }
     }
-    
+
     &[aria-disabled="true"] .mat-select-arrow {
       background-color: luxcommon.$dark-disabled-text;
     }
@@ -59,24 +59,26 @@
     font-family: luxcommon.$app-font-family;
   }
   .mat-autocomplete-panel.lux-autocomplete-panel-ac,
+  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac,
   .mat-select-panel.lux-select-panel-ac,
   .mat-select-panel.lux-select-panel-ac-multiple {
     border: 2px solid luxpalette.$lux-primary-color;
     border-radius: 4px;
     box-shadow: none !important;
-    
+
     .mat-pseudo-checkbox {
       color: luxpalette.$lux-primary-color;
     }
   }
 
-  .mat-autocomplete-panel.lux-autocomplete-panel-ac {
+  .mat-autocomplete-panel.lux-autocomplete-panel-ac,
+  .mat-autocomplete-panel.lux-autocomplete-panel-dense-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;
+    margin: 13px -9px 0px;
+  }
+  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
+    margin-top: 7px;
   }
 }
 
@@ -104,9 +106,12 @@ lux-checkbox-ac {
     // 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.ä.
+    margin-top: 0.125em;
+    .mat-checkbox-frame {
+      border-color: luxpalette.$lux-primary-color;
+    }
+    //bei mehrzeiligen Labels soll die Checkbox oben und nicht zentriert angezeigt werden
+    //Deswegen wird hier das Margin-top: auto überschrieben
     //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;
@@ -123,7 +128,8 @@ lux-checkbox-ac {
   }
 }
 
-lux-datepicker-ac, lux-datetimepicker-ac {
+lux-datepicker-ac,
+lux-datetimepicker-ac {
   mat-datepicker-toggle {
     height: 24px !important;
     width: 24px !important;
@@ -134,7 +140,8 @@ lux-datepicker-ac, lux-datetimepicker-ac {
       line-height: 1.5;
       font-size: inherit;
 
-      lux-icon.lux-datepicker-toggle-icon, mat-icon.mat-icon {
+      lux-icon.lux-datepicker-toggle-icon,
+      mat-icon.mat-icon {
         height: 24px !important;
         width: 24px !important;
         padding: 0px !important;
@@ -152,7 +159,7 @@ lux-datepicker-ac, lux-datetimepicker-ac {
 .lux-datetimepicker-overlay .mat-card.lux-card {
   border: 2px solid luxpalette.$lux-primary-color;
   box-shadow: none !important;
-  margin: 13px -9px;
+  margin: 13px -9px 0;
 
   & .mat-calendar-header button:hover {
     background-color: #fff !important;
@@ -169,7 +176,9 @@ lux-toggle-ac {
       color: luxcommon.$dark-primary-text;
       font-family: luxcommon.$app-font-family;
     }
-
+    &.mat-checked .mat-slide-toggle-bar {
+      background-color: map-get(luxpalette.$lux-palette_primary, 50);
+    }
     .mat-slide-toggle-thumb {
       @include luxelevations.lux-elevation-z1;
     }
@@ -185,7 +194,7 @@ lux-toggle-ac {
         }
 
         .mat-slide-toggle-thumb {
-          background-color: #666666 ;
+          background-color: #666666;
           // $dark-secondary-text als Hex ohne Transparenz
         }
       }
@@ -204,9 +213,13 @@ lux-toggle-ac {
  * Theming for LUX-Radio
  */
 lux-radio-ac {
-  // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
   .mat-radio-container {
+    // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
     border-radius: 50%;
+
+    span.mat-radio-outer-circle {
+      border-color: luxpalette.$lux-primary-color;
+    }
   }
   .mat-radio-label {
     color: luxcommon.$dark-primary-text;
@@ -214,7 +227,6 @@ lux-radio-ac {
   }
 
   .mat-radio-checked {
-    
     &.mat-radio-disabled label .mat-radio-container {
       span.mat-radio-inner-circle {
         background-color: luxcommon.$dark-disabled-text;
@@ -226,6 +238,10 @@ lux-radio-ac {
     }
   }
 
+  .mat-radio-group.lux-horizontal {
+    row-gap: 0.75em;
+  }
+
   .mat-radio-disabled label.mat-radio-label {
     .mat-radio-label-content {
       color: luxcommon.$dark-disabled-text;
@@ -247,7 +263,8 @@ lux-radio-ac {
  * Theming for LUX-Input/LUX-Textarea
 */
 // Umstylen des Standard-Aussehens von Inputs/Textareas
-input, input.mat-input-element,
+input,
+input.mat-input-element,
 textarea {
   font: inherit;
   background: 0 0;
@@ -262,12 +279,14 @@ textarea {
   text-align: inherit;
   font-size: luxcommon.$form-control-font-size;
 }
-
+lux-textarea-ac text-area {
+  line-height: normal;
+}
 
 /**
  * Theming für LUX-Chips
  */
- lux-chips-ac {
+lux-chips-ac {
   .lux-chips-autocomplete-icon {
     color: var(--lux-theme-primary-500);
     font-size: 24px;
@@ -312,9 +331,10 @@ textarea {
       }
     }
   }
-} 
-.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel {
-  margin-top: -21px;
+}
+.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel,
+.lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
+  margin-top: -22px;
   margin-left: 0;
   margin-right: 0;
   border-radius: 4px;
@@ -322,6 +342,9 @@ textarea {
   box-shadow: none !important;
   border: 2px solid luxpalette.$lux-primary-color;
 }
+.lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
+  margin-top: -18px;
+}
 
 /*
  * Theming for LUX-Slider

package/src/base/components/_luxLinkPlain.scss

@@ -3,59 +3,73 @@
 @use "../luxcommon";
 @use "../luxpalette";
 
-
 lux-link-plain {
+  display: inline-flex;
+  align-items: baseline;
   .link-wrapper {
-    display: inline-block;
+    display: flex;
+    gap: 0.25em;
+    align-items: baseline;
     font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    color: map.get(luxpalette.$lux-palette-primary, A700);
-    
     .lux-link-plain-text {
-      text-decoration: none;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      text-decoration: inherit;
+      color: inherit;
+      display: flex;
     }
 
     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;
-      }   
+      display: flex;
+      mat-icon.mat-icon.lux-lx-icon-no-size {
+        padding: 0px !important;
+        width: 0.8em;
+        height: 0.8em;
+        overflow: visible;
+      }
     }
 
-    &.lux-disabled {
-      color: luxcommon.$dark-disabled-text;
-      cursor: text;
-      lux-icon {
-        i, mat-icon {
-          color: luxcommon.$dark-disabled-text;
-        }
-      }
+    &:focus-visible:not(.lux-disabled) {
+      @include luxfocus.focus-dark-mixin;
+      border-radius: 2px;
     }
+  }
 
-    &:hover:not(.lux-disabled) {
-      color: luxcommon.$lux-hover-color;
-      text-decoration: underline;
-      cursor: pointer;
-      lux-icon {
-        i, mat-icon {
-          color: luxcommon.$lux-hover-color;
-        }
+  &.default-style {
+    color: map.get(luxpalette.$lux-palette-primary, A700);
+    font-family: inherit;
+    lux-icon {
+      i,
+      mat-icon {
+        color: map.get(luxpalette.$lux-palette-primary, A700);
       }
     }
-    
-    &:focus:not(.lux-disabled, :hover) {
-      @include luxfocus.focus-dark-mixin;
-      border-radius: 2px;
+  }
+
+  &.lux-disabled,
+  .link-wrapper.lux-disabled {
+    color: luxcommon.$dark-disabled-text;
+    cursor: text;
+    text-decoration: none;
+    lux-icon {
+      i,
+      mat-icon {
+        color: luxcommon.$dark-disabled-text;
+      }
     }
   }
-  &.breadcrump-item .link-wrapper{
-    color: inherit;
-    lux-icon mat-icon {
-      color: inherit;
+
+  &:hover:not(.lux-disabled) {
+    color: map.get(luxpalette.$lux-palette-primary, 300);
+    text-decoration: underline;
+    cursor: pointer;
+    lux-icon {
+      i,
+      mat-icon {
+        color: map.get(luxpalette.$lux-palette-primary, 300);
+      }
     }
   }
-}
+}

package/src/base/components/_luxTileAc.scss

@@ -5,9 +5,8 @@
 @use "../../public/global";
 @use "../luxelevations";
 
-
 lux-tile-ac {
-  .mat-card.lux-tile-ac {   
+  .mat-card.lux-tile-ac {
     box-sizing: border-box;
     display: flex;
     height: 100%;
@@ -16,10 +15,10 @@ lux-tile-ac {
     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 {  
+      lux-icon {
         width: 2em;
         height: 2em;
         i,
@@ -33,7 +32,7 @@ lux-tile-ac {
         }
       }
     }
-  
+
     .lux-tile-header-titel-ac {
       mat-card-title {
         color: luxcommon.$dark-primary-text;
@@ -41,23 +40,23 @@ lux-tile-ac {
         font-size: 20px;
         margin-bottom: 8px;
       }
-      mat-card-subtitle.mat-card-subtitle:not(:first-child){
+      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 {
+    &[class~="lux-cursor"]:focus-visible {
       @include luxfocus.focus-dark-mixin;
     }
-    &[class~=lux-cursor]:hover {
-      border-color: luxpalette.$lux-primary-color;
+    &[class~="lux-cursor"]:hover {
+      border-color: luxcommon.$dark-primary-text;
     }
   }
-}
+}

package/src/blue/_custom.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "luxcommon";
+@use "luxpalette";
 @use "../base/luxelevations";
 
 // Tabs außerhalb einer LUX-Card (z.B. Master-Detail)
@@ -12,8 +13,8 @@ lux-tabs {
 }
 
 // x-Button oben rechts im Dialog-Fenster
-.cdk-overlay-container{
-  .lux-dialog .lux-icon-close { 
+.cdk-overlay-container {
+  .lux-dialog .lux-icon-close {
     &:hover {
       background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
     }
@@ -24,15 +25,14 @@ 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;
       }
@@ -51,7 +51,6 @@ lux-button button.lux-button {
     }
 
     &.lux-button-rounded {
-      
       font-size: luxcommon.$button-font-size;
       .mat-button-wrapper {
         height: 100%;
@@ -59,7 +58,7 @@ lux-button button.lux-button {
         align-items: center;
         line-height: 1;
       }
-    
+
       & lux-icon.lux-button-icon-round {
         line-height: 1;
         height: 20px;
@@ -81,8 +80,7 @@ lux-button button.lux-button {
 /*
  * Theming for LUX-Master-Detail-ac
  */
- .lux-master-detail-ac {
-
+.lux-master-detail-ac {
   .lux-master-header-container-ac lux-button.master-light-toggle {
     right: -23px;
   }
@@ -105,6 +103,18 @@ lux-button button.lux-button {
   lux-master-footer-ac {
     margin-bottom: 4px;
     border: none;
-    @include luxelevations.lux-elevation-z2
+    @include luxelevations.lux-elevation-z2;
+  }
+}
+
+/*
+* Theming für lux-datepicker-ac/lux-datetimepicker-ac
+*/
+lux-datepicker-ac,
+lux-datetimepicker-ac {
+  mat-datepicker-toggle {
+    button:hover lux-icon.lux-datepicker-toggle-icon.lux-color-blue {
+      color: map-get(luxpalette.$lux-palette_primary, 300);
+    }
   }
- }
+}