finish adding remaining component variables to less docs page

This commit is contained in:
Mark Otto 2012-03-22 19:36:55 -07:00
parent 254bb40f00
commit b011daf67f
3 changed files with 400 additions and 78 deletions

Binary file not shown.

View File

@ -139,12 +139,24 @@
<div class="row">
<div class="span6">
<h3>Hyperlinks</h3>
<h3>Scaffolding and links</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@linkColor</code></td>
<td>#08c</td>
<td class="span2"><code>@bodyBackground</code></td>
<td><code>@white</code></td>
<td>Page background color</td>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@textColor</code></td>
<td><code>@grayDark</code></td>
<td>Default text color for entire body, headings, and more</td>
<td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@linkColor</code></td>
<td><code>#08c</code></td>
<td>Default link text color</td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
@ -184,18 +196,69 @@
<h3>Typography</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@sansFontFamily</code></td>
<td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
</tr>
<tr>
<td><code>@serifFontFamily</code></td>
<td><code>Georgia, "Times New Roman", Times, serif</code></td>
</tr>
<tr>
<td><code>@monoFontFamily</code></td>
<td>Menlo, Monaco, "Courier New", monospace</td>
</tr>
<tr>
<td class="span2"><code>@baseFontSize</code></td>
<td>13px</td>
</tr>
<tr>
<td><code>@baseFontFamily</code></td>
<td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
<td><code>@sansFontFamily</code></td>
</tr>
<tr>
<td><code>@baseLineHeight</code></td>
<td>18px</td>
</tr>
<tr>
<td><code>@altFontFamily</code></td>
<td><code>@serifFontFamily</code></td>
</tr>
<tr>
<td class="span2"><code>@headingsFontFamily</code></td>
<td><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>Tables</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
</div>
@ -378,47 +441,21 @@
<tr>
<td class="span3"><code>@placeholderText</code></td>
<td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
</tr>
</tbody>
</table>
<h4>Navbar</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@navbarText</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColor</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorHover</code></td>
<td><code>@inputBackground</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@inputBorder</code></td>
<td><code>#ccc</code></td>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h4>Form states and alerts</h4>
<table class="table table-bordered table-striped">
<tbody>
@ -465,6 +502,130 @@
</tbody>
</table>
</div>
<div class="span6">
<h4>Navbar</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@navbarText</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColor</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorHover</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorActive</code></td>
<td><code>@navbarLinkColorHover</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkBackgroundHover</code></td>
<td><code>transparent</code></td>
<td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkBackgroundActive</code></td>
<td><code>@navbarBackground</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackground</code></td>
<td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #666;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBorder</code></td>
<td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch" style="background-color: #111;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>#ccc</code></td>
<td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@navbarBrandColor</code></td>
<td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h4>Dropdowns</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
</tbody>
</table>
<h4>Hero unit</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section>

View File

@ -63,12 +63,24 @@
<div class="row">
<div class="span6">
<h3>{{_i}}Hyperlinks{{/i}}</h3>
<h3>{{_i}}Scaffolding and links{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@linkColor</code></td>
<td>#08c</td>
<td class="span2"><code>@bodyBackground</code></td>
<td><code>@white</code></td>
<td>{{_i}}Page background color{{/i}}</td>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@textColor</code></td>
<td><code>@grayDark</code></td>
<td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
<td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@linkColor</code></td>
<td><code>#08c</code></td>
<td>{{_i}}Default link text color{{/i}}</td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
@ -108,18 +120,69 @@
<h3>{{_i}}Typography{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@sansFontFamily</code></td>
<td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
</tr>
<tr>
<td><code>@serifFontFamily</code></td>
<td><code>Georgia, "Times New Roman", Times, serif</code></td>
</tr>
<tr>
<td><code>@monoFontFamily</code></td>
<td>Menlo, Monaco, "Courier New", monospace</td>
</tr>
<tr>
<td class="span2"><code>@baseFontSize</code></td>
<td>13px</td>
</tr>
<tr>
<td><code>@baseFontFamily</code></td>
<td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
<td><code>@sansFontFamily</code></td>
</tr>
<tr>
<td><code>@baseLineHeight</code></td>
<td>18px</td>
</tr>
<tr>
<td><code>@altFontFamily</code></td>
<td><code>@serifFontFamily</code></td>
</tr>
<tr>
<td class="span2"><code>@headingsFontFamily</code></td>
<td><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Tables{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
</div>
@ -302,47 +365,21 @@
<tr>
<td class="span3"><code>@placeholderText</code></td>
<td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Navbar{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@navbarText</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColor</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorHover</code></td>
<td><code>@inputBackground</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@inputBorder</code></td>
<td><code>#ccc</code></td>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h4>{{_i}}Form states and alerts{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
@ -389,6 +426,130 @@
</tbody>
</table>
</div>
<div class="span6">
<h4>{{_i}}Navbar{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@navbarText</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColor</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorHover</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorActive</code></td>
<td><code>@navbarLinkColorHover</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkBackgroundHover</code></td>
<td><code>transparent</code></td>
<td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkBackgroundActive</code></td>
<td><code>@navbarBackground</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackground</code></td>
<td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #666;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBorder</code></td>
<td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch" style="background-color: #111;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>#ccc</code></td>
<td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@navbarBrandColor</code></td>
<td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Dropdowns{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Hero unit{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section>