Skip to content

B
bootstrap
Commit 7a3d15eb authored by Mark Otto's avatar Mark Otto
Browse files
Options

Part 1 of unCamelCasing variables

parent fe8061b8
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 196 deletions
docs/base-css.html
View file @ 7a3d15eb
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
<pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre> <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
<h3>Built with Less</h3> <h3>Built with Less</h3>
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. 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.</p> <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. 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.</p>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
docs/customize.html
View file @ 7a3d15eb
...@@ -237,16 +237,16 @@ ...@@ -237,16 +237,16 @@
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="span3">
<h3>Scaffolding</h3> <h3>Scaffolding</h3>
<label>@bodyBackground</label> <label>@body-background</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@textColor</label> <label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark"> <input type="text" class="span3" placeholder="@grayDark">
<h3>Links</h3> <h3>Links</h3>
<label>@linkColor</label> <label>@link-color</label>
<input type="text" class="span3" placeholder="#08c"> <input type="text" class="span3" placeholder="#08c">
<label>@linkColorHover</label> <label>@link-color-hover</label>
<input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
<h3>Colors</h3> <h3>Colors</h3>
<label>@blue</label> <label>@blue</label>
<input type="text" class="span3" placeholder="#049cdb"> <input type="text" class="span3" placeholder="#049cdb">
...@@ -289,35 +289,33 @@ ...@@ -289,35 +289,33 @@
<div class="span3"> <div class="span3">
<h3>Typography</h3> <h3>Typography</h3>
<label>@sansFontFamily</label> <label>@font-family-sans-serif</label>
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@serifFontFamily</label> <label>@font-family-serif</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif"> <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
<label>@monoFontFamily</label> <label>@font-family-monospace</label>
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace"> <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
<label>@baseFontSize</label> <label>@base-font-size</label>
<input type="text" class="span3" placeholder="14px"> <input type="text" class="span3" placeholder="14px">
<label>@baseFontFamily</label> <label>@base-font-family</label>
<input type="text" class="span3" placeholder="@sansFontFamily"> <input type="text" class="span3" placeholder="@font-family-sans-serif">
<label>@baseLineHeight</label> <label>@base-line-height</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@altFontFamily</label> <label>@headings-font-family</label>
<input type="text" class="span3" placeholder="@serifFontFamily">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label> <label>@headings-font-weight</label>
<input type="text" class="span3" placeholder="bold"> <input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label> <label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" class="span3" placeholder="inherit">
<label>@fontSizeLarge</label> <label>@fontSizeLarge</label>
<input type="text" class="span3" placeholder="@baseFontSize * 1.25"> <input type="text" class="span3" placeholder="@base-font-size * 1.25">
<label>@fontSizeSmall</label> <label>@fontSizeSmall</label>
<input type="text" class="span3" placeholder="@baseFontSize * 0.85"> <input type="text" class="span3" placeholder="@base-font-size * 0.85">
<label>@fontSizeMini</label> <label>@fontSizeMini</label>
<input type="text" class="span3" placeholder="@baseFontSize * 0.75"> <input type="text" class="span3" placeholder="@base-font-size * 0.75">
<label>@paddingLarge</label> <label>@paddingLarge</label>
<input type="text" class="span3" placeholder="11px 19px"> <input type="text" class="span3" placeholder="11px 19px">
...@@ -364,7 +362,7 @@ ...@@ -364,7 +362,7 @@
<label>@formActionsBackground</label> <label>@formActionsBackground</label>
<input type="text" class="span3" placeholder="#f5f5f5"> <input type="text" class="span3" placeholder="#f5f5f5">
<label>@btnPrimaryBackground</label> <label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor"> <input type="text" class="span3" placeholder="@link-color">
<label>@btnPrimaryBackgroundHighlight</label> <label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%)"> <input type="text" class="span3" placeholder="darken(@white, 10%)">
...@@ -434,7 +432,7 @@ ...@@ -434,7 +432,7 @@
<label>@dropdownLinkColorHover</label> <label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label> <label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor"> <input type="text" class="span3" placeholder="@link-color">
</div><!-- /span --> </div><!-- /span -->
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/scaffolding.html
View file @ 7a3d15eb
...@@ -113,8 +113,8 @@ ...@@ -113,8 +113,8 @@
<ul> <ul>
<li>Remove <code>margin</code> on the body</li> <li>Remove <code>margin</code> on the body</li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li> <li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base</li> <li>Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li> <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul> </ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p> <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
......
docs/templates/pages/base-css.mustache
View file @ 7a3d15eb
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
{{! Using LESS }} {{! Using LESS }}
<h3>{{_i}}Built with Less{{/i}}</h3> <h3>{{_i}}Built with Less{{/i}}</h3>
<p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. 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}}</p> <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. 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}}</p>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
docs/templates/pages/customize.mustache
View file @ 7a3d15eb
...@@ -169,16 +169,16 @@ ...@@ -169,16 +169,16 @@
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="span3">
<h3>{{_i}}Scaffolding{{/i}}</h3> <h3>{{_i}}Scaffolding{{/i}}</h3>
<label>@bodyBackground</label> <label>@body-background</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@textColor</label> <label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark"> <input type="text" class="span3" placeholder="@grayDark">
<h3>{{_i}}Links{{/i}}</h3> <h3>{{_i}}Links{{/i}}</h3>
<label>@linkColor</label> <label>@link-color</label>
<input type="text" class="span3" placeholder="#08c"> <input type="text" class="span3" placeholder="#08c">
<label>@linkColorHover</label> <label>@link-color-hover</label>
<input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
<h3>{{_i}}Colors{{/i}}</h3> <h3>{{_i}}Colors{{/i}}</h3>
<label>@blue</label> <label>@blue</label>
<input type="text" class="span3" placeholder="#049cdb"> <input type="text" class="span3" placeholder="#049cdb">
...@@ -221,35 +221,33 @@ ...@@ -221,35 +221,33 @@
<div class="span3"> <div class="span3">
<h3>{{_i}}Typography{{/i}}</h3> <h3>{{_i}}Typography{{/i}}</h3>
<label>@sansFontFamily</label> <label>@font-family-sans-serif</label>
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@serifFontFamily</label> <label>@font-family-serif</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif"> <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
<label>@monoFontFamily</label> <label>@font-family-monospace</label>
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace"> <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
<label>@baseFontSize</label> <label>@base-font-size</label>
<input type="text" class="span3" placeholder="14px"> <input type="text" class="span3" placeholder="14px">
<label>@baseFontFamily</label> <label>@base-font-family</label>
<input type="text" class="span3" placeholder="@sansFontFamily"> <input type="text" class="span3" placeholder="@font-family-sans-serif">
<label>@baseLineHeight</label> <label>@base-line-height</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@altFontFamily</label> <label>@headings-font-family</label>
<input type="text" class="span3" placeholder="@serifFontFamily">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label> <label>@headings-font-weight</label>
<input type="text" class="span3" placeholder="bold"> <input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label> <label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" class="span3" placeholder="inherit">
<label>@fontSizeLarge</label> <label>@fontSizeLarge</label>
<input type="text" class="span3" placeholder="@baseFontSize * 1.25"> <input type="text" class="span3" placeholder="@base-font-size * 1.25">
<label>@fontSizeSmall</label> <label>@fontSizeSmall</label>
<input type="text" class="span3" placeholder="@baseFontSize * 0.85"> <input type="text" class="span3" placeholder="@base-font-size * 0.85">
<label>@fontSizeMini</label> <label>@fontSizeMini</label>
<input type="text" class="span3" placeholder="@baseFontSize * 0.75"> <input type="text" class="span3" placeholder="@base-font-size * 0.75">
<label>@paddingLarge</label> <label>@paddingLarge</label>
<input type="text" class="span3" placeholder="11px 19px"> <input type="text" class="span3" placeholder="11px 19px">
...@@ -296,7 +294,7 @@ ...@@ -296,7 +294,7 @@
<label>@formActionsBackground</label> <label>@formActionsBackground</label>
<input type="text" class="span3" placeholder="#f5f5f5"> <input type="text" class="span3" placeholder="#f5f5f5">
<label>@btnPrimaryBackground</label> <label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor"> <input type="text" class="span3" placeholder="@link-color">
<label>@btnPrimaryBackgroundHighlight</label> <label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%)"> <input type="text" class="span3" placeholder="darken(@white, 10%)">
...@@ -366,7 +364,7 @@ ...@@ -366,7 +364,7 @@
<label>@dropdownLinkColorHover</label> <label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label> <label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor"> <input type="text" class="span3" placeholder="@link-color">
</div><!-- /span --> </div><!-- /span -->
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/templates/pages/scaffolding.mustache
View file @ 7a3d15eb
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
<ul> <ul>
<li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li> <li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
<li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li> <li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
<li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base{{/i}}</li> <li>{{_i}}Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base{{/i}}</li>
<li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li> <li>{{_i}}Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
</ul> </ul>
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p> <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
......
less/accordion.less
View file @ 7a3d15eb
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
// Parent container // Parent container
.accordion { .accordion {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
} }
// Group == heading + body // Group == heading + body
......
less/alerts.less
View file @ 7a3d15eb
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground; background-color: @warningBackground;
border: 1px solid @warningBorder; border: 1px solid @warningBorder;
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
line-height: @baseLineHeight; line-height: @base-line-height;
} }
......
less/breadcrumbs.less
View file @ 7a3d15eb
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.breadcrumb { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
margin: 0 0 @baseLineHeight; margin: 0 0 @base-line-height;
list-style: none; list-style: none;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: @baseBorderRadius; border-radius: @baseBorderRadius;
......
less/button-groups.less
View file @ 7a3d15eb
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2; margin-top: @base-line-height / 2;
margin-bottom: @baseLineHeight / 2; margin-bottom: @base-line-height / 2;
> .btn + .btn, > .btn + .btn,
> .btn-group + .btn, > .btn-group + .btn,
> .btn + .btn-group { > .btn + .btn-group {
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
.btn-group > .btn, .btn-group > .btn,
.btn-group > .dropdown-menu, .btn-group > .dropdown-menu,
.btn-group > .popover { .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 // Reset fonts for other sizes
......
less/buttons.less
View file @ 7a3d15eb
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
font-size: @baseFontSize; font-size: @base-font-size;
line-height: @baseLineHeight; line-height: @base-line-height;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
...@@ -178,11 +178,11 @@ input[type="button"] { ...@@ -178,11 +178,11 @@ input[type="button"] {
.btn-link { .btn-link {
border-color: transparent; border-color: transparent;
cursor: pointer; cursor: pointer;
color: @linkColor; color: @link-color;
border-radius: 0; border-radius: 0;
} }
.btn-link:hover { .btn-link:hover {
color: @linkColorHover; color: @link-color-hover;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
......
less/carousel.less
View file @ 7a3d15eb
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.carousel { .carousel {
position: relative; position: relative;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
line-height: 1; line-height: 1;
} }
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
.carousel-caption h3, .carousel-caption h3,
.carousel-caption p { .carousel-caption p {
color: @white; color: @white;
line-height: @baseLineHeight; line-height: @base-line-height;
} }
.carousel-caption h3 { .carousel-caption h3 {
margin: 0 0 5px; margin: 0 0 5px;
......
less/close.less
View file @ 7a3d15eb
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
float: right; float: right;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: @baseLineHeight; line-height: @base-line-height;
color: @black; color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20); .opacity(20);
......
less/code.less
View file @ 7a3d15eb
...@@ -8,7 +8,7 @@ code, ...@@ -8,7 +8,7 @@ code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
#font > #family > .monospace; #font > #family > .monospace;
font-size: @baseFontSize - 2; font-size: @base-font-size - 2;
color: @grayDark; color: @grayDark;
border-radius: 4px; border-radius: 4px;
} }
...@@ -25,10 +25,10 @@ code { ...@@ -25,10 +25,10 @@ code {
// Blocks of code // Blocks of code
pre { pre {
display: block; display: block;
padding: (@baseLineHeight - 1) / 2; padding: (@base-line-height - 1) / 2;
margin: 0 0 @baseLineHeight / 2; margin: 0 0 @base-line-height / 2;
font-size: @baseFontSize - 1; // 14px to 13px font-size: @base-font-size - 1; // 14px to 13px
line-height: @baseLineHeight; line-height: @base-line-height;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
white-space: pre; white-space: pre;
...@@ -40,7 +40,7 @@ pre { ...@@ -40,7 +40,7 @@ pre {
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
&.prettyprint { &.prettyprint {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
} }
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
......
less/dropdowns.less
View file @ 7a3d15eb
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @base-line-height;
color: @dropdownLinkColor; color: @dropdownLinkColor;
white-space: nowrap; white-space: nowrap;
} }
......
less/forms.less
View file @ 7a3d15eb
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// ------------------------- // -------------------------
form { form {
margin: 0 0 @baseLineHeight; margin: 0 0 @base-line-height;
} }
fieldset { fieldset {
...@@ -20,9 +20,9 @@ legend { ...@@ -20,9 +20,9 @@ legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
font-size: @baseFontSize * 1.5; font-size: @base-font-size * 1.5;
line-height: @baseLineHeight * 2; line-height: @base-line-height * 2;
color: @grayDark; color: @grayDark;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
...@@ -59,9 +59,9 @@ input[type="color"], ...@@ -59,9 +59,9 @@ input[type="color"],
.box-sizing(border-box); // Makes inputs behave like true block-level elements .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) min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px; padding: 6px 9px;
margin-bottom: @baseLineHeight / 2; margin-bottom: @base-line-height / 2;
font-size: @baseFontSize; font-size: @base-font-size;
line-height: @baseLineHeight; line-height: @base-line-height;
color: @gray; color: @gray;
vertical-align: middle; vertical-align: middle;
background-color: @inputBackground; background-color: @inputBackground;
...@@ -201,7 +201,7 @@ textarea { ...@@ -201,7 +201,7 @@ textarea {
.radio, .radio,
.checkbox { .checkbox {
display: block; 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; padding-left: 20px;
} }
.radio label, .radio label,
...@@ -390,9 +390,9 @@ select:focus:invalid { ...@@ -390,9 +390,9 @@ select:focus:invalid {
// ------------ // ------------
.form-actions { .form-actions {
padding: (@baseLineHeight - 1) 20px @baseLineHeight; padding: (@base-line-height - 1) 20px @base-line-height;
margin-top: @baseLineHeight; margin-top: @base-line-height;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
background-color: @formActionsBackground; background-color: @formActionsBackground;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers .clearfix(); // Adding clearfix to allow for .pull-right button containers
...@@ -405,12 +405,12 @@ select:focus:invalid { ...@@ -405,12 +405,12 @@ select:focus:invalid {
.help-block, .help-block,
.help-inline { .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 { .help-block {
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-bottom: @baseLineHeight / 2; margin-bottom: @base-line-height / 2;
} }
.help-inline { .help-inline {
...@@ -436,7 +436,7 @@ select:focus:invalid { ...@@ -436,7 +436,7 @@ select:focus:invalid {
select, select,
.uneditable-input, .uneditable-input,
.dropdown-menu { .dropdown-menu {
font-size: @baseFontSize; font-size: @base-font-size;
} }
input, input,
...@@ -445,7 +445,7 @@ select:focus:invalid { ...@@ -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 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 float: none; // Undo the float from grid sizing
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
font-size: @baseFontSize; font-size: @base-font-size;
vertical-align: top; vertical-align: top;
border-radius: 0 @inputBorderRadius @inputBorderRadius 0; border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
// Make input on top when focused so blue border and shadow always show // Make input on top when focused so blue border and shadow always show
...@@ -461,12 +461,12 @@ select:focus:invalid { ...@@ -461,12 +461,12 @@ select:focus:invalid {
.add-on { .add-on {
display: inline-block; display: inline-block;
width: auto; width: auto;
height: @baseLineHeight; height: @base-line-height;
min-width: 16px; min-width: 16px;
padding: 6px; padding: 6px;
font-size: @baseFontSize; font-size: @base-font-size;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @base-line-height;
text-align: center; text-align: center;
text-shadow: 0 1px 0 @white; text-shadow: 0 1px 0 @white;
background-color: @grayLighter; background-color: @grayLighter;
...@@ -642,12 +642,12 @@ input.search-query { ...@@ -642,12 +642,12 @@ input.search-query {
// Margin to space out fieldsets // Margin to space out fieldsets
.control-group { .control-group {
margin-bottom: @baseLineHeight / 2; margin-bottom: @base-line-height / 2;
} }
// Legend collapses margin, so next element is responsible for spacing // Legend collapses margin, so next element is responsible for spacing
legend + .control-group { legend + .control-group {
margin-top: @baseLineHeight; margin-top: @base-line-height;
-webkit-margin-top-collapse: separate; -webkit-margin-top-collapse: separate;
} }
...@@ -657,7 +657,7 @@ legend + .control-group { ...@@ -657,7 +657,7 @@ legend + .control-group {
.form-horizontal { .form-horizontal {
// Increase spacing between groups // Increase spacing between groups
.control-group { .control-group {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
.clearfix(); .clearfix();
} }
// Float the labels left // Float the labels left
...@@ -683,7 +683,7 @@ legend + .control-group { ...@@ -683,7 +683,7 @@ legend + .control-group {
.input-prepend, .input-prepend,
.input-append { .input-append {
+ .help-block { + .help-block {
margin-top: @baseLineHeight / 2; margin-top: @base-line-height / 2;
} }
} }
// Move over buttons in .form-actions to align with .controls // Move over buttons in .form-actions to align with .controls
......
less/hero-unit.less
View file @ 7a3d15eb
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
margin-bottom: 30px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
font-weight: 200; font-weight: 200;
line-height: @baseLineHeight * 1.5; line-height: @base-line-height * 1.5;
color: @heroUnitLeadColor; color: @heroUnitLeadColor;
background-color: @heroUnitBackground; background-color: @heroUnitBackground;
border-radius: 6px; border-radius: 6px;
...@@ -20,6 +20,6 @@ ...@@ -20,6 +20,6 @@
letter-spacing: -1px; letter-spacing: -1px;
} }
li { 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
} }
} }
less/labels-badges.less
View file @ 7a3d15eb
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 4px;
font-size: @baseFontSize * .846; font-size: @base-font-size * .846;
font-weight: bold; font-weight: bold;
line-height: 14px; // ensure proper line-height if floated line-height: 14px; // ensure proper line-height if floated
color: @white; color: @white;
......
less/mixins.less
View file @ 7a3d15eb
...@@ -92,29 +92,29 @@ ...@@ -92,29 +92,29 @@
#font { #font {
#family { #family {
.serif() { .serif() {
font-family: @serifFontFamily; font-family: @font-family-serif;
} }
.sans-serif() { .sans-serif() {
font-family: @sansFontFamily; font-family: @font-family-sans-serif;
} }
.monospace() { .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-size: @size;
font-weight: @weight; font-weight: @weight;
line-height: @lineHeight; 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 > #family > .serif;
#font > .shorthand(@size, @weight, @lineHeight); #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 > #family > .sans-serif;
#font > .shorthand(@size, @weight, @lineHeight); #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 > #family > .monospace;
#font > .shorthand(@size, @weight, @lineHeight); #font > .shorthand(@size, @weight, @lineHeight);
} }
...@@ -133,12 +133,12 @@ ...@@ -133,12 +133,12 @@
// Mixin for form field states // Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { .formFieldState(@text-color: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color // Set the text color
.control-label, .control-label,
.help-block, .help-block,
.help-inline { .help-inline {
color: @textColor; color: @text-color;
} }
// Style inputs accordingly // Style inputs accordingly
.checkbox, .checkbox,
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
input, input,
select, select,
textarea { textarea {
color: @textColor; color: @text-color;
} }
input, input,
select, select,
...@@ -162,9 +162,9 @@ ...@@ -162,9 +162,9 @@
// Give a small background color for input-prepend/-append // Give a small background color for input-prepend/-append
.input-prepend .add-on, .input-prepend .add-on,
.input-append .add-on { .input-append .add-on {
color: @textColor; color: @text-color;
background-color: @backgroundColor; background-color: @backgroundColor;
border-color: @textColor; border-color: @text-color;
} }
} }
...@@ -421,7 +421,7 @@ ...@@ -421,7 +421,7 @@
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: @white) { .nav-divider(@top: #e5e5e5, @bottom: @white) {
height: 1px; height: 1px;
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px
overflow: hidden; overflow: hidden;
background-color: @top; background-color: @top;
border-bottom: 1px solid @bottom; border-bottom: 1px solid @bottom;
...@@ -429,8 +429,8 @@ ...@@ -429,8 +429,8 @@
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { .buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor; color: @text-color;
text-shadow: @textShadow; text-shadow: @textShadow;
#gradient > .vertical(@startColor, @endColor); #gradient > .vertical(@startColor, @endColor);
border-color: @endColor @endColor darken(@endColor, 15%); border-color: @endColor @endColor darken(@endColor, 15%);
...@@ -439,7 +439,7 @@ ...@@ -439,7 +439,7 @@
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor; color: @text-color;
background-color: @endColor; background-color: @endColor;
} }
......
less/navbar.less
View file @ 7a3d15eb
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.navbar { .navbar {
overflow: visible; overflow: visible;
padding: 0 20px; padding: 0 20px;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
border: 1px solid @navbarBorder; border: 1px solid @navbarBorder;
border-radius: @baseBorderRadius; border-radius: @baseBorderRadius;
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
float: left; float: left;
display: block; display: block;
// Vertically center the text given @navbarHeight // 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 margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
.navbar .nav > li > a { .navbar .nav > li > a {
float: none; float: none;
// Vertically center the text given @navbarHeight // 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; color: @navbarLinkColor;
text-decoration: none; text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight; text-shadow: 0 1px 0 @navbarBackgroundHighlight;
......
less/navs.less
View file @ 7a3d15eb
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.nav { .nav {
margin-left: 0; margin-left: 0;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
list-style: none; list-style: none;
.clearfix(); .clearfix();
} }
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
padding: 3px 15px; padding: 3px 15px;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
line-height: @baseLineHeight; line-height: @base-line-height;
color: @grayLight; color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase; text-transform: uppercase;
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
// Actual tabs (as links) // Actual tabs (as links)
.nav-tabs > li > a { .nav-tabs > li > a {
margin-right: 2px; margin-right: 2px;
line-height: @baseLineHeight; line-height: @base-line-height;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
&:hover { &:hover {
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
.nav-tabs > .active > a, .nav-tabs > .active > a,
.nav-tabs > .active > a:hover { .nav-tabs > .active > a:hover {
color: @gray; color: @gray;
background-color: @bodyBackground; background-color: @body-background;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
.nav-pills > .active > a, .nav-pills > .active > a,
.nav-pills > .active > a:hover { .nav-pills > .active > a:hover {
color: @white; color: @white;
background-color: @linkColor; background-color: @link-color;
} }
// Stacked pills // Stacked pills
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
padding: 9px 15px; padding: 9px 15px;
color: #fff; color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.15); text-shadow: 0 1px 0 rgba(0,0,0,.15);
background-color: @linkColor; background-color: @link-color;
border-width: 0; border-width: 0;
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)") .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
} }
...@@ -186,13 +186,13 @@ ...@@ -186,13 +186,13 @@
// ------------------------- // -------------------------
// Make carets use linkColor to start // Make carets use linkColor to start
.nav .dropdown-toggle .caret { .nav .dropdown-toggle .caret {
border-top-color: @linkColor; border-top-color: @link-color;
border-bottom-color: @linkColor; border-bottom-color: @link-color;
margin-top: 8px; margin-top: 8px;
} }
.nav .dropdown-toggle:hover .caret { .nav .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover; border-top-color: @link-color-hover;
border-bottom-color: @linkColorHover; border-bottom-color: @link-color-hover;
} }
// Active dropdown links // Active dropdown links
......
less/pager.less
View file @ 7a3d15eb
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.pager { .pager {
margin: @baseLineHeight 0; margin: @base-line-height 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
.clearfix(); .clearfix();
......
less/pagination.less
View file @ 7a3d15eb
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Space out pagination from surrounding content // Space out pagination from surrounding content
.pagination { .pagination {
margin: @baseLineHeight 0; margin: @base-line-height 0;
} }
.pagination ul { .pagination ul {
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
.pagination ul > li > span { .pagination ul > li > span {
float: left; // Collapse white-space float: left; // Collapse white-space
padding: 4px 12px; padding: 4px 12px;
line-height: @baseLineHeight; line-height: @base-line-height;
text-decoration: none; text-decoration: none;
background-color: @paginationBackground; background-color: @paginationBackground;
border: 1px solid @paginationBorder; border: 1px solid @paginationBorder;
......
less/progress-bars.less
View file @ 7a3d15eb
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
// Outer container // Outer container
.progress { .progress {
overflow: hidden; overflow: hidden;
height: @baseLineHeight; height: @base-line-height;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
#gradient > .vertical(#f5f5f5, #f9f9f9); #gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
border-radius: @baseBorderRadius; border-radius: @baseBorderRadius;
......
less/responsive-767px-max.less
View file @ 7a3d15eb
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
// Block level the page header small tag for readability // Block level the page header small tag for readability
.page-header h1 small { .page-header h1 small {
display: block; display: block;
line-height: @baseLineHeight; line-height: @base-line-height;
} }
// Update checkboxes for iOS // Update checkboxes for iOS
......
less/responsive-navbar.less
View file @ 7a3d15eb
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
position: static; position: static;
} }
.navbar-fixed-top { .navbar-fixed-top {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
} }
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin-top: @baseLineHeight; margin-top: @base-line-height;
} }
.navbar-fixed-top, .navbar-fixed-top,
.navbar-fixed-bottom { .navbar-fixed-bottom {
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
// Block-level the nav // Block-level the nav
.nav-collapse .nav { .nav-collapse .nav {
float: none; float: none;
margin: 0 0 (@baseLineHeight / 2); margin: 0 0 (@base-line-height / 2);
} }
.nav-collapse .nav > li { .nav-collapse .nav > li {
float: none; float: none;
...@@ -133,8 +133,8 @@ ...@@ -133,8 +133,8 @@
.nav-collapse .navbar-form, .nav-collapse .navbar-form,
.nav-collapse .navbar-search { .nav-collapse .navbar-search {
float: none; float: none;
padding: (@baseLineHeight / 2) 15px; padding: (@base-line-height / 2) 15px;
margin: (@baseLineHeight / 2) 0; margin: (@base-line-height / 2) 0;
border-top: 1px solid @navbarBackground; border-top: 1px solid @navbarBackground;
border-bottom: 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)"); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
......
less/scaffolding.less
View file @ 7a3d15eb
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
body { body {
margin: 0; margin: 0;
color: @textColor; color: @text-color;
background-color: @bodyBackground; background-color: @body-background;
} }
// Reset fonts for revelant elements // Reset fonts for revelant elements
...@@ -18,9 +18,9 @@ input, ...@@ -18,9 +18,9 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: @baseFontFamily; font-family: @base-font-family;
font-size: @baseFontSize; font-size: @base-font-size;
line-height: @baseLineHeight; line-height: @base-line-height;
} }
...@@ -28,11 +28,11 @@ textarea { ...@@ -28,11 +28,11 @@ textarea {
// ------------------------- // -------------------------
a { a {
color: @linkColor; color: @link-color;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: @linkColorHover; color: @link-color-hover;
text-decoration: underline; text-decoration: underline;
} }
......
less/tables.less
View file @ 7a3d15eb
...@@ -17,12 +17,12 @@ table { ...@@ -17,12 +17,12 @@ table {
.table { .table {
width: 100%; width: 100%;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
// Cells // Cells
th, th,
td { td {
padding: 8px; padding: 8px;
line-height: @baseLineHeight; line-height: @base-line-height;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
border-top: 1px solid @tableBorder; border-top: 1px solid @tableBorder;
......
less/thumbnails.less
View file @ 7a3d15eb
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.thumbnail { .thumbnail {
display: block; display: block;
padding: 4px; padding: 4px;
line-height: @baseLineHeight; line-height: @base-line-height;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: @baseBorderRadius; border-radius: @baseBorderRadius;
.box-shadow(0 1px 3px rgba(0,0,0,.055)); .box-shadow(0 1px 3px rgba(0,0,0,.055));
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
} }
// Add a hover state for linked versions only // Add a hover state for linked versions only
a.thumbnail:hover { a.thumbnail:hover {
border-color: @linkColor; border-color: @link-color;
.box-shadow(0 1px 4px rgba(0,105,214,.25)); .box-shadow(0 1px 4px rgba(0,105,214,.25));
} }
......
less/type.less
View file @ 7a3d15eb
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
// ------------------------- // -------------------------
p { p {
margin: 0 0 @baseLineHeight / 2; margin: 0 0 @base-line-height / 2;
} }
.lead { .lead {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
font-size: @baseFontSize * 1.5; font-size: @base-font-size * 1.5;
font-weight: 200; 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%); } ...@@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); }
// ------------------------- // -------------------------
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: (@baseLineHeight / 2) 0; margin: (@base-line-height / 2) 0;
font-family: @headingsFontFamily; font-family: @headings-font-family;
font-weight: @headingsFontWeight; font-weight: @headings-font-weight;
line-height: @baseLineHeight; line-height: @base-line-height;
text-rendering: optimizelegibility; // Fix the character spacing for headings text-rendering: optimizelegibility; // Fix the character spacing for headings
small { small {
font-weight: normal; font-weight: normal;
...@@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 { ...@@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 {
h1, h1,
h2, h2,
h3 { line-height: @baseLineHeight * 2; } h3 { line-height: @base-line-height * 2; }
h1 { font-size: @baseFontSize * 2.75; } // ~38px h1 { font-size: @base-font-size * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px h2 { font-size: @base-font-size * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px h3 { font-size: @base-font-size * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px h4 { font-size: @base-font-size * 1.25; } // ~18px
h5 { font-size: @baseFontSize; } h5 { font-size: @base-font-size; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px h6 { font-size: @base-font-size * 0.85; } // ~12px
h1 small { font-size: @baseFontSize * 1.75; } // ~24px h1 small { font-size: @base-font-size * 1.75; } // ~24px
h2 small { font-size: @baseFontSize * 1.25; } // ~18px h2 small { font-size: @base-font-size * 1.25; } // ~18px
h3 small { font-size: @baseFontSize; } h3 small { font-size: @base-font-size; }
h4 small { font-size: @baseFontSize; } h4 small { font-size: @base-font-size; }
// Page header // Page header
// ------------------------- // -------------------------
.page-header { .page-header {
padding-bottom: (@baseLineHeight / 2) - 1; padding-bottom: (@base-line-height / 2) - 1;
margin: @baseLineHeight 0 (@baseLineHeight * 1.5); margin: @base-line-height 0 (@base-line-height * 1.5);
border-bottom: 1px solid @grayLighter; border-bottom: 1px solid @grayLighter;
} }
...@@ -94,7 +94,7 @@ h4 small { font-size: @baseFontSize; } ...@@ -94,7 +94,7 @@ h4 small { font-size: @baseFontSize; }
// Unordered and Ordered lists // Unordered and Ordered lists
ul, ol { ul, ol {
padding: 0; padding: 0;
margin: 0 0 @baseLineHeight / 2 25px; margin: 0 0 @base-line-height / 2 25px;
} }
ul ul, ul ul,
ul ol, ul ol,
...@@ -103,7 +103,7 @@ ol ul { ...@@ -103,7 +103,7 @@ ol ul {
margin-bottom: 0; margin-bottom: 0;
} }
li { li {
line-height: @baseLineHeight; line-height: @base-line-height;
} }
// List options // List options
...@@ -123,17 +123,17 @@ li { ...@@ -123,17 +123,17 @@ li {
// Description Lists // Description Lists
dl { dl {
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
} }
dt, dt,
dd { dd {
line-height: @baseLineHeight; line-height: @base-line-height;
} }
dt { dt {
font-weight: bold; font-weight: bold;
} }
dd { dd {
margin-left: @baseLineHeight / 2; margin-left: @base-line-height / 2;
} }
// Horizontal layout (like forms) // Horizontal layout (like forms)
.dl-horizontal { .dl-horizontal {
...@@ -155,7 +155,7 @@ dd { ...@@ -155,7 +155,7 @@ dd {
// Horizontal rules // Horizontal rules
hr { hr {
margin: @baseLineHeight 0; margin: @base-line-height 0;
border: 0; border: 0;
border-top: 1px solid @hrBorder; border-top: 1px solid @hrBorder;
border-bottom: 1px solid @white; border-bottom: 1px solid @white;
...@@ -176,15 +176,15 @@ abbr.initialism { ...@@ -176,15 +176,15 @@ abbr.initialism {
// Blockquotes // Blockquotes
blockquote { blockquote {
padding: 0 0 0 15px; padding: 0 0 0 15px;
margin: 0 0 @baseLineHeight; margin: 0 0 @base-line-height;
border-left: 5px solid @grayLighter; border-left: 5px solid @grayLighter;
p { p {
margin-bottom: 0; margin-bottom: 0;
#font > .shorthand(16px,300,@baseLineHeight * 1.25); #font > .shorthand(16px,300,@base-line-height * 1.25);
} }
small { small {
display: block; display: block;
line-height: @baseLineHeight; line-height: @base-line-height;
color: @grayLight; color: @grayLight;
&:before { &:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
...@@ -224,7 +224,7 @@ blockquote:after { ...@@ -224,7 +224,7 @@ blockquote:after {
// Addresses // Addresses
address { address {
display: block; display: block;
margin-bottom: @baseLineHeight; margin-bottom: @base-line-height;
font-style: normal; font-style: normal;
line-height: @baseLineHeight; line-height: @base-line-height;
} }
less/variables.less
View file @ 7a3d15eb
...@@ -31,38 +31,37 @@ ...@@ -31,38 +31,37 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: @white; @body-background: @white;
@textColor: @grayDark; @text-color: @grayDark;
// Links // Links
// ------------------------- // -------------------------
@linkColor: #08c; @link-color: #08c;
@linkColorHover: darken(@linkColor, 15%); @link-color-hover: darken(@link-color, 15%);
// Typography // Typography
// ------------------------- // -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @base-font-size: 14px;
@baseFontFamily: @sansFontFamily; @base-font-family: @font-family-sans-serif;
@baseLineHeight: 20px; @base-line-height: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headings-font-family: inherit; // empty to use BS default, @base-font-family
@headingsFontWeight: bold; // instead of browser default, bold @headings-font-weight: bold; // instead of browser default, bold
// Component sizing // Component sizing
// ------------------------- // -------------------------
// Based on 14px font-size and 20px line-height // Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px @fontSizeLarge: @base-font-size * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeSmall: @base-font-size * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px @fontSizeMini: @base-font-size * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px @paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px @paddingSmall: 2px 10px; // 26px
...@@ -87,7 +86,7 @@ ...@@ -87,7 +86,7 @@
@btnBackgroundHighlight: darken(@white, 10%); @btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #bbb; @btnBorder: #bbb;
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: @link-color;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de; @btnInfoBackground: #5bc0de;
...@@ -114,7 +113,7 @@ ...@@ -114,7 +113,7 @@
@inputSearchBorderRadius: 20px; @inputSearchBorderRadius: 20px;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5; @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 // Dropdowns
...@@ -128,7 +127,7 @@ ...@@ -128,7 +127,7 @@
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white; @dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundActive: @link-color;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment