Remove explicit heights

twbs · Oct 27, 2020 · a2a9dc0 · a2a9dc0
1 parent 1baa735
commit a2a9dc0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -738,7 +738,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;
@@ -768,12 +767,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;

diff --git 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);
@@ -37,6 +36,13 @@
     }
   }
 
+  // Add some height to date inputs on IOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  &::-webkit-datetime-edit {
+    // 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;
@@ -102,6 +108,24 @@
   @include border-radius($input-border-radius-lg);
 }
 
+// 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
@@ -6,7 +6,6 @@
 .form-select {
   display: block;
   width: 100%;
-  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,15 +64,13 @@
 }
 
 .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;
   @include font-size($form-select-font-size-sm);
 }
 
 .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
@@ -80,14 +80,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,
@@ -97,14 +89,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,