Skip to content

Commit

Permalink
Darker style focus/hover on active buttons
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
patrickhlauke committed Mar 25, 2015
1 parent 2f3076f commit 068675c
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions less/mixins/buttons.less
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 068675c

Please sign in to comment.