Navs refactor, restoring .nav-list

2 files changed, 68 insertions, 89 deletions

diff --git a/less/navs.less b/less/navs.less
index e435e45e8..5ca43f9e0 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -3,18 +3,21 @@
 // --------------------------------------------------
 
 
-// BASE CLASS
-// ----------
+// Base class
+// -------------------------
 
 .nav {
   margin-left: 0;
   margin-bottom: @baseLineHeight;
   list-style: none;
+  .clearfix();
+}
+.nav > li {
+  float: left;
 }
-
-// Make links block level
 .nav > li > a {
   display: block;
+  padding: 8px 12px;
 }
 .nav > li > a:hover {
   text-decoration: none;
@@ -49,28 +52,8 @@
 
 
 
-// TABS AND PILLS
-// -------------
-
-// Common styles
-.nav-tabs,
-.nav-pills {
-  .clearfix();
-}
-.nav-tabs > li,
-.nav-pills > li {
-  float: left;
-}
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-right: 2px;
-  line-height: 14px; // keeps the overall height an even number
-}
-
-// TABS
-// ----
+// Tabs
+// -------------------------
 
 // Give the tabs something to sit on
 .nav-tabs {
@@ -82,8 +65,7 @@
 }
 // Actual tabs (as links)
 .nav-tabs > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  margin-right: 2px;
   line-height: @baseLineHeight;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -102,17 +84,55 @@
 }
 
 
-// PILLS
-// -----
+
+// Lists
+// -------------------------
+
+.nav-list {
+  background-color: #fff;
+  border-radius: 6px;
+  .box-shadow(0 1px 4px rgba(0,0,0,.065))
+}
+.nav-list > li {
+  float: none;
+}
+.nav-list > li > a {
+  margin-bottom: -1px; // pull up the following link for a 1px border between
+  border: 1px solid #e5e5e5;
+}
+.nav-list > li > a:hover {
+  background-color: #f5f5f5;
+}
+.nav-list > li:first-child > a {
+  border-radius: 6px 6px 0 0;
+}
+.nav-list > li:last-child > a {
+  border-radius: 0 0 6px 6px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+  position: relative;
+  z-index: 2;
+  padding: 9px 15px;
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0,0,0,.15);
+  background-color: @linkColor;
+  border-width: 0;
+  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
+}
+
+
+
+// Pills
+// -------------------------
 
 // Links rendered as pills
 .nav-pills > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-top: 2px;
-  margin-bottom: 2px;
   border-radius: 5px;
 }
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
 
 // Active state
 .nav-pills > .active > a,
@@ -121,56 +141,23 @@
   background-color: @linkColor;
 }
 
-
-
-// STACKED NAV
-// -----------
-
-// Stacked tabs and pills
+// Stacked pills
 .nav-stacked > li {
   float: none;
 }
-.nav-stacked > li > a {
-  margin-right: 0; // no need for the gap between nav items
-}
-
-// Tabs
-.nav-tabs.nav-stacked {
-  border-bottom: 0;
-}
-.nav-tabs.nav-stacked > li > a {
-  border: 1px solid #ddd;
-  border-radius: 0;
-}
-.nav-tabs.nav-stacked > li:first-child > a {
-  .border-top-radius(4px);
-}
-.nav-tabs.nav-stacked > li:last-child > a {
-  .border-bottom-radius(4px);
-}
-.nav-tabs.nav-stacked > li > a:hover {
-  border-color: #ddd;
-  z-index: 2;
-}
-
-// Pills
-.nav-pills.nav-stacked > li > a {
-  margin-bottom: 3px;
-}
-.nav-pills.nav-stacked > li:last-child > a {
-  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0; // no need for the gap between nav items
 }
 
 
 
-// DROPDOWNS
-// ---------
+// Dropdowns
+// -------------------------
 
 .nav-tabs .dropdown-menu {
-  border-radius: 0 0 6px 6px; // remove the top rounded corners here since there is a hard edge above the menu
-}
-.nav-pills .dropdown-menu {
-  border-radius: 6px; // make rounded corners match the pills
+  // Remove the top rounded corners here since there is a hard edge above the menu
+  .border-top-radius(0);
 }
 
 // Default dropdown links
@@ -179,16 +166,12 @@
 .nav .dropdown-toggle .caret {
   border-top-color: @linkColor;
   border-bottom-color: @linkColor;
-  margin-top: 6px;
+  margin-top: 8px;
 }
 .nav .dropdown-toggle:hover .caret {
   border-top-color: @linkColorHover;
   border-bottom-color: @linkColorHover;
 }
-/* move down carets for tabs */
-.nav-tabs .dropdown-toggle .caret {
-  margin-top: 8px;
-}
 
 // Active dropdown links
 // -------------------------
@@ -231,12 +214,8 @@
 
 
 
-// TABBABLE
-// --------
-
-
-// COMMON STYLES
-// -------------
+// Tabbable tabs
+// -------------------------
 
 // Clear any floats
 .tabbable {
@@ -258,8 +237,8 @@
 
 
 
-// DISABLED STATES
-// ---------------
+// Disabled state
+// -------------------------
 
 // Gray out text
 .nav > .disabled > a {
diff --git a/less/variables.less b/less/variables.less
index 11a4d2daa..b4c5a2580 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -197,7 +197,7 @@
 // Inverted navbar
 @navbarInverseBackground:                #111111;
 @navbarInverseBackgroundHighlight:       #222222;
-@navbarInverseBorder:                    #252525;
+@navbarInverseBorder:                    #111111;
 
 @navbarInverseText:                      @grayLight;
 @navbarInverseLinkColor:                 @grayLight;