Merge pull request #18455 from twbs/fix-18424

Use $input-border-width for both .form-control and .btn borders

6 files changed, 12 insertions, 13 deletions

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 90cc2cd02..7efe144f9 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -27,7 +27,7 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -$btn-border-width;
+    margin-left: -$input-btn-border-width;
   }
 }
 
@@ -167,7 +167,7 @@
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -$btn-border-width;
+    margin-top: -$input-btn-border-width;
     margin-left: 0;
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index e5d949965..73755280f 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -10,7 +10,7 @@
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  border: $btn-border-width solid transparent;
+  border: $input-btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
   @include transition(all .2s ease-in-out);
 
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 16527eb26..17b6a5e48 100644
--- a/scss/_custom-forms.scss
+++ b/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: $input-border-width solid $input-border-color;
+  border: $input-btn-border-width solid $input-border-color;
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -195,7 +195,7 @@
   color: #555;
   user-select: none;
   background-color: #fff;
-  border: $input-border-width solid #ddd;
+  border: $input-btn-border-width solid #ddd;
   border-radius: .25rem;
   @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
 }
@@ -215,7 +215,7 @@
   color: #555;
   content: "Browse";
   background-color: #eee;
-  border: $input-border-width solid #ddd;
+  border: $input-btn-border-width solid #ddd;
   border-radius: 0 .25rem .25rem 0;
 }
 
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 942fea51a..c7028f62f 100644
--- a/scss/_forms.scss
+++ b/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: $input-border-width solid $input-border-color;
+  border: $input-btn-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);
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index da003d5a3..e6681ebde 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -91,7 +91,7 @@
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
-  border: $input-border-width solid $input-group-addon-border-color;
+  border: $input-btn-border-width solid $input-group-addon-border-color;
   @include border-radius($border-radius);
 
   // Sizing
@@ -160,7 +160,7 @@
   > .btn {
     position: relative;
     + .btn {
-      margin-left: (-$btn-border-width);
+      margin-left: (-$input-btn-border-width);
     }
     // Bring the "active" button to the front
     @include hover-focus-active {
@@ -172,14 +172,14 @@
   &:first-child {
     > .btn,
     > .btn-group {
-      margin-right: (-$btn-border-width);
+      margin-right: (-$input-btn-border-width);
     }
   }
   &:last-child {
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: (-$btn-border-width);
+      margin-left: (-$input-btn-border-width);
       // Because specificity
       @include hover-focus-active {
         z-index: 3;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 88c057501..7b9fa7c40 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -224,7 +224,6 @@ $table-border-color:            $gray-lighter !default;
 $btn-padding-x:                  1rem !default;
 $btn-padding-y:                  .375rem !default;
 $btn-font-weight:                normal !default;
-$btn-border-width:               $border-width !default;
 
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
@@ -274,7 +273,7 @@ $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
 $input-border-color:             #ccc !default;
-$input-border-width:             $border-width !default;
+$input-btn-border-width:         $border-width !default; // For form controls and buttons
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 
 $input-border-radius:            $border-radius !default;