@ihk-gfi/lux-components-theme 19.3.0 → 21.1.0

package/src/base/components/_luxIcon.scss

@@ -1,41 +0,0 @@
-@use "sass:map";
-@use "../luxpalette";
-
-lux-icon {
-  position: relative;
-  display: inline-flex;
-  width: fit-content;
-
-  &.lux-icon-rounded {
-    mat-icon.lux-icon {
-      border-radius: 50%;
-
-      &.lux-icon-rounded-1em {
-        padding: 0.25rem !important;
-      }
-      &.lux-icon-rounded-2em {
-        padding: 0.5rem !important;
-      }
-      &.lux-icon-rounded-3em {
-        padding: 0.75rem !important;
-      }
-      &.lux-icon-rounded-4em,
-      &.lux-icon-rounded-5em {
-        padding: 1rem !important;
-      }
-    }
-  }
-
-  &.lux-error-icon {
-    font-size: 0.75rem;
-
-    mat-icon.lux-icon {
-      padding: 0 !important;
-      color: luxpalette.$lux-warn-color;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}

package/src/base/components/_luxMenu.scss

@@ -1,314 +0,0 @@
-@use "sass:map";
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxfocus";
-
-.mat-mdc-menu-panel {
-  --mat-menu-container-shape: #{luxcommon.$app-border-radius};
-
-  .mat-mdc-menu-item-text {
-    min-height: #{luxcommon.$lux-panel-option-min-height};
-    padding: #{luxcommon.$lux-panel-option-padding};
-  }
-}
-
-lux-menu {
-  display: block;
-  width: 100%;
-
-  .lux-menu-extended,
-  .lux-menu-trigger {
-    > lux-button {
-      button.mat-mdc-button {
-        padding-left: 8px;
-        padding-right: 8px;
-        min-width: 36px;
-      }
-    }
-  }
-}
-
-// Container für die Buttons und den Trigger ausserhalb des Menu-Panels
-.lux-menu-extended {
-  overflow: hidden;
-  min-width: 0;
-  padding: 4px 0;
-  position: relative;
-
-  > lux-button {
-    margin-right: 8px;
-    &.lux-menu-item .lux-button-label {
-      white-space: nowrap;
-      font-weight: 400;
-      letter-spacing: 1px;
-      font-family: luxcommon.$app-font-family;
-    }
-  }
-}
-
-// Container für den Menu-Trigger-button
-.lux-menu-trigger {
-  display: flex;
-  flex: 0 0 auto;
-  margin: 0 4px;
-  align-self: center;
-  box-sizing: border-box;
-}
-
-.lux-menu-trigger-default {
-  button.mat-mdc-button {
-    white-space: nowrap;
-    color: map.get(luxpalette.$lux-palette_primary, 500);
-  }
-}
-
-/* Menu-Overlay-Panel anpassen */
-.lux-menu-panel {
-  border: 2px solid luxpalette.$lux-primary-color;
-  box-shadow: none !important;
-
-  .mat-mdc-menu-item:not([disabled]).cdk-program-focused {
-    background-color: transparent;
-  }
-
-  .mat-mdc-menu-item,
-  .mat-mdc-menu-item:has(.material-icons, mat-icon, [matButtonIcon]) {
-    padding: 0 16px;
-  }
-
-  .mat-mdc-menu-item-text {
-    display: flex;
-  }
-
-  .lux-menu-item {
-    font-size: 1rem;
-    display: block;
-    color: luxpalette.$lux-primary-color;
-    margin-top: luxcommon.$outline-width;
-    margin-bottom: luxcommon.$outline-width;
-    hyphens: auto;
-    word-break: break-all;
-
-    .mat-icon-no-color {
-      color: luxpalette.$lux-primary-color;
-    }
-
-    .lux-button-label {
-      hyphens: auto;
-      word-break: break-word;
-    }
-    .lux-button-badge-container {
-      min-width: 38px;
-      vertical-align: middle;
-      align-self: center;
-    }
-    .lux-button-badge {
-      color: #fff;
-      border-radius: 4px;
-      padding: 1px 4px;
-      font-size: 0.6875rem;
-      line-height: normal;
-      max-height: 16px;
-      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 {
-    align-self: center;
-    vertical-align: middle;
-    mat-icon {
-      margin: 0;
-    }
-  }
-}
-
-//Styling für das neue Panel mit Sektionen und das Large Panel
-.lux-menu-section-panel,
-.lux-menu-section-panel:not(.lux-menu-panel-large) {
-  min-width: 260px !important;
-  max-width: 100%;
-}
-
-.lux-menu-section-panel,
-.lux-menu-section-panel:has(.lux-menu-panel-large) {
-  min-width: 360px !important;
-  max-width: 100%;
-}
-
-.lux-menu-section-panel {
-  .lux-menu-item-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .lux-menu-item-icon {
-    margin-right: 8px;
-    flex-shrink: 0;
-  }
-
-  .lux-button-label {
-    text-align: left;
-    flex: 1 1 auto;
-    white-space: normal;
-  }
-
-  .lux-menu-item-badge-right {
-    min-width: 0px !important;
-    margin-left: auto;
-    align-self: center;
-    display: flex;
-  }
-
-  .lux-button-label-subtitle {
-    color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 40);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0.07px;
-  }
-
-  .lux-menu-panelheader-username {
-    display: flex;
-    padding: 12px 16px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-    align-self: stretch;
-    font-weight: 600;
-    font-size: 1rem;
-    font-style: normal;
-    line-height: 120%;
-  }
-  .lux-menu-panelheader-username-subtitle {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-    align-self: stretch;
-    font-weight: 400;
-
-    font-size: 0.75rem;
-    font-style: normal;
-    line-height: normal;
-  }
-  .lux-menu-section-title {
-    display: flex;
-    padding: 8px 16px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    align-self: stretch;
-
-    color: map-get(map-get(luxpalette.$lux-palettes-new, "neutral"), 40);
-    font-weight: 600;
-    font-size: 1rem;
-    letter-spacing: 0.08px;
-    line-height: 120%; /* 19.2px */
-  }
-  .lux-menu-item-divider {
-    padding: 4px;
-  }
-  .lux-menu-item-divider-large {
-    margin-right: 16px;
-    margin-left: 16px;
-  }
-
-  .lux-menu-item.lux-menu-item-selected {
-    background-color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 90) !important;
-  }
-
-  .lux-menu-item-selected {
-    background-color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 90);
-    &.lux-button-label {
-      text-decoration-line: underline;
-      text-decoration-style: solid;
-      text-decoration-thickness: 10%;
-      text-underline-offset: 5%;
-      text-underline-position: from-font;
-    }
-    &.lux-button-label-subtitle {
-      text-decoration-color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 40);
-      text-decoration-line: underline;
-      text-decoration-style: solid;
-      text-decoration-thickness: 12%;
-      text-underline-offset: 5%;
-      text-underline-position: from-font;
-    }
-  }
-
-  .lux-menu-item-badge-right {
-    text-align: end;
-  }
-}
-
-/** ########## Hover / Focus ########## **/
-// Class, welche das aufgeklappte Panel referenziert
-.lux-menu-panel {
-  .lux-menu-item {
-    &:not([disabled="true"]) {
-      &:focus-visible {
-        @include luxfocus.focus-dark-mixin-inline;
-        border-radius: 0;
-        &:after {
-          width: 0px;
-          border: none;
-        }
-      }
-
-      &:hover {
-        @include luxfocus.lux-hovered-mixin-inverted;
-        & .mat-icon-no-color {
-          color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 100);
-        }
-      }
-    }
-  }
-}
-
-/** ########## Hover / Focus ########## **/
-// Class, welche das gruppen und das große Panel referenziert
-.lux-menu-panel.lux-menu-section-panel {
-  .lux-menu-item {
-    &:not([disabled="true"]) {
-      &:focus-visible {
-        background-color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 100);
-        color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 20);
-        border-radius: 4px;
-        &:after {
-          width: 0px;
-          border: none;
-        }
-        & .lux-button-label-subtitle {
-          color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 40);
-        }
-        .mat-icon-no-color {
-          color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 20);
-        }
-      }
-
-      &:hover {
-        color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 100);
-        & .mat-icon-no-color {
-          color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 100);
-        }
-        & .lux-button-label-subtitle {
-          color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 95);
-        }
-        .lux-button-label.lux-menu-item-selected {
-          background-color: luxcommon.$lux-hover-color;
-        }
-        .lux-button-label-subtitle.lux-menu-item-selected {
-          background-color: luxcommon.$lux-hover-color;
-          text-decoration-color: map-get(map-get(luxpalette.$lux-palettes-new, "primary"), 100);
-        }
-      }
-    }
-  }
-}

