hero unit and pagination vars

docs/customize.html

@@ -310,11 +310,11 @@
                 <label>@border-radius-small</label>
                 <input type="text" class="span3" placeholder="3px">
 
-                <label>@heroUnitBackground</label>
+                <label>@hero-background</label>
                 <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@heroUnitHeadingColor</label>
+                <label>@hero-heading-color</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@heroUnitLeadColor</label>
+                <label>@hero-lead-color</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <h3>Tables</h3>

docs/templates/pages/customize.mustache

@@ -242,11 +242,11 @@
                 <label>@border-radius-small</label>
                 <input type="text" class="span3" placeholder="3px">
 
-                <label>@heroUnitBackground</label>
+                <label>@hero-background</label>
                 <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@heroUnitHeadingColor</label>
+                <label>@hero-heading-color</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@heroUnitLeadColor</label>
+                <label>@hero-lead-color</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <h3>{{_i}}Tables{{/i}}</h3>

less/hero-unit.less

@@ -9,14 +9,14 @@
   font-size: 18px;
   font-weight: 200;
   line-height: @line-height-base * 1.5;
-  color: @heroUnitLeadColor;
-  background-color: @heroUnitBackground;
+  color: @hero-lead-color;
+  background-color: @hero-background;
   border-radius: 6px;
   h1 {
     margin-bottom: 0;
     font-size: 60px;
     line-height: 1;
-    color: @heroUnitHeadingColor;
+    color: @hero-heading-color;
     letter-spacing: -1px;
   }
   li {

less/pagination.less

@@ -26,14 +26,14 @@
   padding: 4px 12px;
   line-height: @line-height-base;
   text-decoration: none;
-  background-color: @paginationBackground;
-  border: 1px solid @paginationBorder;
+  background-color: @pagination-background;
+  border: 1px solid @pagination-border;
   border-left-width: 0;
 }
 .pagination ul > li > a:hover,
 .pagination ul > .active > a,
 .pagination ul > .active > span {
-  background-color: @paginationActiveBackground;
+  background-color: @pagination-background-active;
 }
 .pagination ul > .active > a,
 .pagination ul > .active > span {

less/variables.less

@@ -192,20 +192,24 @@
 
 // Pagination
 // -------------------------
-@paginationBackground:                #fff;
-@paginationBorder:                    #ddd;
-@paginationActiveBackground:          #f5f5f5;
+
+@pagination-background:                #fff;
+@pagination-background-active:          #f5f5f5;
+
+@pagination-border:                    #ddd;
 
 
 // Hero unit
 // -------------------------
-@heroUnitBackground:              @grayLighter;
-@heroUnitHeadingColor:            inherit;
-@heroUnitLeadColor:               inherit;
+
+@hero-background:              @grayLighter;
+@hero-heading-color:            inherit;
+@hero-lead-color:               inherit;
 
 
 // Form states and alerts
 // -------------------------
+
 @warningText:             #c09853;
 @warningBackground:       #fcf8e3;
 @warningBorder:           darken(spin(@warningBackground, -10), 3%);