Change how input and select height is computed

— Previously we weren't including the border-width on the computed height, leading to alignment issues.

— New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together.

— Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.

3 files changed, 17 insertions, 13 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 97c36472a..fb1e59c57 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -133,8 +133,7 @@
 .custom-select {
   display: inline-block;
   max-width: 100%;
-  $select-border-width: ($custom-select-border-width * 2);
-  height: calc(#{$input-height} + #{$select-border-width});
+  height: $input-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   line-height: $custom-select-line-height;
   color: $custom-select-color;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 55e8cb43a..805bd0743 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -62,8 +62,7 @@
 
 select.form-control {
   &:not([size]):not([multiple]) {
-    $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height} + #{$select-border-width});
+    height: $input-height;
   }
 
   &:focus::-ms-value {
@@ -161,8 +160,7 @@ select.form-control {
 
 select.form-control-sm {
   &:not([size]):not([multiple]) {
-    $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height-sm} + #{$select-border-width});
+    height: $input-height-sm;
   }
 }
 
@@ -175,8 +173,7 @@ select.form-control-sm {
 
 select.form-control-lg {
   &:not([size]):not([multiple]) {
-    $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height-lg} + #{$select-border-width});
+    height: $input-height-lg;
   }
 }
 
@@ -254,8 +251,8 @@ select.form-control-lg {
 .form-control-danger {
   padding-right: ($input-btn-padding-x * 3);
   background-repeat: no-repeat;
-  background-position: center right ($input-height / 4);
-  background-size: ($input-height / 2) ($input-height / 2);
+  background-position: center right ($input-height-inner / 4);
+  background-size: ($input-height-inner / 2) ($input-height-inner / 2);
 }
 
 // Form validation states
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3cde2bd04..d59d8fb21 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -412,9 +412,16 @@ $input-color-focus:              $input-color !default;
 
 $input-color-placeholder:        $gray-light !default;
 
-$input-height:                   (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;
-$input-height-lg:                (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default;
-$input-height-sm:                (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default;
+$input-height-border:           $input-btn-border-width * 2 !default;
+
+$input-height-inner:            ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height:                  calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm:         ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm:               calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+
+$input-height-inner-lg:         ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
 $input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
 
@@ -468,6 +475,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C
 
 $custom-select-padding-y:          .375rem !default;
 $custom-select-padding-x:          .75rem  !default;
+$custom-select-height:              $input-height  !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;