From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Wed, 25 Mar 2015 22:52:49 +0000 (+0000)
Subject: Darker style focus/hover on active buttons
X-Git-Tag: v3.3.5~175^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=068675c72c7f541af1bb1c64b051b41430fbab8d;p=thirdparty%2Fbootstrap.git

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.
---

diff --git a/less/mixins/buttons.less b/less/mixins/buttons.less
index 92d8a056cd..6875a97c8b 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,