rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Remove explicit heights on form elements (#31993)

Browse Source 
* Remove explicit heights

* Link to upstream bug

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Martijn Cuppens 2020-10-29 14:18:39 +01:00 committed by GitHub
parent 2bd5ba147b
commit ed1d867dd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/_variables.scss
View File

@ -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;

27
scss/forms/_form-control.scss
View File

@ -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;

4
scss/forms/_form-select.scss
View File

@ -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;

16
scss/forms/_input-group.scss
View File

@ -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,