@ihk-gfi/lux-components-theme 14.7.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/_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,25 +276,11 @@ 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;
       }
     }
   }
@@ -394,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
  */
@@ -644,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 {
@@ -763,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;
@@ -790,7 +495,7 @@ lux-radio {
 }
 
 /*
-* Theming für Lux-Datepicker 
+* Theming für Lux-Datepicker-AC
 */
 .lux-datepicker-panel {
   .mat-calendar.mat-datepicker-content {
@@ -800,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 {
@@ -889,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;
     }
   }
 
@@ -1020,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;
@@ -1028,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;
@@ -1064,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;
     }
   }
@@ -1087,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;
       }
     }

package/src/green/_luxcommon.scss

@@ -1,20 +1,20 @@
 // Allgemein
 $dark-primary-text: #003366;
 $dark-secondary-text: #003366;
-$dark-disabled-text: #636D76;
-$dark-dividers: rgba(black, 0.20);
+$dark-disabled-text: #636d76;
+$dark-dividers: rgba(black, 0.2);
 $dark-focused: rgba(black, 0.12);
 
 $light-primary-text: white;
 $light-secondary-text: rgba(white, 0.7);
 $light-disabled-text: rgba(white, 0.5);
-$light-dividers: #E3EBF5;
+$light-dividers: #e3ebf5;
 $light-focused: rgba(white, 0.12);
 
 // App
 $app-header-bg: #ffffff;
 $app-content-bg: #ffffff;
-$app-footer-bg: #E3EBF5;
+$app-footer-bg: #e3ebf5;
 $app-data-bg: #ffffff;
 $app-gradient: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
 $app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
@@ -24,17 +24,9 @@ $app-font-family: Roboto, Helvetica Neue, sans-serif;
 
 // Form
 $form-border-color: rgba(0, 0, 0, 0.42);
-$form-control-default-height-not-scalable: 40px;
-$form-control-height: 24px;
-$form-control-height-small: 18px;
 $form-control-font-size: 15px;
 $form-control-font-size-small: 12px;
-$form-control-label-padding: 2px 0 4px 0;
-$form-control-container-padding: 10px 5px 10px 5px;
-$form-control-misc-margin: 4px 0 2px 0;
-$form-control-complete-height: 84px;
 $form-control-buffer: 6px;
-$form-control-margin: 0px;
 
 // Button
 $button-height: 45px;
@@ -52,34 +44,34 @@ $lux-hover-color: #e3ebf5;
 $lux-hover-color-for-dark-background: #e3ebf5;
 
 // Selektion
-$lux-selected-border-color: #2E8533;
-$lux-selected-bg-color: #E3EBF5;
+$lux-selected-border-color: #2e8533;
+$lux-selected-bg-color: #e3ebf5;
 
 // Stepper (large)
 $lux-stepper-large-backdrop-bg: #636d76;
-$lux-stepper-large-completed-fc: #2E8533;
+$lux-stepper-large-completed-fc: #2e8533;
 
 $lux-stepper-large-nav-item-active-fc: #ffffff;
 $lux-stepper-large-nav-item-active-bg: #003366;
 $lux-stepper-large-nav-item-disabled-fg: #003366;
 $lux-stepper-large-nav-item-disabled-bg: #eff3f6;
 $lux-stepper-large-nav-item-completed-fg: #ffffff;
-$lux-stepper-large-nav-item-completed-bg: #2E8533;
+$lux-stepper-large-nav-item-completed-bg: #2e8533;
 
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
   "red": #db272e,
   "green": #56bd66,
-  "purple": #9900B8,
+  "purple": #9900b8,
   "blue": #003366,
-  "gray": #636D76,
+  "gray": #636d76,
   "orange": #c75000,
   "brown": #783f04,
   "black": black,
   "white": #ffffff,
   "yellow": rgba(244, 203, 37, 1),
   "pink": #ea515a,
-  "lightblue":  rgba(63, 155, 218, 1)
+  "lightblue": rgba(63, 155, 218, 1)
 );
 
 // Vordergrundfarben (z.B. Badge)