mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
more consistent variable naming patterns
This commit is contained in:
Mark Otto
parent
7a3d15eb21
commit
b0e2b5813d
@ -131,7 +131,7 @@
|
||||
<pre class="prettyprint"><p class="lead">...</p></pre>
|
||||
|
||||
<h3>Built with Less</h3>
|
||||
<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>
|
||||
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</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">
|
||||
|
||||
@ -296,13 +296,15 @@
|
||||
<label>@font-family-monospace</label>
|
||||
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
|
||||
|
||||
<label>@base-font-size</label>
|
||||
<label>@font-size-base</label>
|
||||
<input type="text" class="span3" placeholder="14px">
|
||||
<label>@base-font-family</label>
|
||||
<label>@font-family-base</label>
|
||||
<input type="text" class="span3" placeholder="@font-family-sans-serif">
|
||||
<label>@base-line-height</label>
|
||||
<label>@line-height-base</label>
|
||||
<input type="text" class="span3" placeholder="20px">
|
||||
|
||||
<label>@altFontFamily</label>
|
||||
<input type="text" class="span3" placeholder="@font-family-serif">
|
||||
<label>@headings-font-family</label>
|
||||
<input type="text" class="span3" placeholder="inherit">
|
||||
<label>@headings-font-weight</label>
|
||||
@ -310,25 +312,25 @@
|
||||
<label>@headingsColor</label>
|
||||
<input type="text" class="span3" placeholder="inherit">
|
||||
|
||||
<label>@fontSizeLarge</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 1.25">
|
||||
<label>@fontSizeSmall</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 0.85">
|
||||
<label>@fontSizeMini</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 0.75">
|
||||
<label>@font-size-large</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 1.25">
|
||||
<label>@font-size-small</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 0.85">
|
||||
<label>@font-size-mini</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 0.75">
|
||||
|
||||
<label>@paddingLarge</label>
|
||||
<label>@padding-large</label>
|
||||
<input type="text" class="span3" placeholder="11px 19px">
|
||||
<label>@paddingSmall</label>
|
||||
<label>@padding-small</label>
|
||||
<input type="text" class="span3" placeholder="2px 10px">
|
||||
<label>@paddingMini</label>
|
||||
<label>@padding-mini</label>
|
||||
<input type="text" class="span3" placeholder="1px 6px">
|
||||
|
||||
<label>@baseBorderRadius</label>
|
||||
<label>@border-radius-base</label>
|
||||
<input type="text" class="span3" placeholder="4px">
|
||||
<label>@borderRadiusLarge</label>
|
||||
<label>@border-radius-large</label>
|
||||
<input type="text" class="span3" placeholder="6px">
|
||||
<label>@borderRadiusSmall</label>
|
||||
<label>@border-radius-small</label>
|
||||
<input type="text" class="span3" placeholder="3px">
|
||||
|
||||
<label>@heroUnitBackground</label>
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
<ul>
|
||||
<li>Remove <code>margin</code> on the body</li>
|
||||
<li>Set <code>background-color: white;</code> on the <code>body</code></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>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
|
||||
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
|
||||
</ul>
|
||||
<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 }}
|
||||
<h3>{{_i}}Built with Less{{/i}}</h3>
|
||||
<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>
|
||||
<p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</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">
|
||||
|
||||
30
docs/templates/pages/customize.mustache
vendored
30
docs/templates/pages/customize.mustache
vendored
@ -228,11 +228,11 @@
|
||||
<label>@font-family-monospace</label>
|
||||
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
|
||||
|
||||
<label>@base-font-size</label>
|
||||
<label>@font-size-base</label>
|
||||
<input type="text" class="span3" placeholder="14px">
|
||||
<label>@base-font-family</label>
|
||||
<label>@font-family-base</label>
|
||||
<input type="text" class="span3" placeholder="@font-family-sans-serif">
|
||||
<label>@base-line-height</label>
|
||||
<label>@line-height-base</label>
|
||||
<input type="text" class="span3" placeholder="20px">
|
||||
|
||||
<label>@headings-font-family</label>
|
||||
@ -242,25 +242,25 @@
|
||||
<label>@headingsColor</label>
|
||||
<input type="text" class="span3" placeholder="inherit">
|
||||
|
||||
<label>@fontSizeLarge</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 1.25">
|
||||
<label>@fontSizeSmall</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 0.85">
|
||||
<label>@fontSizeMini</label>
|
||||
<input type="text" class="span3" placeholder="@base-font-size * 0.75">
|
||||
<label>@font-size-large</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 1.25">
|
||||
<label>@font-size-small</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 0.85">
|
||||
<label>@font-size-mini</label>
|
||||
<input type="text" class="span3" placeholder="@font-size-base * 0.75">
|
||||
|
||||
<label>@paddingLarge</label>
|
||||
<label>@padding-large</label>
|
||||
<input type="text" class="span3" placeholder="11px 19px">
|
||||
<label>@paddingSmall</label>
|
||||
<label>@padding-small</label>
|
||||
<input type="text" class="span3" placeholder="2px 10px">
|
||||
<label>@paddingMini</label>
|
||||
<label>@padding-mini</label>
|
||||
<input type="text" class="span3" placeholder="1px 6px">
|
||||
|
||||
<label>@baseBorderRadius</label>
|
||||
<label>@border-radius-base</label>
|
||||
<input type="text" class="span3" placeholder="4px">
|
||||
<label>@borderRadiusLarge</label>
|
||||
<label>@border-radius-large</label>
|
||||
<input type="text" class="span3" placeholder="6px">
|
||||
<label>@borderRadiusSmall</label>
|
||||
<label>@border-radius-small</label>
|
||||
<input type="text" class="span3" placeholder="3px">
|
||||
|
||||
<label>@heroUnitBackground</label>
|
||||
|
||||
2
docs/templates/pages/scaffolding.mustache
vendored
2
docs/templates/pages/scaffolding.mustache
vendored
@ -45,7 +45,7 @@
|
||||
<ul>
|
||||
<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}}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}}Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base{{/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>
|
||||
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
|
||||
// Parent container
|
||||
.accordion {
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
}
|
||||
|
||||
// Group == heading + body
|
||||
.accordion-group {
|
||||
margin-bottom: 2px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.accordion-heading {
|
||||
border-bottom: 0;
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
background-color: @warningBackground;
|
||||
border: 1px solid @warningBorder;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.alert,
|
||||
.alert h4 {
|
||||
@ -28,7 +28,7 @@
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
margin: 0 0 @base-line-height;
|
||||
margin: 0 0 @line-height-base;
|
||||
list-style: none;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
li {
|
||||
display: inline-block;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
font-size: 0; // Hack to remove whitespace that results from using inline-block
|
||||
margin-top: @base-line-height / 2;
|
||||
margin-bottom: @base-line-height / 2;
|
||||
margin-top: @line-height-base / 2;
|
||||
margin-bottom: @line-height-base / 2;
|
||||
> .btn + .btn,
|
||||
> .btn-group + .btn,
|
||||
> .btn + .btn-group {
|
||||
@ -40,42 +40,42 @@
|
||||
.btn-group > .btn,
|
||||
.btn-group > .dropdown-menu,
|
||||
.btn-group > .popover {
|
||||
font-size: @base-font-size; // redeclare as part 2 of font-size inline-block hack
|
||||
font-size: @font-size-base; // redeclare as part 2 of font-size inline-block hack
|
||||
}
|
||||
|
||||
// Reset fonts for other sizes
|
||||
.btn-group > .btn-mini {
|
||||
font-size: @fontSizeMini;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
.btn-group > .btn-small {
|
||||
font-size: @fontSizeSmall;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
.btn-group > .btn-large {
|
||||
font-size: @fontSizeLarge;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
.border-top-left-radius(@baseBorderRadius);
|
||||
.border-bottom-left-radius(@baseBorderRadius);
|
||||
.border-top-left-radius(@border-radius-base);
|
||||
.border-bottom-left-radius(@border-radius-base);
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
.btn-group > .btn:last-child,
|
||||
.btn-group > .dropdown-toggle {
|
||||
.border-top-right-radius(@baseBorderRadius);
|
||||
.border-bottom-right-radius(@baseBorderRadius);
|
||||
.border-top-right-radius(@border-radius-base);
|
||||
.border-bottom-right-radius(@border-radius-base);
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
.btn-group > .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
.border-top-left-radius(@borderRadiusLarge);
|
||||
.border-bottom-left-radius(@borderRadiusLarge);
|
||||
.border-top-left-radius(@border-radius-large);
|
||||
.border-bottom-left-radius(@border-radius-large);
|
||||
}
|
||||
.btn-group > .btn.large:last-child,
|
||||
.btn-group > .large.dropdown-toggle {
|
||||
.border-top-right-radius(@borderRadiusLarge);
|
||||
.border-bottom-right-radius(@borderRadiusLarge);
|
||||
.border-top-right-radius(@border-radius-large);
|
||||
.border-bottom-right-radius(@border-radius-large);
|
||||
}
|
||||
|
||||
// On hover/focus/active, bring the proper btn to front
|
||||
@ -201,14 +201,14 @@
|
||||
margin-top: -1px;
|
||||
}
|
||||
.btn-group-vertical .btn:first-child {
|
||||
border-radius: @baseBorderRadius @baseBorderRadius 0 0;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
.btn-group-vertical .btn:last-child {
|
||||
border-radius: 0 0 @baseBorderRadius @baseBorderRadius;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
.btn-group-vertical .btn-large:first-child {
|
||||
border-radius: @borderRadiusLarge @borderRadiusLarge 0 0;
|
||||
border-radius: @border-radius-large @border-radius-large 0 0;
|
||||
}
|
||||
.btn-group-vertical .btn-large:last-child {
|
||||
border-radius: 0 0 @borderRadiusLarge @borderRadiusLarge;
|
||||
border-radius: 0 0 @border-radius-large @border-radius-large;
|
||||
}
|
||||
|
||||
@ -11,15 +11,15 @@
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0; // For input.btn
|
||||
font-size: @base-font-size;
|
||||
line-height: @base-line-height;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
||||
border: 1px solid @btnBorder;
|
||||
border-bottom-color: darken(@btnBorder, 10%);
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
|
||||
// Hover state
|
||||
@ -63,23 +63,23 @@
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
padding: @paddingLarge;
|
||||
font-size: @fontSizeLarge;
|
||||
border-radius: @borderRadiusLarge;
|
||||
padding: @padding-large;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
// Small
|
||||
.btn-small {
|
||||
padding: @paddingSmall;
|
||||
font-size: @fontSizeSmall;
|
||||
border-radius: @borderRadiusSmall;
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.btn-mini {
|
||||
padding: @paddingMini;
|
||||
font-size: @fontSizeMini;
|
||||
border-radius: @borderRadiusSmall;
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
.carousel-caption h3,
|
||||
.carousel-caption p {
|
||||
color: @white;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
.carousel-caption h3 {
|
||||
margin: 0 0 5px;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
color: @black;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
|
||||
@ -8,7 +8,7 @@ code,
|
||||
pre {
|
||||
padding: 0 3px 2px;
|
||||
#font > #family > .monospace;
|
||||
font-size: @base-font-size - 2;
|
||||
font-size: @font-size-base - 2;
|
||||
color: @grayDark;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -25,10 +25,10 @@ code {
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
padding: (@base-line-height - 1) / 2;
|
||||
margin: 0 0 @base-line-height / 2;
|
||||
font-size: @base-font-size - 1; // 14px to 13px
|
||||
line-height: @base-line-height;
|
||||
padding: (@line-height-base - 1) / 2;
|
||||
margin: 0 0 @line-height-base / 2;
|
||||
font-size: @font-size-base - 1; // 14px to 13px
|
||||
line-height: @line-height-base;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
@ -36,11 +36,11 @@ pre {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc; // IE8 fallback
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Make prettyprint styles more spaced out for readability
|
||||
&.prettyprint {
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
}
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
background-color: @dropdownBackground;
|
||||
border: 1px solid #ccc; // IE8 fallback
|
||||
border: 1px solid @dropdownBorder;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
.background-clip(padding-box);
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
color: @dropdownLinkColor;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
// -------------------------
|
||||
|
||||
form {
|
||||
margin: 0 0 @base-line-height;
|
||||
margin: 0 0 @line-height-base;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@ -20,9 +20,9 @@ legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @base-line-height;
|
||||
font-size: @base-font-size * 1.5;
|
||||
line-height: @base-line-height * 2;
|
||||
margin-bottom: @line-height-base;
|
||||
font-size: @font-size-base * 1.5;
|
||||
line-height: @line-height-base * 2;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@ -59,9 +59,9 @@ input[type="color"],
|
||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: 6px 9px;
|
||||
margin-bottom: @base-line-height / 2;
|
||||
font-size: @base-font-size;
|
||||
line-height: @base-line-height;
|
||||
margin-bottom: @line-height-base / 2;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @gray;
|
||||
vertical-align: middle;
|
||||
background-color: @inputBackground;
|
||||
@ -201,7 +201,7 @@ textarea {
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: block;
|
||||
min-height: @base-line-height; // clear the floating input if there is no label text
|
||||
min-height: @line-height-base; // clear the floating input if there is no label text
|
||||
padding-left: 20px;
|
||||
}
|
||||
.radio label,
|
||||
@ -257,21 +257,21 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
&.input-large {
|
||||
padding: @paddingLarge;
|
||||
padding: @padding-large;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px; // TODO: Resolve this override
|
||||
font-size: @fontSizeLarge;
|
||||
border-radius: @borderRadiusLarge;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
&.input-small {
|
||||
padding: @paddingSmall;
|
||||
font-size: @fontSizeSmall;
|
||||
border-radius: @borderRadiusSmall;
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
&.input-mini {
|
||||
padding: @paddingMini;
|
||||
font-size: @fontSizeMini;
|
||||
border-radius: @borderRadiusSmall;
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
}
|
||||
|
||||
@ -390,9 +390,9 @@ select:focus:invalid {
|
||||
// ------------
|
||||
|
||||
.form-actions {
|
||||
padding: (@base-line-height - 1) 20px @base-line-height;
|
||||
margin-top: @base-line-height;
|
||||
margin-bottom: @base-line-height;
|
||||
padding: (@line-height-base - 1) 20px @line-height-base;
|
||||
margin-top: @line-height-base;
|
||||
margin-bottom: @line-height-base;
|
||||
background-color: @formActionsBackground;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
.clearfix(); // Adding clearfix to allow for .pull-right button containers
|
||||
@ -410,7 +410,7 @@ select:focus:invalid {
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-bottom: @base-line-height / 2;
|
||||
margin-bottom: @line-height-base / 2;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
@ -436,7 +436,7 @@ select:focus:invalid {
|
||||
select,
|
||||
.uneditable-input,
|
||||
.dropdown-menu {
|
||||
font-size: @base-font-size;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
input,
|
||||
@ -445,7 +445,7 @@ select:focus:invalid {
|
||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
||||
float: none; // Undo the float from grid sizing
|
||||
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
|
||||
font-size: @base-font-size;
|
||||
font-size: @font-size-base;
|
||||
vertical-align: top;
|
||||
border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
@ -461,12 +461,12 @@ select:focus:invalid {
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: @base-line-height;
|
||||
height: @line-height-base;
|
||||
min-width: 16px;
|
||||
padding: 6px;
|
||||
font-size: @base-font-size;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
background-color: @grayLighter;
|
||||
@ -642,12 +642,12 @@ input.search-query {
|
||||
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: @base-line-height / 2;
|
||||
margin-bottom: @line-height-base / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: @base-line-height;
|
||||
margin-top: @line-height-base;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
@ -657,7 +657,7 @@ legend + .control-group {
|
||||
.form-horizontal {
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
.clearfix();
|
||||
}
|
||||
// Float the labels left
|
||||
@ -683,7 +683,7 @@ legend + .control-group {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
+ .help-block {
|
||||
margin-top: @base-line-height / 2;
|
||||
margin-top: @line-height-base / 2;
|
||||
}
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
line-height: @base-line-height * 1.5;
|
||||
line-height: @line-height-base * 1.5;
|
||||
color: @heroUnitLeadColor;
|
||||
background-color: @heroUnitBackground;
|
||||
border-radius: 6px;
|
||||
@ -20,6 +20,6 @@
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
li {
|
||||
line-height: @base-line-height * 1.5; // Reset since we specify in type.less
|
||||
line-height: @line-height-base * 1.5; // Reset since we specify in type.less
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
font-size: @base-font-size * .846;
|
||||
font-size: @font-size-base * .846;
|
||||
font-weight: bold;
|
||||
line-height: 14px; // ensure proper line-height if floated
|
||||
color: @white;
|
||||
|
||||
@ -101,20 +101,20 @@
|
||||
font-family: @font-family-monospace;
|
||||
}
|
||||
}
|
||||
.shorthand(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
|
||||
.shorthand(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) {
|
||||
font-size: @size;
|
||||
font-weight: @weight;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
.serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
|
||||
.serif(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) {
|
||||
#font > #family > .serif;
|
||||
#font > .shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
.sans-serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
|
||||
.sans-serif(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) {
|
||||
#font > #family > .sans-serif;
|
||||
#font > .shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
.monospace(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
|
||||
.monospace(@size: @font-size-base, @weight: normal, @lineHeight: @line-height-base) {
|
||||
#font > #family > .monospace;
|
||||
#font > .shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
@ -421,7 +421,7 @@
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
.nav-divider(@top: #e5e5e5, @bottom: @white) {
|
||||
height: 1px;
|
||||
margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px
|
||||
margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
|
||||
overflow: hidden;
|
||||
background-color: @top;
|
||||
border-bottom: 1px solid @bottom;
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
.navbar {
|
||||
overflow: visible;
|
||||
padding: 0 20px;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
|
||||
border: 1px solid @navbarBorder;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 4px rgba(0,0,0,.065));
|
||||
|
||||
// Prevent floats from breaking the navbar
|
||||
@ -39,7 +39,7 @@
|
||||
float: left;
|
||||
display: block;
|
||||
// Vertically center the text given @navbarHeight
|
||||
padding: ((@navbarHeight - @base-line-height) / 2) 20px ((@navbarHeight - @base-line-height) / 2);
|
||||
padding: ((@navbarHeight - @line-height-base) / 2) 20px ((@navbarHeight - @line-height-base) / 2);
|
||||
margin-left: -20px; // negative indent to left-align the text down the page
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
@ -215,7 +215,7 @@
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
// Vertically center the text given @navbarHeight
|
||||
padding: ((@navbarHeight - @base-line-height) / 2) 15px ((@navbarHeight - @base-line-height) / 2);
|
||||
padding: ((@navbarHeight - @line-height-base) / 2) 15px ((@navbarHeight - @line-height-base) / 2);
|
||||
color: @navbarLinkColor;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
}
|
||||
@ -41,7 +41,7 @@
|
||||
padding: 3px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
color: @grayLight;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
text-transform: uppercase;
|
||||
@ -72,7 +72,7 @@
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
&:hover {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
|
||||
.pager {
|
||||
margin: @base-line-height 0;
|
||||
margin: @line-height-base 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
.clearfix();
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
// Space out pagination from surrounding content
|
||||
.pagination {
|
||||
margin: @base-line-height 0;
|
||||
margin: @line-height-base 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
@ -14,7 +14,7 @@
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
// Visuals
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
||||
}
|
||||
.pagination ul > li {
|
||||
@ -24,7 +24,7 @@
|
||||
.pagination ul > li > span {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
text-decoration: none;
|
||||
background-color: @paginationBackground;
|
||||
border: 1px solid @paginationBorder;
|
||||
@ -50,11 +50,11 @@
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
.border-left-radius(@baseBorderRadius);
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
.border-right-radius(@baseBorderRadius);
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
|
||||
@ -76,16 +76,16 @@
|
||||
.pagination-large {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingLarge;
|
||||
font-size: @fontSizeLarge;
|
||||
padding: @padding-large;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
.border-left-radius(@borderRadiusLarge);
|
||||
.border-left-radius(@border-radius-large);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
.border-right-radius(@borderRadiusLarge);
|
||||
.border-right-radius(@border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,11 +94,11 @@
|
||||
.pagination-small {
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
.border-left-radius(@borderRadiusSmall);
|
||||
.border-left-radius(@border-radius-small);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
.border-right-radius(@borderRadiusSmall);
|
||||
.border-right-radius(@border-radius-small);
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,15 +106,15 @@
|
||||
.pagination-small {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingSmall;
|
||||
font-size: @fontSizeSmall;
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
// Mini
|
||||
.pagination-mini {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingMini;
|
||||
font-size: @fontSizeMini;
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,11 +44,11 @@
|
||||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: @base-line-height;
|
||||
margin-bottom: @base-line-height;
|
||||
height: @line-height-base;
|
||||
margin-bottom: @line-height-base;
|
||||
#gradient > .vertical(#f5f5f5, #f9f9f9);
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
// Block level the page header small tag for readability
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
// Update checkboxes for iOS
|
||||
|
||||
@ -19,10 +19,10 @@
|
||||
position: static;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
margin-top: @base-line-height;
|
||||
margin-top: @line-height-base;
|
||||
}
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
@ -48,7 +48,7 @@
|
||||
// Block-level the nav
|
||||
.nav-collapse .nav {
|
||||
float: none;
|
||||
margin: 0 0 (@base-line-height / 2);
|
||||
margin: 0 0 (@line-height-base / 2);
|
||||
}
|
||||
.nav-collapse .nav > li {
|
||||
float: none;
|
||||
@ -75,7 +75,7 @@
|
||||
.nav-collapse .btn {
|
||||
padding: 4px 10px 4px;
|
||||
font-weight: normal;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.nav-collapse .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
@ -133,8 +133,8 @@
|
||||
.nav-collapse .navbar-form,
|
||||
.nav-collapse .navbar-search {
|
||||
float: none;
|
||||
padding: (@base-line-height / 2) 15px;
|
||||
margin: (@base-line-height / 2) 0;
|
||||
padding: (@line-height-base / 2) 15px;
|
||||
margin: (@line-height-base / 2) 0;
|
||||
border-top: 1px solid @navbarBackground;
|
||||
border-bottom: 1px solid @navbarBackground;
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
|
||||
|
||||
@ -18,9 +18,9 @@ input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: @base-font-family;
|
||||
font-size: @base-font-size;
|
||||
line-height: @base-line-height;
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -17,12 +17,12 @@ table {
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @tableBorder;
|
||||
@ -70,7 +70,7 @@ table {
|
||||
border: 1px solid @tableBorder;
|
||||
border-collapse: separate; // Done so we can round those corners!
|
||||
border-left: 0;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
th,
|
||||
td {
|
||||
border-left: 1px solid @tableBorder;
|
||||
@ -90,22 +90,22 @@ table {
|
||||
// For first th or td in the first row in the first thead or tbody
|
||||
thead:first-child tr:first-child th:first-child,
|
||||
tbody:first-child tr:first-child td:first-child {
|
||||
.border-top-left-radius(@baseBorderRadius);
|
||||
.border-top-left-radius(@border-radius-base);
|
||||
}
|
||||
thead:first-child tr:first-child th:last-child,
|
||||
tbody:first-child tr:first-child td:last-child {
|
||||
.border-top-right-radius(@baseBorderRadius);
|
||||
.border-top-right-radius(@border-radius-base);
|
||||
}
|
||||
// For first th or td in the last row in the last thead or tbody
|
||||
thead:last-child tr:last-child th:first-child,
|
||||
tbody:last-child tr:last-child td:first-child,
|
||||
tfoot:last-child tr:last-child td:first-child {
|
||||
.border-bottom-left-radius(@baseBorderRadius);
|
||||
.border-bottom-left-radius(@border-radius-base);
|
||||
}
|
||||
thead:last-child tr:last-child th:last-child,
|
||||
tbody:last-child tr:last-child td:last-child,
|
||||
tfoot:last-child tr:last-child td:last-child {
|
||||
.border-bottom-right-radius(@baseBorderRadius);
|
||||
.border-bottom-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
|
||||
@ -122,13 +122,13 @@ table {
|
||||
caption + tbody tr:first-child td:first-child,
|
||||
colgroup + thead tr:first-child th:first-child,
|
||||
colgroup + tbody tr:first-child td:first-child {
|
||||
.border-top-left-radius(@baseBorderRadius);
|
||||
.border-top-left-radius(@border-radius-base);
|
||||
}
|
||||
caption + thead tr:first-child th:last-child,
|
||||
caption + tbody tr:first-child td:last-child,
|
||||
colgroup + thead tr:first-child th:last-child,
|
||||
colgroup + tbody tr:first-child td:last-child {
|
||||
.border-top-right-radius(@baseBorderRadius);
|
||||
.border-top-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 3px rgba(0,0,0,.055));
|
||||
.transition(all .2s ease-in-out);
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltipBackground;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 @base-line-height / 2;
|
||||
margin: 0 0 @line-height-base / 2;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: @base-line-height;
|
||||
font-size: @base-font-size * 1.5;
|
||||
margin-bottom: @line-height-base;
|
||||
font-size: @font-size-base * 1.5;
|
||||
font-weight: 200;
|
||||
line-height: @base-line-height * 1.5;
|
||||
line-height: @line-height-base * 1.5;
|
||||
}
|
||||
|
||||
|
||||
@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); }
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: (@base-line-height / 2) 0;
|
||||
margin: (@line-height-base / 2) 0;
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
text-rendering: optimizelegibility; // Fix the character spacing for headings
|
||||
small {
|
||||
font-weight: normal;
|
||||
@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 { line-height: @base-line-height * 2; }
|
||||
h3 { line-height: @line-height-base * 2; }
|
||||
|
||||
h1 { font-size: @base-font-size * 2.75; } // ~38px
|
||||
h2 { font-size: @base-font-size * 2.25; } // ~32px
|
||||
h3 { font-size: @base-font-size * 1.75; } // ~24px
|
||||
h4 { font-size: @base-font-size * 1.25; } // ~18px
|
||||
h5 { font-size: @base-font-size; }
|
||||
h6 { font-size: @base-font-size * 0.85; } // ~12px
|
||||
h1 { font-size: @font-size-base * 2.75; } // ~38px
|
||||
h2 { font-size: @font-size-base * 2.25; } // ~32px
|
||||
h3 { font-size: @font-size-base * 1.75; } // ~24px
|
||||
h4 { font-size: @font-size-base * 1.25; } // ~18px
|
||||
h5 { font-size: @font-size-base; }
|
||||
h6 { font-size: @font-size-base * 0.85; } // ~12px
|
||||
|
||||
h1 small { font-size: @base-font-size * 1.75; } // ~24px
|
||||
h2 small { font-size: @base-font-size * 1.25; } // ~18px
|
||||
h3 small { font-size: @base-font-size; }
|
||||
h4 small { font-size: @base-font-size; }
|
||||
h1 small { font-size: @font-size-base * 1.75; } // ~24px
|
||||
h2 small { font-size: @font-size-base * 1.25; } // ~18px
|
||||
h3 small { font-size: @font-size-base; }
|
||||
h4 small { font-size: @font-size-base; }
|
||||
|
||||
|
||||
// Page header
|
||||
// -------------------------
|
||||
|
||||
.page-header {
|
||||
padding-bottom: (@base-line-height / 2) - 1;
|
||||
margin: @base-line-height 0 (@base-line-height * 1.5);
|
||||
padding-bottom: (@line-height-base / 2) - 1;
|
||||
margin: @line-height-base 0 (@line-height-base * 1.5);
|
||||
border-bottom: 1px solid @grayLighter;
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@ h4 small { font-size: @base-font-size; }
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0 0 @base-line-height / 2 25px;
|
||||
margin: 0 0 @line-height-base / 2 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
@ -103,7 +103,7 @@ ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li {
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
// List options
|
||||
@ -123,17 +123,17 @@ li {
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: @base-line-height / 2;
|
||||
margin-left: @line-height-base / 2;
|
||||
}
|
||||
// Horizontal layout (like forms)
|
||||
.dl-horizontal {
|
||||
@ -155,7 +155,7 @@ dd {
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: @base-line-height 0;
|
||||
margin: @line-height-base 0;
|
||||
border: 0;
|
||||
border-top: 1px solid @hrBorder;
|
||||
border-bottom: 1px solid @white;
|
||||
@ -176,15 +176,15 @@ abbr.initialism {
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0 0 @base-line-height;
|
||||
margin: 0 0 @line-height-base;
|
||||
border-left: 5px solid @grayLighter;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
#font > .shorthand(16px,300,@base-line-height * 1.25);
|
||||
#font > .shorthand(16px,300,@line-height-base * 1.25);
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
color: @grayLight;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
@ -224,7 +224,7 @@ blockquote:after {
|
||||
// Addresses
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: @base-line-height;
|
||||
margin-bottom: @line-height-base;
|
||||
font-style: normal;
|
||||
line-height: @base-line-height;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
@ -46,30 +46,30 @@
|
||||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@base-font-size: 14px;
|
||||
@base-font-family: @font-family-sans-serif;
|
||||
@base-line-height: 20px;
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: @font-size-base * 1.25; // ~18px
|
||||
@font-size-small: @font-size-base * 0.85; // ~12px
|
||||
@font-size-mini: @font-size-base * 0.75; // ~11px
|
||||
|
||||
@headings-font-family: inherit; // empty to use BS default, @base-font-family
|
||||
@line-height-base: 20px;
|
||||
|
||||
@headings-font-family: inherit; // empty to use BS default, @font-family-base
|
||||
@headings-font-weight: bold; // instead of browser default, bold
|
||||
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
// Based on 14px font-size and 1.5 line-height
|
||||
|
||||
@fontSizeLarge: @base-font-size * 1.25; // ~18px
|
||||
@fontSizeSmall: @base-font-size * 0.85; // ~12px
|
||||
@fontSizeMini: @base-font-size * 0.75; // ~11px
|
||||
@padding-large: 11px 19px; // 44px
|
||||
@padding-small: 2px 10px; // 26px
|
||||
@padding-mini: 0 6px; // 22px
|
||||
|
||||
@paddingLarge: 11px 19px; // 44px
|
||||
@paddingSmall: 2px 10px; // 26px
|
||||
@paddingMini: 0 6px; // 22px
|
||||
|
||||
@baseBorderRadius: 4px;
|
||||
@borderRadiusLarge: 6px;
|
||||
@borderRadiusSmall: 3px;
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
|
||||
// Tables
|
||||
@ -109,11 +109,11 @@
|
||||
// -------------------------
|
||||
@inputBackground: @white;
|
||||
@inputBorder: #ccc;
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputBorderRadius: @border-radius-base;
|
||||
@inputSearchBorderRadius: 20px;
|
||||
@inputDisabledBackground: @grayLighter;
|
||||
@formActionsBackground: #f5f5f5;
|
||||
@inputHeight: @base-line-height + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
|
||||
@inputHeight: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
|
||||
|
||||
|
||||
// Dropdowns
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
margin-bottom: 20px;
|
||||
background-color: @wellBackground;
|
||||
border: 1px solid darken(@wellBackground, 7%);
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||
blockquote {
|
||||
border-color: #ddd;
|
||||
@ -21,9 +21,9 @@
|
||||
// Sizes
|
||||
.well-large {
|
||||
padding: 24px;
|
||||
border-radius: @borderRadiusLarge;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.well-small {
|
||||
padding: 9px;
|
||||
border-radius: @borderRadiusSmall;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user