Merge pull request #18257 from twbs/border-width-vars

Add more border width variables

scss/_custom-forms.scss

@@ -138,7 +138,7 @@
   background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
   background-image: none \9;
   background-size: 8px 10px;
-  border: 1px solid $input-border;
+  border: $input-border-width solid $input-border-color;
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;

scss/_dropdown.scss

@@ -51,7 +51,7 @@
   list-style: none;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: 1px solid $dropdown-border;
+  border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($border-radius);
   @include box-shadow(0 6px 12px rgba(0,0,0,.175));
 }

scss/_forms.scss

@@ -14,7 +14,7 @@
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
-  border: $border-width solid $input-border;
+  border: $input-border-width solid $input-border-color;
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius);
   @include box-shadow($input-box-shadow);

scss/_images.scss

@@ -19,7 +19,7 @@
   padding: $thumbnail-padding;
   line-height: $line-height;
   background-color: $thumbnail-bg;
-  border: 1px solid $thumbnail-border;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
   border-radius: $thumbnail-border-radius;
   transition: all .2s ease-in-out;
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));

scss/_list-group.scss

@@ -18,9 +18,9 @@
   display: block;
   padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -$border-width;
+  margin-bottom: -$list-group-border-width;
   background-color: $list-group-bg;
-  border: $border-width solid $list-group-border;
+  border: $list-group-border-width solid $list-group-border-color;
 
   // Round the first and last items
   &:first-child {
@@ -34,7 +34,7 @@
 
 .list-group-flush {
   .list-group-item {
-    border-width: $border-width 0;
+    border-width: $list-group-border-width 0;
     border-radius: 0;
   }
 }

scss/_nav.scss

@@ -59,7 +59,7 @@
   .nav-link {
     display: block;
     padding: $nav-link-padding;
-    border: 1px solid transparent;
+    border: $nav-tabs-link-border-width solid transparent;
     @include border-radius($border-radius $border-radius 0 0);
 
     @include hover-focus {

scss/_pager.scss

@@ -14,7 +14,7 @@
       display: inline-block;
       padding: 5px 14px;
       background-color: $pager-bg;
-      border: 1px solid $pager-border;
+      border: $pager-border-width solid $pager-border-color;
       border-radius: $pager-border-radius;
     }
 

scss/_pagination.scss

@@ -18,7 +18,7 @@
       color: $pagination-color;
       text-decoration: none;
       background-color: $pagination-bg;
-      border: 1px solid $pagination-border;
+      border: $pagination-border-width solid $pagination-border-color;
     }
     &:first-child {
       > a,

scss/_popover.scss

@@ -12,7 +12,7 @@
   font-size: $font-size-sm;
   background-color: $popover-bg;
   background-clip: padding-box;
-  border: 1px solid $popover-border-color;
+  border: $popover-border-width solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
 
@@ -107,7 +107,7 @@
   margin: 0; // reset heading margin
   font-size: $font-size-base;
   background-color: $popover-title-bg;
-  border-bottom: 1px solid darken($popover-title-bg, 5%);
+  border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
   @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
 }
 

scss/_tables.scss

@@ -12,16 +12,16 @@
     padding: $table-cell-padding;
     line-height: $line-height;
     vertical-align: top;
-    border-top: 1px solid $table-border-color;
+    border-top: $table-border-width solid $table-border-color;
   }
 
   thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid $table-border-color;
+    border-bottom: (2 * $table-border-width) solid $table-border-color;
   }
 
   tbody + tbody {
-    border-top: 2px solid $table-border-color;
+    border-top: (2 * $table-border-width) solid $table-border-color;
   }
 
   .table {
@@ -47,17 +47,17 @@
 // Add borders all around the table and between all the columns.
 
 .table-bordered {
-  border: 1px solid $table-border-color;
+  border: $table-border-width solid $table-border-color;
 
   th,
   td {
-    border: 1px solid $table-border-color;
+    border: $table-border-width solid $table-border-color;
   }
 
   thead {
     th,
     td {
-      border-bottom-width: 2px;
+      border-bottom-width: (2 * $table-border-width);
     }
   }
 }
@@ -114,7 +114,7 @@
 
   // TODO: find out if we need this still.
   //
-  // border: 1px solid $table-border-color;
+  // border: $table-border-width solid $table-border-color;
   // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 }
 
@@ -160,11 +160,11 @@
 
   th,
   td {
-    border-top: 1px solid $table-border-color;
-    border-left: 1px solid $table-border-color;
+    border-top: $table-border-width solid $table-border-color;
+    border-left: $table-border-width solid $table-border-color;
 
     &:last-child {
-      border-right: 1px solid $table-border-color;
+      border-right: $table-border-width solid $table-border-color;
     }
   }
 
@@ -175,7 +175,7 @@
       tr:last-child {
         th,
         td {
-          border-bottom: 1px solid $table-border-color;
+          border-bottom: $table-border-width solid $table-border-color;
         }
       }
     }
