massive update to customize page to include all the new variables (and ensure they're being used in the .less files)

2025-01-17 21:49:09 +01:00 · 2012-03-10 16:01:06 -08:00 · 2012-03-10 16:01:06 -08:00 · 1dbb942d5b
commit 1dbb942d5b
parent 95a3cd8732
6 changed files with 152 additions and 21 deletions
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@ -124,7 +124,7 @@ a {
  text-decoration: none;
 }
 a:hover {
-  color: #006699;
+  color: #005580;
  text-decoration: underline;
 }
 .row {
@ -2601,8 +2601,8 @@ input[type="submit"].btn.btn-small {
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
-  border-top-color: #006699;
-  border-bottom-color: #006699;
+  border-top-color: #005580;
+  border-bottom-color: #005580;
 }
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
@ -3901,7 +3901,7 @@ a.thumbnail:hover {
 .hero-unit {
  padding: 60px;
  margin-bottom: 30px;
-  background-color: #f5f5f5;
+  background-color: #eeeeee;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
@ -3910,12 +3910,14 @@ a.thumbnail:hover {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
+  color: inherit;
  letter-spacing: -1px;
 }
 .hero-unit p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
+  color: inherit;
 }
 .pull-right {
  float: right;
--- a/docs/download.html
+++ b/docs/download.html
@ -227,6 +227,12 @@
  </div>
  <div class="row download-builder">
    <div class="span3">
+      <h3>Scaffolding</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
      <h3>Links</h3>
      <label>@linkColor</label>
      <input type="text" class="span3" placeholder="#08c">
@ -247,6 +253,13 @@
      <input type="text" class="span3" placeholder="#c3325f">
      <label>@purple</label>
      <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>Sprites</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
    </div><!-- /span -->
    <div class="span3">
      <h3>Grid system</h3>
@ -261,6 +274,7 @@
      <input type="text" class="span3" placeholder="6.382978723%">
      <label>@fluidGridGutterWidth</label>
      <input type="text" class="span3" placeholder="2.127659574%">
+
      <h3>Typography</h3>
      <label>@baseFontSize</label>
      <input type="text" class="span3" placeholder="13px">
@ -268,13 +282,32 @@
      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
      <label>@baseLineHeight</label>
      <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
    </div><!-- /span -->
    <div class="span3">
-      <h3>Forms</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>Tables</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
      <h3>Navbar</h3>
      <label>@navbarHeight</label>
      <input type="text" class="span3" placeholder="40px">
@ -288,8 +321,39 @@
      <input type="text" class="span3" placeholder="@grayLight">
      <label>@navbarLinkColorHover</label>
      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>Dropdowns</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
    </div><!-- /span -->
    <div class="span3">
+      <h3>Forms</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
      <h3>Form states &amp; alerts</h3>
      <label>@warningText</label>
      <input type="text" class="span3" placeholder="#c09853">
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@ -151,6 +151,12 @@
  </div>
  <div class="row download-builder">
    <div class="span3">
+      <h3>{{_i}}Scaffolding{{/i}}</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
      <h3>{{_i}}Links{{/i}}</h3>
      <label>@linkColor</label>
      <input type="text" class="span3" placeholder="#08c">
@ -171,6 +177,13 @@
      <input type="text" class="span3" placeholder="#c3325f">
      <label>@purple</label>
      <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>{{_i}}Sprites{{/i}}</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
    </div><!-- /span -->
    <div class="span3">
      <h3>{{_i}}Grid system{{/i}}</h3>
@ -185,6 +198,7 @@
      <input type="text" class="span3" placeholder="6.382978723%">
      <label>@fluidGridGutterWidth</label>
      <input type="text" class="span3" placeholder="2.127659574%">
+
      <h3>{{_i}}Typography{{/i}}</h3>
      <label>@baseFontSize</label>
      <input type="text" class="span3" placeholder="13px">
@ -192,13 +206,32 @@
      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
      <label>@baseLineHeight</label>
      <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
    </div><!-- /span -->
    <div class="span3">
-      <h3>{{_i}}Forms{{/i}}</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
      <h3>{{_i}}Navbar{{/i}}</h3>
      <label>@navbarHeight</label>
      <input type="text" class="span3" placeholder="40px">
@ -212,8 +245,39 @@
      <input type="text" class="span3" placeholder="@grayLight">
      <label>@navbarLinkColorHover</label>
      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>{{_i}}Dropdowns{{/i}}</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
    </div><!-- /span -->
    <div class="span3">
+      <h3>{{_i}}Forms{{/i}}</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
      <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
      <label>@warningText</label>
      <input type="text" class="span3" placeholder="#c09853">
--- a/less/hero-unit.less
+++ b/less/hero-unit.less
@ -4,17 +4,19 @@
 .hero-unit {
  padding: 60px;
  margin-bottom: 30px;
-  background-color: #f5f5f5;
+  background-color: @heroUnitBackground;
  .border-radius(6px);
  h1 {
    margin-bottom: 0;
    font-size: 60px;
    line-height: 1;
+    color: @heroUnitHeadingColor;
    letter-spacing: -1px;
  }
  p {
    font-size: 18px;
    font-weight: 200;
    line-height: @baseLineHeight * 1.5;
+    color: @heroUnitLeadColor;
  }
 }
--- a/less/variables.less
+++ b/less/variables.less
@ -40,7 +40,7 @@
 // Links
 // -------------------------
@linkColor:             #08c;
-@linkColorHover:        #069;
+@linkColorHover:        darken(@linkColor, 15%);


 // Typography
@ -67,7 +67,7 @@
 // -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #ccc;
+@btnBorder:                         darken(@white, 20%);

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
@ -92,7 +92,6 @@
 // -------------------------
@inputBackground:               @white;
@inputBorder:                   #ccc;
-
@inputDisabledBackground:       @grayLighter;


@ -153,9 +152,9 @@

 // Hero unit
 // -------------------------
-@heroUnitBackground:              #312f2e;
-@heroUnitHeadingColor:            @white;
-@heroUnitLeadColor:               @white;
+@heroUnitBackground:              @grayLighter;
+@heroUnitHeadingColor:            inherit;
+@heroUnitLeadColor:               inherit;


 // Form states and alerts