@ihk-gfi/lux-components-theme 11.4.0

package/src/base/_luxfocus.scss

@@ -0,0 +1,698 @@
+/*
+  Dieses Partial-SCSS dient der Verwaltung der Styles für Fokus, Hover und Selected für die LUX-Components und
+  die ihnen zugrunde liegenden Material Components.
+*/
+
+// Fokus
+$outline-dark: $outline-width $outline-style $outline-color-dark !important;
+$outline-bright: $outline-width $outline-style $outline-color-bright !important;
+
+@mixin focus-dark-mixin {
+  outline: $outline-dark;
+}
+
+@mixin focus-bright-mixin {
+  outline: $outline-bright;
+}
+
+@mixin lux-selectable-mixin {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+@mixin lux-selected-mixin {
+  background-color: $lux-selected-bg-color !important;
+  position: relative;
+  border-radius: 4px;
+
+  &:after {
+    content: '';
+    left: 0;
+    width: 6px;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    border-left: 4px solid $lux-selected-border-color;
+    border-radius: 4px 0 0 4px;
+  }
+}
+
+@mixin lux-selected-bottom-mixin {
+  position: relative;
+
+  &:after {
+    content: '';
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    border-bottom: 4px solid $lux-selected-border-color;
+  }
+}
+
+@mixin lux-hovered-mixin {
+  background-color: $lux-hover-color !important;
+  border-radius: 4px;
+}
+
+/** ########## App-Header ######## **/
+lux-app-header {
+  .lux-app-header-title-label {
+    &:focus {
+      @include focus-bright-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+      color: $lux-hover-color-for-dark-background !important;
+    }
+  }
+
+  & .lux-side-nav-trigger button:not([disabled]) {
+    &:focus {
+      @include focus-bright-mixin;
+    }
+
+    &:hover lux-icon {
+      color: $lux-hover-color-for-dark-background !important;
+    }
+  }
+
+  & .lux-header-action button:not([disabled]) {
+    &:focus {
+      @include focus-bright-mixin;
+    }
+
+    &:hover {
+      color: $lux-hover-color-for-dark-background !important;
+
+      &.mat-accent lux-icon {
+        color: map-get($lux-palette_accent, 500) !important;
+      }
+
+      &.mat-warn lux-icon {
+        color: map-get($lux-palette_warn, 500) !important;
+      }
+
+      &.mat-primary lux-icon {
+        color: map-get($lux-palette_primary, 500) !important;
+      }
+    }
+  }
+
+  & lux-image:focus {
+    @include focus-bright-mixin;
+  }
+
+  & lux-icon:focus {
+    @include focus-bright-mixin;
+  }
+
+  lux-menu-trigger button.lux-right-nav-trigger {
+    &:focus {
+      @include focus-bright-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+
+      & lux-icon, .lux-header-username {
+        color: $lux-hover-color-for-dark-background !important;
+      }
+    }
+  }
+}
+
+/** ########## Side-Nav ########## **/
+lux-side-nav {
+  .lux-side-nav-item {
+    &.lux-side-nav-item-selected {
+      @include lux-selected-mixin;
+    }
+
+    &:focus:not(.lux-side-nav-disabled) {
+      @include focus-dark-mixin;
+    }
+
+    &:focus-within:not(.lux-side-nav-disabled) {
+      @include focus-dark-mixin;
+    }
+
+    &:hover:not(.lux-side-nav-disabled) {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/** ########## Card ########## **/
+lux-card mat-card {
+  &[class~=lux-cursor]:focus {
+    @include focus-dark-mixin;
+  }
+
+  &[class~=lux-cursor]:hover {
+    @include lux-hovered-mixin;
+  }
+}
+
+/** ########## List ########## **/
+lux-list {
+  border: $outline-width dashed transparent;
+
+  &:focus {
+    border: $outline-dark;
+    outline: none;
+  }
+
+  lux-list-item {
+    &:focus {
+      outline: none;
+
+      mat-card {
+        @include focus-dark-mixin;
+      }
+    }
+
+    lux-card {
+      &.lux-list-item-selected {
+        mat-card {
+          @include lux-selected-mixin;
+        }
+      }
+
+      mat-card {
+        @include lux-selectable-mixin;
+
+        &:hover {
+          @include lux-hovered-mixin;
+        }
+      }
+    }
+  }
+}
+
+/** ########## Chips ########## **/
+lux-chips {
+  & .mat-standard-chip:focus {
+    @include focus-dark-mixin;
+  }
+}
+
+/** ########## Form-Control ########## **/
+lux-form-control {
+  .lux-form-control:not(.lux-form-control-disabled).lux-focused {
+    .lux-form-control-label {
+      > * {
+        color: $lux-selected-border-color;
+      }
+    }
+
+    .cdk-focused .mat-radio-container,
+    .mat-checkbox-inner-container,
+    .mat-slide-toggle-thumb {
+      position: relative;
+      @include focus-dark-mixin;
+    }
+
+    .lux-form-control-container:after {
+      content: '';
+      display: block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      left: 0;
+      right: 0;
+      position: absolute;
+      height: 2px;
+      border-bottom: 2px solid $lux-selected-border-color;
+    }
+  }
+}
+
+/** ########## Datepicker ########## **/
+lux-datepicker {
+  mat-datepicker-toggle {
+    button:focus {
+      @include focus-dark-mixin;
+    }
+
+    .mat-button-focus-overlay {
+      display: none;
+    }
+  }
+}
+
+// Class, welche das aufgeklappte Panel referenziert
+.lux-datepicker-panel {
+  .mat-calendar-header {
+    button {
+      .mat-button-focus-overlay {
+        display: none;
+      }
+
+      &:focus {
+        @include focus-dark-mixin;
+      }
+
+      &:hover {
+        @include lux-hovered-mixin;
+      }
+    }
+  }
+
+  .mat-calendar-content {
+    td.mat-calendar-body-cell {
+      &:hover > div {
+        @include lux-hovered-mixin;
+        border-radius: 999px;
+        color: $dark-primary-text;
+      }
+
+      &.mat-calendar-body-active .mat-calendar-body-cell-content {
+        @include focus-dark-mixin;
+      }
+    }
+  }
+}
+
+/** ########## Datetimepicker ########## **/
+lux-datetimepicker {
+  mat-datepicker-toggle {
+    button:focus {
+      @include focus-dark-mixin;
+    }
+
+    .mat-button-focus-overlay {
+      display: none;
+    }
+  }
+}
+
+// Class, welche das aufgeklappte Panel referenziert
+.lux-datetimepicker-overlay {
+  .mat-calendar-header {
+    button {
+      .mat-button-focus-overlay {
+        display: none;
+      }
+
+      &:focus {
+        @include focus-dark-mixin;
+      }
+
+      &:hover {
+        @include lux-hovered-mixin;
+      }
+    }
+  }
+
+  .mat-calendar-content {
+    td.mat-calendar-body-cell {
+      &:hover > div {
+        @include lux-hovered-mixin;
+        border-radius: 999px;
+        color: $dark-primary-text;
+      }
+
+      &.mat-calendar-body-active .mat-calendar-body-cell-content {
+        @include focus-dark-mixin;
+      }
+    }
+  }
+}
+
+/** ########## Table ########## **/
+lux-table {
+
+  tr:hover {
+    > td,
+    > th {
+      @include lux-hovered-mixin;
+      // Wir nutzen hier die hover-Farbe ohne Alpha-Wert, da bei Sticky-Columns sonst unschöne Überlagerungen entstehen können
+      background-color: $lux-hover-color !important;
+      border-radius: 0;
+    }
+  }
+
+  tr:focus {
+    @include focus-dark-mixin;
+  }
+
+  .lux-row-selected:focus {
+    background-color: $lux-hover-color !important;
+    outline: none;
+  }
+
+  th.cdk-focused div.mat-sort-header-container {
+    @include focus-dark-mixin;
+  }
+
+  th.cdk-keyboard-focused div.mat-sort-header-container {
+    border: none !important;
+  }
+}
+
+/** ########## Select ########## **/
+// Class, welche das aufgeklappte Panel referenziert
+.lux-select-panel {
+  mat-option {
+
+    &.mat-selected {
+      @include lux-selected-mixin;
+    }
+
+    &:focus {
+     @include focus-dark-mixin;
+    }
+
+    &.mat-active {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/** ########## Button ########## **/
+lux-button {
+  button:not([disabled]) {
+    .mat-button-focus-overlay {
+      display: none;
+    }
+
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:not(.mat-fab):not(.mat-raised-button) {
+      &:hover {
+        background-color: $lux-hover-color;
+
+        &.mat-accent {
+          color: map-get($lux-palette_accent, 900);
+        }
+
+        &.mat-warn {
+        }
+
+        &.mat-primary {
+        }
+      }
+    }
+
+    &.mat-fab:hover,
+    &.mat-raised-button:hover {
+      background-color: darken($lux-hover-color, 10) !important; // $lux-hover-color !important;
+
+      &.mat-accent {
+        background-color: lighten(map-get($lux-palette_accent, 500), 10) !important;
+      }
+
+      &.mat-warn {
+        background-color: lighten(map-get($lux-palette_warn, 500), 10) !important;
+      }
+
+      &.mat-primary {
+        background-color: lighten(map-get($lux-palette_primary, 500), 10) !important;
+      }
+    }
+
+    &.mat-fab:focus:not(:hover),
+    &.mat-raised-button:focus:not(:hover) {
+      background-color: white !important;
+
+      &.mat-accent {
+        background-color: lighten(map-get($lux-palette_accent, 500), 5) !important;
+      }
+
+      &.mat-warn {
+        background-color: lighten(map-get($lux-palette_warn, 500), 5) !important;
+      }
+
+      &.mat-primary {
+        background-color: lighten(map-get($lux-palette_primary, 500), 5) !important;
+      }
+    }
+  }
+}
+
+/** ########## Autocomplete ########## **/
+// Class, welche das aufgeklappte Panel referenziert
+.lux-autocomplete-panel {
+  mat-option {
+
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &.mat-active {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/** ########## Tabs ########## **/
+@mixin tab-label-mixin {
+  color: map-get($lux-palette_primary, 500) !important;
+}
+
+@mixin tab-ink-bar-mixin {
+  background-color: $lux-selected-border-color !important;
+  height: 4px;
+  border-radius: 4px;
+}
+
+// Tabs außerhalb einer LUX-Card (z.B. Master-Detail)
+lux-tabs {
+  .mat-tab-label-active:not(.mat-tab-disabled) {
+    @include tab-label-mixin;
+  }
+
+  .mat-tab-label:not(.mat-tab-disabled) {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover:not(.mat-tab-disabled) {
+      @include lux-hovered-mixin;
+      background-color: $app-data-bg !important;
+    }
+  }
+
+  mat-ink-bar.mat-ink-bar {
+    @include tab-ink-bar-mixin;
+  }
+}
+
+// Tabs innerhalb einer LUX-Card
+mat-card lux-tabs {
+  .mat-tab-label-active:not(.mat-tab-disabled) {
+    @include tab-label-mixin;
+  }
+
+  .mat-tab-label:not(.mat-tab-disabled) {
+    &:focus {
+      @include focus-dark-mixin;
+
+    }
+
+    &:hover:not(.mat-tab-disabled) {
+      @include lux-hovered-mixin;
+    }
+  }
+
+  mat-ink-bar.mat-ink-bar {
+    @include tab-ink-bar-mixin;
+  }
+}
+
+/** ########## Stepper ########## **/
+lux-stepper {
+  mat-step-header {
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+
+  mat-step-header[tabindex="0"]:focus {
+    @include focus-dark-mixin;
+  }
+
+  lux-stepper-vertical mat-step-header[aria-selected="true"] {
+    @include lux-selected-mixin;
+    background-color: transparent;
+  }
+
+  lux-stepper-horizontal mat-step-header[aria-selected="true"] {
+    @include lux-selected-bottom-mixin;
+    background-color: transparent;
+  }
+
+}
+
+/** ########## Html ########## **/
+lux-html {
+  & a[href]:focus {
+    @include focus-dark-mixin;
+  }
+}
+
+/** ########## Tile ########## **/
+lux-tile {
+  mat-card {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/** ########## Panel ########## **/
+lux-panel {
+  mat-expansion-panel-header:not([aria-disabled='true']) {
+    &:focus {
+      background-color: white !important;
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/** ########## Master-Detail ########## **/
+lux-button.lux-master-toggle button:not([disabled]):focus {
+  &:focus {
+    @include focus-bright-mixin;
+  }
+
+  &:hover {
+    @include lux-hovered-mixin;
+  }
+}
+
+lux-master-detail {
+  lux-master-header {
+    .lux-master-header-collapse {
+      button.lux-button {
+        // Wir benötigen hier die spezielle CSS-Abfrage um die für die Buttons zu überschreiben
+        // Wir nutzen $lux-hover-color, weil sich die normale lux-focus-color hier nicht genug abhebt
+        &:not(.mat-fab):not(.mat-raised-button):focus {
+          background-color: $lux-hover-color !important;
+        }
+      }
+    }
+  }
+}
+
+/** ########## File-List ########## **/
+lux-file-list {
+  .lux-file-list {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    .lux-file-list-entry {
+      &:focus {
+        @include focus-dark-mixin;
+      }
+    }
+  }
+}
+
+lux-file-preview-toolbar lux-button button.lux-icon-button {
+  &:focus {
+    @include focus-bright-mixin;
+  }
+}
+
+/** ########## Menu ########## **/
+// Class, welche das aufgeklappte Panel referenziert
+.lux-menu-panel {
+  .lux-menu-item {
+    &:not([disabled="true"]) {
+      &:focus {
+        @include focus-dark-mixin;
+      }
+
+      &:hover {
+        @include lux-hovered-mixin;
+      }
+    }
+  }
+}
+
+/** ########## Example-Root ########## **/
+example-root {
+  .example-base-components-list {
+
+    mat-expansion-panel-header,
+    .example-component-list-item {
+      @include lux-selectable-mixin;
+
+      &.example-component-list-item-selected {
+        @include lux-selected-mixin;
+      }
+
+      &:focus {
+        @include focus-dark-mixin;
+      }
+
+      &:hover {
+        @include lux-hovered-mixin;
+      }
+    }
+  }
+}
+
+/** ########## Message-Box ########## **/
+lux-message-box {
+
+  & div.lux-message-box-content {
+
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    & div.lux-message-container.lux-bg-color-white {
+      & div.lux-message-text p:focus {
+        @include focus-dark-mixin;
+      }
+
+      & button:not([disabled]):focus {
+        @include focus-dark-mixin;
+      }
+
+      & button:not([disabled]):hover {
+        @include lux-hovered-mixin;
+      }
+    }
+
+    & div.lux-message-container:not(.lux-bg-color-white) {
+      & div.lux-message-text p:focus {
+        @include focus-bright-mixin;
+      }
+
+      & button:not([disabled]):focus {
+        @include focus-bright-mixin;
+      }
+
+      & button:not([disabled]):hover {
+        @include lux-hovered-mixin;
+        color: $lux-hover-color-for-dark-background;
+      }
+    }
+  }
+}

package/src/base/_luxicons.scss

@@ -0,0 +1,2 @@
+@import 'https://use.fontawesome.com/releases/v5.13.0/css/all.css';
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';