@@ -187,7 +187,7 @@
     th,
     td {
       display: block !important;
-      border: 1px solid $table-border-color;
+      border: $table-border-width solid $table-border-color;
     }
   }
 }

scss/_variables.scss

@@ -207,6 +207,7 @@ $table-bg-accent:               #f9f9f9 !default;
 $table-bg-hover:                #f5f5f5 !default;
 $table-bg-active:               $table-bg-hover !default;
 
+$table-border-width:            $border-width !default;
 $table-border-color:            $gray-lighter !default;
 
 
@@ -265,7 +266,8 @@ $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
-$input-border:                   #ccc !default;
+$input-border-color:             #ccc !default;
+$input-border-width:             $border-width !default;
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 
 $input-border-radius:            $border-radius !default;
@@ -290,7 +292,7 @@ $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-pa
 $form-group-margin-bottom:       $spacer-y !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
-$input-group-addon-border-color: $input-border !default;
+$input-group-addon-border-color: $input-border-color !default;
 
 $cursor-disabled:                not-allowed !default;
 
@@ -305,7 +307,8 @@ $form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 // Dropdown menu container and contents.
 
 $dropdown-bg:                    #fff !default;
-$dropdown-border:                rgba(0,0,0,.15) !default;
+$dropdown-border-color:          rgba(0,0,0,.15) !default;
+$dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            #e5e5e5 !default;
 
 $dropdown-link-color:            $gray-dark !default;
@@ -364,6 +367,7 @@ $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;
@@ -390,7 +394,8 @@ $pagination-padding-y-lg:             .75rem !default;
 
 $pagination-color:                     $link-color !default;
 $pagination-bg:                        #fff !default;
-$pagination-border:                    #ddd !default;
+$pagination-border-width:              $border-width !default;
+$pagination-border-color:              #ddd !default;
 
 $pagination-hover-color:               $link-hover-color !default;
 $pagination-hover-bg:                  $gray-lighter !default;
@@ -408,7 +413,8 @@ $pagination-disabled-border:           #ddd !default;
 // Pager
 
 $pager-bg:                             $pagination-bg !default;
-$pager-border:                         $pagination-border !default;
+$pager-border-width:                   $border-width !default;
+$pager-border-color:                   $pagination-border-color !default;
 $pager-border-radius:                  15px !default;
 
 $pager-hover-bg:                       $pagination-hover-bg !default;
@@ -474,6 +480,7 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 
 $popover-bg:                          #fff !default;
 $popover-max-width:                   276px !default;
+$popover-border-width:                $border-width !default;
 $popover-border-color:                rgba(0,0,0,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
@@ -561,7 +568,8 @@ $progress-bar-info-bg:        $brand-info !default;
 // List group
 
 $list-group-bg:                 #fff !default;
-$list-group-border:             #ddd !default;
+$list-group-border-color:       #ddd !default;
+$list-group-border-width:       $border-width !default;
 $list-group-border-radius:      $border-radius !default;
 
 $list-group-hover-bg:           #f5f5f5 !default;
@@ -583,7 +591,8 @@ $list-group-link-heading-color: #333 !default;
 
 $thumbnail-padding:           .25rem !default;
 $thumbnail-bg:                $body-bg !default;
-$thumbnail-border:            #ddd !default;
+$thumbnail-border-width:      $border-width !default;
+$thumbnail-border-color:      #ddd !default;
 $thumbnail-border-radius:     $border-radius !default;