From 49674a8eba670e20a087371c92fefa9c65e93a34 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 6 Dec 2015 16:45:40 -0800 Subject: [PATCH] fixes #18425 by using vars for 1px borders --- scss/_button-group.scss | 4 ++-- scss/_buttons.scss | 2 +- scss/_input-group.scss | 10 +++++----- scss/_variables.scss | 1 + 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 7eebd380ba..90cc2cd02c 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: -$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 f82f43305d..e5d9499657 100644 --- 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 ad09d28a89..da003d5a3d 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: 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 57f2404b87..88c0575014 100644 --- 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;