more nested navs

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 616661fa48875d3eebe3d4d2c46feb2edd4f7a9a..7ab329bbe8472664c9951f7840aa5d55c5f019fe 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3262,10 +3262,34 @@ button.close {
   background-color: #eeeeee;
 }
 
+.nav > li.disabled > a {
+  color: #999999;
+}
+
+.nav > li.disabled > a:hover,
+.nav > li.disabled > a:focus {
+  color: #999999;
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
+.nav > li + .nav-header {
+  margin-top: 9px;
+}
+
 .nav > .pull-right {
   float: right;
 }
 
+.nav .divider {
+  height: 2px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+}
+
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
@@ -3286,9 +3310,9 @@ button.close {
   border-color: #eeeeee #eeeeee #dddddd;
 }
 
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
   color: #555555;
   cursor: default;
   background-color: #ffffff;
@@ -3296,6 +3320,27 @@ button.close {
   border-bottom-color: transparent;
 }
 
+.nav-tabs.nav-justified {
+  width: 100%;
+  border-bottom: 0;
+}
+
+.nav-tabs.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  text-align: center;
+}
+
+.nav-tabs.nav-justified > li > a {
+  margin-right: 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs.nav-justified > .active > a {
+  border-bottom-color: #ffffff;
+}
+
 .nav-pills > li {
   float: left;
 }
@@ -3308,9 +3353,9 @@ button.close {
   margin-left: 2px;
 }
 
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover,
-.nav-pills > .active > a:focus {
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
   color: #fff;
   background-color: #428bca;
 }
@@ -3335,34 +3380,6 @@ button.close {
   text-align: center;
 }
 
-.nav-justified.nav-tabs {
-  border-bottom: 0;
-}
-
-.nav-justified.nav-tabs > li > a {
-  border-bottom: 1px solid #ddd;
-}
-
-.nav-justified.nav-tabs > .active > a {
-  border-bottom-color: #ffffff;
-}
-
-.nav-justified > li > a {
-  margin-right: 0;
-}
-
-.nav > .disabled > a {
-  color: #999999;
-}
-
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
-  color: #999999;
-  text-decoration: none;
-  cursor: default;
-  background-color: transparent;
-}
-
 .nav-header {
   display: block;
   padding: 3px 15px;
@@ -3374,18 +3391,6 @@ button.close {
   text-transform: uppercase;
 }
 
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-.nav .divider {
-  height: 2px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid #ffffff;
-}
-
 .tabbable:before,
 .tabbable:after {
   display: table;

diff --git a/less/navs.less b/less/navs.less
index ff65f85337dc3648671125acf96bbf9010d66e77..5455f510f3e2d79d40e485dbd426679a765b02e9 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -12,25 +12,53 @@
   padding-left: 0; // Override default ul/ol
   list-style: none;
   .clearfix();
-}
-.nav > li {
-  display: block;
-}
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-  background-color: @grayLighter;
-}
+  > li {
+    display: block;
+    > a {
+      position: relative;
+      display: block;
+      padding: 10px 15px;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: @grayLighter;        
+      }
+    }
+
+    // Nav states and addons
+    // --------------------------------------------------
+
+    // Disabled state
+    // -------------------------
+
+    // Gray out text
+    &.disabled > a {
+      color: @grayLight;
+    }
+    // Nuke hover effects
+    &.disabled > a:hover,
+    &.disabled > a:focus {
+      color: @grayLight;
+      text-decoration: none;
+      background-color: transparent;
+      cursor: default;
+    }
+    // Space the headers out when they follow another list item (link)
+    &+ .nav-header {
+      margin-top: 9px;
+    }
+  }
 
-// Redeclare pull classes because of specifity
-// Todo: consider making these utilities !important to avoid this bullshit
-.nav > .pull-right {
-  float: right;
+  // Redeclare pull classes because of specifity
+  // Todo: consider making these utilities !important to avoid this bullshit
+  > .pull-right {
+    float: right;
+  }
+  
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    .nav-divider();
+  }
 }
 
 
