rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Fix border on input group elements and custom form inputs

Browse Source 
c3e4cbd changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.
This commit is contained in:
Nathan Woltman 2017-05-13 11:11:11 -04:00 committed by Mark Otto
parent 1846ab34f6
commit f95282c27e
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_custom-forms.scss
View File

@ -139,6 +139,7 @@
color: $custom-select-color; color: $custom-select-color;
vertical-align: middle; vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; 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; background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color; border: $custom-select-border-width solid $custom-select-border-color;
@if $enable-rounded { @if $enable-rounded {
@ -215,11 +216,13 @@
z-index: 5; z-index: 5;
height: $custom-file-height; height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y; padding: $custom-file-padding-x $custom-file-padding-y;
overflow: hidden;
line-height: $custom-file-line-height; line-height: $custom-file-line-height;
color: $custom-file-color; color: $custom-file-color;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
background-color: $custom-file-bg; background-color: $custom-file-bg;
background-clip: padding-box;
border: $custom-file-border-width solid $custom-file-border-color; border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius); @include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow); @include box-shadow($custom-file-box-shadow);
@ -232,9 +235,8 @@
&::before { &::before {
position: absolute; position: absolute;
top: -$custom-file-border-width; top: 0;
right: -$custom-file-border-width; right: 0;
bottom: -$custom-file-border-width;
z-index: 6; z-index: 6;
display: block; display: block;
height: $custom-file-height; height: $custom-file-height;
@ -242,8 +244,7 @@
line-height: $custom-file-line-height; line-height: $custom-file-line-height;
color: $custom-file-button-color; color: $custom-file-button-color;
background-color: $custom-file-button-bg; background-color: $custom-file-button-bg;
border: $custom-file-border-width solid $custom-file-border-color; border-left: $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) { @each $lang, $text in map-get($custom-file-text, button-label) {

3
scss/_input-group.scss
View File

@ -74,6 +74,7 @@
color: $input-color; color: $input-color;
text-align: center; text-align: center;
background-color: $input-group-addon-bg; background-color: $input-group-addon-bg;
background-clip: padding-box;
border: $input-btn-border-width solid $input-group-addon-border-color; border: $input-btn-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
@ -144,6 +145,8 @@
// element above the siblings. // element above the siblings.
> .btn { > .btn {
position: relative; position: relative;
background-clip: padding-box;
border: $input-btn-border-width solid $input-group-btn-border-color;
+ .btn { + .btn {
margin-left: (-$input-btn-border-width); margin-left: (-$input-btn-border-width);

1
scss/_variables.scss
View File

@ -400,6 +400,7 @@ $form-group-margin-bottom: 1rem !default;
$input-group-addon-bg: $gray-200 !default; $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !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-gutter: 1.5rem !default;
$custom-control-spacer-y: .25rem !default; $custom-control-spacer-y: .25rem !default;