@ihk-gfi/lux-components-theme 11.13.0 → 14.0.0

package/src/base/_luxfocus.scss

@@ -1,16 +1,29 @@
+@use "sass:color";
+@use "sass:map";
+@use "luxcommon";
+@use "luxpalette";
+@use "../public/global";
+
 /*
   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;
+$outline-dark: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$outline-color-dark !important;
+$outline-bright: luxcommon.$outline-width luxcommon.$outline-style luxcommon.$outline-color-bright !important;
 
 @mixin focus-dark-mixin {
   outline: $outline-dark;
 }
 
+@mixin focus-dark-mixin-inline {
+  // der Focus um Elemente in Panels wird mit negativen Margin nach in das Element verlegt
+  // damit wird er nicht mehr am Rand abgeschnitten oder verdeckt
+  outline: $outline-dark;
+  outline-offset: -(luxcommon.$outline-width);
+}
+
 @mixin focus-bright-mixin {
   outline: $outline-bright;
 }
@@ -22,7 +35,7 @@ $outline-bright: $outline-width $outline-style $outline-color-bright !important;
 }
 
 @mixin lux-selected-mixin {
-  background-color: $lux-selected-bg-color !important;
+  background-color: luxcommon.$lux-selected-bg-color !important;
   position: relative;
   border-radius: 4px;
 
@@ -33,11 +46,24 @@ $outline-bright: $outline-width $outline-style $outline-color-bright !important;
     top: 0;
     bottom: 0;
     position: absolute;
-    border-left: 4px solid $lux-selected-border-color;
+    border-left: 4px solid luxcommon.$lux-selected-border-color;
     border-radius: 4px 0 0 4px;
   }
 }
 
+@mixin lux-selected-mixin-ac {
+  background: luxcommon.$app-gradient;
+  background-color: #fff;
+  border: 1px solid map.get(luxpalette.$lux-palette-primary, 500);
+  box-shadow: 0 0 0 2px var(--lux-theme-primary-500) inset;
+  position: relative;
+  border-radius: 4px;
+  &:after {
+    width: 0px;
+    border:none;
+  }
+}
+
 @mixin lux-selected-bottom-mixin {
   position: relative;
 
@@ -48,12 +74,12 @@ $outline-bright: $outline-width $outline-style $outline-color-bright !important;
     bottom: 0;
     right: 0;
     position: absolute;
-    border-bottom: 4px solid $lux-selected-border-color;
+    border-bottom: 4px solid luxcommon.$lux-selected-border-color;
   }
 }
 
 @mixin lux-hovered-mixin {
-  background-color: $lux-hover-color !important;
+  background-color: luxcommon.$lux-hover-color !important;
   border-radius: 4px;
 }
 
@@ -66,7 +92,7 @@ lux-app-header {
 
     &:hover {
       @include lux-hovered-mixin;
-      color: $lux-hover-color-for-dark-background !important;
+      color: luxcommon.$lux-hover-color-for-dark-background !important;
     }
   }
 
@@ -76,7 +102,7 @@ lux-app-header {
     }
 
     &:hover lux-icon {
-      color: $lux-hover-color-for-dark-background !important;
+      color: luxcommon.$lux-hover-color-for-dark-background !important;
     }
   }
 
@@ -86,18 +112,18 @@ lux-app-header {
     }
 
     &:hover {
-      color: $lux-hover-color-for-dark-background !important;
+      color: luxcommon.$lux-hover-color-for-dark-background !important;
 
       &.mat-accent lux-icon {
-        color: map-get($lux-palette_accent, 500) !important;
+        color: map.get(luxpalette.$lux-palette_accent, 500) !important;
       }
 
       &.mat-warn lux-icon {
-        color: map-get($lux-palette_warn, 500) !important;
+        color: map.get(luxpalette.$lux-palette_warn, 500) !important;
       }
 
       &.mat-primary lux-icon {
-        color: map-get($lux-palette_primary, 500) !important;
+        color: map.get(luxpalette.$lux-palette_primary, 500) !important;
       }
     }
   }
@@ -119,7 +145,7 @@ lux-app-header {
       @include lux-hovered-mixin;
 
       & lux-icon, .lux-header-username {
-        color: $lux-hover-color-for-dark-background !important;
+        color: luxcommon.$lux-hover-color-for-dark-background !important;
       }
     }
   }
@@ -148,7 +174,7 @@ lux-side-nav {
 
 /** ########## Card ########## **/
 lux-card mat-card {
-  &[class~=lux-cursor]:focus {
+  &[class~=lux-cursor]:focus-visible {
     @include focus-dark-mixin;
   }
 
@@ -159,25 +185,26 @@ lux-card mat-card {
 
 /** ########## List ########## **/
 lux-list {
-  border: $outline-width dashed transparent;
+  border: luxcommon.$outline-width dashed transparent;
 
-  &:focus {
+  &:focus-visible {
     border: $outline-dark;
+    border-radius: 4px;
     outline: none;
   }
 
   lux-list-item {
-    &:focus {
+    &:focus-visible {
       outline: none;
 
       mat-card {
-        @include focus-dark-mixin;
+        @include focus-dark-mixin-inline;
       }
     }
 
     lux-card {
       &.lux-list-item-selected {
-        mat-card {
+        mat-card.mat-card.lux-card {
           @include lux-selected-mixin;
         }
       }
@@ -193,11 +220,26 @@ lux-list {
   }
 }
 
+/** ########## Filter-Form ########## **/
+lux-filter-form {
+  lux-menu {
+    .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:hover {
+      background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
+    }
+    .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:focus-visible {
+      background-color: transparent !important;
+    }
+  }
+}
+
 /** ########## Chips ########## **/
-lux-chips {
-  & .mat-standard-chip:focus {
+lux-chips, lux-chips-ac {
+  & .mat-standard-chip:focus-visible {
     @include focus-dark-mixin;
   }
+  .mat-chip.mat-standard-chip:after { //mat-overlay für focus deaktivieren
+    background-color: unset;
+  }
 }
 
 /** ########## Form-Control ########## **/
@@ -205,13 +247,13 @@ lux-form-control {
   .lux-form-control:not(.lux-form-control-disabled).lux-focused {
     .lux-form-control-label {
       > * {
-        color: $lux-selected-border-color;
+        color: luxcommon.$lux-selected-border-color;
       }
     }
 
-    .cdk-focused .mat-radio-container,
-    .mat-checkbox-inner-container,
-    .mat-slide-toggle-thumb {
+    .cdk-keyboard-focused .mat-radio-container,
+    .cdk-keyboard-focused .mat-checkbox-inner-container,
+    .cdk-keyboard-focused .mat-slide-toggle-thumb {
       position: relative;
       @include focus-dark-mixin;
     }
@@ -226,18 +268,40 @@ lux-form-control {
       right: 0;
       position: absolute;
       height: 2px;
-      border-bottom: 2px solid $lux-selected-border-color;
+      border-bottom: 2px solid luxcommon.$lux-selected-border-color;
+    }
+     
+    &.lux-form-control-error {
+      .lux-form-control-container:after {
+        border-bottom: 2px solid luxpalette.$lux-warn-color;
+      }
     }
   }
 }
 
+.lux-form-control-wrapper {
+  &.lux-focused-authentic .cdk-keyboard-focused {
+    .mat-radio-container,  
+    .mat-checkbox-inner-container,
+    .mat-slide-toggle-thumb {
+      position: relative;
+      @include focus-dark-mixin;
+    }
+    
+   }
+}
 /** ########## Datepicker ########## **/
-lux-datepicker {
+lux-datepicker, lux-datepicker-ac {
   mat-datepicker-toggle {
-    button:focus {
+    button:focus-visible {
       @include focus-dark-mixin;
+      border-radius: 4px;
     }
 
+    button:hover { 
+      @include lux-hovered-mixin();
+      border-radius: 4px;
+    }
     .mat-button-focus-overlay {
       display: none;
     }
@@ -252,7 +316,7 @@ lux-datepicker {
         display: none;
       }
 
-      &:focus {
+      &:focus-visible {
         @include focus-dark-mixin;
       }
 
@@ -267,7 +331,7 @@ lux-datepicker {
       &:hover > div {
         @include lux-hovered-mixin;
         border-radius: 999px;
-        color: $dark-primary-text;
+        color: luxcommon.$dark-primary-text;
       }
 
       &.mat-calendar-body-active .mat-calendar-body-cell-content {
@@ -278,12 +342,17 @@ lux-datepicker {
 }
 
 /** ########## Datetimepicker ########## **/
-lux-datetimepicker {
+lux-datetimepicker, lux-datetimepicker-ac {
   mat-datepicker-toggle {
-    button:focus {
+    button:focus-visible {
       @include focus-dark-mixin;
+      border-radius: 4px;
     }
 
+    button:hover { 
+      @include lux-hovered-mixin();
+      border-radius: 4px;
+    }
     .mat-button-focus-overlay {
       display: none;
     }
@@ -298,7 +367,7 @@ lux-datetimepicker {
         display: none;
       }
 
-      &:focus {
+      &:focus-visible {
         @include focus-dark-mixin;
       }
 
@@ -313,7 +382,7 @@ lux-datetimepicker {
       &:hover > div {
         @include lux-hovered-mixin;
         border-radius: 999px;
-        color: $dark-primary-text;
+        color: luxcommon.$dark-primary-text;
       }
 
       &.mat-calendar-body-active .mat-calendar-body-cell-content {
@@ -323,6 +392,20 @@ lux-datetimepicker {
   }
 }
 
+/** ########## Lux-Dialog ########## **/
+lux-dialog-structure {
+  // x-Button oben rechts im Dialog-Fenster
+  .lux-icon-close { 
+    &:hover {
+      @include lux-hovered-mixin;
+      cursor: pointer;
+    }
+    &:focus-visible {
+      @include focus-dark-mixin;
+      border-radius: 4px;
+    }
+  }
+}
 /** ########## Table ########## **/
 lux-table {
 
@@ -331,17 +414,17 @@ lux-table {
     > 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;
+      background-color: luxcommon.$lux-hover-color !important;
       border-radius: 0;
     }
   }
 
-  tr:focus, td:focus {
-    @include focus-dark-mixin;
+  tr:focus-visible, td:focus-visible {
+    @include focus-dark-mixin-inline;
   }
 
-  .lux-row-selected:focus {
-    background-color: $lux-hover-color !important;
+  .lux-row-selected:focus-visible {
+    background-color: luxcommon.$lux-hover-color !important;
     outline: none;
   }
 
@@ -358,42 +441,59 @@ lux-table {
 // Class, welche das aufgeklappte Panel referenziert
 .lux-select-panel {
   mat-option {
-
-    &.mat-selected {
+    &.mat-selected.mat-option:not(.mat-option-disabled) {
       @include lux-selected-mixin;
     }
 
-    &:focus {
-     @include focus-dark-mixin;
+    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert 
+    // bisher noch keine Lösung um den mouse-focus auszuschalten
+    &.mat-active:not(.cdk-mouse-focused) {
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
-    &.mat-active {
-      @include focus-dark-mixin;
+    &:hover {
+      @include lux-hovered-mixin;
     }
+  }
+}
 
-    &:hover {
+.lux-select-panel-ac {
+  mat-option {
+    &.mat-selected.mat-option:not(.mat-option-disabled) {
+      @include lux-selected-mixin-ac;
+    }
+
+    // Der Focus bei mat-option wird über die Klasse .mat-active gesteuert 
+    // bisher noch keine Lösung um den mouse-focus auszuschalten
+    &.mat-active:not(.cdk-mouse-focused) {
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
+    }
+
+    &:hover:not(.invalid, .mat-option-disabled) {
       @include lux-hovered-mixin;
     }
   }
 }
 
 /** ########## Button ########## **/
-lux-button {
+lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) {
   button:not([disabled]) {
     .mat-button-focus-overlay {
       display: none;
     }
-
-    &:focus {
+    
+    &:focus-visible{
       @include focus-dark-mixin;
     }
 
-    &:not(.mat-fab):not(.mat-raised-button) {
+    &:not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button), &.mat-stroked-button {
       &:hover {
-        background-color: $lux-hover-color;
+        background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%);
 
         &.mat-accent {
-          color: map-get($lux-palette_accent, 900);
+          color: map.get(luxpalette.$lux-palette_accent, 900);
         }
 
         &.mat-warn {
@@ -405,36 +505,39 @@ lux-button {
     }
 
     &.mat-fab:hover,
-    &.mat-raised-button:hover {
-      background-color: darken($lux-hover-color, 10) !important; // $lux-hover-color !important;
+    &.mat-raised-button:hover,
+    &.mat-flat-button:hover {
+      background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important; // $lux-hover-color !important;
+      //background-color: luxcommon.$lux-hover-color !important; // $lux-hover-color !important;
 
       &.mat-accent {
-        background-color: lighten(map-get($lux-palette_accent, 500), 10) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 10%) !important;
       }
 
       &.mat-warn {
-        background-color: lighten(map-get($lux-palette_warn, 500), 10) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 10%) !important;
       }
 
       &.mat-primary {
-        background-color: lighten(map-get($lux-palette_primary, 500), 10) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 10%) !important;
       }
     }
 
-    &.mat-fab:focus:not(:hover),
-    &.mat-raised-button:focus:not(:hover) {
+    &.mat-fab:focus-visible:not(:hover),
+    &.mat-raised-button:focus-visible:not(:hover),
+    &.mat-flat-button:focus-visible:not(:hover) {
       background-color: white !important;
 
       &.mat-accent {
-        background-color: lighten(map-get($lux-palette_accent, 500), 5) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_accent, 500), $lightness: 5%) !important;
       }
 
       &.mat-warn {
-        background-color: lighten(map-get($lux-palette_warn, 500), 5) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_warn, 500), $lightness: 5%) !important;
       }
 
       &.mat-primary {
-        background-color: lighten(map-get($lux-palette_primary, 500), 5) !important;
+        background-color: color.adjust(map.get(luxpalette.$lux-palette_primary, 500), $lightness: 5%) !important;
       }
     }
   }
@@ -442,18 +545,20 @@ lux-button {
 
 /** ########## Autocomplete ########## **/
 // Class, welche das aufgeklappte Panel referenziert
-.lux-autocomplete-panel, .lux-chips-autocomplete-panel {
+.lux-autocomplete-panel, .lux-chips-autocomplete-panel, .lux-autocomplete-panel-ac {
   mat-option {
 
-    &:focus {
-      @include focus-dark-mixin;
+    &:focus-visible {
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &.mat-active {
-      @include focus-dark-mixin;
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
-    &:hover {
+    &:hover:not(.invalid, .mat-option-disabled) {
       @include lux-hovered-mixin;
     }
   }
@@ -461,11 +566,11 @@ lux-button {
 
 /** ########## Tabs ########## **/
 @mixin tab-label-mixin {
-  color: map-get($lux-palette_primary, 500) !important;
+  color: map.get(luxpalette.$lux-palette_primary, 400) !important;
 }
 
 @mixin tab-ink-bar-mixin {
-  background-color: $lux-selected-border-color !important;
+  background-color: map.get(luxpalette.$lux-palette_primary, 500) !important;
   height: 4px;
   border-radius: 4px;
 }
@@ -477,13 +582,15 @@ lux-tabs {
   }
 
   .mat-tab-label:not(.mat-tab-disabled) {
-    &:focus {
-      @include focus-dark-mixin;
+     &:focus-visible{
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
-
+    
+  
     &:hover:not(.mat-tab-disabled) {
       @include lux-hovered-mixin;
-    }
+    } 
   }
 
   mat-ink-bar.mat-ink-bar {
@@ -498,9 +605,9 @@ mat-card lux-tabs {
   }
 
   .mat-tab-label:not(.mat-tab-disabled) {
-    &:focus {
-      @include focus-dark-mixin;
-
+     &:focus-visible {
+      @include focus-dark-mixin-inline;
+      border-radius: 4px;
     }
 
     &:hover:not(.mat-tab-disabled) {
@@ -521,8 +628,9 @@ lux-stepper {
     }
   }
 
-  mat-step-header[tabindex="0"]:focus {
+  mat-step-header[tabindex="0"]:focus-visible {
     @include focus-dark-mixin;
+    border-radius: 4px;
   }
 
   lux-stepper-vertical mat-step-header[aria-selected="true"] {
@@ -539,7 +647,7 @@ lux-stepper {
 
 /** ########## Html ########## **/
 lux-html {
-  & a[href]:focus {
+  & a[href]:focus-visible {
     @include focus-dark-mixin;
   }
 }
@@ -547,7 +655,7 @@ lux-html {
 /** ########## Tile ########## **/
 lux-tile {
   mat-card {
-    &:focus {
+    &:focus-visible {
       @include focus-dark-mixin;
     }
 
@@ -560,10 +668,11 @@ lux-tile {
 /** ########## Panel ########## **/
 lux-panel {
   mat-expansion-panel-header:not([aria-disabled='true']) {
-    &:focus {
-      background-color: white !important;
-      @include focus-dark-mixin;
+    &:focus-visible {
+      //background-color: white !important;
+      @include focus-dark-mixin-inline;
     }
+    
 
     &:hover {
       @include lux-hovered-mixin;
@@ -573,7 +682,7 @@ lux-panel {
 
 /** ########## Master-Detail ########## **/
 lux-button.lux-master-toggle button:not([disabled]):focus {
-  &:focus {
+  &:focus-visible {
     @include focus-bright-mixin;
   }
 
@@ -588,8 +697,8 @@ lux-master-detail {
       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;
+        &:not(.mat-fab):not(.mat-raised-button):focus-visible {
+          background-color: luxcommon.$lux-hover-color !important;
         }
       }
     }
@@ -599,12 +708,13 @@ lux-master-detail {
 /** ########## File-List ########## **/
 lux-file-list {
   .lux-file-list {
-    &:focus {
+    &:focus-visible {
       @include focus-dark-mixin;
+      border-radius: 4px;
     }
 
     .lux-file-list-entry {
-      &:focus {
+      &:focus-visible {
         @include focus-dark-mixin;
       }
     }
@@ -612,7 +722,7 @@ lux-file-list {
 }
 
 lux-file-preview-toolbar lux-button button.lux-icon-button {
-  &:focus {
+  &:focus-visible {
     @include focus-bright-mixin;
   }
 }
@@ -622,12 +732,18 @@ lux-file-preview-toolbar lux-button button.lux-icon-button {
 .lux-menu-panel {
   .lux-menu-item {
     &:not([disabled="true"]) {
-      &:focus {
-        @include focus-dark-mixin;
+      &:focus-visible {
+        @include focus-dark-mixin-inline;
+        border-radius: 0;
+        &:after {
+          width: 0px;
+          border:none;
+        }
       }
 
       &:hover {
         @include lux-hovered-mixin;
+        border-radius: 0px;
       }
     }
   }
@@ -645,8 +761,8 @@ example-root {
         @include lux-selected-mixin;
       }
 
-      &:focus {
-        @include focus-dark-mixin;
+      &:focus-visible {
+        @include focus-dark-mixin-inline;
       }
 
       &:hover {
@@ -661,36 +777,38 @@ lux-message-box {
 
   & div.lux-message-box-content {
 
-    &:focus {
+    &:focus-visible {
       @include focus-dark-mixin;
     }
 
     & div.lux-message-container.lux-bg-color-white {
-      & div.lux-message-text p:focus {
+      & div.lux-message-text p:focus-visible {
         @include focus-dark-mixin;
       }
 
-      & button:not([disabled]):focus {
+      & button:not([disabled]):focus-visible {
         @include focus-dark-mixin;
       }
 
       & button:not([disabled]):hover {
         @include lux-hovered-mixin;
+        border-radius: 50%;
       }
     }
 
     & div.lux-message-container:not(.lux-bg-color-white) {
-      & div.lux-message-text p:focus {
+      & div.lux-message-text p:focus-visible {
         @include focus-bright-mixin;
       }
 
-      & button:not([disabled]):focus {
+      & button:not([disabled]):focus-visible {
         @include focus-bright-mixin;
       }
 
       & button:not([disabled]):hover {
         @include lux-hovered-mixin;
-        color: $lux-hover-color-for-dark-background;
+        border-radius: 50%;
+        color: luxpalette.$lux-primary-color;
       }
     }
   }
@@ -702,7 +820,7 @@ lux-stepper-large {
 
     // Links allgemein
     a {
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
 
@@ -750,10 +868,10 @@ lux-stepper-large {
 
 /** ########## File-Upload ########## **/
 .lux-file-upload-drop-container {
-  margin-left: $outline-width;
-  margin-right: $outline-width;
+  margin-left: luxcommon.$outline-width;
+  margin-right: luxcommon.$outline-width;
 
-  &:focus {
+  &:focus-visible {
     outline: $outline-dark;
   }
 }