fixes #18425 by using vars for 1px borders

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 7eebd380ba5e7b0dd84834d721e840c4fb888810..90cc2cd02c28b67fa698a364a80af7389bfc86b0 100644 (file)
--- 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: -$border-width;
+    margin-left: -$btn-border-width;
   }
 }
 
@@ -167,7 +167,7 @@
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -$border-width;
+    margin-top: -$btn-border-width;
     margin-left: 0;
   }
 }

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index f82f43305dad6c371814966121d1d649f236acf8..e5d9499657b35c676c438f776453a329cb9524b2 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -10,7 +10,7 @@
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  border: $border-width solid transparent;
+  border: $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/_input-group.scss b/scss/_input-group.scss
index ad09d28a89ed8ea390a4b2ad3d04c089f16bd462..da003d5a3dcac04a043d9a7a29be00f715354ca1 100644 (file)
--- 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: 1px solid $input-group-addon-border-color;
+  border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($border-radius);
 
   // Sizing
@@ -160,7 +160,7 @@
   > .btn {
     position: relative;
     + .btn {
-      margin-left: -1px;
+      margin-left: (-$btn-border-width);
     }
     // Bring the "active" button to the front
     @include hover-focus-active {
@@ -168,18 +168,18 @@
     }
   }
 
-  // Negative margin to only have a 1px border between the two
+  // Negative margin to only have a single, shared border between the two
   &:first-child {
     > .btn,
     > .btn-group {
-      margin-right: -1px;
+      margin-right: (-$btn-border-width);
     }
   }
   &:last-child {
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: -1px;
+      margin-left: (-$btn-border-width);
       // Because specificity
       @include hover-focus-active {
         z-index: 3;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 57f2404b87a76aba339ba194fca1c121cb5988c3..88c05750143c81d794436a909332d60873ce85e6 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -224,6 +224,7 @@ $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;