]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Part 1 of unCamelCasing variables
authorMark Otto <otto@github.com>
Fri, 30 Nov 2012 22:37:24 +0000 (14:37 -0800)
committerMark Otto <otto@github.com>
Fri, 30 Nov 2012 22:37:24 +0000 (14:37 -0800)
31 files changed:
docs/base-css.html
docs/customize.html
docs/scaffolding.html
docs/templates/pages/base-css.mustache
docs/templates/pages/customize.mustache
docs/templates/pages/scaffolding.mustache
less/accordion.less
less/alerts.less
less/breadcrumbs.less
less/button-groups.less
less/buttons.less
less/carousel.less
less/close.less
less/code.less
less/dropdowns.less
less/forms.less
less/hero-unit.less
less/labels-badges.less
less/mixins.less
less/navbar.less
less/navs.less
less/pager.less
less/pagination.less
less/progress-bars.less
less/responsive-767px-max.less
less/responsive-navbar.less
less/scaffolding.less
less/tables.less
less/thumbnails.less
less/type.less
less/variables.less

index c8a785fed3db99a44063c1572685347c9424ed06..ce9f1685705cd1aab066228f26626d85036635b8 100644 (file)
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
           <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">
index e23a234662c082673432de5dc11056b74778ae2c..16a76e3a7a90820467a3839ad175fb9c332c6917 100644 (file)
             <div class="row download-builder">
               <div class="span3">
                 <h3>Scaffolding</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>Links</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>Colors</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
               <div class="span3">
 
                 <h3>Typography</h3>
-                <label>@sansFontFamily</label>
+                <label>@font-family-sans-serif</label>
                 <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">
-                <label>@monoFontFamily</label>
+                <label>@font-family-monospace</label>
                 <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">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <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>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <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>
                 <input type="text" class="span3" placeholder="11px 19px">
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
index 4846f1ca3da696422bd979b3a78bcc3eb82cb9c4..0a1c6d1ae98333f4be8d5fe8a26c5c22a56af1fb 100644 (file)
           <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>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</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>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>@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>
 
index 4be10716ca15777311a21c196a05c59121f47198..e36eca21471dad291f0cf41ce2998e7ae03b1701 100644 (file)
@@ -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>@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">
index 54bffd786a8d78320e99b5332b210b39c57c2326..37490a69857f940f3f8bade3907909cc5ea3341e 100644 (file)
             <div class="row download-builder">
               <div class="span3">
                 <h3>{{_i}}Scaffolding{{/i}}</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>{{_i}}Links{{/i}}</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>{{_i}}Colors{{/i}}</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
               <div class="span3">
 
                 <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">
-                <label>@serifFontFamily</label>
+                <label>@font-family-serif</label>
                 <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">
 
-                <label>@baseFontSize</label>
+                <label>@base-font-size</label>
                 <input type="text" class="span3" placeholder="14px">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <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>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <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>
                 <input type="text" class="span3" placeholder="11px 19px">
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
index 7a5bfaed7ad11fcac8c64ca303b8700c6f32198b..4c7b7e89ac3c6a21883c03b09ca821c68e0f3809 100644 (file)
@@ -45,8 +45,8 @@
           <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>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</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}}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>@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>
 
index 6b71deefc47dbc33bd30476189e25052b9929f3e..697be70062ee17cec7865c070de7eaa9e926e588 100644 (file)
@@ -5,7 +5,7 @@
 
 // Parent container
 .accordion {
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
 }
 
 // Group == heading + body
index 1425d0652463cb02364257003ea7c049edcd06fc..e0e3707c004c028bcb4be10a4f386f0c508ee3ec 100644 (file)
@@ -8,7 +8,7 @@
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: @warningBackground;
   border: 1px solid @warningBorder;
@@ -28,7 +28,7 @@
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 
 