package/src/base/components/_luxMessagebox.scss

@@ -1,156 +0,0 @@
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxfocus";
-@use "../luxbreakpoints";
-@use "../luxelevations";
-@use "sass:map";
-
-lux-message-box {
-  display: block;
-  overflow: hidden;
-  border-radius: 4px;
-
-  &.mat-elevation-z4 {
-    @include luxelevations.lux-elevation-z0();
-  }
-
-  & .lux-message-box-content {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-
-    & .lux-message-container {
-      display: grid;
-      grid-template-columns: 52px 1fr 36px;
-      align-items: center;
-
-      padding: var(--lux-theme-outline-width) 24px;
-      border-radius: 4px;
-
-      &.lux-bg-color-white {
-        // da im Theme authentic der Schatten entfernt wurde, muss eine Weiße Messagebox eine Border erhalten.
-        border: 1px solid luxpalette.$lux-primary-color;
-        box-sizing: border-box;
-
-        & lux-button button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
-          color: luxpalette.$lux-primary-color;
-        }
-      }
-
-      & lux-button {
-        button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
-          color: inherit !important;
-          background-color: transparent !important;
-          @include luxelevations.lux-elevation-z0();
-        }
-
-        .mat-mdc-button-ripple {
-          display: none;
-        }
-      }
-
-      & lux-icon:not(.lux-button-icon, .lux-button-icon-round) {
-        display: contents;
-
-        mat-icon.lux-icon {
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-    lux-message:not(:last-child) {
-      .lux-message-container {
-        margin-bottom: 1px;
-      }
-    }
-  }
-
-  mat-paginator {
-    & .mat-paginator-container {
-      padding: 0 20px !important;
-    }
-  }
-}
-
-/** ########## Hover / Focus  ########## **/
-lux-message-box {
-  & div.lux-message-box-content {
-    &:focus-visible {
-      @include luxfocus.focus-dark-mixin;
-    }
-
-    .mat-mdc-fab.mat-unthemed,
-    .mat-mdc-mini-fab.mat-unthemed {
-      background-color: transparent !important;
-    }
-
-    & .lux-message-container.lux-bg-color-white {
-      & .lux-message-text:focus-visible {
-        @include luxfocus.focus-dark-mixin;
-        border-radius: 4px;
-      }
-
-      & lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default {
-        &:hover {
-          color: #ffffff !important;
-          background-color: luxpalette.$lux-primary-color !important;
-        }
-
-        &:focus-visible {
-          @include luxfocus.focus-dark-mixin;
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    & .lux-message-container:not(.lux-bg-color-white) {
-      & .lux-message-text:focus-visible {
-        @include luxfocus.focus-bright-mixin;
-        border-radius: 4px;
-      }
-
-      & lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default {
-        &:hover {
-          color: white !important;
-          background-color: rgba(1, 1, 1, 0.2) !important;
-        }
-
-        &:focus-visible {
-          @include luxfocus.focus-bright-mixin;
-          color: white !important;
-          background-color: transparent !important;
-        }
-      }
-    }
-  }
-}
-
-@media (prefers-contrast: more) {
-  lux-message-box {
-    .lux-message-container {
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-    }
-    
-    .lux-bg-color-red {
-      background-color: map-get(map-get(luxpalette.$lux-palettes-new, 'error'), 35);
-    }
-    .lux-font-color-green {
-      color: #ffffff;
-    }
-    .lux-bg-color-green {
-      background-color: map-get(map-get(luxpalette.$lux-palettes-new, 'tertiary'), 30);
-    }
-    .lux-bg-color-gray {
-      background-color: map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10);
-    }
-    .lux-bg-color-orange {
-      background-color: map-get(luxcommon.$colorsForDarkBg, 'yellow');
-    }
-    .lux-bg-color-purple {
-      background-color: map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10);
-    }
-  }
-}

package/src/base/components/_luxProgressBar.scss

@@ -1,5 +0,0 @@
-lux-progress {
-  .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
-    border-color: unset;
-  }
-}

package/src/base/components/_luxProgressSpinner.scss

@@ -1,13 +0,0 @@
-@use "../luxcommon";
-
-@each $colorName, $colorNameHex in luxcommon.$componentBgColors {
-  .mat-mdc-progress-spinner.lux-color-#{"" + $colorName + ""} .mdc-circular-progress__determinate-circle {
-    stroke: $colorNameHex;
-  }
-}
-
-@each $colorName, $colorNameHex in luxcommon.$componentBgColors {
-  .mat-mdc-progress-spinner.lux-color-#{"" + $colorName + ""} .mdc-circular-progress__indeterminate-circle-graphic {
-    stroke: $colorNameHex;
-  }
-}

