Revamp dropdown item states

- Removes the plain-hover-focus mixin from active and disabled states; no need for them.
- Adds :active and :disabled since we can use button elements here, too.
- Wrap the disabled background-image override in an -gradients condition.

1 files changed, 13 insertions, 22 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 5f72c9ba4..46251031f 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -81,30 +81,21 @@
     background-color: $dropdown-link-hover-bg;
   }
 
-  // Active state
-  &.active {
-    @include plain-hover-focus {
-      color: $dropdown-link-active-color;
-      text-decoration: none;
-      background-color: $dropdown-link-active-bg;
-      outline: 0;
-    }
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    background-color: $dropdown-link-active-bg;
   }
 
-  // Disabled state
-  //
-  // Gray out text and ensure the hover/focus state remains gray
-  &.disabled {
-    @include plain-hover-focus {
-      color: $dropdown-link-disabled-color;
-    }
-
-    // Nuke hover/focus effects
-    @include hover-focus {
-      text-decoration: none;
-      cursor: $cursor-disabled;
-      background-color: transparent;
-      background-image: none; // Remove CSS gradient
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
     }
   }
 }