root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Undo #21171 (which closed #20977) 

Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.

This restores the previous `calc` math and adds a line-height that reuses the input line-height.
This commit is contained in:
Mark Otto 2016-12-22 23:19:21 -08:00 committed by Mark Otto
parent 4377e2956b
commit 66c87cb7ca
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/_custom-forms.scss
View File

@ -136,8 +136,9 @@
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
$select-border-width: ($border-width * 2); $select-border-width: ($border-width * 2);
height: calc(#{$input-height} - #{$select-border-width}); height: calc(#{$input-height} + #{$select-border-width});
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; 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; 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;

1
scss/_variables.scss
View File

@ -487,6 +487,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C
$custom-select-padding-x: .75rem !default; $custom-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default; $custom-select-padding-y: .375rem !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-line-height !default;
$custom-select-color: $input-color !default; $custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-light !default; $custom-select-disabled-color: $gray-light !default;
$custom-select-bg: $white !default; $custom-select-bg: $white !default;