diff --git a/docs/base-css.html b/docs/base-css.html index c8a785fed3..ce9f168570 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -131,7 +131,7 @@
<p class="lead">...</p>
The typographic scale is based on two LESS variables in variables.less: @baseFontSize
and @baseLineHeight
. 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: @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.
margin
on the bodybackground-color: white;
on the body
@baseFontFamily
, @baseFontSize
, and @baseLineHeight
attributes as our typographic base@linkColor
and apply link underlines only on :hover
@base-font-family
, @base-font-size
, and @base-line-height
attributes as our typographic base@link-color
and apply link underlines only on :hover
These styles can be found within scaffolding.less.
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4be10716ca..e36eca2147 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: @baseFontSize
and @baseLineHeight
. 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: @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}}
margin
on the body{{/i}}background-color: white;
on the body
{{/i}}@baseFontFamily
, @baseFontSize
, and @baseLineHeight
attributes as our typographic base{{/i}}@linkColor
and apply link underlines only on :hover
{{/i}}@base-font-family
, @base-font-size
, and @base-line-height
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 6b71deefc4..697be70062 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -5,7 +5,7 @@ // Parent container .accordion { - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; } // Group == heading + body diff --git a/less/alerts.less b/less/alerts.less index 1425d06524..e0e3707c00 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -8,7 +8,7 @@ .alert { padding: 8px 35px 8px 14px; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: @warningBackground; border: 1px solid @warningBorder; @@ -28,7 +28,7 @@ position: relative; top: -2px; right: -21px; - line-height: @baseLineHeight; + line-height: @base-line-height; } diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 541bbf50de..0c9fa252e2 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -5,7 +5,7 @@ .breadcrumb { padding: 8px 15px; - margin: 0 0 @baseLineHeight; + margin: 0 0 @base-line-height; list-style: none; background-color: #f5f5f5; border-radius: @baseBorderRadius; diff --git a/less/button-groups.less b/less/button-groups.less index b6913b13c7..aa45bdd6d1 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: @baseLineHeight / 2; - margin-bottom: @baseLineHeight / 2; + margin-top: @base-line-height / 2; + margin-bottom: @base-line-height / 2; > .btn + .btn, > .btn-group + .btn, > .btn + .btn-group { @@ -40,7 +40,7 @@ .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack + font-size: @base-font-size; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes diff --git a/less/buttons.less b/less/buttons.less index a6dc00f4c1..f067cf02fc 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -11,8 +11,8 @@ display: inline-block; padding: 6px 12px; margin-bottom: 0; // For input.btn - font-size: @baseFontSize; - line-height: @baseLineHeight; + font-size: @base-font-size; + line-height: @base-line-height; text-align: center; vertical-align: middle; cursor: pointer; @@ -178,11 +178,11 @@ input[type="button"] { .btn-link { border-color: transparent; cursor: pointer; - color: @linkColor; + color: @link-color; border-radius: 0; } .btn-link:hover { - color: @linkColorHover; + color: @link-color-hover; text-decoration: underline; background-color: transparent; } diff --git a/less/carousel.less b/less/carousel.less index a7ff59f06c..a149e400db 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -5,7 +5,7 @@ .carousel { position: relative; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; line-height: 1; } @@ -137,7 +137,7 @@ .carousel-caption h3, .carousel-caption p { color: @white; - line-height: @baseLineHeight; + line-height: @base-line-height; } .carousel-caption h3 { margin: 0 0 5px; diff --git a/less/close.less b/less/close.less index c71a508f3f..9a3bfbffb6 100644 --- a/less/close.less +++ b/less/close.less @@ -7,7 +7,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: @baseLineHeight; + line-height: @base-line-height; 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 778a41beb5..5a3256ddad 100644 --- a/less/code.less +++ b/less/code.less @@ -8,7 +8,7 @@ code, pre { padding: 0 3px 2px; #font > #family > .monospace; - font-size: @baseFontSize - 2; + font-size: @base-font-size - 2; color: @grayDark; border-radius: 4px; } @@ -25,10 +25,10 @@ code { // Blocks of code pre { display: block; - padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight / 2; - font-size: @baseFontSize - 1; // 14px to 13px - line-height: @baseLineHeight; + 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; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -40,7 +40,7 @@ pre { // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; } // Account for some code outputs that place code tags in pre tags diff --git a/less/dropdowns.less b/less/dropdowns.less index aad993f6fb..d7f5d4ad06 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -69,7 +69,7 @@ padding: 3px 20px; clear: both; font-weight: normal; - line-height: @baseLineHeight; + line-height: @base-line-height; color: @dropdownLinkColor; white-space: nowrap; } diff --git a/less/forms.less b/less/forms.less index 5115f0c23d..071e33c881 100644 --- a/less/forms.less +++ b/less/forms.less @@ -7,7 +7,7 @@ // ------------------------- form { - margin: 0 0 @baseLineHeight; + margin: 0 0 @base-line-height; } fieldset { @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; + margin-bottom: @base-line-height; + font-size: @base-font-size * 1.5; + line-height: @base-line-height * 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: @baseLineHeight / 2; - font-size: @baseFontSize; - line-height: @baseLineHeight; + margin-bottom: @base-line-height / 2; + font-size: @base-font-size; + line-height: @base-line-height; color: @gray; vertical-align: middle; background-color: @inputBackground; @@ -201,7 +201,7 @@ textarea { .radio, .checkbox { display: block; - min-height: @baseLineHeight; // clear the floating input if there is no label text + min-height: @base-line-height; // clear the floating input if there is no label text padding-left: 20px; } .radio label, @@ -390,9 +390,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@baseLineHeight - 1) 20px @baseLineHeight; - margin-top: @baseLineHeight; - margin-bottom: @baseLineHeight; + padding: (@base-line-height - 1) 20px @base-line-height; + margin-top: @base-line-height; + margin-bottom: @base-line-height; background-color: @formActionsBackground; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers @@ -405,12 +405,12 @@ select:focus:invalid { .help-block, .help-inline { - color: lighten(@textColor, 25%); // lighten the text some for contrast + color: lighten(@text-color, 25%); // lighten the text some for contrast } .help-block { display: block; // account for any element using help-block - margin-bottom: @baseLineHeight / 2; + margin-bottom: @base-line-height / 2; } .help-inline { @@ -436,7 +436,7 @@ select:focus:invalid { select, .uneditable-input, .dropdown-menu { - font-size: @baseFontSize; + font-size: @base-font-size; } 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: @baseFontSize; + font-size: @base-font-size; 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: @baseLineHeight; + height: @base-line-height; min-width: 16px; padding: 6px; - font-size: @baseFontSize; + font-size: @base-font-size; font-weight: normal; - line-height: @baseLineHeight; + line-height: @base-line-height; 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: @baseLineHeight / 2; + margin-bottom: @base-line-height / 2; } // Legend collapses margin, so next element is responsible for spacing legend + .control-group { - margin-top: @baseLineHeight; + margin-top: @base-line-height; -webkit-margin-top-collapse: separate; } @@ -657,7 +657,7 @@ legend + .control-group { .form-horizontal { // Increase spacing between groups .control-group { - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; .clearfix(); } // Float the labels left @@ -683,7 +683,7 @@ legend + .control-group { .input-prepend, .input-append { + .help-block { - margin-top: @baseLineHeight / 2; + margin-top: @base-line-height / 2; } } // Move over buttons in .form-actions to align with .controls diff --git a/less/hero-unit.less b/less/hero-unit.less index 4b350983e1..47f0a9583c 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: @baseLineHeight * 1.5; + line-height: @base-line-height * 1.5; color: @heroUnitLeadColor; background-color: @heroUnitBackground; border-radius: 6px; @@ -20,6 +20,6 @@ letter-spacing: -1px; } li { - line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less + line-height: @base-line-height * 1.5; // Reset since we specify in type.less } } diff --git a/less/labels-badges.less b/less/labels-badges.less index 5c8b1c25f3..9dd4cb2b72 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -8,7 +8,7 @@ .badge { display: inline-block; padding: 2px 4px; - font-size: @baseFontSize * .846; + font-size: @base-font-size * .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 467ce14c17..e1d3190324 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -92,29 +92,29 @@ #font { #family { .serif() { - font-family: @serifFontFamily; + font-family: @font-family-serif; } .sans-serif() { - font-family: @sansFontFamily; + font-family: @font-family-sans-serif; } .monospace() { - font-family: @monoFontFamily; + font-family: @font-family-monospace; } } - .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .shorthand(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { #font > #family > .serif; #font > .shorthand(@size, @weight, @lineHeight); } - .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .sans-serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { #font > #family > .sans-serif; #font > .shorthand(@size, @weight, @lineHeight); } - .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .monospace(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) { #font > #family > .monospace; #font > .shorthand(@size, @weight, @lineHeight); } @@ -133,12 +133,12 @@ // Mixin for form field states -.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { +.formFieldState(@text-color: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { // Set the text color .control-label, .help-block, .help-inline { - color: @textColor; + color: @text-color; } // Style inputs accordingly .checkbox, @@ -146,7 +146,7 @@ input, select, textarea { - color: @textColor; + color: @text-color; } input, select, @@ -162,9 +162,9 @@ // Give a small background color for input-prepend/-append .input-prepend .add-on, .input-append .add-on { - color: @textColor; + color: @text-color; background-color: @backgroundColor; - border-color: @textColor; + border-color: @text-color; } } @@ -421,7 +421,7 @@ // Dividers (basically an hr) within dropdowns and nav lists .nav-divider(@top: #e5e5e5, @bottom: @white) { height: 1px; - margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px + margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px overflow: hidden; background-color: @top; border-bottom: 1px solid @bottom; @@ -429,8 +429,8 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; +.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @text-color; text-shadow: @textShadow; #gradient > .vertical(@startColor, @endColor); border-color: @endColor @endColor darken(@endColor, 15%); @@ -439,7 +439,7 @@ // in these cases the gradient won't cover the background, so we override &:hover, &:active, &.active, &.disabled, &[disabled] { - color: @textColor; + color: @text-color; background-color: @endColor; } diff --git a/less/navbar.less b/less/navbar.less index 2ed93d7f85..1578ddcc77 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -10,7 +10,7 @@ .navbar { overflow: visible; padding: 0 20px; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); border: 1px solid @navbarBorder; border-radius: @baseBorderRadius; @@ -39,7 +39,7 @@ float: left; display: block; // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2); + padding: ((@navbarHeight - @base-line-height) / 2) 20px ((@navbarHeight - @base-line-height) / 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 - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); + padding: ((@navbarHeight - @base-line-height) / 2) 15px ((@navbarHeight - @base-line-height) / 2); color: @navbarLinkColor; text-decoration: none; text-shadow: 0 1px 0 @navbarBackgroundHighlight; diff --git a/less/navs.less b/less/navs.less index ac3ff6aa44..6c8753c66d 100644 --- a/less/navs.less +++ b/less/navs.less @@ -8,7 +8,7 @@ .nav { margin-left: 0; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; list-style: none; .clearfix(); } @@ -41,7 +41,7 @@ padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: @baseLineHeight; + line-height: @base-line-height; 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: @baseLineHeight; + line-height: @base-line-height; border: 1px solid transparent; border-radius: 4px 4px 0 0; &:hover { @@ -83,7 +83,7 @@ .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: @gray; - background-color: @bodyBackground; + background-color: @body-background; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; @@ -106,7 +106,7 @@ .nav-pills > .active > a, .nav-pills > .active > a:hover { color: @white; - background-color: @linkColor; + background-color: @link-color; } // Stacked pills @@ -167,7 +167,7 @@ padding: 9px 15px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.15); - background-color: @linkColor; + background-color: @link-color; border-width: 0; .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)") } @@ -186,13 +186,13 @@ // ------------------------- // Make carets use linkColor to start .nav .dropdown-toggle .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; + border-top-color: @link-color; + border-bottom-color: @link-color; margin-top: 8px; } .nav .dropdown-toggle:hover .caret { - border-top-color: @linkColorHover; - border-bottom-color: @linkColorHover; + border-top-color: @link-color-hover; + border-bottom-color: @link-color-hover; } // Active dropdown links diff --git a/less/pager.less b/less/pager.less index 809ed3a9ac..3db1f8f999 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,7 +4,7 @@ .pager { - margin: @baseLineHeight 0; + margin: @base-line-height 0; list-style: none; text-align: center; .clearfix(); diff --git a/less/pagination.less b/less/pagination.less index 0056b3c9c1..36d67a7d91 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -4,7 +4,7 @@ // Space out pagination from surrounding content .pagination { - margin: @baseLineHeight 0; + margin: @base-line-height 0; } .pagination ul { @@ -24,7 +24,7 @@ .pagination ul > li > span { float: left; // Collapse white-space padding: 4px 12px; - line-height: @baseLineHeight; + line-height: @base-line-height; text-decoration: none; background-color: @paginationBackground; border: 1px solid @paginationBorder; diff --git a/less/progress-bars.less b/less/progress-bars.less index 584ef96bb1..5e3efc2af2 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -44,8 +44,8 @@ // Outer container .progress { overflow: hidden; - height: @baseLineHeight; - margin-bottom: @baseLineHeight; + height: @base-line-height; + margin-bottom: @base-line-height; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); border-radius: @baseBorderRadius; diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index c967c517b6..5104457a6f 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: @baseLineHeight; + line-height: @base-line-height; } // Update checkboxes for iOS diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 190ebb858e..6e76d7ed16 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -19,10 +19,10 @@ position: static; } .navbar-fixed-top { - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; } .navbar-fixed-bottom { - margin-top: @baseLineHeight; + margin-top: @base-line-height; } .navbar-fixed-top, .navbar-fixed-bottom { @@ -48,7 +48,7 @@ // Block-level the nav .nav-collapse .nav { float: none; - margin: 0 0 (@baseLineHeight / 2); + margin: 0 0 (@base-line-height / 2); } .nav-collapse .nav > li { float: none; @@ -133,8 +133,8 @@ .nav-collapse .navbar-form, .nav-collapse .navbar-search { float: none; - padding: (@baseLineHeight / 2) 15px; - margin: (@baseLineHeight / 2) 0; + padding: (@base-line-height / 2) 15px; + margin: (@base-line-height / 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 368a2ac015..7a2e0b1ce8 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -8,8 +8,8 @@ body { margin: 0; - color: @textColor; - background-color: @bodyBackground; + color: @text-color; + background-color: @body-background; } // Reset fonts for revelant elements @@ -18,9 +18,9 @@ input, button, select, textarea { - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; + font-family: @base-font-family; + font-size: @base-font-size; + line-height: @base-line-height; } @@ -28,11 +28,11 @@ textarea { // ------------------------- a { - color: @linkColor; + color: @link-color; text-decoration: none; } a:hover { - color: @linkColorHover; + color: @link-color-hover; text-decoration: underline; } diff --git a/less/tables.less b/less/tables.less index 9671be9bc5..d3e65e0942 100644 --- a/less/tables.less +++ b/less/tables.less @@ -17,12 +17,12 @@ table { .table { width: 100%; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; // Cells th, td { padding: 8px; - line-height: @baseLineHeight; + line-height: @base-line-height; text-align: left; vertical-align: top; border-top: 1px solid @tableBorder; diff --git a/less/thumbnails.less b/less/thumbnails.less index d2a23c7f31..9e533ecb02 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -7,7 +7,7 @@ .thumbnail { display: block; padding: 4px; - line-height: @baseLineHeight; + line-height: @base-line-height; border: 1px solid #ddd; border-radius: @baseBorderRadius; .box-shadow(0 1px 3px rgba(0,0,0,.055)); @@ -15,7 +15,7 @@ } // Add a hover state for linked versions only a.thumbnail:hover { - border-color: @linkColor; + border-color: @link-color; .box-shadow(0 1px 4px rgba(0,105,214,.25)); } diff --git a/less/type.less b/less/type.less index ec1c40ed77..cef08a512c 100644 --- a/less/type.less +++ b/less/type.less @@ -7,13 +7,13 @@ // ------------------------- p { - margin: 0 0 @baseLineHeight / 2; + margin: 0 0 @base-line-height / 2; } .lead { - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; + margin-bottom: @base-line-height; + font-size: @base-font-size * 1.5; font-weight: 200; - line-height: @baseLineHeight * 1.5; + line-height: @base-line-height * 1.5; } @@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); } // ------------------------- h1, h2, h3, h4, h5, h6 { - margin: (@baseLineHeight / 2) 0; - font-family: @headingsFontFamily; - font-weight: @headingsFontWeight; - line-height: @baseLineHeight; + margin: (@base-line-height / 2) 0; + font-family: @headings-font-family; + font-weight: @headings-font-weight; + line-height: @base-line-height; 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: @baseLineHeight * 2; } +h3 { line-height: @base-line-height * 2; } -h1 { font-size: @baseFontSize * 2.75; } // ~38px -h2 { font-size: @baseFontSize * 2.25; } // ~32px -h3 { font-size: @baseFontSize * 1.75; } // ~24px -h4 { font-size: @baseFontSize * 1.25; } // ~18px -h5 { font-size: @baseFontSize; } -h6 { font-size: @baseFontSize * 0.85; } // ~12px +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 small { font-size: @baseFontSize * 1.75; } // ~24px -h2 small { font-size: @baseFontSize * 1.25; } // ~18px -h3 small { font-size: @baseFontSize; } -h4 small { font-size: @baseFontSize; } +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; } // Page header // ------------------------- .page-header { - padding-bottom: (@baseLineHeight / 2) - 1; - margin: @baseLineHeight 0 (@baseLineHeight * 1.5); + padding-bottom: (@base-line-height / 2) - 1; + margin: @base-line-height 0 (@base-line-height * 1.5); border-bottom: 1px solid @grayLighter; } @@ -94,7 +94,7 @@ h4 small { font-size: @baseFontSize; } // Unordered and Ordered lists ul, ol { padding: 0; - margin: 0 0 @baseLineHeight / 2 25px; + margin: 0 0 @base-line-height / 2 25px; } ul ul, ul ol, @@ -103,7 +103,7 @@ ol ul { margin-bottom: 0; } li { - line-height: @baseLineHeight; + line-height: @base-line-height; } // List options @@ -123,17 +123,17 @@ li { // Description Lists dl { - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; } dt, dd { - line-height: @baseLineHeight; + line-height: @base-line-height; } dt { font-weight: bold; } dd { - margin-left: @baseLineHeight / 2; + margin-left: @base-line-height / 2; } // Horizontal layout (like forms) .dl-horizontal { @@ -155,7 +155,7 @@ dd { // Horizontal rules hr { - margin: @baseLineHeight 0; + margin: @base-line-height 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 @baseLineHeight; + margin: 0 0 @base-line-height; border-left: 5px solid @grayLighter; p { margin-bottom: 0; - #font > .shorthand(16px,300,@baseLineHeight * 1.25); + #font > .shorthand(16px,300,@base-line-height * 1.25); } small { display: block; - line-height: @baseLineHeight; + line-height: @base-line-height; color: @grayLight; &:before { content: '\2014 \00A0'; @@ -224,7 +224,7 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: @baseLineHeight; + margin-bottom: @base-line-height; font-style: normal; - line-height: @baseLineHeight; + line-height: @base-line-height; } diff --git a/less/variables.less b/less/variables.less index 2b4574f6a4..26a3ca70c1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -31,38 +31,37 @@ // Scaffolding // ------------------------- -@bodyBackground: @white; -@textColor: @grayDark; +@body-background: @white; +@text-color: @grayDark; // Links // ------------------------- -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15%); +@link-color: #08c; +@link-color-hover: darken(@link-color, 15%); // Typography // ------------------------- -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; +@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; -@baseFontSize: 14px; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 20px; -@altFontFamily: @serifFontFamily; +@base-font-size: 14px; +@base-font-family: @font-family-sans-serif; +@base-line-height: 20px; -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold +@headings-font-family: inherit; // empty to use BS default, @base-font-family +@headings-font-weight: bold; // instead of browser default, bold // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height -@fontSizeLarge: @baseFontSize * 1.25; // ~18px -@fontSizeSmall: @baseFontSize * 0.85; // ~12px -@fontSizeMini: @baseFontSize * 0.75; // ~11px +@fontSizeLarge: @base-font-size * 1.25; // ~18px +@fontSizeSmall: @base-font-size * 0.85; // ~12px +@fontSizeMini: @base-font-size * 0.75; // ~11px @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px @@ -87,7 +86,7 @@ @btnBackgroundHighlight: darken(@white, 10%); @btnBorder: #bbb; -@btnPrimaryBackground: @linkColor; +@btnPrimaryBackground: @link-color; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @@ -114,7 +113,7 @@ @inputSearchBorderRadius: 20px; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; -@inputHeight: @baseLineHeight + 14px; // base line-height + 12px vertical padding + 2px top/bottom border +@inputHeight: @base-line-height + 14px; // base line-height + 12px vertical padding + 2px top/bottom border // Dropdowns @@ -128,7 +127,7 @@ @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; -@dropdownLinkBackgroundActive: @linkColor; +@dropdownLinkBackgroundActive: @link-color; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;