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

package/src/base/_luxcomponents.scss

@@ -5,13 +5,13 @@
 @use "components/luxFormControlWrapper.scss";
 @use "components/luxFormControlsAuthentic.scss";
 @use "components/luxMasterDetailAc.scss";
+@use "components/luxCheckboxContainerAc.scss";
 @use "luxcommon";
 @use "luxpalette";
 @use "../public/global";
 @use "luxelevations";
 @use "../base/luxSvgIcons" as luxicons;
 
-
 /*
  * Theming for LUX-App-Content
  */
@@ -92,7 +92,8 @@ lux-app-header {
     }
   }
 
-  .lux-side-nav-header, .lux-side-nav-footer {
+  .lux-side-nav-header,
+  .lux-side-nav-footer {
     color: map.get(luxpalette.$lux-palette_primary, A400);
   }
 
@@ -103,7 +104,9 @@ lux-app-header {
   }
 
   .lux-side-nav .lux-side-nav-content {
-    lux-button, .lux-menu-item, .lux-action-nav-menu lux-button {
+    lux-button,
+    .lux-menu-item,
+    .lux-action-nav-menu lux-button {
       color: map.get(luxpalette.$lux-palette_primary, 500);
       font-weight: 600;
     }
@@ -123,7 +126,10 @@ lux-button button.lux-button {
   font-size: luxcommon.$button-font-size;
   font-weight: 600;
 
-  &.mat-button, &.mat-raised-button, &.mat-stroked-button, &.mat-flat-button {
+  &.mat-button,
+  &.mat-raised-button,
+  &.mat-stroked-button,
+  &.mat-flat-button {
     height: luxcommon.$button-height;
   }
 
@@ -131,13 +137,13 @@ lux-button button.lux-button {
   &.mat-raised-button.mat-button-disabled,
   &.mat-flat-button.mat-button-disabled,
   &.mat-stroked-button.mat-button-disabled,
-  &.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]),
+  &.mat-raised-button.mat-button-disabled:not([class*="mat-elevation-z"]),
   &.mat-fab.mat-button-disabled {
     color: luxcommon.$dark-disabled-text;
     @include luxelevations.lux-elevation-z0;
   }
 
-  &.mat-raised-button:not([class*=mat-elevation-z]) {
+  &.mat-raised-button:not([class*="mat-elevation-z"]) {
     @include luxelevations.lux-elevation-z2;
   }
 
@@ -151,7 +157,6 @@ lux-button button.lux-button {
   &.lux-button-rounded {
     height: luxcommon.$button-fav-height;
     width: luxcommon.$button-fav-height;
-    
 
     @include luxelevations.lux-elevation-z2;
 
@@ -175,7 +180,7 @@ lux-button button.lux-button {
       }
     }
   }
-  
+
   lux-icon.lux-button-icon:not(.lux-button-icon-round) {
     line-height: 1em;
     &.lux-lx-icon {
@@ -197,7 +202,7 @@ lux-button button.lux-button {
       height: unset !important;
       width: unset !important;
     }
-    mat-icon.lux-lx-icon-no-size{
+    mat-icon.lux-lx-icon-no-size {
       height: luxcommon.$button-font-size;
       width: luxcommon.$button-font-size;
     }
@@ -224,8 +229,7 @@ lux-checkbox {
 /**
  * Theming für LUX-Card
  */
-lux-card{
-
+lux-card {
   .lux-card-content-container mat-tab-group.lux-tab-group .lux-tabs-notification-icon {
     border-color: luxcommon.$app-data-bg;
   }
@@ -389,7 +393,8 @@ lux-divider {
 lux-file-list .lux-file-list {
   margin: luxcommon.$form-control-margin;
 
-  .lux-file-list-entry-label, .lux-file-list-entry-icon {
+  .lux-file-list-entry-label,
+  .lux-file-list-entry-icon {
     color: luxcommon.$dark-secondary-text;
   }
 
@@ -419,7 +424,7 @@ lux-file-list .lux-file-list {
       }
     }
   }
-  
+
   &.lux-file-list-error {
     mat-card-title .lux-card-title-container {
       color: luxpalette.$lux-warn-color;
@@ -478,7 +483,8 @@ lux-file-progress {
       padding: 24px 48px;
     }
 
-    .lux-file-upload-drop-container-progress, .lux-file-upload-drop-container-no-progress{
+    .lux-file-upload-drop-container-progress,
+    .lux-file-upload-drop-container-no-progress {
       height: 8px;
     }
 
@@ -626,7 +632,6 @@ lux-file-progress {
               height: 24px;
             }
           }
-          
         }
       }
     }
@@ -691,14 +696,13 @@ lux-file-progress {
   }
 }
 
-
 /*
  * Theming for LUX-Form-Controls
  */
 .lux-form-control {
   margin: luxcommon.$form-control-margin;
   min-height: luxcommon.$form-control-complete-height;
-  
+
   .lux-label,
   mat-hint,
   mat-error {
@@ -708,7 +712,8 @@ lux-file-progress {
   .lux-form-control-container {
     padding: 6px 0 0 0;
 
-    input, textarea {
+    input,
+    textarea {
       &:required {
         @include luxelevations.lux-elevation-z0;
       }
@@ -729,7 +734,8 @@ lux-file-progress {
 
   .lux-form-control-container {
     $lux-selected-border-color: luxpalette.$lux-warn-color !important;
-    &:after { // inaktives form-control hat auch eine rote Linie (anstatt schwarz)
+    &:after {
+      // inaktives form-control hat auch eine rote Linie (anstatt schwarz)
       border-bottom: 1px solid luxpalette.$lux-warn-color;
     }
   }
@@ -800,7 +806,7 @@ lux-list {
   .mat-card:not([class*="mat-elevation-z"]) {
     @include luxelevations.lux-elevation-z2;
   }
-  
+
   lux-list-item lux-card mat-card {
     margin: luxcommon.$outline-width;
   }
@@ -813,7 +819,8 @@ lux-list {
 /*
  * Theming for LUX-Lookup-Components
  */
-lux-lookup-combobox, lux-lookup-combobox-ac {
+lux-lookup-combobox,
+lux-lookup-combobox-ac {
   mat-select {
     &[aria-disabled="true"] .mat-select-arrow {
       border-width: 7px;
@@ -830,7 +837,8 @@ lux-lookup-combobox, lux-lookup-combobox-ac {
 }
 
 // Optionen werden im Cdk-Overlay dargestellt und hängen nicht unter der Component selbst.
-.lux-autocomplete-panel, .lux-select-panel {
+.lux-autocomplete-panel,
+.lux-select-panel {
   .mat-option {
     border-left: none;
 
@@ -867,7 +875,7 @@ lux-lookup-combobox, lux-lookup-combobox-ac {
     max-width: 30px;
     display: inline-grid;
 
-    mat-icon.mat-icon:not(.lux-lx-icon){
+    mat-icon.mat-icon:not(.lux-lx-icon) {
       font-size: 24px !important;
     }
     &.lux-lx-icon.lux-no-size {
@@ -936,16 +944,14 @@ lux-message-box {
   &.mat-elevation-z4 {
     @include luxelevations.lux-elevation-z4();
   }
-  
+
   .lux-message-container lux-button {
-    button.mat-fab.lux-icon-button.lux-button-rounded:not([class*=mat-elevation-z]) {
+    button.mat-fab.lux-icon-button.lux-button-rounded:not([class*="mat-elevation-z"]) {
       color: #fff;
       background-color: transparent;
       height: 36px;
       width: 36px;
       @include luxelevations.lux-elevation-z0();
-      
-    
     }
     .mat-button-ripple,
     .mat-button-focus-overlay {
@@ -1180,7 +1186,8 @@ lux-filter-form {
  * Theming for LUX-Stepper
  */
 lux-stepper {
-  .mat-stepper-horizontal, .mat-stepper-vertical {
+  .mat-stepper-horizontal,
+  .mat-stepper-vertical {
     background-color: transparent;
   }
 
@@ -1188,7 +1195,7 @@ lux-stepper {
   .lux-ignore-mat-step-icons {
     mat-step-header {
       color: luxcommon.$dark-secondary-text;
-    
+
       &.lux-step-header-touched {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
@@ -1220,9 +1227,9 @@ lux-stepper {
   // luxUseCustomIcons=false
   .mat-step-header {
     lux-step-header {
-      color: luxcommon.$dark-secondary-text;;
+      color: luxcommon.$dark-secondary-text;
     }
-    
+
     &.lux-step-header-touched {
       .mat-step-icon {
         color: luxcommon.$app-data-bg;
@@ -1264,14 +1271,14 @@ lux-table {
   }
 
   table td {
-   div.lux-form-control {
-     min-height: luxcommon.$form-control-height-small;
+    div.lux-form-control {
+      min-height: luxcommon.$form-control-height-small;
 
-     .lux-form-control-label,
-     .lux-form-control-misc {
-       display: none;
-     }
-   }
+      .lux-form-control-label,
+      .lux-form-control-misc {
+        display: none;
+      }
+    }
   }
 }
 
@@ -1403,18 +1410,16 @@ mat-expansion-panel.mat-expansion-panel:not([class*="mat-elevation-z"]) {
   @include luxelevations.lux-elevation-z2;
 }
 
-
 /*
  * Theming for LUX-Errorpage
  */
- lux-error-page {
+lux-error-page {
   lux-card:not(.lux-error-page-desktop) {
-      .mat-card:not([class*="mat-elevation-z"]) {
-        @include luxelevations.lux-elevation-z0;
-      }
-      
-    } 
- }
+    .mat-card:not([class*="mat-elevation-z"]) {
+      @include luxelevations.lux-elevation-z0;
+    }
+  }
+}
 
 /*
 * Theming für Lux-Stepper-Large
@@ -1490,18 +1495,18 @@ lux-stepper-large {
       }
 
       a {
-        color: #2E8533;
+        color: #2e8533;
         position: relative;
       }
 
       a::after {
-        content: '';
+        content: "";
         position: absolute;
         display: inline-block;
         width: 23px;
         height: 23px;
         margin: 5px 10px 0px;
-        background-color: #2E8533;
+        background-color: #2e8533;
         -webkit-mask: url(luxicons.$checkmark);
         -webkit-mask-repeat: no-repeat;
         -webkit-mask-position: center;
@@ -1749,7 +1754,7 @@ lux-stepper-large {
     }
   }
 
-  &.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after{
+  &.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a::after {
     width: 18px;
     height: 18px;
     margin-top: 4px;

package/src/base/_luxfocus.scss

@@ -41,7 +41,7 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   border-radius: 4px;
 
   &:after {
-    content: '';
+    content: "";
     left: 0;
     width: 6px;
     top: 0;
@@ -61,7 +61,7 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   border-radius: 4px;
   &:after {
     width: 0px;
-    border:none;
+    border: none;
   }
 }
 
@@ -69,7 +69,7 @@ $outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$ou
   position: relative;
 
   &:after {
-    content: '';
+    content: "";
     left: 0;
     top: 0;
     bottom: 0;
@@ -145,7 +145,8 @@ lux-app-header {
     &:hover {
       @include lux-hovered-mixin;
 
-      & lux-icon, .lux-header-username {
+      & lux-icon,
+      .lux-header-username {
         color: luxcommon.$lux-hover-color-for-dark-background !important;
       }
     }
@@ -175,11 +176,11 @@ lux-side-nav {
 
 /** ########## Card ########## **/
 lux-card mat-card {
-  &[class~=lux-cursor]:focus-visible {
+  &[class~="lux-cursor"]:focus-visible {
     @include focus-dark-mixin-inline;
   }
 
-  &[class~=lux-cursor]:hover {
+  &[class~="lux-cursor"]:hover {
     @include lux-hovered-mixin;
   }
 }
@@ -230,11 +231,13 @@ lux-filter-form {
 }
 
 /** ########## Chips ########## **/
-lux-chips, lux-chips-ac {
+lux-chips,
+lux-chips-ac {
   & .mat-standard-chip:focus-visible {
     @include focus-dark-mixin;
   }
-  .mat-chip.mat-standard-chip:after { //mat-overlay für focus deaktivieren
+  .mat-chip.mat-standard-chip:after {
+    //mat-overlay für focus deaktivieren
     background-color: unset;
   }
 }
@@ -256,7 +259,7 @@ lux-form-control {
     }
 
     .lux-form-control-container:after {
-      content: '';
+      content: "";
       display: block;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
@@ -267,7 +270,7 @@ lux-form-control {
       height: 2px;
       border-bottom: 2px solid luxcommon.$lux-selected-border-color;
     }
-     
+
     &.lux-form-control-error {
       .lux-form-control-container:after {
         border-bottom: 2px solid luxpalette.$lux-warn-color;
@@ -278,13 +281,13 @@ lux-form-control {
 
 .lux-form-control-wrapper {
   &.lux-focused-authentic .cdk-keyboard-focused {
-    .mat-radio-container,  
+    .mat-radio-container,
     .mat-checkbox-inner-container,
     .mat-slide-toggle-thumb {
       position: relative;
       @include focus-dark-mixin;
     }
-   }
+  }
 }
 
 lux-icon.lux-error-icon:focus-visible {
@@ -299,7 +302,7 @@ lux-datepicker {
       border-radius: 4px;
     }
 
-    button:hover { 
+    button:hover {
       @include lux-hovered-mixin();
       border-radius: 4px;
     }
@@ -308,16 +311,16 @@ lux-datepicker {
     }
   }
 }
-lux-datepicker-ac, lux-datetimepicker-ac {
+lux-datepicker-ac,
+lux-datetimepicker-ac {
   mat-datepicker-toggle {
     button:focus-visible {
       @include focus-dark-mixin;
-      border-radius: 4px;
+      outline-offset: 2px;
+      border-radius: 2px;
     }
 
     button:hover {
-      background-color: #fff;
-      border-radius: 4px;
       lux-icon.lux-datepicker-toggle-icon.lux-color-blue {
         color: luxcommon.$lux-hover-color;
       }
@@ -369,7 +372,7 @@ lux-datetimepicker {
       border-radius: 4px;
     }
 
-    button:hover { 
+    button:hover {
       @include lux-hovered-mixin();
       border-radius: 4px;
     }
@@ -415,7 +418,7 @@ lux-datetimepicker {
 /** ########## Lux-Dialog ########## **/
 lux-dialog-structure {
   // x-Button oben rechts im Dialog-Fenster
-  .lux-icon-close { 
+  .lux-icon-close {
     &:hover {
       @include lux-hovered-mixin;
       cursor: pointer;
@@ -428,7 +431,6 @@ lux-dialog-structure {
 }
 /** ########## Table ########## **/
 lux-table {
-
   tr:hover {
     > td,
     > th {
@@ -439,7 +441,8 @@ lux-table {
     }
   }
 
-  tr:focus-visible, td:focus-visible {
+  tr:focus-visible,
+  td:focus-visible {
     @include focus-dark-mixin-inline;
   }
 
@@ -465,7 +468,7 @@ lux-table {
       @include lux-selected-mixin;
     }
 
-    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert 
+    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert
     // bisher noch keine Lösung um den mouse-focus auszuschalten
     &.mat-active:not(.cdk-mouse-focused) {
       @include focus-dark-mixin-inline;
@@ -487,10 +490,10 @@ lux-table {
   }
   .mat-pseudo-checkbox-checked {
     background-color: #ffffff;
-  } 
+  }
   .mat-pseudo-checkbox-checked::after {
     border-color: map.get(luxpalette.$lux-palette_primary, 500) !important;
-  } 
+  }
 }
 
 .lux-select-panel-ac {
@@ -498,7 +501,7 @@ lux-table {
     &.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text {
       position: relative;
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         width: 18px;
         height: 18px;
@@ -518,7 +521,12 @@ lux-table {
   }
 }
 
-.lux-select-panel-ac, .lux-select-panel-ac-multiple, .lux-autocomplete-panel-ac, .lux-chips-ac-autocomplete-panel {
+.lux-select-panel-ac,
+.lux-select-panel-ac-multiple,
+.lux-autocomplete-panel-ac,
+.lux-autocomplete-panel-dense-ac,
+.lux-chips-ac-autocomplete-panel,
+.lux-chips-ac-autocomplete-panel-dense {
   &.mat-select-panel mat-option,
   &.mat-autocomplete-panel mat-option {
     &.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active) {
@@ -555,12 +563,13 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
     .mat-button-focus-overlay {
       display: none;
     }
-    
-    &:focus-visible{
+
+    &:focus-visible {
       @include focus-dark-mixin;
     }
 
-    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button), &.mat-stroked-button {
+    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button),
+    &.mat-stroked-button {
       &:hover {
         background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%);
 
@@ -617,9 +626,9 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
 
 /** ########## Autocomplete ########## **/
 // Class, welche das aufgeklappte Panel referenziert
-.lux-autocomplete-panel, .lux-chips-autocomplete-panel, .lux-autocomplete-panel-ac {
+.lux-autocomplete-panel,
+.lux-chips-autocomplete-panel {
   mat-option {
-
     &:focus-visible {
       @include focus-dark-mixin-inline;
       border-radius: 4px;
@@ -654,16 +663,15 @@ lux-tabs {
   }
 
   .mat-tab-label:not(.mat-tab-disabled) {
-     &:focus-visible{
+    &:focus-visible {
       @include focus-dark-mixin-inline;
       border-radius: 4px;
     }
-    
-  
+
     &:hover:not(.mat-tab-disabled) {
       background-color: luxcommon.$lux-hover-color;
       border-radius: 4px;
-    } 
+    }
   }
 
   mat-ink-bar.mat-ink-bar {
@@ -678,7 +686,7 @@ mat-card lux-tabs {
   }
 
   .mat-tab-label:not(.mat-tab-disabled) {
-     &:focus-visible {
+    &:focus-visible {
       @include focus-dark-mixin-inline;
       border-radius: 4px;
     }
@@ -716,7 +724,6 @@ lux-stepper {
     @include lux-selected-bottom-mixin;
     background-color: transparent;
   }
-
 }
 
 /** ########## Html ########## **/
@@ -741,12 +748,12 @@ lux-tile {
 
 /** ########## Panel ########## **/
 lux-panel {
-  mat-expansion-panel-header:not([aria-disabled='true']) {
+  mat-expansion-panel-header:not([aria-disabled="true"]) {
     &:focus-visible {
       //background-color: white !important;
       @include focus-dark-mixin-inline;
     }
-    
+
     &:hover {
       @include lux-hovered-mixin;
     }
@@ -810,7 +817,7 @@ lux-file-preview-toolbar lux-button button.lux-icon-button {
         border-radius: 0;
         &:after {
           width: 0px;
-          border:none;
+          border: none;
         }
       }
 
@@ -825,7 +832,6 @@ lux-file-preview-toolbar lux-button button.lux-icon-button {
 /** ########## Example-Root ########## **/
 example-root {
   .example-base-components-list {
-
     mat-expansion-panel-header,
     .example-component-list-item {
       @include lux-selectable-mixin;
@@ -847,9 +853,7 @@ example-root {
 
 /** ########## Message-Box ########## **/
 lux-message-box {
-
   & div.lux-message-box-content {
-
     &:focus-visible {
       @include focus-dark-mixin;
     }
@@ -890,7 +894,6 @@ lux-message-box {
 /** ########## Stepper large ########## **/
 lux-stepper-large {
   .lux-stepper-large-nav-item {
-
     // Links allgemein
     a {
       &:focus-visible {
@@ -920,21 +923,21 @@ lux-stepper-large {
         .lux-stepper-large-nav-item-label-container {
           a.lux-stepper-large-nav-item-label-link {
             &:hover {
-              color: #2E8533;
+              color: #2e8533;
             }
           }
         }
       }
 
-        &.lux-completed {
-          .lux-stepper-large-nav-item-label-container {
-            a.lux-stepper-large-nav-item-label-link {
-              &:hover {
-                color: #56BD66;
-              }
+      &.lux-completed {
+        .lux-stepper-large-nav-item-label-container {
+          a.lux-stepper-large-nav-item-label-link {
+            &:hover {
+              color: #56bd66;
             }
           }
         }
+      }
     }
   }
 }

package/src/base/components/_luxCheckboxContainerAc.scss

@@ -0,0 +1,35 @@
+@use "../luxpalette";
+
+lux-checkbox-container-ac {
+  .lux-label-container {
+    min-height: 1.2em;
+    font-size: 0.75rem;
+    line-height: 1.2em;
+    color: luxpalette.$lux-primary-color;
+    margin: 0 calc(0.5em + 1px) 0.25em calc(0.5em + 1px);
+  }
+
+  .lux-checkbox-container {
+    display: flex;
+    flex-flow: row wrap;
+    place-content: stretch flex-start;
+    align-items: stretch;
+    gap: 10px;
+    max-width: 100%;
+
+    &.lux-vertical {
+      flex-direction: column;
+    }
+
+    lux-form-control-wrapper .lux-form-control-wrapper {
+      margin: 0;
+      .lux-form-control-label-authentic,
+      .lux-form-control-misc-authentic {
+        display: none !important;
+      }
+      .lux-form-control-container-authentic.lux-no-input-row {
+        padding: 0;
+      }
+    }
+  }
+}