@@ -44,63 +72,79 @@
 // Give the tabs something to sit on
 .nav-tabs {
   border-bottom: 1px solid #ddd;
-}
-.nav-tabs > li {
-  float: left;
-  // Make the list-items overlay the bottom border
-  margin-bottom: -1px;
-}
-// Actual tabs (as links)
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: @line-height-base;
-  border: 1px solid transparent;
-  border-radius: @border-radius-base @border-radius-base 0 0;
-  &:hover {
-    border-color: @grayLighter @grayLighter #ddd;
+  > li {
+    float: left;
+    // Make the list-items overlay the bottom border
+    margin-bottom: -1px;    
+
+    // Actual tabs (as links)
+    > a {
+      margin-right: 2px;
+      line-height: @line-height-base;
+      border: 1px solid transparent;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+      &:hover {
+        border-color: @grayLighter @grayLighter #ddd;
+      }
+    }
+
+    // Active state, and it's :hover to override normal :hover
+    &.active > a,
+    &.active > a:hover,
+    &.active > a:focus {
+      color: @gray;
+      background-color: @body-bg;
+      border: 1px solid #ddd;
+      border-bottom-color: transparent;
+      cursor: default;      
+    }
+  }
+  // pulling this in mainly for less shorthand
+  &.nav-justified {
+    .nav-justified;
+    .nav-tabs-justified;
   }
-}
-// Active state, and it's :hover to override normal :hover
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
-  color: @gray;
-  background-color: @body-bg;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
 }
 
+
 // Pills
 // -------------------------
-
-.nav-pills > li {
-  float: left;
-}
-
-// Links rendered as pills
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-.nav-pills > li + li > a {
-  margin-left: 2px;
+.nav-pills {
+  > li {
+    float: left;
+
+    // Links rendered as pills
+    > a {
+      border-radius: 5px;
+    }
+    + li {
+      > a {
+        margin-left: 2px;
+      }
+    }
+
+    // Active state
+    &.active > a,
+    &.active > a:hover,
+    &.active > a:focus {
+      color: #fff;
+      background-color: @component-active-bg;      
+    }
+  }
 }
 
-// Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover,
-.nav-pills > .active > a:focus {
-  color: #fff;
-  background-color: @component-active-bg;
-}
 
 // Stacked pills
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0; // no need for this gap between nav items
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      > a {
+        margin-top: 2px;
+        margin-left: 0; // no need for this gap between nav items        
+      }
+    }
+  }
 }
 
 // Justified nav links
@@ -108,48 +152,30 @@
 
 .nav-justified {
   width: 100%;
+  > li {
+    float: none;
+    display: table-cell;
+    width: 1%;
+    text-align: center;
+  }
 }
-.nav-justified > li {
-  float: none;
-  display: table-cell;
-  width: 1%;
-  text-align: center;
-}
+
 // Move borders to anchors instead of bottom of list
-.nav-justified.nav-tabs {
+.nav-tabs-justified () {
   border-bottom: 0;
   > li > a {
     border-bottom: 1px solid #ddd;
+
+    // Override margin from .nav-tabs
+    margin-right: 0;
   }
   > .active > a {
     border-bottom-color: @body-bg;
   }
-}
-// Override margin from .nav-tabs
-.nav-justified > li > a {
-  margin-right: 0;
-}
-
-
 
-// Nav states and addons
-// --------------------------------------------------
+}
 
-// Disabled state
-// -------------------------
 
-// Gray out text
-.nav > .disabled > a {
-  color: @grayLight;
-}
-// Nuke hover effects
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
-  color: @grayLight;
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
-}
 
 // Nav headers (for dropdowns and lists)
 // -------------------------
@@ -164,15 +190,6 @@
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
 }
-// Space them out when they follow another list item (link)
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-// Dividers (basically an hr) within the dropdown
-.nav .divider {
-  .nav-divider();
-}