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

package/src/base/_luxcomponents.scss

@@ -7,6 +7,8 @@
 @use "components/luxMasterDetailAc.scss";
 @use "components/luxCheckboxContainerAc.scss";
 @use "components/luxTextbox.scss";
+@use "components/luxIcon";
+@use "components/luxButton";
 @use "luxcommon";
 @use "luxpalette";
 @use "../public/global";
@@ -119,114 +121,6 @@ lux-app-header {
   color: map.get(luxpalette.$lux-palette_primary, 500);
 }
 
-/*
- * Theming for LUX-Button
- */
-lux-button button.lux-button {
-  font-family: global.$app-font-family;
-  font-size: luxcommon.$button-font-size;
-  font-weight: 600;
-
-  &.mat-button,
-  &.mat-raised-button,
-  &.mat-stroked-button,
-  &.mat-flat-button {
-    height: luxcommon.$button-height;
-  }
-
-  &.mat-button.mat-button-disabled,
-  &.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-fab.mat-button-disabled {
-    color: luxcommon.$dark-disabled-text;
-    @include luxelevations.lux-elevation-z0;
-  }
-
-  &.mat-raised-button:not([class*="mat-elevation-z"]) {
-    @include luxelevations.lux-elevation-z2;
-  }
-
-  &.lux-icon-button {
-    height: luxcommon.$button-height;
-    lux-icon {
-      display: inline-block;
-    }
-  }
-
-  &.lux-button-rounded {
-    height: luxcommon.$button-fav-height;
-    width: luxcommon.$button-fav-height;
-
-    @include luxelevations.lux-elevation-z2;
-
-    .mat-button-wrapper {
-      padding: 0;
-      font-size: 15px;
-    }
-
-    lux-icon.lux-button-icon-round {
-      height: 20px;
-      width: 20px;
-      line-height: 1;
-      i {
-        line-height: 1;
-        display: inline-block;
-      }
-      mat-icon.mat-icon.lux-material-icon,
-      mat-icon.mat-icon.lux-lx-icon-no-size {
-        height: 20px;
-        width: 20px;
-      }
-    }
-  }
-
-  lux-icon.lux-button-icon:not(.lux-button-icon-round) {
-    line-height: 1em;
-    &.lux-lx-icon {
-      height: luxcommon.$button-font-size;
-      width: luxcommon.$button-font-size;
-      font-size: luxcommon.$button-font-size;
-    }
-
-    i {
-      line-height: 1;
-      font-size: luxcommon.$button-font-size;
-      vertical-align: middle;
-    }
-
-    mat-icon.mat-icon.lux-material-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
-      line-height: 1;
-      font-size: luxcommon.$button-font-size;
-      vertical-align: middle;
-      height: unset !important;
-      width: unset !important;
-    }
-    mat-icon.lux-lx-icon-no-size {
-      height: luxcommon.$button-font-size;
-      width: luxcommon.$button-font-size;
-    }
-  }
-}
-
-/**
- * Theming für LUX-Checkbox
- */
-lux-checkbox {
-  .mat-checkbox-disabled label {
-    color: luxcommon.$dark-disabled-text;
-  }
-
-  .mat-checkbox-checked:not(.mat-checkbox-disabled) label span.mat-checkbox-inner-container {
-    background-color: map.get(luxpalette.$lux-palette_primary, 500);
-
-    svg {
-      background-color: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-  }
-}
-
 /**
  * Theming für LUX-Card
  */
@@ -258,115 +152,6 @@ lux-card {
   }
 }
 
