diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-10-29 16:18:39 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-29 16:18:39 +0300 |
commit | ed1d867dd8bd08d5e8d235b5b67b3dce9c0169c5 (patch) | |
tree | be801d8c494e79a89de77d400f12b171a1996231 /scss | |
parent | 2bd5ba147b7fc1dcc6b9843a66ade35a522616e2 (diff) |
Remove explicit heights on form elements (#31993)
* Remove explicit heights
* Link to upstream bug
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_variables.scss | 3 | ||||
-rw-r--r-- | scss/forms/_form-control.scss | 27 | ||||
-rw-r--r-- | scss/forms/_form-select.scss | 4 | ||||
-rw-r--r-- | scss/forms/_input-group.scss | 16 |
4 files changed, 26 insertions, 24 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index beb3e8c0ca..c98c500a20 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -737,7 +737,6 @@ $form-select-padding-y: $input-padding-y !default; $form-select-padding-x: $input-padding-x !default; $form-select-font-family: $input-font-family !default; $form-select-font-size: $input-font-size !default; -$form-select-height: $input-height !default; $form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $form-select-font-weight: $input-font-weight !default; $form-select-line-height: $input-line-height !default; @@ -767,12 +766,10 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focu $form-select-padding-y-sm: $input-padding-y-sm !default; $form-select-padding-x-sm: $input-padding-x-sm !default; $form-select-font-size-sm: $input-font-size-sm !default; -$form-select-height-sm: $input-height-sm !default; $form-select-padding-y-lg: $input-padding-y-lg !default; $form-select-padding-x-lg: $input-padding-x-lg !default; $form-select-font-size-lg: $input-font-size-lg !default; -$form-select-height-lg: $input-height-lg !default; $form-range-track-width: 100% !default; $form-range-track-height: .5rem !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 4f0f0a031e..7b52c6cfef 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -5,7 +5,6 @@ .form-control { display: block; width: 100%; - min-height: $input-height; padding: $input-padding-y $input-padding-x; font-family: $input-font-family; @include font-size($input-font-size); @@ -45,6 +44,14 @@ } } + // Add some height to date inputs on iOS + // https://github.com/twbs/bootstrap/issues/23307 + // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved + &::-webkit-date-and-time-value { + // Multiply line-height by 1em if it has no unit + height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); + } + // Placeholder &::placeholder { color: $input-placeholder-color; @@ -180,6 +187,24 @@ } } +// Make sure textareas don't shrink too much when resized +// https://github.com/twbs/bootstrap/pull/29124 +// stylelint-disable selector-no-qualifying-type +textarea { + &.form-control { + min-height: $input-height; + } + + &.form-control-sm { + min-height: $input-height-sm; + } + + &.form-control-lg { + min-height: $input-height-lg; + } +} +// stylelint-enable selector-no-qualifying-type + .form-control-color { max-width: 3rem; padding: $input-padding-y; diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 5a684baa5c..6ebe33e102 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -6,7 +6,6 @@ .form-select { display: block; width: 100%; - min-height: $form-select-height; padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x; font-family: $form-select-font-family; @include font-size($form-select-font-size); @@ -47,7 +46,6 @@ &[multiple], &[size]:not([size="1"]) { - height: auto; padding-right: $form-select-padding-x; background-image: none; } @@ -66,7 +64,6 @@ } .form-select-sm { - height: $form-select-height-sm; padding-top: $form-select-padding-y-sm; padding-bottom: $form-select-padding-y-sm; padding-left: $form-select-padding-x-sm; @@ -74,7 +71,6 @@ } .form-select-lg { - height: $form-select-height-lg; padding-top: $form-select-padding-y-lg; padding-bottom: $form-select-padding-y-lg; padding-left: $form-select-padding-x-lg; diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 938a4185b3..2729eccbd5 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -63,14 +63,6 @@ // Remix the default form control sizing classes into new ones for easier // manipulation. -.input-group-lg > .form-control { - min-height: $input-height-lg; -} - -.input-group-lg > .form-select { - height: $input-height-lg; -} - .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, @@ -80,14 +72,6 @@ @include border-radius($input-border-radius-lg); } -.input-group-sm > .form-control { - min-height: $input-height-sm; -} - -.input-group-sm > .form-select { - height: $input-height-sm; -} - .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, |