From 173dac4e54281312ebb7ff993df20caffbc56840 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Aug 2013 15:09:48 -0700 Subject: Tighten up buttons and form controls * Smaller padding on buttons and large buttons * Same with inputs and large inputs * Remove about 10px from height of large inputs/buttons and 4px from regular ones Fixes #8707 and #8700. (Also relevant: #8711) --- less/buttons.less | 1 + less/forms.less | 2 ++ less/variables.less | 11 +++++++---- 3 files changed, 10 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index d62242863..c206179df 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -123,6 +123,7 @@ .btn-large { padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; + line-height: 1.33; // ensure even-numbered height of butotn next to large input border-radius: @border-radius-large; } .btn-small, diff --git a/less/forms.less b/less/forms.less index fc5585928..494d328c0 100644 --- a/less/forms.less +++ b/less/forms.less @@ -222,12 +222,14 @@ input[type="number"] { height: @input-height-large; padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; + line-height: @line-height-large; border-radius: @border-radius-large; } .input-small { height: @input-height-small; padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; + line-height: @line-height-small; border-radius: @border-radius-small; } diff --git a/less/variables.less b/less/variables.less index 71e813d32..a869ce960 100644 --- a/less/variables.less +++ b/less/variables.less @@ -60,15 +60,18 @@ // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-base-vertical: 8px; +@padding-base-vertical: 6px; @padding-base-horizontal: 12px; -@padding-large-vertical: 14px; +@padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; +@line-height-large: 1.33; +@line-height-small: 1.5; + @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @@ -132,8 +135,8 @@ @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); -@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); +@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-border-color: #e5e5e5; -- cgit v1.2.3