Form control heights (#26820)

* 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

diff --git a/scss/_forms.scss b/scss/_forms.scss
index c079bd5c4f070ca7bd35d1c6522d3514f91a6293..5530630ed6709c3665f7fb0a958347806ec41f03 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -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;
@@ -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
@@ -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
 //

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index a8b0e59ed4a5a9e664bcfc7a8012b1265f081611..c210242a1157eab83365a06a58c59ba471030e46 100644 (file)
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -122,7 +122,11 @@
 .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,
@@ -130,7 +134,11 @@
 .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);
 }