kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
scss/_custom-forms.scss
View file

@ -133,8 +133,7 @@
.custom-select {
display: inline-block;
max-width: 100%;
$select-border-width: ($custom-select-border-width * 2);
height: calc(#{$input-height} + #{$select-border-width});
height: $input-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
line-height: $custom-select-line-height;
color: $custom-select-color;

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

14
scss/_variables.scss
View file

@ -412,9 +412,16 @@ $input-color-focus: $input-color !default;
$input-color-placeholder: $gray-light !default;
$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default;
$input-height-border: $input-btn-border-width * 2 !default;
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
@ -468,6 +475,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C
$custom-select-padding-y: .375rem !default;
$custom-select-padding-x: .75rem !default;
$custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height !default;
$custom-select-color: $input-color !default;