diff options
| author | Mark Otto <[email protected]> | 2013-05-14 23:21:30 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-05-14 23:21:30 -0700 |
| commit | 28a081cb20d4e9544967e7c6d5ab31ff4ad68862 (patch) | |
| tree | 41d1af55e2055a91e79620b50594261a0eeda813 /less/variables.less | |
| parent | a41d566d5e38dd3227a0f5921f7be92969ff63f1 (diff) | |
| download | bootstrap-28a081cb20d4e9544967e7c6d5ab31ff4ad68862.tar.xz bootstrap-28a081cb20d4e9544967e7c6d5ab31ff4ad68862.zip | |
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/variables.less')
| -rw-r--r-- | less/variables.less | 34 |
1 files changed, 19 insertions, 15 deletions
diff --git a/less/variables.less b/less/variables.less index 4feb9879a..9cd8f830b 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 |