rewrite active and disabled styles for navs

2 files changed, 41 insertions, 46 deletions

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 644cd7bf0..486b59433 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -30,8 +30,8 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
   <li class="nav-item">
     <a class="nav-link" href="#">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a class="nav-link" href="#">Disabled</a>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -53,8 +53,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 
 {% example html %}
 <ul class="nav nav-tabs">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -74,8 +74,8 @@ Take that same HTML, but use `.nav-pills` instead:
 
 {% example html %}
 <ul class="nav nav-pills">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -83,8 +83,8 @@ Take that same HTML, but use `.nav-pills` instead:
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -95,8 +95,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
 
 {% example html %}
 <ul class="nav nav-pills nav-stacked">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
     <a href="#" class="nav-link">Link</a>
@@ -104,8 +104,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -118,10 +118,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 {% example html %}
 <ul class="nav nav-tabs">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
-  </li>
   <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
+  </li>
+  <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Action</a>
@@ -134,8 +134,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -144,10 +144,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 {% example html %}
 <ul class="nav nav-pills">
-  <li class="nav-item active">
-    <a href="#" class="nav-link">Active</a>
-  </li>
   <li class="nav-item">
+    <a href="#" class="nav-link active">Active</a>
+  </li>
+  <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Action</a>
@@ -160,8 +160,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
   <li class="nav-item">
     <a href="#" class="nav-link">Another link</a>
   </li>
-  <li class="nav-item disabled">
-    <a href="#" class="nav-link">Disabled</a>
+  <li class="nav-item">
+    <a href="#" class="nav-link disabled">Disabled</a>
   </li>
 </ul>
 {% endexample %}
@@ -172,8 +172,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 
 <div class="bd-example bd-example-tabs" role="tabpanel">
   <ul id="myTab" class="nav nav-tabs" role="tablist">
-    <li class="nav-item active">
-      <a class="nav-link" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
+    <li class="nav-item">
+      <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
@@ -212,8 +212,8 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
-  <li class="nav-item active">
-    <a class="nav-link" href="#home" role="tab" data-toggle="tab">Home</a>
+  <li class="nav-item">
+    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
@@ -277,8 +277,8 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li class="nav-item active">
-    <a class="nav-link" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
+  <li class="nav-item">
+    <a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 813ac36ff..aa8a01e48 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -17,7 +17,6 @@
   }
 
   // Disabled state lightens text and removes hover/tab effects
-  .disabled > &,
   &.disabled {
     color: $nav-disabled-link-color;
 
@@ -83,6 +82,7 @@
 
 .nav-tabs {
   border-bottom: 1px solid $nav-tabs-border-color;
+  @include clearfix();
 
   .nav-item {
     float: left;
@@ -103,27 +103,24 @@
     @include hover-focus {
       border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
     }
+
+    &.disabled {
+      @include plain-hover-focus {
+        color: $nav-disabled-link-color;
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
   }
 
-  .open > .nav-link,
-  .active > .nav-link,
-  .nav-link.open,
-  .nav-link.active {
+  .nav-link.active,
+  .nav-item.open .nav-link {
     @include plain-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;
     }
   }
-
-  .disabled > .nav-link,
-  .nav-link.disabled {
-    @include plain-hover-focus {
-      color: $nav-disabled-link-color;
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
 }
 
 
@@ -146,10 +143,8 @@
     @include border-radius($nav-pills-border-radius);
   }
 
-  .open > .nav-link,
-  .active > .nav-link,
-  .nav-link.open,
-  .nav-link.active {
+  .nav-link.active,
+  .nav-item.open .nav-link {
     @include plain-hover-focus {
       color: $component-active-color;
       cursor: default;