Undo #21171 (which closed #20977)

Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.

This restores the previous `calc` math and adds a line-height that reuses the input line-height.

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 1d74bc5f4105d66d910dc2e7a7e3609438b193ae..0e9c76460db8a0a89ff5cade0b2ce2f243da0d21 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -136,8 +136,9 @@
   display: inline-block;
   max-width: 100%;
   $select-border-width: ($border-width * 2);
-  height: calc(#{$input-height} - #{$select-border-width});
+  height: calc(#{$input-height} + #{$select-border-width});
   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;
   vertical-align: middle;
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a68e45d6e89fc368089213dc3713ebf83206c326..412f944f530b97273171b7521529aafd07e6c307 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -487,6 +487,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C
 $custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !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-line-height !default;
 $custom-select-color:               $input-color !default;
 $custom-select-disabled-color:      $gray-light !default;
 $custom-select-bg:            $white !default;