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.
This commit is contained in:
Mark Otto 2016-12-28 00:20:06 -08:00 committed by Mark Otto
parent d6fa9f5a6c
commit 9ce5fb5817
1 changed files with 13 additions and 22 deletions

View File

@ -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;
}
}
}