@ihk-gfi/lux-components-theme 19.2.0 → 21.0.0

package/src/base/components/_luxCard.scss

@@ -1,179 +0,0 @@
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxfocus";
-@use "../luxelevations";
-@use "sass:map";
-
-.mat-mdc-card-outlined {
-  --mdc-outlined-card-container-shape: #{luxcommon.$app-border-radius};
-}
-
-lux-card {
-  // Falls die lux-card in einem lux-grid verwendet wird und alle Cards einer Reihe dieselbe Höhe erhalten sollen
-  // müssen mat-card und mat-card-content entsprechend angepasst werden.
-  // Diese Anforderung stammt aus dem Verhalten der ehemaligen Lux-Layout-Card-Row.
-  &.lux-flex {
-    mat-card,
-    mat-card-content {
-      flex: 1 1 auto;
-    }
-  }
-
-  // Hier wird das Padding der LUX-Card gesetzt.
-  mat-card {
-    padding: 16px;
-
-    .mat-mdc-card-content {
-      padding: 0;
-
-      &:first-child {
-        padding: 0;
-      }
-
-      .lux-card-content {
-        padding: 0;
-
-        &.lux-card-with-content-and-header {
-          padding-top: 16px;
-        }
-      }
-    }
-  }
-
-  // Umstylen der Mat-Card
-  .mat-mdc-card.lux-card {
-    border: 1px solid luxcommon.$app-border-color;
-    border-radius: luxcommon.$app-border-radius;
-    background-color: #fff;
-    display: flex;
-    box-sizing: border-box;
-
-    &:not([class*="mat-elevation-z"]) {
-      @include luxelevations.lux-elevation-z0;
-    }
-
-    .mat-mdc-card-content {
-      font-size: 1rem;
-    }
-  }
-
-  .lux-card-content-container {
-    overflow-x: hidden;
-    padding: luxcommon.$form-control-buffer;
-    font-family: luxcommon.$app-font-family;
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-
-    > * {
-      margin-bottom: 0;
-    }
-  }
-
-  .lux-card-header {
-    padding: 0;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 1.5rem;
-      font-weight: 500;
-      color: luxcommon.$dark-primary-text;
-    }
-
-    .lux-card-icon-container,
-    .lux-card-info-container lux-card-info {
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-      lux-icon {
-        mat-icon {
-          padding: 0 !important;
-          height: 29px;
-          width: 29px;
-        }
-      }
-    }
-    .lux-card-icon-container {
-      margin-right: 10px;
-    }
-    .lux-card-info-container {
-      margin-left: 10px;
-      grid-column-start: 3;
-
-      &.lux-title.lux-subtitle {
-        grid-row: 1 / span 2;
-      }
-
-      &.lux-title:not(.lux-subtitle) {
-        grid-row: 1;
-      }
-
-      &.lux-subtitle:not(.lux-title) {
-        grid-row: 2;
-      }
-    }
-
-    .lux-card-title,
-    .lux-card-subtitle {
-      grid-column-start: 2;
-      margin: 0px;
-      padding: 0px;
-    }
-    .lux-card-subtitle {
-      font-size: 1rem;
-      color: luxcommon.$dark-secondary-text;
-      font-weight: normal;
-      font-family: luxcommon.$app-font-family;
-    }
-  }
-
-  .lux-card-content-expanded {
-    background: luxcommon.$app-data-bg;
-  }
-
-  mat-card-actions {
-    &.mat-mdc-card-actions {
-      justify-content: flex-end;
-      min-height: 36px;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    &.lux-card-actions {
-      margin-right: 0;
-      margin-left: 0;
-    }
-  }
-
-  /*
-    Setze den Margin (links und rechts) auf 1px, damit sich die LUX-CARDS, welche sich innerhalb eines Tabs befinden,
-    korrekt an der Y-Achse (Kartentitel, Tab und Inhalt) ausrichten. 1px damit der Schatten bzw. die Begrenzung links
-    sichtbar bleibt. Bei 0px würde der Schatten bzw. die Begrenzung links fehlen.
-  */
-  .lux-tab-content .lux-card {
-    margin-right: 1px;
-    margin-left: 1px;
-  }
-
-  // HOVER / FOCUS
-
-  mat-card {
-    &[class~="lux-cursor"]:hover {
-      background-image: luxcommon.$app-gradient-reverse;
-      background-color: #ffffff;
-      border-color: luxcommon.$dark-primary-text;
-      .lux-card-content-expanded {
-        background-image: luxcommon.$app-gradient-reverse;
-        background-color: #ffffff;
-        border-color: luxcommon.$dark-primary-text;
-      }
-    }
-    &[class~="lux-cursor"]:focus-visible {
-      @include luxfocus.focus-dark-mixin-inline;
-    }
-  }
-}

package/src/base/components/_luxFormControlWrapper.scss

