From d7f84d1220719cdf2272c9aa3c6731a932394c58 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 May 2013 18:07:06 -0700 Subject: Require .btn-default for regular buttons * Instead of , use for standard, gray button * Improves ability to customize buttons by encouraging folks to not override .btn and thus overriding all button modifier classes * Updates docs to reflect the change * Reorganize buttons CSS --- less/variables.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index 37d51e16e..6c0c0ab41 100644 --- a/less/variables.less +++ b/less/variables.less @@ -84,22 +84,27 @@ // Buttons // ------------------------- -@btn-color: #fff; -@btn-bg: #a7a9aa; -@btn-border: @btn-bg; +@btn-default-color: #fff; +@btn-default-bg: #a7a9aa; +@btn-default-border: @btn-default-bg; +@btn-primary-color: @btn-default-color; @btn-primary-bg: @brand-primary; @btn-primary-border: @btn-primary-bg; +@btn-success-color: @btn-default-color; @btn-success-bg: @brand-success; @btn-success-border: @btn-success-bg; +@btn-warning-color: @btn-default-color; @btn-warning-bg: @brand-warning; @btn-warning-border: @btn-warning-bg; +@btn-danger-color: @btn-default-color; @btn-danger-bg: @brand-danger; @btn-danger-border: @btn-danger-bg; +@btn-info-color: @btn-default-color; @btn-info-bg: @brand-info; @btn-info-border: @btn-info-bg; -- cgit v1.2.3 From 86598cac6b525ab122aa4de92aa3be696fa62e6a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 May 2013 20:01:57 -0700 Subject: Fixes #7796: change @list-group-active-text to @list-group-active-color --- less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index 37d51e16e..f6f59605a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -314,7 +314,7 @@ @list-group-border-radius: @border-radius-base; @list-group-hover-bg: #f5f5f5; -@list-group-active-text: #fff; +@list-group-active-color: #fff; @list-group-active-bg: @component-active-bg; @list-group-active-border: @list-group-active-bg; -- cgit v1.2.3 From 6fba68eb8b036fad1bc4f33484889cccf2480bff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 17:20:46 -0700 Subject: Unitless line-height * Instead of 20px as @line-height-base, use 1.5 * Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding * Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components --- less/variables.less | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index fd69c2438..c8ddb0c9e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -50,7 +50,9 @@ @font-size-small: (@font-size-base * 0.85); // ~12px @font-size-mini: (@font-size-base * 0.75); // ~11px -@line-height-base: 20px; +@line-height-base: 1.5; +@line-height-computed: (@font-size-base * @line-height-base); +@line-height-headings: 1.1; @headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; @@ -121,9 +123,9 @@ @input-color-placeholder: @gray-light; -@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border -@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border -@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border +@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 @form-actions-bg: #f5f5f5; -- cgit v1.2.3 From 76ecfdfdc1ef06997eafdeef68d7a9a945614af3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 10 May 2013 10:33:35 -0700 Subject: Font-size and line-height tweaks * Use 1.428 for line-height instead of 1.5 * Use function for full pixel values instead of decimals --- less/variables.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index c8ddb0c9e..cb07c8307 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,12 +46,12 @@ @font-family-base: @font-family-sans-serif; @font-size-base: 14px; -@font-size-large: (@font-size-base * 1.25); // ~18px -@font-size-small: (@font-size-base * 0.85); // ~12px -@font-size-mini: (@font-size-base * 0.75); // ~11px +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-mini: ceil(@font-size-base * 0.75); // ~11px -@line-height-base: 1.5; -@line-height-computed: (@font-size-base * @line-height-base); +@line-height-base: 1.428; // 20/14 +@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px @line-height-headings: 1.1; @headings-font-family: inherit; // empty to use BS default, @font-family-base -- cgit v1.2.3 From 1d8ff36afa73ac086004962ec2f3d02148f8a201 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 18:55:37 -0700 Subject: Add .panel-footer --- less/variables.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index cb07c8307..4feb9879a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -331,6 +331,7 @@ @panel-border: #ddd; @panel-border-radius: @border-radius-base; @panel-heading-bg: #f5f5f5; +@panel-footer-bg: #f5f5f5; @panel-primary-text: #fff; @panel-primary-border: @brand-primary; -- cgit v1.2.3 From 28a081cb20d4e9544967e7c6d5ab31ff4ad68862 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 23:21:30 -0700 Subject: 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 --- less/variables.less | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) (limited to 'less/variables.less') 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 -- cgit v1.2.3