mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-25 12:37:15 +00:00
add swatches to the color variables in less docs page
This commit is contained in:
Mark Otto
parent
f9e01e2258
commit
15a1c0ce79
@ -470,6 +470,30 @@ hr.soften {
|
||||
|
||||
|
||||
|
||||
/* Color swatches on LESS docs page
|
||||
-------------------------------------------------- */
|
||||
/* Sets the width of the td */
|
||||
.swatch-col {
|
||||
width: 30px;
|
||||
}
|
||||
/* Le swatch */
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin: -6px 0;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* For white swatches, give a border */
|
||||
.swatch-bordered {
|
||||
width: 28px;
|
||||
height: 18px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
/* Misc
|
||||
-------------------------------------------------- */
|
||||
|
||||
|
||||
242
docs/less.html
242
docs/less.html
@ -134,129 +134,33 @@
|
||||
================================================== -->
|
||||
<section id="variables">
|
||||
<div class="page-header">
|
||||
<h1>Bootstrap variables <small></small></h1>
|
||||
<h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
|
||||
</div>
|
||||
|
||||
<h3>Hyperlinks</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Usage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@linkColor</code></td>
|
||||
<td>#08c</td>
|
||||
<td>Default link text color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@linkColorHover</code></td>
|
||||
<td><code>darken(@linkColor, 15%)</code></td>
|
||||
<td>Default link text hover color</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h3>Grayscale colors</h3>
|
||||
<h3>Hyperlinks</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@black</code></td>
|
||||
<td>#000</td>
|
||||
<td class="span2"><code>@linkColor</code></td>
|
||||
<td>#08c</td>
|
||||
<td>Default link text color</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>Default link text hover color</td>
|
||||
<td><span class="swatch" style="background-color: #005580;"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Accent colors</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">Variable</th>
|
||||
<th>Value</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>Grid system</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td class="span2"><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -273,19 +177,11 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Typography</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2">Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@baseFontSize</code></td>
|
||||
<td class="span2"><code>@baseFontSize</code></td>
|
||||
<td>13px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -300,6 +196,88 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Grayscale colors</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>Accent colors</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>Components</h3>
|
||||
@ -311,6 +289,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>
|
||||
@ -320,6 +299,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>
|
||||
@ -329,26 +309,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>
|
||||
@ -360,50 +346,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>
|
||||
|
||||
242
docs/templates/pages/less.mustache
vendored
242
docs/templates/pages/less.mustache
vendored
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user