@@ -1,205 +0,0 @@
-@use "sass:map";
-@use "../luxfocus";
-@use "../luxstyles";
-@use "../luxcommon";
-@use "../luxpalette";
-
-@mixin crop {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-@mixin form-label {
-  min-height: 1.2em;
-  font-size: 0.75em;
-  line-height: 1.2em;
-  color: luxcommon.$dark-secondary-text;
-}
-
-lux-form-control-wrapper {
-  width: 100%;
-
-  .lux-form-control-wrapper {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: column;
-    font-size: luxcommon.$form-control-font-size;
-    color: luxcommon.$dark-primary-text;
-
-    .lux-form-control-label-authentic {
-      @include form-label;
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-      margin: 0 calc(0.5em + 1px) 0.25em calc(0.5em + 1px);
-      > * {
-        @include crop;
-      }
-      &.lux-label-long-format {
-        > * {
-          white-space: normal;
-          text-overflow: unset;
-          word-wrap: break-word;
-        }
-      }
-    }
-
-    .lux-form-control-container-authentic {
-      flex: 1 1 auto;
-      box-sizing: border-box;
-      padding: 0.75em 0.5em;
-      font-size: luxcommon.$form-control-font-size;
-      color: luxcommon.$dark-primary-text;
-      background-color: #fff;
-      line-height: 1.5em;
-      border: 1px solid luxcommon.$form-border-color;
-      border-radius: 4px;
-      &.lux-no-input-row {
-        // lux-toggel-ac, lux-checkbox-ac, lux-slider-ac, lux-radio-ac werden auf der Baseline ausgerichtet
-        // haben aber nicht den Rahmen, den die Input-Elemente haben
-        background-color: transparent;
-        border: none;
-        padding: 0.75em 0em;
-      }
-    }
-
-    .lux-form-control-misc-authentic {
-      display: flex;
-      place-content: flex-start space-between;
-      align-items: flex-start;
-      box-sizing: border-box;
-      margin: 0.25em calc(0.5em + 1px) 0 calc(0.5em + 1px);
-      @include form-label;
-      word-wrap: break-word;
-
-      .lux-form-control-error-container {
-        display: flex;
-        box-sizing: border-box;
-      }
-      .lux-form-control-character-counter-authentic {
-        min-width: 40px;
-        margin-left: 2px;
-        color: luxcommon.$dark-secondary-text !important;
-        text-align: end;
-
-        &:only-child {
-          width: 100%;
-        }
-      }
-    }
-
-    // zusätzlicher Container für Elemente, die einen input-prefix/input-suffix haben
-    // aktuell: lux-autocomplete-ac und lux-input-ac
-    .lux-input-row-authentic {
-      display: flex;
-      flex-direction: row;
-      box-sizing: border-box;
-      place-content: center flex-start;
-      align-items: center;
-      font-size: luxcommon.$form-control-font-size;
-      min-height: 1.5em;
-
-      .lux-input-prefix-container,
-      .lux-input-suffix-container {
-        width: auto;
-        white-space: nowrap;
-        display: inline-block;
-        flex: 1 1 auto;
-        max-height: 1.5em;
-        align-items: center;
-
-        lux-input-ac-suffix,
-        lux-input-ac-prefix {
-          display: inline-flex;
-        }
-        lux-icon {
-          mat-icon.lux-icon {
-            box-sizing: border-box;
-            padding: 0px !important;
-          }
-        }
-      }
-    }
-
-    &.lux-dense-authentic {
-      margin: 0;
-      .lux-form-control-container-authentic {
-        padding: 0.375em 0.5em;
-        &.lux-no-input-row {
-          padding: 0.375em 0em;
-        }
-      }
-    }
-
-    // Definitionen der einzelnen States der Form-Controls
-    // HOVER
-    &:hover:not(.lux-form-control-disabled-authentic):not(.lux-focused-authentic):not(.lux-form-control-error-authentic):not(
-        .lux-form-control-readonly-authentic
-      ) {
-      .lux-form-control-container-authentic:not(.lux-no-input-row) {
-        border-color: luxcommon.$dark-primary-text;
-      }
-    }
-    // FOCUS
-    &.lux-focused-authentic:not(.lux-form-control-readonly-authentic) {
-      .lux-form-control-label-authentic > * {
-        color: map.get(luxpalette.$lux-palette_primary, 400);
-      }
-      .lux-form-control-container-authentic:not(.lux-no-input-row) {
-        border-color: map.get(luxpalette.$lux-palette_primary, 500);
-        box-shadow: 0 0 0 1px map.get(luxpalette.$lux-palette_primary, 500) inset;
-      }
-    }
-    // ERROR
-    &.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) {
-      .lux-form-control-container-authentic:not(.lux-no-input-row) {
-        border-color: map.get(luxpalette.$lux-palette_warn, 500);
-        box-shadow: 0 0 0 1px map.get(luxpalette.$lux-palette_warn, 500) inset;
-      }
-      .lux-form-control-misc-authentic {
-        .lux-alert-icon {
-          color: map-get(luxpalette.$lux-palette_warn, 900);
-          mat-icon.mat-icon {
-            box-sizing: border-box;
-          }
-        }
-        .mat-mdc-form-field-error {
-          background-color: luxcommon.$form-error-msg-background;
-          border-radius: 4px;
-          padding-right: 2px;
-          color: map-get(luxpalette.$lux-palette_warn, 900) !important;
-          box-shadow:
-            -18px 0px 0 0 luxcommon.$form-error-msg-background,
-            -18px -1px 0 0 luxcommon.$form-error-msg-background,
-            0 -1px 0 0 luxcommon.$form-error-msg-background;
-        }
-      }
-    }
-    // Disabled
-    &.lux-form-control-disabled-authentic {
-      .lux-form-control-container-authentic,
-      .lux-form-control-label-authentic,
-      .lux-form-control-misc-authentic > * {
-        color: luxcommon.$dark-disabled-text;
-      }
-    }
-    // READONLY
-    &.lux-form-control-disabled-authentic {
-      pointer-events: none;
-    }
-  }
-
-  /* Change Autocomplete styles in Chrome*/
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  textarea:-webkit-autofill,
-  textarea:-webkit-autofill:hover,
-  textarea:-webkit-autofill:focus,
-  select:-webkit-autofill,
-  select:-webkit-autofill:hover,
-  select:-webkit-autofill:focus {
-    box-shadow: 0 0 0px 1000px var(--lux-theme-primary-50) inset;
-    -webkit-box-shadow: 0 0 0px 1000px var(--lux-theme-primary-50) inset;
-    transition: background-color 5000s ease-in-out 0s;
-  }
-}