Skip to content

Form control heights #26820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 2 commits into from
Jul 15, 2018
Merged

Form control heights #26820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eeb1ab8
Redo input height on .form-control
mdo Jul 8, 2018
210cdf2
Prevent height on textareas
mdo Jul 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 13 additions & 15 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
Expand Down Expand Up @@ -57,10 +58,6 @@
}

select.form-control {
&:not([size]):not([multiple]) {
height: $input-height;
}

&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
Expand Down Expand Up @@ -139,35 +136,36 @@ select.form-control {
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
// Repeated in `_input_group.scss` to avoid Sass extend issues.

.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);
}

select.form-control-sm {
&:not([size]):not([multiple]) {
height: $input-height-sm;
}
}

.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);
}

select.form-control-lg {
&:not([size]):not([multiple]) {
height: $input-height-lg;
// stylelint-disable no-duplicate-selectors
select.form-control {
&[size],
&[multiple] {
height: auto;
}
}

textarea.form-control {
height: auto;
}
// stylelint-enable no-duplicate-selectors

// Form groups
//
Expand Down
12 changes: 10 additions & 2 deletions scss/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,15 +122,23 @@
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .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 > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .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);
}


Expand Down