Overhaul navbar navs

* Switch from  to  to eliminate an element in selectors
* Drop .navbar-divider entirely

1 files changed, 69 insertions, 86 deletions

diff --git a/less/navbar.less b/less/navbar.less
index 78b837bdf..587b69ca4 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -15,31 +15,30 @@
 // Navbar nav links
 // -------------------------
 
-.navbar {
-  .nav {
-    // space out from .navbar .brand and .btn-navbar
-    margin-top: 15px;
-  }
-  .nav > li > a {
+.navbar-nav {
+  // Space out from .navbar .brand and .btn-navbar
+  margin-top: 15px;
+
+  > li > a {
     padding-top: ((@navbar-height - @line-height-base) / 2);
     padding-bottom: ((@navbar-height - @line-height-base) / 2);
     color: @navbar-link-color;
     line-height: 20px;
   }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
+  > li > a:hover,
+  > li > a:focus {
     color: @navbar-link-hover-color;
     background-color: @navbar-link-hover-bg;
   }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
     color: @navbar-link-active-color;
     background-color: @navbar-link-active-bg;
   }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
+  > .disabled > a,
+  > .disabled > a:hover,
+  > .disabled > a:focus {
     color: @navbar-link-disabled-color;
     background-color: @navbar-link-disabled-bg;
   }
@@ -80,7 +79,7 @@
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 7px 15px;
+  padding: 15px;
   font-size: 18px;
   font-weight: 500;
   line-height: @line-height-base;
@@ -122,11 +121,6 @@
   }
 }
 
-// Dividers in navbar
-.navbar .nav > .divider {
-  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
-}
-
 // Navbar form
 .navbar-form {
   .navbar-vertical-align(34px); // Vertically center in navbar
@@ -135,19 +129,19 @@
 // Dropdown menus
 
 // Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 // Dropdown menu items and carets
-.navbar .nav {
+.navbar-nav {
   // Caret should match text color on hover
   li.dropdown > a:hover .caret,
   li.dropdown > a:focus .caret {
@@ -175,8 +169,8 @@
 }
 
 // Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   left: auto;
   right: 0;
 }
@@ -202,25 +196,27 @@
     color: @navbar-inverse-text;
   }
 
-  .nav > li > a {
-    color: @navbar-inverse-link-color;
-  }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
-    color: @navbar-inverse-link-hover-color;
-    background-color: @navbar-inverse-link-hover-bg;
-  }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
-    color: @navbar-inverse-link-active-color;
-    background-color: @navbar-inverse-link-active-bg;
-  }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
-    color: @navbar-inverse-link-disabled-color;
-    background-color: @navbar-inverse-link-disabled-bg;
+  .navbar-nav {
+    > li > a {
+      color: @navbar-inverse-link-color;
+    }
+    > li > a:hover,
+    > li > a:focus {
+      color: @navbar-inverse-link-hover-color;
+      background-color: @navbar-inverse-link-hover-bg;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      color: @navbar-inverse-link-active-color;
+      background-color: @navbar-inverse-link-active-bg;
+    }
+    > .disabled > a,
+    > .disabled > a:hover,
+    > .disabled > a:focus {
+      color: @navbar-inverse-link-disabled-color;
+      background-color: @navbar-inverse-link-disabled-bg;
+    }
   }
 
   // Darken the responsive nav toggle
@@ -235,32 +231,29 @@
     }
   }
 
-  // Darken dividers
-  .nav > .divider {
-    background-color: darken(@navbar-inverse-bg, 5%);
-    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
-  }
-
   // Dropdowns
-  .nav li.dropdown.open > .dropdown-toggle,
-  .nav li.dropdown.active > .dropdown-toggle,
-  .nav li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbar-inverse-link-active-bg;
-    color: @navbar-inverse-link-active-color;
-  }
-  .nav li.dropdown > a:hover .caret {
-    border-top-color: @navbar-inverse-link-hover-color;
-    border-bottom-color: @navbar-inverse-link-hover-color;
-  }
-  .nav li.dropdown > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-color;
-    border-bottom-color: @navbar-inverse-link-color;
-  }
-  .nav li.dropdown.open > .dropdown-toggle .caret,
-  .nav li.dropdown.active > .dropdown-toggle .caret,
-  .nav li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-active-color;
-    border-bottom-color: @navbar-inverse-link-active-color;
+  .navbar-nav {
+    li.dropdown.open > .dropdown-toggle,
+    li.dropdown.active > .dropdown-toggle,
+    li.dropdown.open.active > .dropdown-toggle {
+      background-color: @navbar-inverse-link-active-bg;
+      color: @navbar-inverse-link-active-color;
+    }
+    li.dropdown > a:hover .caret {
+      border-top-color: @navbar-inverse-link-hover-color;
+      border-bottom-color: @navbar-inverse-link-hover-color;
+    }
+    li.dropdown > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-color;
+      border-bottom-color: @navbar-inverse-link-color;
+    }
+    li.dropdown.open > .dropdown-toggle .caret,
+    li.dropdown.active > .dropdown-toggle .caret,
+    li.dropdown.open.active > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-active-color;
+      border-bottom-color: @navbar-inverse-link-active-color;
+    }
+
   }
 }
 
@@ -270,28 +263,28 @@
 // --------------------------------------------------
 
 @media screen and (min-width: @screen-tablet) {
+
   .navbar {
     padding-top: 0;
     padding-bottom: 0;
   }
   .navbar-brand {
     float: left;
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
-    margin-left: -10px;
+    margin-left: -5px;
+    margin-right: 5px;
   }
   .navbar .nav {
     float: left;
     margin-top: 0; // undo top margin to make nav extend full height of navbar
-    .clearfix();
+
+    > li {
+      float: left;
+    }
 
     &.pull-right {
       float: right;
     }
   }
-  .navbar .nav > li {
-    float: left;
-  }
 
   // Dividers go vertical
   // Change the height and height, disable bottom border, then add right border
@@ -307,16 +300,6 @@
     border-right-color: lighten(@navbar-inverse-bg, 5%);
   }
 
-  .navbar-fixed-left {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .navbar-fixed-left .navbar-brand,
-  .navbar-fixed-left .nav,
-  .navbar-fixed-left .nav > li {
-    float: none;
-  }
-
   // Required to make the collapsing navbar work on regular desktops
   .navbar-toggle {
     position: relative;