more nested navs

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 > li.active > a,
-.nav-tabs > .active > a:hover,
+.nav-tabs > li.active > a:hover,
-.nav-tabs > .active > a:focus {
+.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 > li.active > a,
-.nav-pills > .active > a:hover,
+.nav-pills > li.active > a:hover,
-.nav-pills > .active > a:focus {
+.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;

less/navs.less

@@ -12,25 +12,53 @@
   padding-left: 0; // Override default ul/ol
   list-style: none;
   .clearfix();
-}
+  > li {
-.nav > li {
     display: block;
-}
+    > a {
-.nav > li > a {
       position: relative;
       display: block;
       padding: 10px 15px;
-}
+      &:hover,
-.nav > li > a:hover,
+      &:focus {
-.nav > li > a:focus {
         text-decoration: none;
         background-color: @grayLighter;        
-}
+      }
+    }
 
-// Redeclare pull classes because of specifity
+    // Nav states and addons
-// Todo: consider making these utilities !important to avoid this bullshit
+    // --------------------------------------------------
-.nav > .pull-right {
+
+    // 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
+  > .pull-right {
     float: right;
+  }
+  
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    .nav-divider();
+  }
 }
 
 
@@ -44,14 +72,13 @@
 // Give the tabs something to sit on
 .nav-tabs {
   border-bottom: 1px solid #ddd;
-}
+  > li {
-.nav-tabs > li {
     float: left;
     // Make the list-items overlay the bottom border
     margin-bottom: -1px;    
-}
+
-// Actual tabs (as links)
+    // Actual tabs (as links)
-.nav-tabs > li > a {
+    > a {
       margin-right: 2px;
       line-height: @line-height-base;
       border: 1px solid transparent;
@@ -59,48 +86,65 @@
       &:hover {
         border-color: @grayLighter @grayLighter #ddd;
       }
-}
+    }
-// Active state, and it's :hover to override normal :hover
+
-.nav-tabs > .active > a,
+    // Active state, and it's :hover to override normal :hover
-.nav-tabs > .active > a:hover,
+    &.active > a,
-.nav-tabs > .active > a:focus {
+    &.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;
+  }
 }
 
+
 // Pills
 // -------------------------
-
+.nav-pills {
-.nav-pills > li {
+  > li {
     float: left;
-}
 
-// Links rendered as pills
+    // Links rendered as pills
-.nav-pills > li > a {
+    > a {
       border-radius: 5px;
-}
+    }
-.nav-pills > li + li > a {
+    + li {
+      > a {
         margin-left: 2px;
-}
+      }
+    }
 
-// Active state
+    // Active state
-.nav-pills > .active > a,
+    &.active > a,
-.nav-pills > .active > a:hover,
+    &.active > a:hover,
-.nav-pills > .active > a:focus {
+    &.active > a:focus {
       color: #fff;
       background-color: @component-active-bg;      
+    }
+  }
 }
 
+
 // Stacked pills
-.nav-stacked > li {
+.nav-stacked {
+  > li {
     float: none;
-}
+    + li {
-.nav-stacked > li + li > a {
+      > a {
         margin-top: 2px;
         margin-left: 0; // no need for this gap between nav items        
+      }
+    }
+  }
 }
 
 // Justified nav links
@@ -108,49 +152,31 @@
 
 .nav-justified {
   width: 100%;
-}
+  > li {
-.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();
-}