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

Form control heights (#26820)

Browse Source 
* Redo input height on .form-control

- Use the already present -height variables on .form-control
- Consolidate the select size and multiple overrides into the .form-control base class instead of sm/lg modifiers
- Remove the Sass extends from input groups since it picks up too many selectors

* Prevent height on textareas
This commit is contained in:
Mark Otto 2018-07-15 14:00:23 -07:00 committed by GitHub
parent 48c723b60f
commit f426a67394
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_forms.scss
View File

@ -7,6 +7,7 @@
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height; line-height: $input-line-height;
@ -57,10 +58,6 @@
} }
select.form-control { select.form-control {
&:not([size]):not([multiple]) {
height: $input-height;
}
&:focus::-ms-value { &:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to // Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus // the selected option text when the (still closed) <select> receives focus
@ -139,35 +136,36 @@ select.form-control {
// Build on `.form-control` with modifier classes to decrease or increase the // Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls. // height and font-size of form controls.
// //
// The `.form-group-* form-control` variations are sadly duplicated to avoid the // Repeated in `_input_group.scss` to avoid Sass extend issues.
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm { .form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $input-line-height-sm; line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
select.form-control-sm {
&:not([size]):not([multiple]) {
height: $input-height-sm;
}
}
.form-control-lg { .form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg; padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $input-line-height-lg; line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }
select.form-control-lg { // stylelint-disable no-duplicate-selectors
&:not([size]):not([multiple]) { select.form-control {
height: $input-height-lg; &[size],
&[multiple] {
height: auto;
} }
} }
textarea.form-control {
height: auto;
}
// stylelint-enable no-duplicate-selectors
// Form groups // Form groups
// //

12
scss/_input-group.scss
View File

@ -122,7 +122,11 @@
.input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn { .input-group-lg > .input-group-append > .btn {
@extend .form-control-lg; height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
} }
.input-group-sm > .form-control, .input-group-sm > .form-control,
@ -130,7 +134,11 @@
.input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn { .input-group-sm > .input-group-append > .btn {
@extend .form-control-sm; height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
} }