From 9dacdce42c420cefb5a23ead7c45a995dc2088a8 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 7 Dec 2015 02:07:35 -0800 Subject: [PATCH] Use $input-btn-border-width for both .form-control and .btn borders; fixes #18424 Both widgets need to use the same border width because of input groups. Thus: $btn-border-width => $input-btn-border-width $input-border-width => $input-btn-border-width [skip sauce] --- scss/_button-group.scss | 4 ++-- scss/_buttons.scss | 2 +- scss/_custom-forms.scss | 6 +++--- scss/_forms.scss | 2 +- scss/_input-group.scss | 8 ++++---- scss/_variables.scss | 3 +-- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 90cc2cd02c..7efe144f97 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 e5d9499657..73755280fd 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 16527eb262..17b6a5e487 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 942fea51a2..c7028f62f9 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 `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 da003d5a3d..e6681ebdea 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 88c0575014..7b9fa7c405 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;