diff options
author | Mark Otto <otto@github.com> | 2013-05-15 10:21:30 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2013-05-15 10:21:30 +0400 |
commit | 28a081cb20d4e9544967e7c6d5ab31ff4ad68862 (patch) | |
tree | 41d1af55e2055a91e79620b50594261a0eeda813 /less | |
parent | a41d566d5e38dd3227a0f5921f7be92969ff63f1 (diff) |
Overhaul form control and button sizing, and some type styles
* New padding approach with separate horizontal and vertical padding
variables
* Improved sizing in large and small buttons and form controls
* Dropped the `.btn-mini` (since we have no `.input-mini` to match, and
holy fuck those were small buttons)
* Dropped the `.pagination-mini` as well because once again, to hell
with such small components
* Changed `@line-height-headings` to `@headings-line-height`
* Removed the `@headings-font-family` because it was honestly kind of
useless
Diffstat (limited to 'less')
-rw-r--r-- | less/buttons.less | 12 | ||||
-rw-r--r-- | less/forms.less | 15 | ||||
-rw-r--r-- | less/pagination.less | 27 | ||||
-rw-r--r-- | less/type.less | 3 | ||||
-rw-r--r-- | less/variables.less | 34 |
5 files changed, 39 insertions, 52 deletions
diff --git a/less/buttons.less b/less/buttons.less index 128971a4c2..6280d3448a 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -9,7 +9,7 @@ // Core styles .btn { display: inline-block; - padding: 6px 12px; + padding: @padding-base-vertical @padding-base-horizontal; margin-bottom: 0; // For input.btn font-size: @font-size-base; font-weight: 500; @@ -123,18 +123,14 @@ fieldset[disabled] .btn-link { // -------------------------------------------------- .btn-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } .btn-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; -} -.btn-mini { - padding: @padding-mini; - font-size: @font-size-mini; + line-height: 1.5; // ensure proper height of button next to small input border-radius: @border-radius-small; } diff --git a/less/forms.less b/less/forms.less index dacc4bb505..c7b376cdaa 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { padding: 0; margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: @line-height-headings; + line-height: inherit; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -56,7 +56,7 @@ input[type="tel"], input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: 6px 9px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -241,13 +241,13 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } &.input-small { min-height: @input-height-small; - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } @@ -397,11 +397,12 @@ select:focus:invalid { border-radius: @border-radius-base; &.input-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; } + border-radius: @border-radius-small; + } &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } diff --git a/less/pagination.less b/less/pagination.less index ec1eef27f9..73c063be04 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -56,7 +56,7 @@ .pagination-large { > li > a, > li > span { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; } > li:first-child > a, @@ -69,9 +69,13 @@ } } -// Small and mini -.pagination-mini, +// Small .pagination-small { + > li > a, + > li > span { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + } > li:first-child > a, > li:first-child > span { .border-left-radius(@border-radius-small); @@ -81,20 +85,3 @@ .border-right-radius(@border-radius-small); } } - -// Small -.pagination-small { - > li > a, - > li > span { - padding: @padding-small; - font-size: @font-size-small; - } -} -// Mini -.pagination-mini { - > li > a, - > li > span { - padding: @padding-mini; - font-size: @font-size-mini; - } -} diff --git a/less/type.less b/less/type.less index e562bb2c22..a95e5bff79 100644 --- a/less/type.less +++ b/less/type.less @@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @headings-font-family; font-weight: @headings-font-weight; - line-height: @line-height-headings; + line-height: @headings-line-height; small { font-weight: normal; line-height: 1; diff --git a/less/variables.less b/less/variables.less index 4feb9879a0..9cd8f830b3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -50,25 +50,29 @@ @font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-mini: ceil(@font-size-base * 0.75); // ~11px -@line-height-base: 1.428; // 20/14 -@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px -@line-height-headings: 1.1; +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px -@headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; +@headings-line-height: 1.1; // Components // ------------------------- -// Based on 14px font-size and 1.5 line-height +// Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-large: 11px 14px; // 44px -@padding-small: 2px 10px; // 26px -@padding-mini: 0 6px; // 22px +@padding-base-vertical: 8px; +@padding-base-horizontal: 12px; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +@padding-large-vertical: 14px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; @component-active-bg: @brand-primary; @@ -123,11 +127,11 @@ @input-color-placeholder: @gray-light; -@input-height-base: (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border -@input-height-large: (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border -@input-height-small: (@line-height-computed + 6px); // base line-height + 4px vertical padding + 2px top/bottom border +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2)); +@input-height-large: (@line-height-computed + (@padding-large-vertical * 2)); +@input-height-small: (@line-height-computed + (@padding-small-vertical * 2)); -@form-actions-bg: #f5f5f5; +@form-actions-bg: #f5f5f5; // Dropdowns |