This PR drastically simplifies our button states to address #19189 (closed), #21235 (closed), and #21415 (closed). My hope is we can simplify the selectors, reduce the number of selectors overall, and make it easier to customize our buttons. Here's a rundown of what's changed and why.
-
Moved active state after the disabled state. This way, disabled active buttons automatically inherit the proper changes to visual styles and simply modifies the opacity. Previously we had to reset the
background-colorandborder-coloracross all states. -
Unchains the focus state from active state. There's no need to add extra selectors to the original focus state within
&, &:active, &.active { ... }—we just need to set the focus styles. -
Removes all hover, focus, and disabled styles from the active states. Now that active is after disabled in Sass, we can easily inherit the proper styles. Similarly, hover and focus will inherit automatically as well. This does remove the ability to see a hover on active, but I'm okay with that as it's more akin to native behaviors.
See the new CSS in action at https://output.jsbin.com/homiyos.
/cc @cvrebert @patrickhlauke