From 1db8dc10b586459db7ae4a58fe0bb34fb77b30e0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:39:49 -0800 Subject: [PATCH 1/6] Remove line-height from button mixin calls --- scss/_buttons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 22148bef1..961ed7717 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -13,7 +13,7 @@ cursor: pointer; user-select: none; border: $input-btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include transition(all .2s ease-in-out); &, @@ -143,11 +143,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, $line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-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, $line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); } From 8fcdbd38f8ca6c941ee4acc34a002ccfbbd66c5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:43:10 -0800 Subject: [PATCH 2/6] Remove specific line-heights from large/small inputs as well --- scss/_forms.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index 03f140906..473bcaea2 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -144,7 +144,6 @@ input[type="month"] { // height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; - line-height: $line-height-sm; @include border-radius($input-border-radius-sm); } @@ -152,7 +151,6 @@ input[type="month"] { // height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; - line-height: $line-height-lg; @include border-radius($input-border-radius-lg); } From ab451e5dc0c8402574bf631ff603f384034ec993 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:43:24 -0800 Subject: [PATCH 3/6] Remove commented out height on large/small inputs --- scss/_forms.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index 473bcaea2..30f714679 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -141,14 +141,12 @@ input[type="month"] { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - // height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; @include border-radius($input-border-radius-sm); } .form-control-lg { - // height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); From a16b2ef162a8292dec216172a32367f5d24da394 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:43:53 -0800 Subject: [PATCH 4/6] Remove line-height from the button size mixin too --- scss/mixins/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 968634880..861d353e2 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -92,7 +92,7 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; @include border-radius($border-radius); From 38c93371c14e8caeefc08df356a11ae19d79fae8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:46:50 -0800 Subject: [PATCH 5/6] 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 961ed7717..119cf1c05 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 30f714679..aaa7ffc73 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 a2f77b56b..502bb7939 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; From e589cdbfe9421d58f6c3ff4d2820056983df6def Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 22:47:04 -0800 Subject: [PATCH 6/6] Put that new var to use to match form group addons to form controls --- scss/_input-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 868606982..fd00ddb3f 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -88,7 +88,7 @@ margin-bottom: 0; // Allow use of