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

package/src/base/components/_luxLinkPlain.scss

@@ -23,7 +23,7 @@ lux-link-plain {
     lux-icon {
       font-size: inherit;
       display: flex;
-      mat-icon.mat-icon.lux-lx-icon-no-size {
+      mat-icon.mat-icon.lux-icon {
         padding: 0px !important;
         width: 0.8em;
         height: 0.8em;
@@ -41,7 +41,6 @@ lux-link-plain {
     color: map.get(luxpalette.$lux-palette-primary, A700);
     font-family: inherit;
     lux-icon {
-      i,
       mat-icon {
         color: map.get(luxpalette.$lux-palette-primary, A700);
       }
@@ -54,7 +53,6 @@ lux-link-plain {
     cursor: text;
     text-decoration: none;
     lux-icon {
-      i,
       mat-icon {
         color: luxcommon.$dark-disabled-text;
       }
@@ -66,7 +64,6 @@ lux-link-plain {
     text-decoration: underline;
     cursor: pointer;
     lux-icon {
-      i,
       mat-icon {
         color: map.get(luxpalette.$lux-palette-primary, 300);
       }

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

@@ -28,7 +28,7 @@ lux-textbox {
       justify-self: start;
       align-self: start;
       color: luxpalette.$lux-primary-color;
-      mat-icon.mat-icon.lux-lx-icon-no-size {
+      mat-icon.mat-icon.lux-icon {
         padding: 0 !important;
       }
     }

package/src/base/components/_luxTileAc.scss

@@ -18,18 +18,10 @@ lux-tile-ac {
 
     .lux-tile-icon {
       color: map.get(luxpalette.$lux-palette-primary, 500);
-      lux-icon {
-        width: 2em;
-        height: 2em;
-        i,
-        mat-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
-          padding: 0 !important;
-          font-size: 2em !important;
-        }
-        mat-icon.lux-lx-icon-no-size {
-          width: 2em;
-          height: 2em;
-        }
+      mat-icon.lux-icon {
+        padding: 0px !important;
+        height: 32px;
+        width: 32px;
       }
     }
 

package/src/green/_custom.scss

@@ -237,7 +237,6 @@ lux-app-header {
 lux-button button.lux-button {
   font-weight: normal !important;
   font-family: luxcommon.$app-font-family;
-  align-items: center;
 
   &.mat-button,
   &.mat-raised-button,
@@ -266,21 +265,9 @@ lux-button button.lux-button {
     border-radius: 18px;
     height: luxcommon.$button-height;
 
-    & lux-icon:not(.lux-button-icon-round) {
-      i.lux-fa-icon {
-        font-size: 1em !important;
-      }
-      mat-icon.mat-icon.lux-material-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
-        font-size: 1.2em !important;
-        padding: 0px !important;
-        height: unset !important;
-        width: unset !important;
-      }
-    }
-    mat-icon.mat-icon.lux-lx-icon:not(.lux-fa-icon, .lux-material-icon),
-    mat-icon.mat-icon.lux-lx-icon-no-size:not(.lux-fa-icon, .lux-material-icon) {
-      height: 22px;
-      width: 22px;
+    lux-icon.lux-button-icon mat-icon.mat-icon.lux-icon {
+      height: 22px !important;
+      width: 22px !important;
     }
   }
 
@@ -289,28 +276,21 @@ lux-button button.lux-button {
     height: luxcommon.$button-fav-height;
     width: luxcommon.$button-fav-height;
     font-size: $button-font-size;
-    .mat-button-wrapper {
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      line-height: 1;
-    }
 
     & lux-icon.lux-button-icon-round {
-      line-height: 1;
-      height: 22px;
-      width: 22px;
-      i,
-      mat-icon.mat-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
-        font-size: 22px !important;
-      }
-      mat-icon.mat-icon.lux-lx-icon:not(.lux-fa-icon, .lux-material-icon),
-      mat-icon.mat-icon.lux-lx-icon-no-size:not(.lux-fa-icon, .lux-material-icon) {
-        height: 22px;
-        width: 22px;
+      mat-icon.mat-icon.lux-icon {
+        height: 22px !important;
+        width: 22px !important;
       }
     }
   }
+
+  .lux-button-badge {
+    border-radius: 8px;
+    padding: 2px 8px;
+    font-size: 14px;
+    max-width: 48px;
+  }
 }
 
 /*
@@ -387,210 +367,10 @@ lux-tile {
 /*
  * Theming for LUX-Form-Controls
  */
-$form-control-label-padding-bottom: 4px;
+
 $form-control-border-radius: 4px;
 $form-control-old-border-bottom: 0px;
 
-lux-checkbox,
-lux-toggle,
-lux-radio,
-lux-slider {
-  & .lux-form-control {
-    .lux-form-control-label {
-      padding-bottom: $form-control-label-padding-bottom;
-    }
-
-    .lux-form-control-container {
-      padding: 10px 0px;
-    }
-  }
-
-  .lux-form-control:not(.lux-form-control-disabled),
-  .lux-form-control:not(.lux-form-control-disabled).lux-focused {
-    .lux-form-control-label {
-      > * {
-        color: luxcommon.$dark-secondary-text;
-      }
-    }
-  }
-}
-
-.mat-select-value {
-  color: luxcommon.$dark-secondary-text;
-}
-
-lux-input,
-lux-select,
-lux-file-input,
-lux-textarea,
-lux-autocomplete,
-lux-datepicker,
-lux-datetimepicker,
-lux-chips,
-lux-lookup-autocomplete,
-lux-lookup-combobox {
-  & .lux-form-control {
-    .lux-form-control-label {
-      padding-bottom: $form-control-label-padding-bottom;
-    }
-
-    .lux-form-control-container {
-      border: 1px solid luxcommon.$form-border-color;
-      border-radius: $form-control-border-radius;
-      padding: luxcommon.$form-control-container-padding;
-
-      &:after {
-        border-bottom: $form-control-old-border-bottom;
-      }
-    }
-
-    .lux-label,
-    mat-hint,
-    mat-error {
-      color: luxcommon.$dark-secondary-text;
-    }
-  }
-
-  .lux-form-control-error {
-    .lux-form-control-label {
-      > * {
-        color: luxpalette.$lux-warn-color !important;
-      }
-    }
-
-    .lux-form-control-container {
-      border-color: luxcommon.$lux-selected-border-color !important;
-      box-shadow: 0 0 0 2px luxpalette.$lux-warn-color, 0 0 4px 2px luxpalette.$lux-warn-color;
-
-      &:after {
-        border-bottom: $form-control-old-border-bottom;
-      }
-    }
-
-    .lux-form-control-misc {
-      > * {
-        color: luxpalette.$lux-warn-color !important;
-      }
-    }
-  }
-
-  .lux-form-control-disabled {
-    .lux-form-control-container {
-      color: luxcommon.$dark-disabled-text !important;
-      border: 1px dashed luxcommon.$dark-disabled-text !important;
-      border-radius: $form-control-border-radius;
-      padding: luxcommon.$form-control-container-padding;
-
-      &:after {
-        border-bottom: $form-control-old-border-bottom;
-      }
-    }
-  }
-
-  .lux-form-control:not(.lux-form-control-disabled).lux-focused {
-    .lux-form-control-label {
-      > * {
-        color: luxcommon.$dark-secondary-text;
-      }
-    }
-
-    .lux-form-control-container {
-      box-shadow: 0 0 0 2px luxcommon.$lux-selected-border-color, 0 0 4px 2px luxcommon.$lux-selected-border-color;
-
-      &:after {
-        border-bottom: $form-control-old-border-bottom !important;
-      }
-    }
-
-    &.lux-form-control-error {
-      .lux-form-control-container {
-        border-color: luxpalette.$lux-warn-color !important;
-        box-shadow: 0 0 0 2px luxpalette.$lux-warn-color, 0 0 4px 2px luxpalette.$lux-warn-color;
-      }
-      &:after {
-        border-bottom: $form-control-old-border-bottom !important;
-      }
-    }
-  }
-}
-
-.lux-form-control-error {
-  .lux-form-control-label {
-    > * {
-      color: luxpalette.$lux-warn-color !important;
-    }
-  }
-
-  .lux-form-control-container {
-    border-color: luxpalette.$lux-warn-color !important;
-  }
-
-  .lux-form-control-misc {
-    > * {
-      color: luxpalette.$lux-warn-color !important;
-    }
-  }
-}
-
-lux-file-input,
-lux-file-input-ac {
-  lux-button.lux-menu-item,
-  lux-button.lux-menu-trigger-default {
-    button lux-icon {
-      display: inline;
-      mat-icon {
-        vertical-align: unset;
-      }
-    }
-  }
-}
-
-/*
- * Theming für LUX-Layout-Form-Row
- */
-lux-layout-form-row {
-  lux-input,
-  lux-select,
-  lux-file-input,
-  lux-textarea,
-  lux-autocomplete,
-  lux-datepicker,
-  lux-datetimepicker,
-  lux-chips,
-  lux-lookup-autocomplete,
-  lux-lookup-combobox {
-    & .lux-form-control {
-      margin-right: 0px;
-      margin-left: 0px;
-    }
-  }
-}
-
-/*
- * Theming für LUX-Checkbox
- */
-lux-checkbox {
-  .mat-checkbox-disabled .mat-checkbox-inner-container {
-    border: 1px solid luxcommon.$dark-disabled-text;
-  }
-
-  .mat-checkbox-inner-container {
-    border-radius: 4px;
-    border: 1px solid map.get(luxpalette.$lux-palette_primary, 500);
-    // wegen der Border
-    height: 18px !important;
-    width: 18px !important;
-
-    .mat-checkbox-frame {
-      border: none;
-    }
-
-    .mat-checkbox-background .mat-checkbox-checkmark {
-      border-radius: 2px; // bei 4px ist ein grüner Rand zu sehen
-    }
-  }
-}
-
 /*
  * Theming für LUX-Table
  */
@@ -637,77 +417,8 @@ mat-card lux-tabs {
   }
 }
 
-/*
- * Theming für LUX-Radio-Buttons
- */
-lux-radio {
-  .mat-radio-outer-circle {
-    border: 1.5px solid map.get(luxpalette.$lux-palette_primary, 500);
-  }
-
-  .mat-radio-inner-circle {
-    // Checkmark-Symbol mit css gezeichnet, anstatt des inneren Kreises
-    border-radius: 2px;
-    background-color: transparent !important;
-    border-bottom: 5px solid white;
-    border-right: 5px solid white;
-    height: 32px;
-    width: 14px;
-    margin-top: -8px;
-    margin-left: 3px;
-  }
-
-  .mat-radio-checked {
-    .mat-radio-outer-circle {
-      background: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-
-    &.mat-radio-disabled .mat-radio-outer-circle {
-      background: luxcommon.$dark-disabled-text;
-      border: none;
-    }
-
-    &.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;
-      }
-    }
-  }
-
-  .mat-radio-checked .mat-radio-inner-circle {
-    transform: rotate(45deg) scale(0.4);
-  }
-
-  .mat-radio-button .mat-radio-ripple {
-    height: 20px; /*double of your required circle radius*/
-    width: 20px; /*double of your required circle radius*/
-    left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
-    top: calc(50% - 10px); /*'10px'-same as your required circle radius */
-  }
-}
-
 /* 
- * Mixin für den Datepicker und Datetimepicker
+ * Mixin für den Datepicker-AC und Datetimepicker-AC
  */
 @mixin datepicker-content {
   .mat-calendar-content {
@@ -756,6 +467,7 @@ lux-radio {
 
 /*
 * Theming für Lux-Datepicker-Custom-Header 
+* wird auch von den AC-Components genutzt
 */
 .lux-datepicker-custom-header-component {
   display: flex;
@@ -783,7 +495,7 @@ lux-radio {
 }
 
 /*
-* Theming für Lux-Datepicker 
+* Theming für Lux-Datepicker-AC
 */
 .lux-datepicker-panel {
   .mat-calendar.mat-datepicker-content {
@@ -793,7 +505,7 @@ lux-radio {
 }
 
 /*
-* Theming für Lux-Datetime-Picker 
+* Theming für Lux-Datetime-Picker-AC
 */
 .lux-datetime-overlay-content {
   .mat-calendar.lux-datetime-overlay-calendar {
@@ -882,7 +594,7 @@ lux-form-control-wrapper .lux-form-control-wrapper {
       font-size: luxcommon.$form-control-font-size;
       font-family: luxcommon.$app-font-family;
       padding: 8px 0;
-      height: 40px;
+      min-height: 40px;
     }
   }
 
@@ -1013,7 +725,7 @@ lux-datetimepicker-ac {
     height: 18px !important;
     width: 18px !important;
 
-    .mat-icon-button {
+    .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base {
       height: 18px !important;
       width: 18px !important;
       line-height: 1.5;
@@ -1021,11 +733,17 @@ lux-datetimepicker-ac {
 
       lux-icon.lux-datepicker-toggle-icon,
       mat-icon.mat-icon {
+        display: inline-flex;
         height: 18px !important;
         width: 18px !important;
         padding: 0px !important;
       }
 
+      svg {
+        height: 18px;
+        width: 18px;
+      }
+
       &.mat-button-disabled {
         svg {
           color: luxcommon.$dark-disabled-text;
@@ -1057,16 +775,28 @@ lux-lookup-combobox-ac {
   }
 }
 
+/* 
+ * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
+ * wird noch für "Green" benötigt
+ */
+.cdk-overlay-pane {
+  & > .mat-autocomplete-panel:not([class*="mat-elevation-z"]),
+  .mat-datepicker-content,
+  .mat-select-panel:not([class*="mat-elevation-z"]),
+  .mat-menu-panel {
+    @include luxelevations.lux-elevation-z4;
+  }
+}
+
 /*
-* Theming für LUX-file-input und LUX-file-input-ac
+* Theming für LUX-file-input-ac
 */
-lux-file-input,
 lux-file-input-ac {
   .lux-menu-extended {
     gap: 4px;
-    lux-button button.lux-button lux-icon.lux-button-icon:not(.lux-button-icon-round).lux-lx-icon {
-      height: 14px;
-      width: 14px;
+    lux-button button.lux-button lux-icon.lux-button-icon:not(.lux-button-icon-round) mat-icon.lux-icon {
+      height: 14px !important;
+      width: 14px !important;
       font-size: 14px;
     }
   }
@@ -1080,7 +810,7 @@ lux-file-list {
     gap: 4px;
     .lux-menu-item,
     .lux-menu-trigger {
-      lux-icon mat-icon.lux-lx-icon-no-size {
+      lux-icon mat-icon.lux-icon {
         font-size: 16px !important;
       }
     }