kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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.
This commit is contained in:
Patrick H. Lauke 2015-03-25 22:52:49 +00:00
parent 2f3076f20a
commit 068675c72c
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
less/mixins/buttons.less
View File

@ -8,15 +8,31 @@
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
&:hover,
&:focus, &: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,
&.active, &.active,
.open > .dropdown-toggle& { .open > .dropdown-toggle& {
color: @color; color: @color;
background-color: darken(@background, 10%); background-color: darken(@background, 10%);
border-color: darken(@border, 12%); border-color: darken(@border, 12%);
&:hover,
&:focus,
&.focus {
color: @color;
background-color: darken(@background, 17%);
border-color: darken(@border, 25%);
}
} }
&:active, &:active,
&.active, &.active,