Refactor navs: new classes, remove separate pills & tabs files, drop justified nav because it never really worked

1 files changed, 71 insertions, 185 deletions

diff --git a/less/navs.less b/less/navs.less
index 1db5892b04..48c6e06d8a 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -2,24 +2,18 @@
 // Navs
 // --------------------------------------------------
 
-
-// - Mixins for horizontal and vertical nav
-// - Classes for tabs and pills
-
-
 .nav {
-  margin-bottom: @line-height-computed;
   .list-unstyled();
   &:extend(.clearfix all);
 }
 
 .nav-item {
   position: relative;
-  display: block;
+  display: inline-block;
 }
 
 .nav-link {
-  display: block;
+  display: inline-block;
   padding: @nav-link-padding;
   line-height: @line-height-base;
 
@@ -29,19 +23,9 @@
     background-color: @nav-link-hover-bg;
   }
 
-  // Open dropdown and active states
-  .open > &,
-  .active > & {
-    &,
-    &:hover,
-    &:focus {
-      color: @component-active-color;
-      background-color: @component-active-bg;
-    }
-  }
-
   // Disabled state sets text to gray and nukes hover/tab effects
-  .disabled > & {
+  .disabled > &,
+  &.disabled {
     color: @nav-disabled-link-color;
 
     &,
@@ -55,209 +39,111 @@
 }
 
 
-
-
-// Base class
-// --------------------------------------------------
-
-.nav {
-  margin-bottom: 0;
-  padding-left: 0; // Override default ul/ol
-  list-style: none;
-  &:extend(.clearfix all);
-
-  > li {
-    position: relative;
-    display: block;
-
-    > a {
-      position: relative;
-      display: block;
-      padding: @nav-link-padding;
-      line-height: @line-height-base;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-        background-color: @nav-link-hover-bg;
-      }
-    }
-
-    // Disabled state sets text to gray and nukes hover/tab effects
-    &.disabled > a {
-      color: @nav-disabled-link-color;
-
-      &:hover,
-      &:focus {
-        color: @nav-disabled-link-hover-color;
-        text-decoration: none;
-        background-color: transparent;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  // Open dropdowns
-  .open > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: @nav-link-hover-bg;
-      border-color: @link-color;
-    }
-  }
-}
-
-
+//
 // Tabs
-// -------------------------
+//
 
-// Give the tabs something to sit on
 .nav-tabs {
+  margin-bottom: @line-height-computed;
   border-bottom: 1px solid @nav-tabs-border-color;
-  > li {
+
+  .nav-item {
     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: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
-      }
+    + .nav-item {
+      margin-left: .2rem;
     }
-
-    // Active state, and its :hover to override normal :hover
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
-        color: @nav-tabs-active-link-hover-color;
-        background-color: @nav-tabs-active-link-hover-bg;
-        border: 1px solid @nav-tabs-active-link-hover-border-color;
-        border-bottom-color: transparent;
-        cursor: default;
-      }
-    }
-  }
-  // pulling this in mainly for less shorthand
-  &.nav-justified {
-    .nav-justified();
-    .nav-tabs-justified();
   }
-}
 
+  .nav-link {
+    display: block;
+    border: 1px solid transparent;
+    .border-radius(@border-radius-base @border-radius-base 0 0);
 
-// Pills
-// -------------------------
-.nav-pills {
-  > li {
-    float: left;
-
-    // Links rendered as pills
-    > a {
-      .border-radius(@nav-pills-border-radius);
-    }
-    + li {
-      margin-left: 2px;
+    &:hover,
+    &:focus {
+      border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
     }
+  }
 
-    // Active state
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
-        color: @nav-pills-active-link-hover-color;
-        background-color: @nav-pills-active-link-hover-bg;
-      }
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-tabs-active-link-hover-color;
+      background-color: @nav-tabs-active-link-hover-bg;
+      border-color: @nav-tabs-active-link-hover-border-color @nav-tabs-active-link-hover-border-color transparent;
     }
   }
-}
-
 
-// Stacked pills
-.nav-stacked {
-  > li {
-    float: none;
-    + li {
-      margin-top: 2px;
-      margin-left: 0; // no need for this gap between nav items
+  .disabled > .nav-link,
+  .nav-link.disabled {
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-disabled-link-color;
+      background-color: transparent;
+      border-color: transparent;
     }
   }
 }
 
 
-// Nav variations
-// --------------------------------------------------
+//
+// Pills
+//
 
-// Justified nav links
-// -------------------------
+.nav-pills {
+  margin-bottom: @line-height-computed;
 
-.nav-justified {
-  width: 100%;
+  .nav-item {
+    float: left;
 
-  > li {
-    float: none;
-    > a {
-      text-align: center;
-      margin-bottom: 5px;
+    + .nav-item {
+      margin-left: .2rem;
     }
   }
 
-  > .dropdown .dropdown-menu {
-    top: auto;
-    left: auto;
+  .nav-link {
+    display: block;
+    .border-radius(@nav-pills-border-radius);
   }
 
-  @media (min-width: @screen-sm-min) {
-    > li {
-      display: table-cell;
-      width: 1%;
-      > a {
-        margin-bottom: 0;
-      }
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    &,
+    &:hover,
+    &:focus {
+      color: @component-active-color;
+      background-color: @component-active-bg;
+      cursor: default;
     }
   }
 }
 
-// Move borders to anchors instead of bottom of list
-//
-// Mixin for adding on top the shared `.nav-justified` styles for our tabs
-.nav-tabs-justified {
-  border-bottom: 0;
-
-  > li > a {
-    // Override margin from .nav-tabs
-    margin-right: 0;
-    .border-radius(@border-radius-base);
-  }
-
-  > .active > a,
-  > .active > a:hover,
-  > .active > a:focus {
-    border: 1px solid @nav-tabs-justified-link-border-color;
-  }
+.nav-stacked {
+  .nav-item {
+    float: none;
+    display: block;
 
-  @media (min-width: @screen-sm-min) {
-    > li > a {
-      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
-      .border-radius(@border-radius-base @border-radius-base 0 0);
-    }
-    > .active > a,
-    > .active > a:hover,
-    > .active > a:focus {
-      border-bottom-color: @nav-tabs-justified-active-link-border-color;
+    + .nav-item {
+      margin-top: .2rem;
+      margin-left: 0;
     }
   }
 }
 
 
+//
 // Tabbable tabs
-// -------------------------
+//
 
 // Hide tabbable panes to start, show them when `.active`
 .tab-content {
@@ -270,12 +156,12 @@
 }
 
 
+//
 // Dropdowns
-// -------------------------
+//
 
-// Specific dropdowns
 .nav-tabs .dropdown-menu {
-  // make dropdown border overlap tab border
+  // Make dropdown border overlap tab border
   margin-top: -1px;
   // Remove the top rounded corners here since there is a hard edge above the menu
   .border-top-radius(0);