updated button/form-control padding and line-height

- Moves from no set line-height (inherited of 1.5) to declared 1.25 for
all inputs and buttons (regardless of size modifier).

- Updates padding to be `.5rem` instead of `.375rem` so that padding is
more likely to be whole numbers based on the root font-size.

- Whole numbers will be beneficial in avoiding odd fractional pixels
that can lead to misalignment as shown in #18607.

- Large buttons and inputs are now a tad wider, and smaller
buttons/inputs a tad shorter and narrower, too.

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 961ed771716ab8c8a5c4d25ca556fd0092c79819..119cf1c0505fc5fea54c78d521b4027bc81b060c 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -7,6 +7,7 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 30f71467941b1b224920adb5ea3fbfe8e9f7cc31..aaa7ffc73dbed4da5bb7a2c472635ee5314c765c 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -11,6 +11,7 @@
   // height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
+  line-height: $input-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.

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a2f77b56b19bf2df9a680bf253ae0e4e404ffac1..502bb7939db5251b834338dda451112fc9e63388 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -237,7 +237,8 @@ $table-border-color:            $gray-lighter !default;
 // For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-padding-x:                  1rem !default;
-$btn-padding-y:                  .375rem !default;
+$btn-padding-y:                  .5rem !default;
+$btn-line-height:                1.25 !default;
 $btn-font-weight:                normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
@@ -268,10 +269,10 @@ $btn-danger-border:              $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
-$btn-padding-x-sm:               .75rem !default;
+$btn-padding-x-sm:               .5rem !default;
 $btn-padding-y-sm:               .25rem !default;
 
-$btn-padding-x-lg:               1.25rem !default;
+$btn-padding-x-lg:               1.5rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
 $btn-block-spacing-y:            5px !default;
@@ -289,7 +290,8 @@ $btn-border-radius-sm:           $border-radius-sm !default;
 // Forms
 
 $input-padding-x:                .75rem !default;
-$input-padding-y:                .375rem !default;
+$input-padding-y:                .5rem !default;
+$input-line-height:              1.25 !default;
 
 $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
@@ -308,10 +310,10 @@ $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 
 $input-color-placeholder:        #999 !default;
 
-$input-padding-x-sm:             .75rem !default;
-$input-padding-y-sm:             .275rem !default;
+$input-padding-x-sm:             .5rem !default;
+$input-padding-y-sm:             .25rem !default;
 
-$input-padding-x-lg:             1.25rem !default;
+$input-padding-x-lg:             1.5rem !default;
 $input-padding-y-lg:             .75rem !default;
 
 $input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;