package/src/base/components/_luxSnackbar.scss

@@ -1,77 +0,0 @@
-@use "sass:map";
-@use "../luxpalette";
-@use "../luxcommon";
-@use "../luxelevations";
-
-.cdk-overlay-container {
-  .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
-    min-width: unset;
-    border-radius: 4px;
-  }
-
-  .mat-mdc-snack-bar-container.lux-snackbar {
-    @include luxelevations.lux-elevation-z6();
-
-    position: relative;
-    margin: 0 !important;
-
-    // Die Snackbar wird durch die App umpositioniert, bevor sie sichtbar geschaltet wird.
-    // Würde man die Snackbar nicht verstecken, würde sie von der initialen Position zur neuen
-    // springen.
-    visibility: hidden;
-
-    .lux-snackbar-content {
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-    }
-
-    @each $colorName, $colorNameHex in luxcommon.$colorsForDarkBg {
-      .lux-snackbar-content .lux-bg-color-#{"" + $colorName + ""} {
-        color: $colorNameHex;
-        background-color: transparent;
-      }
-    }
-
-    mat-icon.mat-icon.lux-icon {
-      width: 2em;
-      height: 2em;
-    }
-  }
-
-  .mat-snack-bar-handset snack-bar-container.mat-snack-bar-container.lux-snackbar {
-    left: 8px;
-    width: auto !important;
-    margin-right: 10px !important;
-  }
-}
-
-@media (prefers-contrast: more) {
-  .cdk-overlay-container {
-    .mat-mdc-snack-bar-container.lux-snackbar {
-      .lux-snackbar-content {
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-      }
-
-      .lux-snackbar-content .lux-bg-color-red {
-        color: map-get(map-get(luxpalette.$lux-palettes-new, 'error'), 80);
-      }
-
-      .lux-snackbar-content .lux-bg-color-blue {
-        color: map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 80);
-      }
-
-      .lux-snackbar-content .lux-bg-color-green {
-        color: map-get(map-get(luxpalette.$lux-palettes-new, 'tertiary'), 80);
-      }
-
-      .lux-snackbar-content .lux-bg-color-orange {
-        color: map-get(luxcommon.$colorsForDarkBg, 'yellow');
-      }
-    }
-  }
-}

package/src/base/components/_luxTextbox.scss

@@ -1,91 +0,0 @@
-@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;
-
-    h1.lux-textbox-title,
-    h2.lux-textbox-title,
-    h3.lux-textbox-title,
-    h4.lux-textbox-title,
-    h5.lux-textbox-title,
-    h6.lux-textbox-title {
-      margin: 0;
-      font-size: 1.125rem;
-      font-weight: 600;
-    }
-
-    .lux-textbox-icon {
-      width: 24px;
-      height: 24px;
-      justify-self: start;
-      align-self: start;
-      color: luxpalette.$lux-primary-color;
-      mat-icon.mat-icon.lux-icon {
-        padding: 0 !important;
-      }
-    }
-
-    .lux-textbox-content {
-      color: luxcommon.$dark-primary-text;
-      grid-column-start: 2;
-      font-size: 1rem;
-      p {
-        padding: 0;
-        margin: 0;
-      }
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    &.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;
-      }
-    }
-  }
-}