rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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;
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) {

3
scss/_input-group.scss
View file

@ -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);

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-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;