fix dropdown vars and make hover state be link color again, add gradient to dropdown link hovers, fix caret positions and active states on nav tabs, tweak nav link padding

3 files changed, 22 insertions, 5 deletions

diff --git a/less/dropdowns.less b/less/dropdowns.less
index e9e91b6a4..1e4f33ff6 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -84,7 +84,7 @@
   // Links within the dropdown menu
   a {
     display: block;
-    padding: 3px 15px;
+    padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: @baseLineHeight;
@@ -98,8 +98,9 @@
 .dropdown-menu li > a:hover,
 .dropdown-menu li > a:focus {
   text-decoration: none;
-  color: @dropdownLinkColorActive;
+  color: @dropdownLinkColorHover;
   background-color: @dropdownLinkBackgroundHover;
+  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
 }
 
 // Active state
@@ -108,8 +109,9 @@
 .dropdown-menu .active > a:hover {
   color: @dropdownLinkColorHover;
   text-decoration: none;
-  background-color: @dropdownLinkBackgroundActive;
   outline: 0;
+  background-color: @dropdownLinkBackgroundActive;
+  #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
 }
 
 // Disabled state
@@ -126,6 +128,14 @@
   cursor: default;
 }
 
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 // Open state for the dropdown
 // ---------------------------
 .open {
diff --git a/less/navs.less b/less/navs.less
index 33bdfe1d0..799a38ce5 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -213,6 +213,10 @@
   border-top-color: @linkColorHover;
   border-bottom-color: @linkColorHover;
 }
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
 
 // Active dropdown links
 // -------------------------
@@ -220,11 +224,14 @@
   border-top-color: #fff;
   border-bottom-color: #fff;
 }
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: @gray;
+  border-bottom-color: @gray;
+}
 
 // Active:hover dropdown links
 // -------------------------
 .nav > .dropdown.active > a:hover {
-  color: #fff;
   cursor: pointer;
 }
 
diff --git a/less/variables.less b/less/variables.less
index 725100443..ae5cd5e00 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -109,7 +109,7 @@
 @dropdownLinkColor:             @grayDark;
 
 @dropdownLinkColorHover:        @white;
-@dropdownLinkBackgroundHover:   @grayLighter;
+@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
 
 @dropdownLinkColorActive:       @dropdownLinkColor;
 @dropdownLinkBackgroundActive:  @linkColor;