fix(autocomplete): disabled option styling (#757)

allianz · Oct 11, 2022 · 479e8f3 · 479e8f3
1 parent 2cc143b
commit 479e8f3
Showing 1 changed file with 29 additions and 9 deletions.
diff --git a/projects/ng-aquila/src/autocomplete/autocomplete-option.component.scss b/projects/ng-aquila/src/autocomplete/autocomplete-option.component.scss
@@ -16,6 +16,24 @@
     @include dropdown-overlay__option;
     padding-left: nx-spacer(2m);
 
+    // keyboard focus styling
+    &.nx-active {
+        .nx-autocomplete-option__label {
+            border-radius: nx-border-radius(s);
+            @include focus-style;
+        }
+    }
+
+    :host-context([dir='rtl']) & {
+        padding-right: nx-spacer(2m);
+    }
+}
+
+:host .nx-autocomplete-option__label {
+    @include dropdown-overlay__option-label;
+}
+
+:host:not(.nx-disabled) .nx-autocomplete-option {
     &:hover,
     &.nx-active {
         .nx-autocomplete-option__label {
@@ -31,20 +49,22 @@
             }
         }
     }
+}
 
-    // keyboard focus styling
-    &.nx-active {
+@media screen and (-ms-high-contrast: active) {
+    :host(.nx-disabled) {
         .nx-autocomplete-option__label {
-            border-radius: nx-border-radius(s);
-            @include focus-style;
+            color: GrayText;
         }
     }
+}
 
-    :host-context([dir='rtl']) & {
-        padding-right: nx-spacer(2m);
+:host(.nx-disabled) {
+    .nx-autocomplete-option {
+        cursor: not-allowed;
     }
-}
 
-:host .nx-autocomplete-option__label {
-    @include dropdown-overlay__option-label;
+    .nx-autocomplete-option__label {
+        color: v(dropdown-item-text-color-disabled);
+    }
 }