-/**
- * Theming für LUX-Chips
- */
-
-lux-chips {
-  min-height: calc(#{luxcommon.$form-control-complete-height} + 20px);
-  margin-bottom: 20px;
-
-  .lux-chips-autocomplete-icon {
-    color: var(--lux-theme-primary-500);
-    font-size: 24px;
-    padding-right: 4px;
-    cursor: pointer;
-
-    &.lux-disabled {
-      color: var(--lux-theme-dark-disabled-text);
-      cursor: default;
-    }
-  }
-
-  .lux-chips {
-    mat-chip {
-      // Löschicon (luxSelected=true)
-      &.mat-chip-selected .mat-chip-remove {
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1 !important;
-      }
-
-      // Löschicon (luxSelected=false)
-      &:not(.mat-chip-selected) .mat-chip-remove {
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1 !important;
-      }
-
-      &.mat-chip-disabled {
-        background-color: luxcommon.$dark-disabled-text !important;
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1;
-
-        lux-icon {
-          i,
-          mat-icon {
-            color: luxcommon.$app-data-bg;
-          }
-        }
-      }
-    }
-    mat-chip-list {
-      & div.mat-chip-list-wrapper {
-        margin: 0px 0px 0px -4px;
-      }
-    }
-  }
-}
-
-.lux-chips-autocomplete-panel {
-  padding: luxcommon.$outline-width;
-  margin-top: -20px;
-  margin-left: 0;
-  margin-right: 0;
-  border-radius: 4px;
-
-  mat-option:not(:last-of-type) {
-    margin-bottom: luxcommon.$outline-width;
-  }
-}
-
-/*
- * Theming for LUX-Datepicker
- */
-lux-datepicker {
-  mat-datepicker-toggle button {
-    &:not(.mat-button-disabled) .mat-button-wrapper > svg {
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-
-    &.mat-button-disabled .mat-button-wrapper > svg {
-      color: luxcommon.$dark-disabled-text;
-    }
-  }
-}
-
-/*
- * Theming for LUX-Datetimepicker
- */
-lux-datetimepicker {
-  mat-datepicker-toggle button {
-    &:not(.mat-button-disabled) .mat-button-wrapper > svg {
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-
-    &.mat-button-disabled .mat-button-wrapper > svg {
-      color: luxcommon.$dark-disabled-text;
-    }
-  }
-}
-
-.lux-datetime-overlay-content {
-  mat-card.mat-card {
-    @include luxelevations.lux-elevation-z4();
-
-    lux-input div.lux-form-control {
-      min-height: unset;
-      margin: luxcommon.$form-control-buffer;
-      text-align: center;
-    }
-  }
-}
-
 /*
  * Theming for LUX-Dialog
  */
@@ -392,7 +177,7 @@ lux-divider {
  * Theming for LUX-File-List
  */
 lux-file-list .lux-file-list {
-  margin: luxcommon.$form-control-margin;
+  margin: 0px;
 
   .lux-file-list-entry-label,
   .lux-file-list-entry-icon {
@@ -414,8 +199,7 @@ lux-file-list .lux-file-list {
   &.lux-file-list-disabled {
     mat-card-title *,
     mat-card-content,
-    span,
-    i {
+    span {
       color: luxcommon.$dark-disabled-text;
     }
 
@@ -555,10 +339,6 @@ lux-file-progress {
         border-radius: 8px;
         min-width: 40px;
         min-height: 30px;
-
-        i {
-          font-size: 24px;
-        }
       }
     }
   }
@@ -622,16 +402,9 @@ lux-file-progress {
           min-width: 40px;
           min-height: 30px;
 
-          i {
-            font-size: 24px;
-          }
-          .lux-lx-icon {
-            height: 24px;
-            width: 24px;
-            mat-icon.mat-icon.lux-lx-icon-no-size {
-              width: 24px;
-              height: 24px;
-            }
+          .lux-button-icon mat-icon.mat-icon.lux-icon {
+            width: 24px !important;
+            height: 24px !important;
           }
         }
       }
@@ -666,7 +439,6 @@ lux-file-progress {
         min-width: 40px;
         min-height: 40px;
 
-        i,
         mat-icon {
           font-size: 30px !important;
         }
@@ -697,87 +469,6 @@ 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 {
-    color: luxcommon.$dark-secondary-text;
-  }
-
-  .lux-form-control-container {
-    padding: 6px 0 0 0;
-
-    input,
-    textarea {
-      &:required {
-        @include luxelevations.lux-elevation-z0;
-      }
-    }
-
-    &:after {
-      border-bottom: 1px solid luxcommon.$form-border-color;
-    }
-  }
-}
-
-.lux-form-control-error {
-  .lux-form-control-label {
-    > * {
-      color: luxpalette.$lux-warn-color !important;
-    }
-  }
-
-  .lux-form-control-container {
-    $lux-selected-border-color: luxpalette.$lux-warn-color !important;
-    &:after {
-      // inaktives form-control hat auch eine rote Linie (anstatt schwarz)
-      border-bottom: 1px solid luxpalette.$lux-warn-color;
-    }
-  }
-
-  .lux-form-control-misc div {
-    > * {
-      color: luxpalette.$lux-warn-color !important;
-    }
-  }
-}
-
-.lux-form-control-disabled {
-  .lux-form-control-container {
-    color: luxcommon.$dark-disabled-text !important;
-
-    &:after {
-      border-bottom: 1px dashed luxcommon.$dark-disabled-text;
-    }
-  }
-}
-
-lux-icon.lux-error-icon {
-  font-size: 12px;
-  max-height: 12px;
-  max-width: 12px;
-  padding: 0 4px 0 4px;
-
-  mat-icon {
-    padding: 0 !important;
-    min-width: 12px;
-    max-width: 12px;
-    min-height: 12px;
-    max-height: 12px;
-    color: luxpalette.$lux-warn-color;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
 /*
  * Theming for LUX-Layout-Card-Row
  */
@@ -820,7 +511,6 @@ lux-list {
 /*
  * Theming for LUX-Lookup-Components
  */
-lux-lookup-combobox,
 lux-lookup-combobox-ac {
   mat-select {
     &[aria-disabled="true"] .mat-select-arrow {
@@ -837,30 +527,6 @@ lux-lookup-combobox-ac {
   }
 }
 
-// Optionen werden im Cdk-Overlay dargestellt und hängen nicht unter der Component selbst.
-.lux-autocomplete-panel,
-.lux-select-panel {
-  .mat-option {
-    border-left: none;
-
-    &.invalid {
-      border-left: 2px solid luxpalette.$lux-warn-color;
-    }
-  }
-}
-
-/* 
- * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
- */
-.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;
-  }
-}
-
 /*
 * Stylings für für Elemente die im Mat-Menu-Panel im cdk-overlay-container liegen 
 */
@@ -869,71 +535,18 @@ lux-lookup-combobox-ac {
   .lux-user-name-label.mat-menu-item[disabled] {
     color: luxcommon.$dark-primary-text;
   }
-
-  lux-icon.lux-menu-item-icon {
-    width: 30px;
-    min-width: 30px;
-    max-width: 30px;
-    display: inline-grid;
-
-    mat-icon.mat-icon:not(.lux-lx-icon) {
-      font-size: 24px !important;
-    }
-    &.lux-lx-icon.lux-no-size {
-      width: 24px;
-      min-width: 24px;
-      max-width: 24px;
-      height: 24px;
-    }
-  }
-}
-
-/*
- * Theming for LUX-Master-Detail
- */
-lux-master-detail {
-  .lux-detail-container {
-    .lux-detail-empty-icon,
-    .lux-detail-empty-icon-text {
-      color: luxcommon.$dark-primary-text;
-    }
-  }
-
-  .lux-master-container.lux-empty-elements-aligned {
-    @include luxelevations.lux-elevation-z1;
-  }
-
-  lux-list {
-    .mat-card:not([class*="mat-elevation-z"]) {
-      @include luxelevations.lux-elevation-z0;
-    }
-  }
-}
-
-/*
- * Theming for LUX-Master-Footer
- */
-lux-master-footer {
-  background-color: luxcommon.$app-data-bg;
-  @include luxelevations.lux-elevation-z1;
-}
-
-/*
- * Theming for LUX-Master-Header
- */
-lux-master-header {
-  background-color: luxcommon.$app-data-bg;
-  @include luxelevations.lux-elevation-z1;
 }
 
 /*
  * Theming for LUX-Menu
  */
-.lux-menu-extended {
+.lux-menu-extended,
+.lux-menu-trigger {
   > lux-button {
     button {
       padding-left: 8px;
       padding-right: 8px;
+      min-width: 36px;
     }
   }
 }
@@ -943,6 +556,35 @@ lux-master-header {
   .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;
@@ -977,7 +619,7 @@ lux-message-box {
   .lux-message-container lux-icon:not(.lux-button-icon, .lux-button-icon-round) {
     display: contents;
 
-    mat-icon.lux-lx-icon-no-size {
+    mat-icon.lux-icon {
       width: 20px;
       height: 20px;
     }
@@ -996,7 +638,7 @@ lux-message-box {
 snack-bar-container.mat-snack-bar-container {
   @include luxelevations.lux-elevation-z6();
 
-  mat-icon.mat-icon.lux-lx-icon-no-size {
+  mat-icon.mat-icon.lux-icon {
     width: 2em;
     height: 2em;
   }
@@ -1030,75 +672,6 @@ lux-progress {
   }
 }
 
-lux-radio {
-  // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
-  .mat-radio-container {
-    border-radius: 50%;
-  }
-
-  .mat-radio-checked {
-    label.mat-radio-label .mat-radio-container {
-      span.mat-radio-inner-circle {
-        background-color: map.get(luxpalette.$lux-palette_primary, 500);
-      }
-
-      span.mat-radio-outer-circle {
-        border-color: map.get(luxpalette.$lux-palette_primary, 500);
-      }
-    }
-
-    &.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;
-      }
-    }
-  }
-}
-
-/*
- * Theming for LUX-Select
- */
-lux-select {
-  mat-select {
-    &[aria-disabled="true"] .mat-select-arrow {
-      border-width: 7px;
-      margin: 0 2px 0 0;
-      color: luxcommon.$dark-disabled-text;
-    }
-
-    &[aria-disabled="false"] .mat-select-arrow {
-      border-width: 7px;
-      margin: 0 2px 0 0;
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-  }
-}
-
-// Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
-.lux-select-panel .mat-pseudo-checkbox-checked {
-  background-color: map.get(luxpalette.$lux-palette_primary, 500);
-}
-
 /*
  * Theming for LUX-Side-Nav
  */
@@ -1141,19 +714,6 @@ lux-side-nav {
   background-color: luxcommon.$dark-focused;
 }
 
-/*
- * Theming for LUX-Slider
- */
-lux-slider {
-  .lux-show-thumb-label-always {
-    &.mat-slider-disabled {
-      .mat-slider-thumb-label {
-        background-color: luxcommon.$dark-disabled-text;
-      }
-    }
-  }
-}
-
 /*
  * Theming for LUX-Spinner
  */
@@ -1214,7 +774,6 @@ lux-stepper {
       &.lux-step-header-touched {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i,
           mat-icon {
             color: luxcommon.$app-data-bg;
             background-color: map.get(luxpalette.$lux-palette_primary, 500);
@@ -1229,7 +788,6 @@ lux-stepper {
       &:not(.lux-step-header-touched) {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i,
           mat-icon {
             color: luxcommon.$app-data-bg;
             background-color: luxcommon.$dark-secondary-text;
@@ -1284,17 +842,6 @@ lux-table {
   .lux-row-selected {
     background-color: luxcommon.$lux-selected-bg-color;
   }
-
-  table td {
-    div.lux-form-control {
-      min-height: luxcommon.$form-control-height-small;
-
-      .lux-form-control-label,
-      .lux-form-control-misc {
-        display: none;
-      }
-    }
-  }
 }
 
 /*
@@ -1351,66 +898,6 @@ lux-tile {
   }
 }
 
-/*
- * Theming for LUX-Toggle
- */
-lux-toggle {
-  .mat-slide-toggle {
-    label {
-      color: luxcommon.$dark-primary-text;
-      font-family: global.$app-font-family;
-    }
-
-    .mat-slide-toggle-thumb {
-      @include luxelevations.lux-elevation-z1;
-    }
-
-    &.mat-checked {
-      .mat-slide-toggle-bar {
-        background-color: map.get(luxpalette.$lux-palette_primary, 100);
-      }
-
-      .mat-slide-toggle-thumb {
-        background-color: map.get(luxpalette.$lux-palette_primary, 500);
-      }
-    }
-
-    &:not(.mat-checked) {
-      .mat-slide-toggle-bar {
-      }
-
-      .mat-slide-toggle-thumb {
-      }
-    }
-
-    &.mat-disabled {
-      label {
-        color: black;
-      }
-
-      &.mat-checked {
-        .mat-slide-toggle-bar {
-          background-color: luxcommon.$dark-disabled-text;
-        }
-
-        .mat-slide-toggle-thumb {
-          background-color: black;
-        }
-      }
-
-      &:not(.mat-checked) {
-        .mat-slide-toggle-bar {
-          background-color: luxcommon.$dark-disabled-text;
-        }
-
-        .mat-slide-toggle-thumb {
-          background-color: black;
-        }
-      }
-    }
-  }
-}
-
 /*
  * Theming for LUX-Tooltip
  */
@@ -1664,10 +1151,6 @@ lux-stepper-large {
       min-width: 45px;
       display: flex;
       justify-content: center;
-
-      i {
-        font-size: 25px;
-      }
     }
   }
 }