index 541bbf50de0893fac929f71a78fbe23f0a476912..0c9fa252e20abb50e84db3df8fd7e23cf2496869 100644 (file)
@@ -5,7 +5,7 @@
 
 .breadcrumb {
   padding: 8px 15px;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: @baseBorderRadius;
index b6913b13c70d9a080dc44fc32968b03bf735c955..aa45bdd6d1efe9a33b42af8ce8e16a6e94c2e29f 100644 (file)
@@ -20,8 +20,8 @@
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   font-size: 0; // Hack to remove whitespace that results from using inline-block
-  margin-top: @baseLineHeight / 2;
-  margin-bottom: @baseLineHeight / 2;
+  margin-top: @base-line-height / 2;
+  margin-bottom: @base-line-height / 2;
   > .btn + .btn,
   > .btn-group + .btn,
   > .btn + .btn-group {
@@ -40,7 +40,7 @@
 .btn-group > .btn,
 .btn-group > .dropdown-menu,
 .btn-group > .popover {
-  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
+  font-size: @base-font-size; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
index a6dc00f4c1d7c9ccae4dd18094ca5c3a092bace3..f067cf02fc10ae810c27d4bedcb82f041eeb1aeb 100644 (file)
@@ -11,8 +11,8 @@
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0; // For input.btn
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -178,11 +178,11 @@ input[type="button"] {
 .btn-link {
   border-color: transparent;
   cursor: pointer;
-  color: @linkColor;
+  color: @link-color;
   border-radius: 0;
 }
 .btn-link:hover {
-  color: @linkColorHover;
+  color: @link-color-hover;
   text-decoration: underline;
   background-color: transparent;
 }
index a7ff59f06ce7e6185e8b82c46faaaf296ebfa802..a149e400db8ab0e00fe0caa9b0d7dcedb802a38a 100644 (file)
@@ -5,7 +5,7 @@
 
 .carousel {
   position: relative;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   line-height: 1;
 }
 
 .carousel-caption h3,
 .carousel-caption p {
   color: @white;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 .carousel-caption h3 {
   margin: 0 0 5px;
index c71a508f3ff4c629231dab750b82584519090df5..9a3bfbffb6380b26046e28e797a3d0b7025b4390 100644 (file)
@@ -7,7 +7,7 @@
   float: right;
   font-size: 20px;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   color: @black;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
index 778a41beb5c6e7208dbef1171859e45391044a5a..5a3256ddad5a832a2fa1d4ce6b0d68addaf8ff46 100644 (file)
@@ -8,7 +8,7 @@ code,
 pre {
   padding: 0 3px 2px;
   #font > #family > .monospace;
-  font-size: @baseFontSize - 2;
+  font-size: @base-font-size - 2;
   color: @grayDark;
   border-radius: 4px;
 }
@@ -25,10 +25,10 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
-  font-size: @baseFontSize - 1; // 14px to 13px
-  line-height: @baseLineHeight;
+  padding: (@base-line-height - 1) / 2;
+  margin: 0 0 @base-line-height / 2;
+  font-size: @base-font-size - 1; // 14px to 13px
+  line-height: @base-line-height;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -40,7 +40,7 @@ pre {
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
   }
 
   // Account for some code outputs that place code tags in pre tags
index aad993f6fb60009e88c2c7213e8bcc0f66302cf5..d7f5d4ad06f6acada675f45d6b23b63675b648f4 100644 (file)
@@ -69,7 +69,7 @@
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     color: @dropdownLinkColor;
     white-space: nowrap;
   }
index 5115f0c23d6529e01d408c9d2c062a27db3e6777..071e33c8816fb99cbf0a603aa9844cb72c92b939 100644 (file)
@@ -7,7 +7,7 @@
 // -------------------------
 
 form {
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
 }
 
 fieldset {
@@ -20,9 +20,9 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
-  line-height: @baseLineHeight * 2;
+  margin-bottom: @base-line-height;
+  font-size: @base-font-size * 1.5;
+  line-height: @base-line-height * 2;
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -59,9 +59,9 @@ input[type="color"],
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
   min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
-  margin-bottom: @baseLineHeight / 2;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  margin-bottom: @base-line-height / 2;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
   color: @gray;
   vertical-align: middle;
   background-color: @inputBackground;
@@ -201,7 +201,7 @@ textarea {
 .radio,
 .checkbox {
   display: block;
-  min-height: @baseLineHeight; // clear the floating input if there is no label text
+  min-height: @base-line-height; // clear the floating input if there is no label text
   padding-left: 20px;
 }
 .radio label,
@@ -390,9 +390,9 @@ select:focus:invalid {
 // ------------
 
 .form-actions {
-  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
-  margin-top: @baseLineHeight;
-  margin-bottom: @baseLineHeight;
+  padding: (@base-line-height - 1) 20px @base-line-height;
+  margin-top: @base-line-height;
+  margin-bottom: @base-line-height;
   background-color: @formActionsBackground;
   border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
@@ -405,12 +405,12 @@ select:focus:invalid {
 
 .help-block,
 .help-inline {
-  color: lighten(@textColor, 25%); // lighten the text some for contrast
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
 
 .help-block {
   display: block; // account for any element using help-block
-  margin-bottom: @baseLineHeight / 2;
+  margin-bottom: @base-line-height / 2;
 }
 
 .help-inline {
@@ -436,7 +436,7 @@ select:focus:invalid {
   select,
   .uneditable-input,
   .dropdown-menu {
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
   }
 
   input,
@@ -445,7 +445,7 @@ select:focus:invalid {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     float: none; // Undo the float from grid sizing
     margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
     vertical-align: top;
     border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
     // Make input on top when focused so blue border and shadow always show
@@ -461,12 +461,12 @@ select:focus:invalid {
   .add-on {
     display: inline-block;
     width: auto;
-    height: @baseLineHeight;
+    height: @base-line-height;
     min-width: 16px;
     padding: 6px;
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
     font-weight: normal;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     text-align: center;
     text-shadow: 0 1px 0 @white;
     background-color: @grayLighter;
@@ -642,12 +642,12 @@ input.search-query {
 
 // Margin to space out fieldsets
 .control-group {
-  margin-bottom: @baseLineHeight / 2;
+  margin-bottom: @base-line-height / 2;
 }
 
 // Legend collapses margin, so next element is responsible for spacing
 legend + .control-group {
-  margin-top: @baseLineHeight;
+  margin-top: @base-line-height;
   -webkit-margin-top-collapse: separate;
 }
 
@@ -657,7 +657,7 @@ legend + .control-group {
 .form-horizontal {
   // Increase spacing between groups
   .control-group {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
     .clearfix();
   }
   // Float the labels left
@@ -683,7 +683,7 @@ legend + .control-group {
   .input-prepend,
   .input-append {
     + .help-block {
-      margin-top: @baseLineHeight / 2;
+      margin-top: @base-line-height / 2;
     }
   }
   // Move over buttons in .form-actions to align with .controls
index 4b350983e18b54a6c4c1c604697eaa55953e2113..47f0a9583cc0fb672d6b6ad858f74eaccc077d62 100644 (file)
@@ -8,7 +8,7 @@
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 200;
-  line-height: @baseLineHeight * 1.5;
+  line-height: @base-line-height * 1.5;
   color: @heroUnitLeadColor;
   background-color: @heroUnitBackground;
   border-radius: 6px;
@@ -20,6 +20,6 @@
     letter-spacing: -1px;
   }
   li {
-    line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
+    line-height: @base-line-height * 1.5; // Reset since we specify in type.less
   }
 }
index 5c8b1c25f35266d9275df3fb8f7ee22c76e169ed..9dd4cb2b72d98a69070c131aaf23e5b7e1ba7d88 100644 (file)
@@ -8,7 +8,7 @@
 .badge {
   display: inline-block;
   padding: 2px 4px;
-  font-size: @baseFontSize * .846;
+  font-size: @base-font-size * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
   color: @white;
index 467ce14c17c90ebd01454af9c2ecdd2a4f7137b9..e1d3190324e9e551c6181654c5f7aa7b2ef39418 100644 (file)
 #font {
   #family {
     .serif() {
-      font-family: @serifFontFamily;
+      font-family: @font-family-serif;
     }
     .sans-serif() {
-      font-family: @sansFontFamily;
+      font-family: @font-family-sans-serif;
     }
     .monospace() {
-      font-family: @monoFontFamily;
+      font-family: @font-family-monospace;
     }
   }
-  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .shorthand(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .serif;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .sans-serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .sans-serif;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .monospace(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .monospace;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
 
 
 // Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+.formFieldState(@text-color: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
   // Set the text color
   .control-label,
   .help-block,
   .help-inline {
-    color: @textColor;
+    color: @text-color;
   }
   // Style inputs accordingly
   .checkbox,
   input,
   select,
   textarea {
-    color: @textColor;
+    color: @text-color;
   }
   input,
   select,
   // Give a small background color for input-prepend/-append
   .input-prepend .add-on,
   .input-append .add-on {
-    color: @textColor;
+    color: @text-color;
     background-color: @backgroundColor;
-    border-color: @textColor;
+    border-color: @text-color;
   }
 }
 
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: @white) {
   height: 1px;
-  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
+  margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px
   overflow: hidden;
   background-color: @top;
   border-bottom: 1px solid @bottom;
 
 // Button backgrounds
 // ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  color: @textColor;
+.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: @text-color;
   text-shadow: @textShadow;
   #gradient > .vertical(@startColor, @endColor);
   border-color: @endColor @endColor darken(@endColor, 15%);
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
-    color: @textColor;
+    color: @text-color;
     background-color: @endColor;
   }
 
index 2ed93d7f855fe7539f0c8d7844da047c40e8e6c6..1578ddcc777710b48181a2bada297ced3addef59 100644 (file)
@@ -10,7 +10,7 @@
 .navbar {
   overflow: visible;
   padding: 0 20px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
   border: 1px solid @navbarBorder;
   border-radius: @baseBorderRadius;
@@ -39,7 +39,7 @@
   float: left;
   display: block;
   // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
+  padding: ((@navbarHeight - @base-line-height) / 2) 20px ((@navbarHeight - @base-line-height) / 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
 .navbar .nav > li > a {
   float: none;
   // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
+  padding: ((@navbarHeight - @base-line-height) / 2) 15px ((@navbarHeight - @base-line-height) / 2);
   color: @navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
index ac3ff6aa442d706d31efc426ce4866aad6ef27a7..6c8753c66de72f480c80bf702f5c8cecfa947fd1 100644 (file)
@@ -8,7 +8,7 @@
 
 .nav {
   margin-left: 0;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   list-style: none;
   .clearfix();
 }
@@ -41,7 +41,7 @@
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   color: @grayLight;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
@@ -72,7 +72,7 @@
 // Actual tabs (as links)
 .nav-tabs > li > a {
   margin-right: 2px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
   &:hover {
@@ -83,7 +83,7 @@
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover {
   color: @gray;
-  background-color: @bodyBackground;
+  background-color: @body-background;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
 .nav-pills > .active > a,
 .nav-pills > .active > a:hover {
   color: @white;
-  background-color: @linkColor;
+  background-color: @link-color;
 }
 
 // Stacked pills
   padding: 9px 15px;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.15);
-  background-color: @linkColor;
+  background-color: @link-color;
   border-width: 0;
   .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
 }
 // -------------------------
 // Make carets use linkColor to start
 .nav .dropdown-toggle .caret {
-  border-top-color: @linkColor;
-  border-bottom-color: @linkColor;
+  border-top-color: @link-color;
+  border-bottom-color: @link-color;
   margin-top: 8px;
 }
 .nav .dropdown-toggle:hover .caret {
-  border-top-color: @linkColorHover;
-  border-bottom-color: @linkColorHover;
+  border-top-color: @link-color-hover;
+  border-bottom-color: @link-color-hover;
 }
 
 // Active dropdown links
index 809ed3a9ac9c63258fe172dd2a3668faffc61d3f..3db1f8f999633a84796fdd509e48c15e4713f481 100644 (file)
@@ -4,7 +4,7 @@
 
 
 .pager {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
   list-style: none;
   text-align: center;
   .clearfix();
index 0056b3c9c1ba81458f2c0615a78212198bd1d2c6..36d67a7d913e8f5ba36fc2f32e6fd68ba140b6be 100644 (file)
@@ -4,7 +4,7 @@
 
 // Space out pagination from surrounding content
 .pagination {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
 }
 
 .pagination ul {
@@ -24,7 +24,7 @@
 .pagination ul > li > span {
   float: left; // Collapse white-space
   padding: 4px 12px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   text-decoration: none;
   background-color: @paginationBackground;
   border: 1px solid @paginationBorder;
index 584ef96bb1311064f665591af4dee0432638eade..5e3efc2af2a3ea6c6f2502be497d10facd56c831 100644 (file)
@@ -44,8 +44,8 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: @baseLineHeight;
-  margin-bottom: @baseLineHeight;
+  height: @base-line-height;
+  margin-bottom: @base-line-height;
   #gradient > .vertical(#f5f5f5, #f9f9f9);
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
   border-radius: @baseBorderRadius;
index c967c517b69368f3b972d94b74479ec414995aa2..5104457a6f9194e14506433758c8a66f4cf59d05 100644 (file)
   // Block level the page header small tag for readability
   .page-header h1 small {
     display: block;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
   }
 
   // Update checkboxes for iOS
index 190ebb858e302fe4e099bfe71befd9743d78ca3d..6e76d7ed16df57a3cdfc41cc125d7397d29174b3 100644 (file)
     position: static;
   }
   .navbar-fixed-top {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
   }
   .navbar-fixed-bottom {
-    margin-top: @baseLineHeight;
+    margin-top: @base-line-height;
   }
   .navbar-fixed-top,
   .navbar-fixed-bottom {
@@ -48,7 +48,7 @@
   // Block-level the nav
   .nav-collapse .nav {
     float: none;
-    margin: 0 0 (@baseLineHeight / 2);
+    margin: 0 0 (@base-line-height / 2);
   }
   .nav-collapse .nav > li {
     float: none;
   .nav-collapse .navbar-form,
   .nav-collapse .navbar-search {
     float: none;
-    padding: (@baseLineHeight / 2) 15px;
-    margin: (@baseLineHeight / 2) 0;
+    padding: (@base-line-height / 2) 15px;
+    margin: (@base-line-height / 2) 0;
     border-top: 1px solid @navbarBackground;
     border-bottom: 1px solid @navbarBackground;
     .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
index 368a2ac01580fdd09eb767e16744f925f5bbf584..7a2e0b1ce8a92272f029656a51cd35aa7173e725 100644 (file)
@@ -8,8 +8,8 @@
 
 body {
   margin: 0;
-  color: @textColor;
-  background-color: @bodyBackground;
+  color: @text-color;
+  background-color: @body-background;
 }
 
 // Reset fonts for revelant elements
@@ -18,9 +18,9 @@ input,
 button,
 select,
 textarea {
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  font-family: @base-font-family;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
 }
 
 
@@ -28,11 +28,11 @@ textarea {
 // -------------------------
 
 a {
-  color: @linkColor;
+  color: @link-color;
   text-decoration: none;
 }
 a:hover {
-  color: @linkColorHover;
+  color: @link-color-hover;
   text-decoration: underline;
 }
 
index 9671be9bc5225828b7d1edac5d4c5f490e387800..d3e65e0942017736cbf5d2324cd8ee3cafe61bbe 100644 (file)
@@ -17,12 +17,12 @@ table {
 
 .table {
   width: 100%;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   // Cells
   th,
   td {
     padding: 8px;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     text-align: left;
     vertical-align: top;
     border-top: 1px solid @tableBorder;
index d2a23c7f3198bbf21d64b4e24cf2f851dd5713d2..9e533ecb02a8035ebb0ba4069961341b36b9ac2a 100644 (file)
@@ -7,7 +7,7 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   border: 1px solid #ddd;
   border-radius: @baseBorderRadius;
   .box-shadow(0 1px 3px rgba(0,0,0,.055));
@@ -15,7 +15,7 @@
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
-  border-color: @linkColor;
+  border-color: @link-color;
   .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
 
index ec1c40ed77be2150f9a2dddd9b9bffe4826a337b..cef08a512c4d29c8dcabfcb7bfb558391c188c67 100644 (file)
@@ -7,13 +7,13 @@
 // -------------------------
 
 p {
-  margin: 0 0 @baseLineHeight / 2;
+  margin: 0 0 @base-line-height / 2;
 }
 .lead {
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
+  margin-bottom: @base-line-height;
+  font-size: @base-font-size * 1.5;
   font-weight: 200;
-  line-height: @baseLineHeight * 1.5;
+  line-height: @base-line-height * 1.5;
 }
 
 
@@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); }
 // -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: (@baseLineHeight / 2) 0;
-  font-family: @headingsFontFamily;
-  font-weight: @headingsFontWeight;
-  line-height: @baseLineHeight;
+  margin: (@base-line-height / 2) 0;
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @base-line-height;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
     font-weight: normal;
@@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 {
 
 h1,
 h2,
-h3 { line-height: @baseLineHeight * 2; }
+h3 { line-height: @base-line-height * 2; }
 
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
-h4 { font-size: @baseFontSize * 1.25; } // ~18px
-h5 { font-size: @baseFontSize; }
-h6 { font-size: @baseFontSize * 0.85; } // ~12px
+h1 { font-size: @base-font-size * 2.75; } // ~38px
+h2 { font-size: @base-font-size * 2.25; } // ~32px
+h3 { font-size: @base-font-size * 1.75; } // ~24px
+h4 { font-size: @base-font-size * 1.25; } // ~18px
+h5 { font-size: @base-font-size; }
+h6 { font-size: @base-font-size * 0.85; } // ~12px
 
-h1 small { font-size: @baseFontSize * 1.75; } // ~24px
-h2 small { font-size: @baseFontSize * 1.25; } // ~18px
-h3 small { font-size: @baseFontSize; }
-h4 small { font-size: @baseFontSize; }
+h1 small { font-size: @base-font-size * 1.75; } // ~24px
+h2 small { font-size: @base-font-size * 1.25; } // ~18px
+h3 small { font-size: @base-font-size; }
+h4 small { font-size: @base-font-size; }
 
 
 // Page header
 // -------------------------
 
 .page-header {
-  padding-bottom: (@baseLineHeight / 2) - 1;
-  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
+  padding-bottom: (@base-line-height / 2) - 1;
+  margin: @base-line-height 0 (@base-line-height * 1.5);
   border-bottom: 1px solid @grayLighter;
 }
 
@@ -94,7 +94,7 @@ h4 small { font-size: @baseFontSize; }
 // Unordered and Ordered lists
 ul, ol {
   padding: 0;
-  margin: 0 0 @baseLineHeight / 2 25px;
+  margin: 0 0 @base-line-height / 2 25px;
 }
 ul ul,
 ul ol,
@@ -103,7 +103,7 @@ ol ul {
   margin-bottom: 0;
 }
 li {
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 
 // List options
@@ -123,17 +123,17 @@ li {
 
 // Description Lists
 dl {
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
 }
 dt,
 dd {
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 dt {
   font-weight: bold;
 }
 dd {
-  margin-left: @baseLineHeight / 2;
+  margin-left: @base-line-height / 2;
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
@@ -155,7 +155,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
   border: 0;
   border-top: 1px solid @hrBorder;
   border-bottom: 1px solid @white;
@@ -176,15 +176,15 @@ abbr.initialism {
 // Blockquotes
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
   border-left: 5px solid @grayLighter;
   p {
     margin-bottom: 0;
-    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
+    #font > .shorthand(16px,300,@base-line-height * 1.25);
   }
   small {
     display: block;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     color: @grayLight;
     &:before {
       content: '\2014 \00A0';
@@ -224,7 +224,7 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   font-style: normal;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
index 2b4574f6a4a61479f96a837a4349d57bd1ef957b..26a3ca70c11010653d994fe624fc07f5c8977d8a 100644 (file)
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        @white;
-@textColor:             @grayDark;
+@body-background:         @white;
+@text-color:              @grayDark;
 
 
 // Links
 // -------------------------
-@linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
+@link-color:              #08c;
+@link-color-hover:        darken(@link-color, 15%);
 
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
-@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 
-@baseFontSize:          14px;
-@baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        20px;
-@altFontFamily:         @serifFontFamily;
+@base-font-size:          14px;
+@base-font-family:        @font-family-sans-serif;
+@base-line-height:        20px;
 
-@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
+@headings-font-family:    inherit; // empty to use BS default, @base-font-family
+@headings-font-weight:    bold;    // instead of browser default, bold
 
 
 // Component sizing
 // -------------------------
 // Based on 14px font-size and 20px line-height
 
-@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
-@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
-@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+@fontSizeLarge:         @base-font-size * 1.25; // ~18px
+@fontSizeSmall:         @base-font-size * 0.85; // ~12px
+@fontSizeMini:          @base-font-size * 0.75; // ~11px
 
 @paddingLarge:          11px 19px; // 44px
 @paddingSmall:          2px 10px;  // 26px
@@ -87,7 +86,7 @@
 @btnBackgroundHighlight:            darken(@white, 10%);
 @btnBorder:                         #bbb;
 
-@btnPrimaryBackground:              @linkColor;
+@btnPrimaryBackground:              @link-color;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
 
 @btnInfoBackground:                 #5bc0de;
 @inputSearchBorderRadius:       20px;
 @inputDisabledBackground:       @grayLighter;
 @formActionsBackground:         #f5f5f5;
-@inputHeight:                   @baseLineHeight + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@inputHeight:                   @base-line-height + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 
-@dropdownLinkBackgroundActive:  @linkColor;
+@dropdownLinkBackgroundActive:  @link-color;
 @dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;