diff options
| author | Nathan Woltman <[email protected]> | 2017-05-13 11:11:11 -0400 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-08-10 22:41:21 -0700 |
| commit | f95282c27ee3e7642e313870cbd10d7137de5650 (patch) | |
| tree | be5c399e0e1b7657b5c0590685f3569a0f129d72 | |
| parent | 1846ab34f68c9ac28254915ebcb885b7aef5d25e (diff) | |
| download | bootstrap-f95282c27ee3e7642e313870cbd10d7137de5650.tar.xz bootstrap-f95282c27ee3e7642e313870cbd10d7137de5650.zip | |
Fix border on input group elements and custom form inputs
c3e4cbd changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.
| -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, 10 insertions, 5 deletions
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index d1fbf954f..ceb0278f4 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -139,6 +139,7 @@ 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 { @@ -215,11 +216,13 @@ z-index: 5; height: $custom-file-height; padding: $custom-file-padding-x $custom-file-padding-y; + 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); @@ -232,9 +235,8 @@ &::before { position: absolute; - top: -$custom-file-border-width; - right: -$custom-file-border-width; - bottom: -$custom-file-border-width; + top: 0; + right: 0; z-index: 6; display: block; height: $custom-file-height; @@ -242,8 +244,7 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; - border: $custom-file-border-width solid $custom-file-border-color; - @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); + border-left: $custom-file-border-width solid $custom-file-border-color; } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 0b668bff3..0c9920a2c 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -74,6 +74,7 @@ color: $input-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,6 +145,8 @@ // 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 794d12d83..29fd3b627 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -400,6 +400,7 @@ $form-group-margin-bottom: 1rem !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; |