fix(components/popovers): disabled dropdown items are styled to not a…

…ppear clickable (#2020)
blackbaud · Feb 14, 2024 · bc00749 · bc00749
1 parent e421859
commit bc00749
Showing 1 changed file with 6 additions and 13 deletions.
diff --git a/libs/components/popovers/src/lib/modules/dropdown/dropdown-item.component.scss b/libs/components/popovers/src/lib/modules/dropdown/dropdown-item.component.scss
@@ -17,14 +17,6 @@
     }
   }
 
-  button[disabled],
-  a[disabled] {
-    cursor: default;
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
   & > a,
   & > button {
     background-color: transparent;
@@ -41,10 +33,11 @@
     }
 
     &[disabled] {
-      color: $sky-text-color-deemphasized;
+      @include mixins.sky-deemphasized;
 
       &:hover {
         cursor: default;
+        background-color: transparent;
       }
     }
   }
@@ -68,18 +61,18 @@
       border-radius: 6px;
       transition: box-shadow $sky-transition-time-short;
 
-      &:hover {
+      &:hover:not([disabled]) {
         outline: solid 1px $sky-theme-modern-background-color-primary-dark;
         outline-offset: -1px;
       }
 
-      &:focus-visible,
-      &:active {
+      &:focus-visible:not([disabled]),
+      &:active:not([disabled]) {
         outline: solid 2px $sky-theme-modern-background-color-primary-dark;
         outline-offset: -2px;
       }
 
-      &:focus-visible:not(:active) {
+      &:focus-visible:not(:active):not([disabled]) {
         box-shadow: $sky-theme-modern-elevation-3-shadow-size
           $sky-theme-modern-elevation-3-shadow-color;
       }