<p class="lead">...</p>
The typographic scale is based on two LESS variables in variables.less: @base-font-size and @base-line-height. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
margin on the bodybackground-color: white; on the body@base-font-family, @base-font-size, and @base-line-height attributes as our typographic base@font-family-base, @font-size-base, and @line-height-base attributes as our typographic base@link-color and apply link underlines only on :hoverThese styles can be found within scaffolding.less.
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e36eca2147..a5dc0b07c4 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -67,7 +67,7 @@ {{! Using LESS }}{{_i}}The typographic scale is based on two LESS variables in variables.less: @base-font-size and @base-line-height. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}
{{_i}}The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}
margin on the body{{/i}}background-color: white; on the body{{/i}}@base-font-family, @base-font-size, and @base-line-height attributes as our typographic base{{/i}}@font-family-base, @font-size-base, and @line-height-base attributes as our typographic base{{/i}}@link-color and apply link underlines only on :hover{{/i}}{{_i}}These styles can be found within scaffolding.less.{{/i}}
diff --git a/less/accordion.less b/less/accordion.less index 697be70062..064377d05b 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -5,14 +5,14 @@ // Parent container .accordion { - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; } // Group == heading + body .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; } .accordion-heading { border-bottom: 0; diff --git a/less/alerts.less b/less/alerts.less index e0e3707c00..60f0b2a275 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -8,11 +8,11 @@ .alert { padding: 8px 35px 8px 14px; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: @warningBackground; border: 1px solid @warningBorder; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; } .alert, .alert h4 { @@ -28,7 +28,7 @@ position: relative; top: -2px; right: -21px; - line-height: @base-line-height; + line-height: @line-height-base; } diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 0c9fa252e2..8553147ccf 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -5,10 +5,10 @@ .breadcrumb { padding: 8px 15px; - margin: 0 0 @base-line-height; + margin: 0 0 @line-height-base; list-style: none; background-color: #f5f5f5; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; li { display: inline-block; text-shadow: 0 1px 0 @white; diff --git a/less/button-groups.less b/less/button-groups.less index aa45bdd6d1..6ad5226701 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -20,8 +20,8 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { font-size: 0; // Hack to remove whitespace that results from using inline-block - margin-top: @base-line-height / 2; - margin-bottom: @base-line-height / 2; + margin-top: @line-height-base / 2; + margin-bottom: @line-height-base / 2; > .btn + .btn, > .btn-group + .btn, > .btn + .btn-group { @@ -40,42 +40,42 @@ .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover { - font-size: @base-font-size; // redeclare as part 2 of font-size inline-block hack + font-size: @font-size-base; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes .btn-group > .btn-mini { - font-size: @fontSizeMini; + font-size: @font-size-mini; } .btn-group > .btn-small { - font-size: @fontSizeSmall; + font-size: @font-size-small; } .btn-group > .btn-large { - font-size: @fontSizeLarge; + font-size: @font-size-large; } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; - .border-top-left-radius(@baseBorderRadius); - .border-bottom-left-radius(@baseBorderRadius); + .border-top-left-radius(@border-radius-base); + .border-bottom-left-radius(@border-radius-base); } // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it .btn-group > .btn:last-child, .btn-group > .dropdown-toggle { - .border-top-right-radius(@baseBorderRadius); - .border-bottom-right-radius(@baseBorderRadius); + .border-top-right-radius(@border-radius-base); + .border-bottom-right-radius(@border-radius-base); } // Reset corners for large buttons .btn-group > .btn.large:first-child { margin-left: 0; - .border-top-left-radius(@borderRadiusLarge); - .border-bottom-left-radius(@borderRadiusLarge); + .border-top-left-radius(@border-radius-large); + .border-bottom-left-radius(@border-radius-large); } .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle { - .border-top-right-radius(@borderRadiusLarge); - .border-bottom-right-radius(@borderRadiusLarge); + .border-top-right-radius(@border-radius-large); + .border-bottom-right-radius(@border-radius-large); } // On hover/focus/active, bring the proper btn to front @@ -201,14 +201,14 @@ margin-top: -1px; } .btn-group-vertical .btn:first-child { - border-radius: @baseBorderRadius @baseBorderRadius 0 0; + border-radius: @border-radius-base @border-radius-base 0 0; } .btn-group-vertical .btn:last-child { - border-radius: 0 0 @baseBorderRadius @baseBorderRadius; + border-radius: 0 0 @border-radius-base @border-radius-base; } .btn-group-vertical .btn-large:first-child { - border-radius: @borderRadiusLarge @borderRadiusLarge 0 0; + border-radius: @border-radius-large @border-radius-large 0 0; } .btn-group-vertical .btn-large:last-child { - border-radius: 0 0 @borderRadiusLarge @borderRadiusLarge; + border-radius: 0 0 @border-radius-large @border-radius-large; } diff --git a/less/buttons.less b/less/buttons.less index f067cf02fc..4da9112c05 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -11,15 +11,15 @@ display: inline-block; padding: 6px 12px; margin-bottom: 0; // For input.btn - font-size: @base-font-size; - line-height: @base-line-height; + font-size: @font-size-base; + line-height: @line-height-base; text-align: center; vertical-align: middle; cursor: pointer; .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; border-bottom-color: darken(@btnBorder, 10%); - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover state @@ -63,23 +63,23 @@ // Large .btn-large { - padding: @paddingLarge; - font-size: @fontSizeLarge; - border-radius: @borderRadiusLarge; + padding: @padding-large; + font-size: @font-size-large; + border-radius: @border-radius-large; } // Small .btn-small { - padding: @paddingSmall; - font-size: @fontSizeSmall; - border-radius: @borderRadiusSmall; + padding: @padding-small; + font-size: @font-size-small; + border-radius: @border-radius-small; } // Mini .btn-mini { - padding: @paddingMini; - font-size: @fontSizeMini; - border-radius: @borderRadiusSmall; + padding: @padding-mini; + font-size: @font-size-mini; + border-radius: @border-radius-small; } diff --git a/less/carousel.less b/less/carousel.less index a149e400db..89965e54ce 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -5,7 +5,7 @@ .carousel { position: relative; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; line-height: 1; } @@ -137,7 +137,7 @@ .carousel-caption h3, .carousel-caption p { color: @white; - line-height: @base-line-height; + line-height: @line-height-base; } .carousel-caption h3 { margin: 0 0 5px; diff --git a/less/close.less b/less/close.less index 9a3bfbffb6..24689fd9d0 100644 --- a/less/close.less +++ b/less/close.less @@ -7,7 +7,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: @base-line-height; + line-height: @line-height-base; color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); diff --git a/less/code.less b/less/code.less index 5a3256ddad..fb229d6847 100644 --- a/less/code.less +++ b/less/code.less @@ -8,7 +8,7 @@ code, pre { padding: 0 3px 2px; #font > #family > .monospace; - font-size: @base-font-size - 2; + font-size: @font-size-base - 2; color: @grayDark; border-radius: 4px; } @@ -25,10 +25,10 @@ code { // Blocks of code pre { display: block; - padding: (@base-line-height - 1) / 2; - margin: 0 0 @base-line-height / 2; - font-size: @base-font-size - 1; // 14px to 13px - line-height: @base-line-height; + padding: (@line-height-base - 1) / 2; + margin: 0 0 @line-height-base / 2; + font-size: @font-size-base - 1; // 14px to 13px + line-height: @line-height-base; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -36,11 +36,11 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; // IE8 fallback border: 1px solid rgba(0,0,0,.15); - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; } // Account for some code outputs that place code tags in pre tags diff --git a/less/dropdowns.less b/less/dropdowns.less index d7f5d4ad06..69b89f2a8b 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -48,7 +48,7 @@ background-color: @dropdownBackground; border: 1px solid #ccc; // IE8 fallback border: 1px solid @dropdownBorder; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(0 5px 10px rgba(0,0,0,.2)); .background-clip(padding-box); @@ -69,7 +69,7 @@ padding: 3px 20px; clear: both; font-weight: normal; - line-height: @base-line-height; + line-height: @line-height-base; color: @dropdownLinkColor; white-space: nowrap; } diff --git a/less/forms.less b/less/forms.less index 071e33c881..98955a567f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -7,7 +7,7 @@ // ------------------------- form { - margin: 0 0 @base-line-height; + margin: 0 0 @line-height-base; } fieldset { @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @base-line-height; - font-size: @base-font-size * 1.5; - line-height: @base-line-height * 2; + margin-bottom: @line-height-base; + font-size: @font-size-base * 1.5; + line-height: @line-height-base * 2; color: @grayDark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -59,9 +59,9 @@ input[type="color"], .box-sizing(border-box); // Makes inputs behave like true block-level elements min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; - margin-bottom: @base-line-height / 2; - font-size: @base-font-size; - line-height: @base-line-height; + margin-bottom: @line-height-base / 2; + font-size: @font-size-base; + line-height: @line-height-base; color: @gray; vertical-align: middle; background-color: @inputBackground; @@ -201,7 +201,7 @@ textarea { .radio, .checkbox { display: block; - min-height: @base-line-height; // clear the floating input if there is no label text + min-height: @line-height-base; // clear the floating input if there is no label text padding-left: 20px; } .radio label, @@ -257,21 +257,21 @@ input[type="tel"], input[type="color"], .uneditable-input { &.input-large { - padding: @paddingLarge; + padding: @padding-large; padding-left: 14px; padding-right: 14px; // TODO: Resolve this override - font-size: @fontSizeLarge; - border-radius: @borderRadiusLarge; + font-size: @font-size-large; + border-radius: @border-radius-large; } &.input-small { - padding: @paddingSmall; - font-size: @fontSizeSmall; - border-radius: @borderRadiusSmall; + padding: @padding-small; + font-size: @font-size-small; + border-radius: @border-radius-small; } &.input-mini { - padding: @paddingMini; - font-size: @fontSizeMini; - border-radius: @borderRadiusSmall; + padding: @padding-mini; + font-size: @font-size-mini; + border-radius: @border-radius-small; } } @@ -390,9 +390,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@base-line-height - 1) 20px @base-line-height; - margin-top: @base-line-height; - margin-bottom: @base-line-height; + padding: (@line-height-base - 1) 20px @line-height-base; + margin-top: @line-height-base; + margin-bottom: @line-height-base; background-color: @formActionsBackground; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers @@ -410,7 +410,7 @@ select:focus:invalid { .help-block { display: block; // account for any element using help-block - margin-bottom: @base-line-height / 2; + margin-bottom: @line-height-base / 2; } .help-inline { @@ -436,7 +436,7 @@ select:focus:invalid { select, .uneditable-input, .dropdown-menu { - font-size: @base-font-size; + font-size: @font-size-base; } input, @@ -445,7 +445,7 @@ select:focus:invalid { position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness float: none; // Undo the float from grid sizing margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms - font-size: @base-font-size; + font-size: @font-size-base; vertical-align: top; border-radius: 0 @inputBorderRadius @inputBorderRadius 0; // Make input on top when focused so blue border and shadow always show @@ -461,12 +461,12 @@ select:focus:invalid { .add-on { display: inline-block; width: auto; - height: @base-line-height; + height: @line-height-base; min-width: 16px; padding: 6px; - font-size: @base-font-size; + font-size: @font-size-base; font-weight: normal; - line-height: @base-line-height; + line-height: @line-height-base; text-align: center; text-shadow: 0 1px 0 @white; background-color: @grayLighter; @@ -642,12 +642,12 @@ input.search-query { // Margin to space out fieldsets .control-group { - margin-bottom: @base-line-height / 2; + margin-bottom: @line-height-base / 2; } // Legend collapses margin, so next element is responsible for spacing legend + .control-group { - margin-top: @base-line-height; + margin-top: @line-height-base; -webkit-margin-top-collapse: separate; } @@ -657,7 +657,7 @@ legend + .control-group { .form-horizontal { // Increase spacing between groups .control-group { - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; .clearfix(); } // Float the labels left @@ -683,7 +683,7 @@ legend + .control-group { .input-prepend, .input-append { + .help-block { - margin-top: @base-line-height / 2; + margin-top: @line-height-base / 2; } } // Move over buttons in .form-actions to align with .controls diff --git a/less/hero-unit.less b/less/hero-unit.less index 47f0a9583c..f771fad027 100644 --- a/less/hero-unit.less +++ b/less/hero-unit.less @@ -8,7 +8,7 @@ margin-bottom: 30px; font-size: 18px; font-weight: 200; - line-height: @base-line-height * 1.5; + line-height: @line-height-base * 1.5; color: @heroUnitLeadColor; background-color: @heroUnitBackground; border-radius: 6px; @@ -20,6 +20,6 @@ letter-spacing: -1px; } li { - line-height: @base-line-height * 1.5; // Reset since we specify in type.less + line-height: @line-height-base * 1.5; // Reset since we specify in type.less } } diff --git a/less/labels-badges.less b/less/labels-badges.less index 9dd4cb2b72..7e5999351b 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -8,7 +8,7 @@ .badge { display: inline-block; padding: 2px 4px; - font-size: @base-font-size * .846; + font-size: @font-size-base * .846; font-weight: bold; line-height: 14px; // ensure proper line-height if floated color: @white; diff --git a/less/mixins.less b/less/mixins.less index e1d3190324..f6c40b20e8 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -101,20 +101,20 @@ font-family: @font-family-monospace; } } - .shorthand(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { + .shorthand(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { + .serif(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) { #font > #family > .serif; #font > .shorthand(@size, @weight, @lineHeight); } - .sans-serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { + .sans-serif(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) { #font > #family > .sans-serif; #font > .shorthand(@size, @weight, @lineHeight); } - .monospace(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { + .monospace(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) { #font > #family > .monospace; #font > .shorthand(@size, @weight, @lineHeight); } @@ -421,7 +421,7 @@ // Dividers (basically an hr) within dropdowns and nav lists .nav-divider(@top: #e5e5e5, @bottom: @white) { height: 1px; - margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px + margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px overflow: hidden; background-color: @top; border-bottom: 1px solid @bottom; diff --git a/less/navbar.less b/less/navbar.less index 1578ddcc77..43b0005b57 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -10,10 +10,10 @@ .navbar { overflow: visible; padding: 0 20px; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); border: 1px solid @navbarBorder; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(0 1px 4px rgba(0,0,0,.065)); // Prevent floats from breaking the navbar @@ -39,7 +39,7 @@ float: left; display: block; // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @base-line-height) / 2) 20px ((@navbarHeight - @base-line-height) / 2); + padding: ((@navbarHeight - @line-height-base) / 2) 20px ((@navbarHeight - @line-height-base) / 2); margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; @@ -215,7 +215,7 @@ .navbar .nav > li > a { float: none; // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @base-line-height) / 2) 15px ((@navbarHeight - @base-line-height) / 2); + padding: ((@navbarHeight - @line-height-base) / 2) 15px ((@navbarHeight - @line-height-base) / 2); color: @navbarLinkColor; text-decoration: none; text-shadow: 0 1px 0 @navbarBackgroundHighlight; diff --git a/less/navs.less b/less/navs.less index 6c8753c66d..9f2491b55e 100644 --- a/less/navs.less +++ b/less/navs.less @@ -8,7 +8,7 @@ .nav { margin-left: 0; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; list-style: none; .clearfix(); } @@ -41,7 +41,7 @@ padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: @base-line-height; + line-height: @line-height-base; color: @grayLight; text-shadow: 0 1px 0 rgba(255,255,255,.5); text-transform: uppercase; @@ -72,7 +72,7 @@ // Actual tabs (as links) .nav-tabs > li > a { margin-right: 2px; - line-height: @base-line-height; + line-height: @line-height-base; border: 1px solid transparent; border-radius: 4px 4px 0 0; &:hover { diff --git a/less/pager.less b/less/pager.less index 3db1f8f999..be72b8078d 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,7 +4,7 @@ .pager { - margin: @base-line-height 0; + margin: @line-height-base 0; list-style: none; text-align: center; .clearfix(); diff --git a/less/pagination.less b/less/pagination.less index 36d67a7d91..84ccf042dd 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -4,7 +4,7 @@ // Space out pagination from surrounding content .pagination { - margin: @base-line-height 0; + margin: @line-height-base 0; } .pagination ul { @@ -14,7 +14,7 @@ margin-left: 0; margin-bottom: 0; // Visuals - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(0 1px 2px rgba(0,0,0,.05)); } .pagination ul > li { @@ -24,7 +24,7 @@ .pagination ul > li > span { float: left; // Collapse white-space padding: 4px 12px; - line-height: @base-line-height; + line-height: @line-height-base; text-decoration: none; background-color: @paginationBackground; border: 1px solid @paginationBorder; @@ -50,11 +50,11 @@ .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; - .border-left-radius(@baseBorderRadius); + .border-left-radius(@border-radius-base); } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { - .border-right-radius(@baseBorderRadius); + .border-right-radius(@border-radius-base); } @@ -76,16 +76,16 @@ .pagination-large { ul > li > a, ul > li > span { - padding: @paddingLarge; - font-size: @fontSizeLarge; + padding: @padding-large; + font-size: @font-size-large; } ul > li:first-child > a, ul > li:first-child > span { - .border-left-radius(@borderRadiusLarge); + .border-left-radius(@border-radius-large); } ul > li:last-child > a, ul > li:last-child > span { - .border-right-radius(@borderRadiusLarge); + .border-right-radius(@border-radius-large); } } @@ -94,11 +94,11 @@ .pagination-small { ul > li:first-child > a, ul > li:first-child > span { - .border-left-radius(@borderRadiusSmall); + .border-left-radius(@border-radius-small); } ul > li:last-child > a, ul > li:last-child > span { - .border-right-radius(@borderRadiusSmall); + .border-right-radius(@border-radius-small); } } @@ -106,15 +106,15 @@ .pagination-small { ul > li > a, ul > li > span { - padding: @paddingSmall; - font-size: @fontSizeSmall; + padding: @padding-small; + font-size: @font-size-small; } } // Mini .pagination-mini { ul > li > a, ul > li > span { - padding: @paddingMini; - font-size: @fontSizeMini; + padding: @padding-mini; + font-size: @font-size-mini; } } diff --git a/less/progress-bars.less b/less/progress-bars.less index 5e3efc2af2..c5ea2a529e 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -44,11 +44,11 @@ // Outer container .progress { overflow: hidden; - height: @base-line-height; - margin-bottom: @base-line-height; + height: @line-height-base; + margin-bottom: @line-height-base; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; } // Bar of progress diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 5104457a6f..1d88ddf949 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -104,7 +104,7 @@ // Block level the page header small tag for readability .page-header h1 small { display: block; - line-height: @base-line-height; + line-height: @line-height-base; } // Update checkboxes for iOS diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 6e76d7ed16..e0c0df6b16 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -19,10 +19,10 @@ position: static; } .navbar-fixed-top { - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; } .navbar-fixed-bottom { - margin-top: @base-line-height; + margin-top: @line-height-base; } .navbar-fixed-top, .navbar-fixed-bottom { @@ -48,7 +48,7 @@ // Block-level the nav .nav-collapse .nav { float: none; - margin: 0 0 (@base-line-height / 2); + margin: 0 0 (@line-height-base / 2); } .nav-collapse .nav > li { float: none; @@ -75,7 +75,7 @@ .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; @@ -133,8 +133,8 @@ .nav-collapse .navbar-form, .nav-collapse .navbar-search { float: none; - padding: (@base-line-height / 2) 15px; - margin: (@base-line-height / 2) 0; + padding: (@line-height-base / 2) 15px; + margin: (@line-height-base / 2) 0; border-top: 1px solid @navbarBackground; border-bottom: 1px solid @navbarBackground; .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); diff --git a/less/scaffolding.less b/less/scaffolding.less index 7a2e0b1ce8..649b5f94c8 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -18,9 +18,9 @@ input, button, select, textarea { - font-family: @base-font-family; - font-size: @base-font-size; - line-height: @base-line-height; + font-family: @font-family-base; + font-size: @font-size-base; + line-height: @line-height-base; } diff --git a/less/tables.less b/less/tables.less index d3e65e0942..c42aca6a15 100644 --- a/less/tables.less +++ b/less/tables.less @@ -17,12 +17,12 @@ table { .table { width: 100%; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; // Cells th, td { padding: 8px; - line-height: @base-line-height; + line-height: @line-height-base; text-align: left; vertical-align: top; border-top: 1px solid @tableBorder; @@ -70,7 +70,7 @@ table { border: 1px solid @tableBorder; border-collapse: separate; // Done so we can round those corners! border-left: 0; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; th, td { border-left: 1px solid @tableBorder; @@ -90,22 +90,22 @@ table { // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - .border-top-left-radius(@baseBorderRadius); + .border-top-left-radius(@border-radius-base); } thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { - .border-top-right-radius(@baseBorderRadius); + .border-top-right-radius(@border-radius-base); } // For first th or td in the last row in the last thead or tbody thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child, tfoot:last-child tr:last-child td:first-child { - .border-bottom-left-radius(@baseBorderRadius); + .border-bottom-left-radius(@border-radius-base); } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child, tfoot:last-child tr:last-child td:last-child { - .border-bottom-right-radius(@baseBorderRadius); + .border-bottom-right-radius(@border-radius-base); } // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot @@ -122,13 +122,13 @@ table { caption + tbody tr:first-child td:first-child, colgroup + thead tr:first-child th:first-child, colgroup + tbody tr:first-child td:first-child { - .border-top-left-radius(@baseBorderRadius); + .border-top-left-radius(@border-radius-base); } caption + thead tr:first-child th:last-child, caption + tbody tr:first-child td:last-child, colgroup + thead tr:first-child th:last-child, colgroup + tbody tr:first-child td:last-child { - .border-top-right-radius(@baseBorderRadius); + .border-top-right-radius(@border-radius-base); } } diff --git a/less/thumbnails.less b/less/thumbnails.less index 9e533ecb02..78dbefbdc7 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -7,9 +7,9 @@ .thumbnail { display: block; padding: 4px; - line-height: @base-line-height; + line-height: @line-height-base; border: 1px solid #ddd; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(0 1px 3px rgba(0,0,0,.055)); .transition(all .2s ease-in-out); } diff --git a/less/tooltip.less b/less/tooltip.less index 34f4a905f6..5fdaa80eff 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -27,7 +27,7 @@ text-align: center; text-decoration: none; background-color: @tooltipBackground; - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; } // Arrows diff --git a/less/type.less b/less/type.less index cef08a512c..28b68bb37b 100644 --- a/less/type.less +++ b/less/type.less @@ -7,13 +7,13 @@ // ------------------------- p { - margin: 0 0 @base-line-height / 2; + margin: 0 0 @line-height-base / 2; } .lead { - margin-bottom: @base-line-height; - font-size: @base-font-size * 1.5; + margin-bottom: @line-height-base; + font-size: @font-size-base * 1.5; font-weight: 200; - line-height: @base-line-height * 1.5; + line-height: @line-height-base * 1.5; } @@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); } // ------------------------- h1, h2, h3, h4, h5, h6 { - margin: (@base-line-height / 2) 0; + margin: (@line-height-base / 2) 0; font-family: @headings-font-family; font-weight: @headings-font-weight; - line-height: @base-line-height; + line-height: @line-height-base; text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; @@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 { h1, h2, -h3 { line-height: @base-line-height * 2; } +h3 { line-height: @line-height-base * 2; } -h1 { font-size: @base-font-size * 2.75; } // ~38px -h2 { font-size: @base-font-size * 2.25; } // ~32px -h3 { font-size: @base-font-size * 1.75; } // ~24px -h4 { font-size: @base-font-size * 1.25; } // ~18px -h5 { font-size: @base-font-size; } -h6 { font-size: @base-font-size * 0.85; } // ~12px +h1 { font-size: @font-size-base * 2.75; } // ~38px +h2 { font-size: @font-size-base * 2.25; } // ~32px +h3 { font-size: @font-size-base * 1.75; } // ~24px +h4 { font-size: @font-size-base * 1.25; } // ~18px +h5 { font-size: @font-size-base; } +h6 { font-size: @font-size-base * 0.85; } // ~12px -h1 small { font-size: @base-font-size * 1.75; } // ~24px -h2 small { font-size: @base-font-size * 1.25; } // ~18px -h3 small { font-size: @base-font-size; } -h4 small { font-size: @base-font-size; } +h1 small { font-size: @font-size-base * 1.75; } // ~24px +h2 small { font-size: @font-size-base * 1.25; } // ~18px +h3 small { font-size: @font-size-base; } +h4 small { font-size: @font-size-base; } // Page header // ------------------------- .page-header { - padding-bottom: (@base-line-height / 2) - 1; - margin: @base-line-height 0 (@base-line-height * 1.5); + padding-bottom: (@line-height-base / 2) - 1; + margin: @line-height-base 0 (@line-height-base * 1.5); border-bottom: 1px solid @grayLighter; } @@ -94,7 +94,7 @@ h4 small { font-size: @base-font-size; } // Unordered and Ordered lists ul, ol { padding: 0; - margin: 0 0 @base-line-height / 2 25px; + margin: 0 0 @line-height-base / 2 25px; } ul ul, ul ol, @@ -103,7 +103,7 @@ ol ul { margin-bottom: 0; } li { - line-height: @base-line-height; + line-height: @line-height-base; } // List options @@ -123,17 +123,17 @@ li { // Description Lists dl { - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; } dt, dd { - line-height: @base-line-height; + line-height: @line-height-base; } dt { font-weight: bold; } dd { - margin-left: @base-line-height / 2; + margin-left: @line-height-base / 2; } // Horizontal layout (like forms) .dl-horizontal { @@ -155,7 +155,7 @@ dd { // Horizontal rules hr { - margin: @base-line-height 0; + margin: @line-height-base 0; border: 0; border-top: 1px solid @hrBorder; border-bottom: 1px solid @white; @@ -176,15 +176,15 @@ abbr.initialism { // Blockquotes blockquote { padding: 0 0 0 15px; - margin: 0 0 @base-line-height; + margin: 0 0 @line-height-base; border-left: 5px solid @grayLighter; p { margin-bottom: 0; - #font > .shorthand(16px,300,@base-line-height * 1.25); + #font > .shorthand(16px,300,@line-height-base * 1.25); } small { display: block; - line-height: @base-line-height; + line-height: @line-height-base; color: @grayLight; &:before { content: '\2014 \00A0'; @@ -224,7 +224,7 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: @base-line-height; + margin-bottom: @line-height-base; font-style: normal; - line-height: @base-line-height; + line-height: @line-height-base; } diff --git a/less/variables.less b/less/variables.less index 26a3ca70c1..6623b288b4 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,30 +46,30 @@ @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-base: @font-family-sans-serif; -@base-font-size: 14px; -@base-font-family: @font-family-sans-serif; -@base-line-height: 20px; +@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 -@headings-font-family: inherit; // empty to use BS default, @base-font-family +@line-height-base: 20px; + +@headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: bold; // instead of browser default, bold // Component sizing // ------------------------- -// Based on 14px font-size and 20px line-height +// Based on 14px font-size and 1.5 line-height -@fontSizeLarge: @base-font-size * 1.25; // ~18px -@fontSizeSmall: @base-font-size * 0.85; // ~12px -@fontSizeMini: @base-font-size * 0.75; // ~11px +@padding-large: 11px 19px; // 44px +@padding-small: 2px 10px; // 26px +@padding-mini: 0 6px; // 22px -@paddingLarge: 11px 19px; // 44px -@paddingSmall: 2px 10px; // 26px -@paddingMini: 0 6px; // 22px - -@baseBorderRadius: 4px; -@borderRadiusLarge: 6px; -@borderRadiusSmall: 3px; +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; // Tables @@ -109,11 +109,11 @@ // ------------------------- @inputBackground: @white; @inputBorder: #ccc; -@inputBorderRadius: @baseBorderRadius; +@inputBorderRadius: @border-radius-base; @inputSearchBorderRadius: 20px; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; -@inputHeight: @base-line-height + 14px; // base line-height + 12px vertical padding + 2px top/bottom border +@inputHeight: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border // Dropdowns diff --git a/less/wells.less b/less/wells.less index 33cd07a985..5ada844b59 100644 --- a/less/wells.less +++ b/less/wells.less @@ -10,7 +10,7 @@ margin-bottom: 20px; background-color: @wellBackground; border: 1px solid darken(@wellBackground, 7%); - border-radius: @baseBorderRadius; + border-radius: @border-radius-base; .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; @@ -21,9 +21,9 @@ // Sizes .well-large { padding: 24px; - border-radius: @borderRadiusLarge; + border-radius: @border-radius-large; } .well-small { padding: 9px; - border-radius: @borderRadiusSmall; + border-radius: @border-radius-small; }