diff options
| author | Patrick H. Lauke <[email protected]> | 2015-03-25 22:52:49 +0000 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2015-03-25 22:52:49 +0000 |
| commit | 068675c72c7f541af1bb1c64b051b41430fbab8d (patch) | |
| tree | 2651bd3aaa60eefb00843d99627ad07f3f08868c | |
| parent | 2f3076f20acb6b34279b1ef77063a8fff33f756e (diff) | |
| download | bootstrap-068675c72c7f541af1bb1c64b051b41430fbab8d.tar.xz bootstrap-068675c72c7f541af1bb1c64b051b41430fbab8d.zip | |
Darker style focus/hover on active buttons
Currently, hovering with mouse or setting focus on a button which is
active has same styling as on a non-active button. This results in
problems for keyboard users, who set focus on a toggle and activate it,
but cannot visually see that their action had any effect. Ditto for
mouse users hovering over a toggle and clicking it. This adds an
explicit additional style for focus/hover on active buttons.
Note that this does not address issues of browser focus remaining on a
button after a mouse click (e.g. #13971), as this will likely require
extra JavaScript to fix.
| -rw-r--r-- | less/mixins/buttons.less | 20 |
1 files changed, 18 insertions, 2 deletions
diff --git a/less/mixins/buttons.less b/less/mixins/buttons.less index 92d8a056c..6875a97c8 100644 --- a/less/mixins/buttons.less +++ b/less/mixins/buttons.less @@ -8,15 +8,31 @@ background-color: @background; border-color: @border; - &:hover, &:focus, - &.focus, + &.focus { + color: @color; + background-color: darken(@background, 10%); + border-color: darken(@border, 25%); + } + &:hover { + color: @color; + background-color: darken(@background, 10%); + border-color: darken(@border, 12%); + } &:active, &.active, .open > .dropdown-toggle& { color: @color; background-color: darken(@background, 10%); border-color: darken(@border, 12%); + + &:hover, + &:focus, + &.focus { + color: @color; + background-color: darken(@background, 17%); + border-color: darken(@border, 25%); + } } &:active, &.active, |