Merge pull request #18783 from twbs/v4-nav-cleanup

v4: Nav cleanup

3 files changed, 59 insertions, 56 deletions

diff --git a/docs/components/navs.md b/docs/components/navs.md
index be05d0695..78d476e1c 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -22,13 +22,13 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
 {% example html %}
 <ul class="nav">
   <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
+    <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -42,20 +42,20 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 <nav class="nav">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link" href="#">Another link</a>
+  <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
 {% endexample %}
 
 ## Inline
 
-Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
+Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
 
 {% example html %}
 <nav class="nav nav-inline">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link" href="#">Another link</a>
+  <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
 {% endexample %}
@@ -65,13 +65,13 @@ The same works for a navigation built with lists.
 {% example html %}
 <ul class="nav nav-inline">
   <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
+    <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -92,7 +92,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -113,7 +113,7 @@ Take that same HTML, but use `.nav-pills` instead:
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -121,9 +121,9 @@ Take that same HTML, but use `.nav-pills` instead:
 </ul>
 {% endexample %}
 
-## Stacked pills
+### Stacked pills
 
-Just add `.nav-stacked` to the `.nav.nav-pills`.
+Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
 
 {% example html %}
 <ul class="nav nav-pills nav-stacked">
@@ -134,7 +134,7 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -142,6 +142,17 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
 </ul>
 {% endexample %}
 
+As always, stacked pills are possible without `<ul>`s.
+
+{% example html %}
+<nav class="nav nav-pills nav-stacked">
+  <a class="nav-link active" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+{% endexample %}
+
 ## Using dropdowns
 
 Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
@@ -164,7 +175,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     </div>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -190,7 +201,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     </div>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 4efed45b6..6bb09fdbd 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -23,7 +23,7 @@
     @include plain-hover-focus {
       color: $nav-disabled-link-hover-color;
       cursor: $cursor-disabled;
-      background-color: transparent;
+      background-color: $nav-disabled-link-hover-bg;
     }
   }
 }
@@ -38,7 +38,7 @@
 
   .nav-item + .nav-item,
   .nav-link + .nav-link {
-    margin-left: 1rem;
+    margin-left: $nav-item-inline-spacer;
   }
 }
 
@@ -48,13 +48,13 @@
 //
 
 .nav-tabs {
-  border-bottom: 1px solid $nav-tabs-border-color;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
   @include clearfix();
 
   .nav-item {
     float: left;
     // Make the list-items overlay the bottom border
-    margin-bottom: -1px;
+    margin-bottom: -$nav-tabs-border-width;
 
     + .nav-item {
       margin-left: $nav-item-margin;
@@ -64,7 +64,7 @@
   .nav-link {
     display: block;
     padding: $nav-link-padding;
-    border: $nav-tabs-link-border-width solid transparent;
+    border: $nav-tabs-border-width solid transparent;
     @include border-radius($border-radius $border-radius 0 0);
 
     @include hover-focus {
@@ -88,6 +88,13 @@
       border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
     }
   }
+
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-top: -$nav-tabs-border-width;
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
 }
 
 
@@ -115,9 +122,9 @@
   .nav-link.active,
   .nav-item.open .nav-link {
     @include plain-hover-focus {
-      color: $component-active-color;
+      color: $nav-pills-active-link-color;
       cursor: default;
-      background-color: $component-active-bg;
+      background-color: $nav-pills-active-link-bg;
     }
   }
 }
@@ -148,15 +155,3 @@
     display: block;
   }
 }
-
-
-//
-// Dropdowns
-//
-
-.nav-tabs .dropdown-menu {
-  // Make dropdown border overlap tab border
-  margin-top: -1px;
-  // Remove the top rounded corners here since there is a hard edge above the menu
-  @include border-top-radius(0);
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 704fe7182..5c1d07c36 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -388,29 +388,26 @@ $navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
 
 // Navs
 
-$nav-item-margin:                           .2rem !default;
-
-$nav-link-padding:                          .5em 1em !default;
-$nav-link-hover-bg:                         $gray-lighter !default;
-
-$nav-disabled-link-color:                   $gray-light !default;
-$nav-disabled-link-hover-color:             $gray-light !default;
-
-$nav-tabs-border-color:                     #ddd !default;
-
-$nav-tabs-link-border-width:                $border-width !default;
-$nav-tabs-link-hover-border-color:          $gray-lighter !default;
-
-$nav-tabs-active-link-hover-bg:             $body-bg !default;
-$nav-tabs-active-link-hover-color:          $gray !default;
-$nav-tabs-active-link-hover-border-color:   #ddd !default;
-
-$nav-tabs-justified-link-border-color:            #ddd !default;
-$nav-tabs-justified-active-link-border-color:     $body-bg !default;
-
-$nav-pills-border-radius:                   $border-radius !default;
-$nav-pills-active-link-hover-bg:            $component-active-bg !default;
-$nav-pills-active-link-hover-color:         $component-active-color !default;
+$nav-item-margin:               .2rem !default;
+$nav-item-inline-spacer:        1rem !default;
+$nav-link-padding:              .5em 1em !default;
+$nav-link-hover-bg:             $gray-lighter !default;
+$nav-disabled-link-color:       $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+$nav-disabled-link-hover-bg:    transparent !default;
+
+$nav-tabs-border-color:                       #ddd !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-link-hover-border-color:            $gray-lighter !default;
+$nav-tabs-active-link-hover-color:            $gray !default;
+$nav-tabs-active-link-hover-bg:               $body-bg !default;
+$nav-tabs-active-link-hover-border-color:     #ddd !default;
+$nav-tabs-justified-link-border-color:        #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+$nav-pills-border-radius:     $border-radius !default;
+$nav-pills-active-link-color: $component-active-color !default;
+$nav-pills-active-link-bg:    $component-active-bg !default;
 
 
 // Pagination