mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
add swatches to the color variables in less docs page
This commit is contained in:
Mark Otto
Vendored
+110
-132
@@ -62,129 +62,33 @@
|
||||
================================================== -->
|
||||
<section id="variables">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Bootstrap variables <small></small>{{/i}}</h1>
|
||||
<h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Hyperlinks{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Value{{/i}}</th>
|
||||
<th>{{_i}}Usage{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@linkColor</code></td>
|
||||
<td>#08c</td>
|
||||
<td>{{_i}}Default link text color{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@linkColorHover</code></td>
|
||||
<td><code>darken(@linkColor, 15%)</code></td>
|
||||
<td>{{_i}}Default link text hover color{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h3>{{_i}}Grayscale colors{{/i}}</h3>
|
||||
<h3>{{_i}}Hyperlinks{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Value{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@black</code></td>
|
||||
<td>#000</td>
|
||||
<td class="span2"><code>@linkColor</code></td>
|
||||
<td>#08c</td>
|
||||
<td>{{_i}}Default link text color{{/i}}</td>
|
||||
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDarker</code></td>
|
||||
<td>#222</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td>#333</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td>#555</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td>#999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td>#eee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
<td>#fff</td>
|
||||
<td><code>@linkColorHover</code></td>
|
||||
<td><code>darken(@linkColor, 15%)</code></td>
|
||||
<td>{{_i}}Default link text hover color{{/i}}</td>
|
||||
<td><span class="swatch" style="background-color: #005580;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>{{_i}}Accent colors{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Value{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@blue</code></td>
|
||||
<td>#049cdb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@green</code></td>
|
||||
<td>#46a546</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@red</code></td>
|
||||
<td>#9d261d</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@yellow</code></td>
|
||||
<td>#ffc40d</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@orange</code></td>
|
||||
<td>#f89406</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@pink</code></td>
|
||||
<td>#c3325f</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@purple</code></td>
|
||||
<td>#7a43b6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h3>{{_i}}Grid system{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Value{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td class="span2"><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -201,19 +105,11 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>{{_i}}Typography{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Value{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@baseFontSize</code></td>
|
||||
<td class="span2"><code>@baseFontSize</code></td>
|
||||
<td>13px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -228,6 +124,88 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>{{_i}}Grayscale colors{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="span2"><code>@black</code></td>
|
||||
<td>#000</td>
|
||||
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDarker</code></td>
|
||||
<td>#222</td>
|
||||
<td><span class="swatch" style="background-color: #222;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td>#333</td>
|
||||
<td><span class="swatch" style="background-color: #333;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td>#555</td>
|
||||
<td><span class="swatch" style="background-color: #555;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td>#999</td>
|
||||
<td><span class="swatch" style="background-color: #999;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td>#eee</td>
|
||||
<td><span class="swatch" style="background-color: #eee;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
<td>#fff</td>
|
||||
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>{{_i}}Accent colors{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="span2"><code>@blue</code></td>
|
||||
<td>#049cdb</td>
|
||||
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@green</code></td>
|
||||
<td>#46a546</td>
|
||||
<td><span class="swatch" style="background-color: #46a546;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@red</code></td>
|
||||
<td>#9d261d</td>
|
||||
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@yellow</code></td>
|
||||
<td>#ffc40d</td>
|
||||
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@orange</code></td>
|
||||
<td>#f89406</td>
|
||||
<td><span class="swatch" style="background-color: #f89406;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@pink</code></td>
|
||||
<td>#c3325f</td>
|
||||
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@purple</code></td>
|
||||
<td>#7a43b6</td>
|
||||
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
<h3>{{_i}}Components{{/i}}</h3>
|
||||
@@ -239,6 +217,7 @@
|
||||
<tr>
|
||||
<td class="span3"><code>@primaryButtonBackground</code></td>
|
||||
<td><code>@linkColor</code></td>
|
||||
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -248,6 +227,7 @@
|
||||
<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>
|
||||
@@ -257,26 +237,32 @@
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -288,50 +274,42 @@
|
||||
<tr>
|
||||
<td class="span3"><code>@warningText</code></td>
|
||||
<td>#f3edd2</td>
|
||||
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@warningBackground</code></td>
|
||||
<td>#c09853</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@warningBorder</code></td>
|
||||
<td>#f3edd2</td>
|
||||
<td><span class="swatch" style="background-color: #c09853;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@errorText</code></td>
|
||||
<td>#b94a48</td>
|
||||
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@errorBackground</code></td>
|
||||
<td>#f2dede</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@errorBorder</code></td>
|
||||
<td>#e9c7c7</td>
|
||||
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@successText</code></td>
|
||||
<td>#468847</td>
|
||||
<td><span class="swatch" style="background-color: #468847;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@successBackground</code></td>
|
||||
<td>#dff0d8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@successBorder</code></td>
|
||||
<td>#cfe8c4</td>
|
||||
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@infoText</code></td>
|
||||
<td>#3a87ad</td>
|
||||
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@infoBackground</code></td>
|
||||
<td>#d9edf7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@infoBorder</code></td>
|
||||
<td>#bfe1f2</td>
|
||||
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user