Revamp button and input vars while fixing #21587 (#22287)

6 files changed, 56 insertions, 59 deletions

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index facecd37ae..af74a55f1c 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -99,8 +99,8 @@
 //
 
 .btn + .dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
+  padding-right: $input-btn-padding-x * .75;
+  padding-left: $input-btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
@@ -108,13 +108,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $input-btn-padding-x-sm * .75;
+  padding-left: $input-btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $input-btn-padding-x-lg * .75;
+  padding-left: $input-btn-padding-x-lg * .75;
 }
 
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 2964a526d0..4a8ffcbe57 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -7,13 +7,12 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
   border: $input-btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
+  @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
   // Share hover and focus styles
@@ -137,12 +136,11 @@ fieldset[disabled] a.btn {
 //
 
 .btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
+  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
 }
+
 .btn-sm {
-  // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
+  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
 }
 
 
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 4ec9f6e329..11fa94a25d 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -9,9 +9,9 @@
   width: 100%;
   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   // height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $font-size-base;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@@ -95,20 +95,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -120,8 +120,8 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the legend text to
 // be the same size as regular labels, and to align with the form controls.
 .col-form-legend {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }
@@ -133,10 +133,10 @@ select.form-control {
 // horizontal form layout.
 
 .form-control-static {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   border: solid transparent;
   border-width: $input-btn-border-width 0;
 
@@ -157,26 +157,30 @@ select.form-control {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  padding: $input-padding-y-sm $input-padding-x-sm;
+  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
 select.form-control-sm {
   &:not([size]):not([multiple]) {
-    height: $input-height-sm;
+    $select-border-width: ($border-width * 2);
+    height: calc(#{$input-height-sm} + #{$select-border-width});
   }
 }
 
 .form-control-lg {
-  padding: $input-padding-y-lg $input-padding-x-lg;
+  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
 select.form-control-lg {
   &:not([size]):not([multiple]) {
-    height: $input-height-lg;
+    $select-border-width: ($border-width * 2);
+    height: calc(#{$input-height-lg} + #{$select-border-width});
   }
 }
 
@@ -253,7 +257,7 @@ select.form-control-lg {
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
-  padding-right: ($input-padding-x * 3);
+  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);
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 49cdf28300..0b668bff3c 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -66,11 +66,11 @@
 //
 
 .input-group-addon {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
@@ -79,12 +79,13 @@
 
   // Sizing
   &.form-control-sm {
-    padding: $input-padding-y-sm $input-padding-x-sm;
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($input-border-radius-sm);
   }
+
   &.form-control-lg {
-    padding: $input-padding-y-lg $input-padding-x-lg;
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($input-border-radius-lg);
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0fa4f334b0..e8ead30335 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -221,7 +221,7 @@ $grid-gutter-widths: (
 //
 // Define common padding and border radius sizes and more.
 
-$line-height-lg:         (4 / 3) !default;
+$line-height-lg:         1.5 !default;
 $line-height-sm:         1.5 !default;
 
 $border-width: 1px !default;
@@ -338,9 +338,18 @@ $table-inverse-color:           $body-bg !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-padding-x:                  1rem !default;
-$btn-padding-y:                  .5rem !default;
-$btn-line-height:                1.25 !default;
+$input-btn-padding-x:       1rem !default;
+$input-btn-padding-y:       .5rem !default;
+$input-btn-line-height:     1.25 !default;
+
+$input-btn-padding-x-sm:    .5rem !default;
+$input-btn-padding-y-sm:    .25rem !default;
+$input-btn-line-height-sm:  1.5 !default;
+
+$input-btn-padding-x-lg:    1rem !default;
+$input-btn-padding-y-lg:    .5rem !default;
+$input-btn-line-height-lg:  1.5 !default;
+
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
 $btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
@@ -372,12 +381,6 @@ $btn-danger-border:              $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
-$btn-padding-x-sm:               .5rem !default;
-$btn-padding-y-sm:               .25rem !default;
-
-$btn-padding-x-lg:               1.5rem !default;
-$btn-padding-y-lg:               .75rem !default;
-
 $btn-block-spacing-y:            .5rem !default;
 
 // Allows for customizing button radius independently from global border radius
@@ -390,10 +393,6 @@ $btn-transition:                 all .2s ease-in-out !default;
 
 // Forms
 
-$input-padding-x:                .75rem !default;
-$input-padding-y:                .5rem !default;
-$input-line-height:              1.25 !default;
-
 $input-bg:                       $white !default;
 $input-bg-disabled:              $gray-lighter !default;
 
@@ -413,15 +412,9 @@ $input-color-focus:              $input-color !default;
 
 $input-color-placeholder:        $gray-light !default;
 
-$input-padding-x-sm:             .5rem !default;
-$input-padding-y-sm:             .25rem !default;
-
-$input-padding-x-lg:             1.5rem !default;
-$input-padding-y-lg:             .75rem !default;
-
-$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
-$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
-$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !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-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
 
@@ -479,7 +472,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-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
 $custom-select-disabled-color:      $gray-light !default;
 $custom-select-bg:            $white !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 91eb44409f..47f2834ff5 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -79,8 +79,9 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
+  line-height: $line-height;
   @include border-radius($border-radius);
 }