mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Part 1 of unCamelCasing variables
This commit is contained in:
parent
fe8061b84e
commit
7a3d15eb21
@ -131,7 +131,7 @@
|
|||||||
<pre class="prettyprint"><p class="lead">...</p></pre>
|
<pre class="prettyprint"><p class="lead">...</p></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">
|
||||||
|
@ -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 @@
|
|||||||
<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 @@
|
|||||||
<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 @@
|
|||||||
<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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
2
docs/templates/pages/base-css.mustache
vendored
2
docs/templates/pages/base-css.mustache
vendored
@ -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">
|
||||||
|
40
docs/templates/pages/customize.mustache
vendored
40
docs/templates/pages/customize.mustache
vendored
@ -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 @@
|
|||||||
<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 @@
|
|||||||
<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 @@
|
|||||||
<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>
|
||||||
|
4
docs/templates/pages/scaffolding.mustache
vendored
4
docs/templates/pages/scaffolding.mustache
vendored
@ -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>
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
// Parent container
|
// Parent container
|
||||||
.accordion {
|
.accordion {
|
||||||
margin-bottom: @baseLineHeight;
|
margin-bottom: @base-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Group == heading + body
|
// Group == heading + body
|
||||||
|
@ -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 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
right: -21px;
|
right: -21px;
|
||||||
line-height: @baseLineHeight;
|
line-height: @base-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 @@
|
|||||||
.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
|
||||||
|
@ -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"] {
|
|||||||
.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;
|
||||||
}
|
}
|
||||||
|
@ -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 @@
|
|||||||
.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;
|
||||||
|
@ -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);
|
||||||
|
@ -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 {
|
|||||||
// 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 {
|
|||||||
|
|
||||||
// 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
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
form {
|
form {
|
||||||
margin: 0 0 @baseLineHeight;
|
margin: 0 0 @base-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
@ -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"],
|
|||||||
.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 {
|
|||||||
.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 {
|
|||||||
// ------------
|
// ------------
|
||||||
|
|
||||||
.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 {
|
|||||||
|
|
||||||
.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 {
|
|||||||
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 {
|
|||||||
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 {
|
|||||||
.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 {
|
|||||||
|
|
||||||
// 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 {
|
|||||||
.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 {
|
|||||||
.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
|
||||||
|
@ -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 @@
|
|||||||
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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 @@
|
|||||||
|
|
||||||
|
|
||||||
// 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 @@
|
|||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
color: @textColor;
|
color: @text-color;
|
||||||
}
|
}
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
@ -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 @@
|
|||||||
// 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 @@
|
|||||||
|
|
||||||
// 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 @@
|
|||||||
|
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 @@
|
|||||||
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 @@
|
|||||||
.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;
|
||||||
|
@ -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 @@
|
|||||||
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 @@
|
|||||||
// 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 @@
|
|||||||
.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 @@
|
|||||||
.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 @@
|
|||||||
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 @@
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
// 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
|
||||||
|
@ -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();
|
||||||
|
@ -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 @@
|
|||||||
.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;
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
@ -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 @@
|
|||||||
// 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 @@
|
|||||||
.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)");
|
||||||
|
@ -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,
|
|||||||
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 {
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 @@
|
|||||||
}
|
}
|
||||||
// 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));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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%); }
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
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 {
|
|||||||
|
|
||||||
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; }
|
|||||||
// 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 {
|
|||||||
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 {
|
|||||||
|
|
||||||
// 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 {
|
|||||||
|
|
||||||
// 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 {
|
|||||||
// 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 {
|
|||||||
// 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;
|
||||||
}
|
}
|
||||||
|
@ -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 @@
|
|||||||
@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 @@
|
|||||||
@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 @@
|
|||||||
@dropdownLinkColorHover: @white;
|
@dropdownLinkColorHover: @white;
|
||||||
@dropdownLinkColorActive: @white;
|
@dropdownLinkColorActive: @white;
|
||||||
|
|
||||||
@dropdownLinkBackgroundActive: @linkColor;
|
@dropdownLinkBackgroundActive: @link-color;
|
||||||
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
|
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user