mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Change how input and select height is computed

Browse Source 
— Previously we weren't including the border-width on the computed height, leading to alignment issues.

— New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together.

— Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.
This commit is contained in:
Mark Otto
2017-04-22 11:56:01 -07:00
parent 80438e93e1
commit dc3af6711d
3 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_forms.scss
View File

@@ -62,8 +62,7 @@
select.form-control {
&:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} + #{$select-border-width});
height: $input-height;
}
&:focus::-ms-value {
@@ -161,8 +160,7 @@ select.form-control {
select.form-control-sm {
&:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2);
height: calc(#{$input-height-sm} + #{$select-border-width});
height: $input-height-sm;
}
}
@@ -175,8 +173,7 @@ select.form-control-sm {
select.form-control-lg {
&:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2);
height: calc(#{$input-height-lg} + #{$select-border-width});
height: $input-height-lg;
}
}
@@ -254,8 +251,8 @@ select.form-control-lg {
.form-control-danger {
padding-right: ($input-btn-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
background-position: center right ($input-height-inner / 4);
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
}
// Form validation states