diff options
| author | Mark Otto <[email protected]> | 2017-10-02 14:18:33 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-10-02 14:18:33 -0700 |
| commit | 8fb48eaae22613b34b81c63a0358f923379d09f4 (patch) | |
| tree | a174fd9f5a6f99d4839244a03c215e7da465a0de | |
| parent | 49ce5f3a645402c18d75d7d3e4769cde3a9deb7b (diff) | |
| download | bootstrap-8fb48eaae22613b34b81c63a0358f923379d09f4.tar.xz bootstrap-8fb48eaae22613b34b81c63a0358f923379d09f4.zip | |
Revert input group border changes (#24197)
Turns out #22612 is a bad idea and it makes all sorts of weird visual
glitches when working with form controls and transparent borders.
| -rw-r--r-- | scss/_custom-forms.scss | 11 | ||||
| -rw-r--r-- | scss/_input-group.scss | 3 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 |
3 files changed, 5 insertions, 10 deletions
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 1bf268b83..f9912606d 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -139,7 +139,6 @@ color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-clip: padding-box; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -216,13 +215,11 @@ z-index: 5; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; - overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; user-select: none; background-color: $custom-file-bg; - background-clip: padding-box; border: $custom-file-border-width solid $custom-file-border-color; @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -235,8 +232,9 @@ &::before { position: absolute; - top: 0; - right: 0; + top: -$custom-file-border-width; + right: -$custom-file-border-width; + bottom: -$custom-file-border-width; z-index: 6; display: block; height: $custom-file-height; @@ -244,7 +242,8 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; - border-left: $custom-file-border-width solid $custom-file-border-color; + border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 48229e4e8..8f88b73ec 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -72,7 +72,6 @@ color: $input-group-addon-color; text-align: center; background-color: $input-group-addon-bg; - background-clip: padding-box; border: $input-btn-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); @@ -144,8 +143,6 @@ // element above the siblings. > .btn { position: relative; - background-clip: padding-box; - border: $input-btn-border-width solid $input-group-btn-border-color; + .btn { margin-left: (-$input-btn-border-width); diff --git a/scss/_variables.scss b/scss/_variables.scss index d95b703cc..cbbbd320f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -371,7 +371,6 @@ $form-group-margin-bottom: 1rem !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; -$input-group-btn-border-color: $input-border-color !default; $custom-control-gutter: 1.5rem !default; $custom-control-spacer-y: .25rem !default; |