From 38c93371c14e8caeefc08df356a11ae19d79fae8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:46:50 -0800 Subject: [PATCH] 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. --- scss/_buttons.scss | 1 + scss/_forms.scss | 1 + scss/_variables.scss | 16 +++++++++------- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 961ed77171..119cf1c050 100644 --- 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 30f7146794..aaa7ffc73d 100644 --- 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 a2f77b56b1..502bb7939d 100644 --- 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;