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/forms | |
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/forms')
-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 |
3 files changed, 26 insertions, 21 deletions
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, |