add separate vars for dropdown link hover and active states

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d957e861a3405545ca9687fac383f06172b2c7b7..1726c41cb3c160feed8d43c45adbc6a667a0b7e9 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2457,7 +2457,12 @@ table .span24 {
 }
 
 .dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus,
+.dropdown-menu li > a:focus {
+  color: #333333;
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
   color: #ffffff;

diff --git a/docs/less.html b/docs/less.html
index 7b6183b6e726d49c1cd2293b7baa59ff56d88da0..68f3a83b76cfb5ec6a8415b37ff37447c27ec8e1 100644 (file)
--- a/docs/less.html
+++ b/docs/less.html
@@ -594,8 +594,16 @@
         <td><code>@dropdownLinkColorHover</code></td>
         <td><code>@white</code></td>
       </tr>
+      <tr>
+        <td><code>@dropdownLinkColorActive</code></td>
+        <td><code>@linkColor</code></td>
+      </tr>
       <tr>
         <td><code>@dropdownLinkBackgroundHover</code></td>
+        <td><code>@grayLighter</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownLinkBackgroundActive</code></td>
         <td><code>@linkColor</code></td>
       </tr>
       <tr>

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index be8adb7661a60d9a3b36a83bbbd92a8b923a8849..ccd829963c6572f2f954ef495166e46a7b569f67 100644 (file)
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -517,8 +517,16 @@
         <td><code>@dropdownLinkColorHover</code></td>
         <td><code>@white</code></td>
       </tr>
+      <tr>
+        <td><code>@dropdownLinkColorActive</code></td>
+        <td><code>@linkColor</code></td>
+      </tr>
       <tr>
         <td><code>@dropdownLinkBackgroundHover</code></td>
+        <td><code>@grayLighter</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownLinkBackgroundActive</code></td>
         <td><code>@linkColor</code></td>
       </tr>
       <tr>

diff --git a/less/dropdowns.less b/less/dropdowns.less
index 648a9f24629d1ae87643b804f8827a64eccb373a..bd2dab772d77e3c8cd7a063525fa8087c3292615 100644 (file)
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -94,12 +94,19 @@
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus,
+.dropdown-menu li > a:focus {
+  text-decoration: none;
+  color: @dropdownLinkColorActive;
+  background-color: @dropdownLinkBackgroundHover;
+}
+
+// Active state
+// ------------
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
   color: @dropdownLinkColorHover;
   text-decoration: none;
-  background-color: @dropdownLinkBackgroundHover;
+  background-color: @dropdownLinkBackgroundActive;
   outline: 0;
 }
 

diff --git a/less/variables.less b/less/variables.less
index b931d3d2a26ae072283808d0ece8520717f732f9..ee7350ec23c7a8b9b087609e0811ac357fb24ffd 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -104,12 +104,17 @@
 // -------------------------
 @dropdownBackground:            @white;
 @dropdownBorder:                rgba(0,0,0,.2);
-@dropdownLinkColor:             @grayDark;
-@dropdownLinkColorHover:        @white;
-@dropdownLinkBackgroundHover:   @linkColor;
 @dropdownDividerTop:            #e5e5e5;
 @dropdownDividerBottom:         @white;
 
+@dropdownLinkColor:             @grayDark;
+
+@dropdownLinkColorHover:        @white;
+@dropdownLinkBackgroundHover:   @grayLighter;
+
+@dropdownLinkColorActive:       @dropdownLinkColor;
+@dropdownLinkBackgroundActive:  @linkColor;
+
 
 
 // COMPONENT VARIABLES