Merge pull request #7590 from Fowowski/3.0.0-wip

more nested less rules - navs component

1 files changed, 122 insertions, 105 deletions

diff --git a/less/navs.less b/less/navs.less
index ff65f8533..5455f510f 100644
--- 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();
-}