@ihk-gfi/lux-components-theme 14.4.0 → 14.6.0

package/src/base/components/_luxAppHeaderAc.scss

@@ -31,7 +31,7 @@ lux-app-header-ac {
       align-items: center;
 
       @include luxelevations.lux-elevation-z0;
-      
+
       &.mat-fab .mat-button-wrapper {
         line-height: 20px;
         max-height: 20px;
@@ -45,8 +45,8 @@ lux-app-header-ac {
       }
 
       &:hover:not([disabled]).mat-fab:hover.mat-primary {
-        lux-icon { 
-          color: #ffffff !important; 
+        lux-icon {
+          color: #ffffff !important;
         }
       }
       &:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
@@ -55,7 +55,7 @@ lux-app-header-ac {
           color: map.get(luxpalette.$lux-palette_primary, 700) !important;
         }
         @include luxfocus.focus-dark-mixin;
-      } 
+      }
     }
 
     &.menu-opened {
@@ -74,16 +74,16 @@ lux-app-header-ac {
           color: #ffffff !important;
         }
         &:focus-visible:not(:hover) {
-          color: map.get(luxpalette.$lux-palette-primary, 700)!important;
+          color: map.get(luxpalette.$lux-palette-primary, 700) !important;
           background-color: transparent !important;
         }
         &:active {
-          color: map.get(luxpalette.$lux-palette-primary, 700)!important;
+          color: map.get(luxpalette.$lux-palette-primary, 700) !important;
         }
       }
     }
   }
-  
+
   .lux-app-header-top-bar {
     padding: 10px 24px;
     min-height: 64px;
@@ -94,7 +94,7 @@ lux-app-header-ac {
     &.lux-mobile {
       padding: 4px;
     }
-    
+
     lux-menu {
       width: unset;
       .lux-menu-extended {
@@ -120,7 +120,7 @@ lux-app-header-ac {
     }
 
     .lux-app-title {
-      color:luxcommon.$dark-primary-text;
+      color: luxcommon.$dark-primary-text;
       font-size: 20px;
       font-weight: 400;
       font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
@@ -138,7 +138,7 @@ lux-app-header-ac {
           letter-spacing: 0px;
         }
 
-        &.nav-item-selected  button.lux-button .lux-button-label {
+        &.nav-item-selected button.lux-button .lux-button-label {
           font-weight: 600;
         }
       }
@@ -155,27 +155,30 @@ lux-app-header-ac {
 
     &.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;
+      & .lux-button-label {
+        padding-right: 24px;
+        &::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 {
+    &:not([disabled="true"]):hover {
       background-color: map-get(luxpalette.$lux-palette_primary, 300) !important;
       color: #ffffff;
       .mat-icon-no-color {
@@ -185,8 +188,8 @@ lux-app-header-ac {
         background-color: #ffffff;
       }
     }
-    
-    &:not([disabled=true]):focus-visible {
+
+    &:not([disabled="true"]):focus-visible {
       background-color: map-get(luxpalette.$lux-palette_primary, 300);
       color: #ffffff;
       .mat-icon-no-color {

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;
+      }
+    }
+  }
+}

package/src/base/components/_luxFormControlWrapper.scss

@@ -112,6 +112,16 @@ 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) {

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -59,6 +59,7 @@ lux-lookup-combobox-ac {
     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;
@@ -70,13 +71,14 @@ lux-lookup-combobox-ac {
     }
   }
 
-  .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 0px;
-    border: 2px solid luxpalette.$lux-primary-color;
-    border-radius: 4px;
-    box-shadow: none !important;
+  }
+  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
+    margin-top: 7px;
   }
 }
 
@@ -157,7 +159,7 @@ 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;
@@ -277,6 +279,9 @@ textarea {
   text-align: inherit;
   font-size: luxcommon.$form-control-font-size;
 }
+lux-textarea-ac text-area {
+  line-height: normal;
+}
 
 /**
  * Theming für LUX-Chips
@@ -327,8 +332,9 @@ lux-chips-ac {
     }
   }
 }
-.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;
@@ -336,6 +342,9 @@ lux-chips-ac {
   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/_luxTextbox.scss

@@ -0,0 +1,80 @@
+@use "sass:map";
+@use "../luxfocus";
+@use "../luxcommon";
+@use "../luxpalette";
+
+$textbox_yellow: rgba(244, 203, 37, 1);
+$textbox_yellow_light: rgba(253, 248, 225, 1);
+
+lux-textbox {
+  .lux-textbox-container {
+    display: grid;
+    grid-template-columns: 1.5em 1fr;
+    gap: 1.5em;
+    row-gap: 1em;
+    border: 1px solid map.get(luxpalette.$lux-palette-primary, 500);
+    border-radius: 4px;
+    padding: 1.5em;
+
+    background-color: #ffffff;
+
+    h3.lux-textbox-title {
+      margin: 0;
+    }
+
+    .lux-textbox-icon {
+      width: 24px;
+      height: 24px;
+      justify-self: start;
+      align-self: start;
+      color: luxpalette.$lux-primary-color;
+      mat-icon.mat-icon.lux-lx-icon-no-size {
+        padding: 0 !important;
+      }
+    }
+
+    .lux-textbox-content {
+      color: luxcommon.$dark-primary-text;
+      grid-column-start: 2;
+      font-size: 1rem;
+      p {
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    &.lux-no-icon {
+      grid-template-columns: 1fr;
+
+      .lux-text-box-title,
+      .lux-textbox-content {
+        grid-column: 1 / -1;
+      }
+    }
+
+    &.lux-blue {
+      background: linear-gradient(90deg, map.get(luxpalette.$lux-palette-primary, 50), #ffffff);
+    }
+    &.lux-green {
+      background: linear-gradient(90deg, map.get(luxpalette.$lux-palette-accent, 50), #ffffff);
+      border-color: luxpalette.$lux-accent-color;
+      lux-icon.lux-textbox-icon {
+        color: luxpalette.$lux-accent-color;
+      }
+    }
+    &.lux-red {
+      background: linear-gradient(90deg, map.get(luxpalette.$lux-palette-warn, 50), #ffffff);
+      border-color: luxpalette.$lux-warn-color;
+      lux-icon.lux-textbox-icon {
+        color: luxpalette.$lux-warn-color;
+      }
+    }
+    &.lux-yellow {
+      background: linear-gradient(90deg, $textbox_yellow_light, #ffffff);
+      border-color: $textbox_yellow;
+      lux-icon.lux-textbox-icon {
+        color: $textbox_yellow;
+      }
+    }
+  }
+}

package/src/green/_custom.scss

@@ -1096,3 +1096,15 @@ lux-textarea-ac {
     line-height: normal;
   }
 }
+
+lux-checkbox-container-ac {
+  .lux-checkbox-container {
+    row-gap: 6px;
+  }
+  .lux-label-container {
+    margin: 0 0 0.25em 0;
+  }
+  lux-checkbox-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
+    height: auto;
+  }
+}