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

package/src/authentic/_custom.scss

@@ -16,7 +16,6 @@ h4,
 h5,
 h6 {
   color: rgba(black, 0.87);
-  font-weight: normal;
   font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
 }
 
@@ -37,16 +36,14 @@ label {
   border: 2px solid luxpalette.$lux-primary-color;
   box-shadow: none !important;
 
-  .lux-menu-item {
-    color: luxpalette.$lux-primary-color;
-  }
-
-  .mat-menu-item .mat-icon-no-color {
-    color: luxpalette.$lux-primary-color;
-  }
+  .mat-menu-item:not([disabled="true"]) {
+    &.lux-menu-item {
+      color: luxpalette.$lux-primary-color;
+    }
 
-  .mat-menu-content:not(:empty) {
-    padding: 0;
+    .mat-icon-no-color {
+      color: luxpalette.$lux-primary-color;
+    }
   }
 
   .lux-menu-item:not([disabled="true"]):hover {

package/src/base/_luxcomponents.scss

@@ -6,6 +6,7 @@
 @use "components/luxFormControlsAuthentic.scss";
 @use "components/luxMasterDetailAc.scss";
 @use "components/luxCheckboxContainerAc.scss";
+@use "components/luxTextbox.scss";
 @use "luxcommon";
 @use "luxpalette";
 @use "../public/global";
@@ -207,6 +208,20 @@ lux-button button.lux-button {
       width: luxcommon.$button-font-size;
     }
   }
+
+  .lux-button-badge {
+    color: #fff;
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: 11px;
+    line-height: normal;
+    max-width: 38px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
 }
 
 /**
@@ -937,6 +952,49 @@ lux-master-header {
   }
 }
 
+/* Menu-Overlay-Panel anpassen */
+.lux-menu-panel {
+  .lux-menu-item {
+    font-size: 16px;
+    display: block;
+    &.with-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+      width: 100%;
+      max-width: 100%;
+    }
+    .lux-button-label.with-badge {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .lux-button-badge {
+      color: #fff;
+      border-radius: 4px;
+      padding: 1px 4px;
+      font-size: 11px;
+      line-height: normal;
+      min-width: 15px;
+      max-width: 38px;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      box-sizing: border-box;
+      letter-spacing: 1.25px;
+    }
+  }
+  .lux-menu-item-icon {
+    vertical-align: middle;
+    mat-icon {
+      margin: 0;
+    }
+  }
+}
+
 /*
  * Theming for LUX-Message-Box
  */

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,31 @@ 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;
+      color: luxpalette.$lux-primary-color;
+      & .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 +189,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/_luxMasterDetailAc.scss

@@ -23,24 +23,24 @@
       background-color: unset;
     }
   }
- 
-  .lux-master-header-container-ac  {
+
+  .lux-master-header-container-ac {
     z-index: 100;
-    position:relative;
+    position: relative;
 
     lux-button.master-ac-toggle {
       position: absolute;
       right: -18px;
       top: 17px;
       z-index: 1000;
-      
+
       button.lux-button.lux-button-rounded {
-        @include luxelevations.lux-elevation-z0;  
+        @include luxelevations.lux-elevation-z0;
         border: 1px solid luxcommon.$app-border-color;
         color: map.get(luxpalette.$lux-palette-primary, 500);
         background-color: #fff !important;
       }
-      
+
       .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
@@ -50,9 +50,9 @@
       }
     }
     button.lux-button.lux-button-rounded {
-      &:hover:not([disabled]){
+      &:hover:not([disabled]) {
         color: luxcommon.$lux-hover-color;
-        border-radius: 50%
+        border-radius: 50%;
       }
       &:active:not([disabled]) {
         color: map.get(luxpalette.$lux-palette-primary, 700);
@@ -62,7 +62,8 @@
     .lux-menu-extended {
       padding: 0px;
     }
-    mat-card-title, h2 {
+    mat-card-title,
+    h2 {
       font-size: 16px;
     }
     mat-card-subtitle.mat-card-subtitle {
@@ -76,7 +77,8 @@
     mat-card.mat-card {
       padding: 12px;
     }
-    mat-card-title, h2 {
+    mat-card-title,
+    h2 {
       font-size: 16px;
     }
     mat-card-subtitle.mat-card-subtitle {
@@ -99,13 +101,13 @@
   .lux-master-view-ac {
     margin: 10px 0;
     z-index: 100;
-    
+
     lux-list {
       border: none !important;
     }
-    
+
     lux-list-item {
-      margin-bottom: 4px;  
+      margin-bottom: 4px;
       mat-card.mat-card {
         margin: 0px;
 
@@ -120,11 +122,11 @@
         }
       }
     }
-    
+
     lux-list-item,
     lux-list-item-content {
       display: block;
-    }    
+    }
   }
 
   lux-master-footer-ac {
@@ -143,21 +145,25 @@
     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-mobile {
+        top: 60px;
+      }
     }
-  
+
     .lux-detail-empty-icon,
     .lux-detail-empty-icon-text {
       opacity: 0.6;
@@ -173,7 +179,7 @@
       }
       .back-to-master-button-container {
         padding: 4px;
-      
+
         &:hover {
           background-color: luxcommon.$lux-hover-color;
           cursor: pointer;
@@ -181,7 +187,7 @@
 
         lux-button.back-to-master-button {
           button.lux-button.lux-button-rounded {
-            @include luxelevations.lux-elevation-z0;  
+            @include luxelevations.lux-elevation-z0;
             border: 1px solid luxcommon.$app-border-color;
             color: map.get(luxpalette.$lux-palette-primary, 500);
           }
@@ -203,4 +209,4 @@
       }
     }
   }
- }
+}

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

@@ -311,6 +311,13 @@ lux-button button.lux-button {
       }
     }
   }
+
+  .lux-button-badge {
+    border-radius: 8px;
+    padding: 2px 8px;
+    font-size: 14px;
+    max-width: 48px;
+  }
 }
 
 /*