Revamp tabbed nav border variables

- Add new $nav-tabs-border-width for the bottom border on the .nav-tabs
parent class
- Use that new variable for the negative margin on nav-items within it
for consistent customization
- Drop the $nav-tabs-link-border-width for the new variable so it’s all
tied together

2 files changed, 4 insertions, 4 deletions

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 398ee1039..2c5f5b4c6 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -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 {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index a01443dc5..7b1cb713a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -399,8 +399,8 @@ $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-border-width:                $border-width !default;
 $nav-tabs-link-hover-border-color:          $gray-lighter !default;
 
 $nav-tabs-active-link-hover-bg:             $body-bg !default;