{% extends "layout.html" %}

{% load currency_filters %}
{% load i18n %}

{% block header %}
<div class="page-header">
    <h1>{{ flatpage.title }}</h1>
</div>
{% endblock header %}

{% block flatpage %}
<article>
    {{ flatpage.content }}
    <div class="sub-header">
        <h2>{% trans 'Colours' %}</h2>
    </div>
    <h3>{% trans 'Hyperlinks' %}</h3>
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td><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>@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>
    <h3>Grayscale colors</h3>
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td><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><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>
    <h3>Form states, alerts and wells</h3>
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td><code>@warningText</code></td>
                <td>#c09853</td>
                <td><span class="swatch" style="background-color: #c09853;"></span></td>
            </tr>
            <tr>
                <td><code>@warningBackground</code></td>
                <td>#f3edd2</td>
                <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></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>
                <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>
                <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>
                <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
            </tr>
        </tbody>
    </table>
    <h3>Forms</h3>
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td><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>
    <h3>Navbar</h3>
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td><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>
    <div class="sub-header">
        <h2>Typography</h2>
    </div>
    <h3>Base Fonts</h3>
    <table class="table table-striped table-bordered">
        <tr>
            <td>@baseFontSize</td>
            <td>13px</td>
            <td class="swatch-col"></td>
        </tr>
        <tr>
            <td>@baseFontFamily</td>
            <td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
            <td></td>
        </tr>
        <tr>
            <td>@baseLineHeight</td>
            <td>18px</td>
            <td></td>
        </tr>
        <tr>
            <td>@textColor</td>
            <td>@grayDark</td>
            <td><span class="swatch" style="background-color: #333;"></span></td>
        </tr>
    </table>
    <h3>Headings</h3>
    <table class="table table-striped table-bordered">
        <tr>
            <td>h1</td>
            <td>font-size: 30px<br/>line-height: @baseLineHeight * 2</td>
            <td><h1>Heading</h1></td>
        </tr>
        <tr>
            <td>h2</td>
            <td>font-size: 24px<br/>line-height: @baseLineHeight * 2</td>
            <td><h2>Heading</h2></td>
        </tr>
        <tr>
            <td>h3</td>
            <td>font-size: 18px<br/>line-height: @baseLineHeight * 1.5</td>
            <td><h3>Heading</h3></td>
        </tr>
        <tr>
            <td>h4</td>
            <td>14px</td>
            <td><h4>Heading</h4></td>
        </tr>
        <tr>
            <td>h5</td>
            <td>12px</td>
            <td><h5>Heading</h5></td>
        </tr>
        <tr>
            <td>h6</td>
            <td>11px<br/>color: @grayLight<br/>text-transform: uppercase</td>
            <td><h6>Heading</h6></td>
        </tr>
        <tr>
            <td>&lt;div class="page-header"&gt;</td>
            <td>background:lighten(@grayLighter, 4.5%)<br/>padding:@gridGutterWidth<br/>margin-bottom: @baseLineHeight<br/>border-bottom: 1px solid darken(@grayLighter, 5.5%)</td>
            <td><div class="page-header"><h1>Page Header</h1></div></td>
        </tr>
        <tr>
            <td>&lt;div class="sub-header"&gt;</td>
            <td>margin-bottom: @baseLineHeight<br/>border-bottom: 1px solid darken(@grayLighter, 5.5%)</td>
            <td style="background-color:#fff"><div class="sub-header"><h2>Sub Header</h2></div></td>
        </tr>
        <tr>
            <td>Unordered List</td>
            <td>&lt;ul&gt;</td>
            <td>
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Ustyled List</td>
            <td>&lt;ul class="unstyled"&gt;</td>
            <td>
                <ul class="unstyled">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Ordered List</td>
            <td>&lt;ol&gt;</td>
            <td>
                <ol>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ol>
            </td>
        </tr>
        <tr>
            <td>Description List</td>
            <td>&lt;dl&gt;</td>
            <td>
                <dl>
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                </dl>
            </td>
        </tr>
    </table>
    <h3>Buttons</h3>
    <table class="table table-striped table-bordered">
        <tr>
            <td>.btn</td>
            <td></td>
            <td></td>
            <td class="swatch-col"></td>
            <td><button class="btn">Button</button></td>
        </tr>
        <tr>
            <td>.btn .btn-primary</td>
            <td><code>@primaryButtonBackground</code></td>
            <td><code>@linkColor</code></td>
            <td><span class="swatch" style="background-color: #08c;"></span></td>
            <td><button class="btn btn-primary">Button</button></td>
        </tr>
        <tr>
            <td>.btn .btn-success</td>
            <td><code>.buttonBackground(lighten(@green, 15%), @green)</code></td>
            <td>@green</td>
            <td><span class="swatch" style="background-color: #46a546;"></span></td>
            <td><button class="btn btn-success">Button</button></td>
        </tr>
    </table>
    <div class="sub-header">
        <h2>Mixins</h2>
    </div>
    <h3>Utilities</h3>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Mixin</th>
                <th>Parameters</th>
                <th>Usage</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>.clearfix()</code></td>
                <td><em class="muted">none</em></td>
                <td>Add to any parent to clear floats within</td>
                <td></td>
            </tr>
            <tr>
                <td><code>.tab-focus()</code></td>
                <td><em class="muted">none</em></td>
                <td>Apply the Webkit focus style and round Firefox outline</td>
                <td></td>
            </tr>
            <tr>
                <td><code>.center-block()</code></td>
                <td><em class="muted">none</em></td>
                <td>.test-center { .center-block() }</td>
                <td><span class="swatch test-center"></span></td>
            </tr>
            <tr>
                <td><code>.ie7-inline-block()</code></td>
                <td><em class="muted">none</em></td>
                <td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
                <td></td>
            </tr>
            <tr>
                <td><code>.size()</code></td>
                <td><code>@height: 5px, @width: 5px</code></td>
                <td>.test-size { .size(25px, 7px) }</td>
                <td><span class="swatch test-size"></span></td>
            </tr>
            <tr>
                <td><code>.square()</code></td>
                <td><code>@size: 5px</code></td>
                <td>.test-square { .square(25px) }</td>
                <td><span class="swatch test-square"></span></td>
            </tr>
            <tr>
                <td><code>.opacity()</code></td>
                <td><code>@opacity: 100</code></td>
                <td>.test-opacity { .opacity(50) }</td>
                <td><span class="swatch test-opacity"></span></td>
            </tr>
        </tbody>
    </table>
    <h3>CSS3 properties</h3>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Mixin</th>
                <th>Parameters</th>
                <th>Usage</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>.border-radius()</code></td>
                <td><code>@radius: 5px</code></td>
                <td><code>.test-radius { .border-radius(10px) }</code></td>
                <td><span class="swatch test-radius"></span></td>
            </tr>
            <tr>
                <td><code>.box-shadow()</code></td>
                <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
                <td><code>.test-shadow { .box-shadow(2px 2px 3px rgba(0,0,0,.5)) }</code></td>
                <td><span class="swatch test-shadow"></span></td>
            </tr>
            <tr>
                <td><code>.transition()</code></td>
                <td><code>@transition</code></td>
                <td><code>.test-transition { .transition(all 1s ease-in-out); &:hover{background:@green} }</code>
                    <ul>
                        <li>transition:</li>
                        <li>
                            <ol>
                                <li>transition-property</li>
                                <li>transition-duration</li>
                                <li>transition-timing-function</li>
                                <li>transition-delay</li>
                            </ol>
                        </li>
                    </ul>
                </td>
                <td><span class="swatch test-transition"></span>hover</td>
            </tr>
            <tr>
                <td><code>.rotate()</code></td>
                <td><code>@degrees</code></td>
                <td><code>.test-rotation { .rotate(50deg) }</code></td>
                <td><span class="swatch test-rotation"></span></td>
            </tr>
            <tr>
                <td><code>.scale()</code></td>
                <td><code>@ratio</code></td>
                <td><code>.test-scale { .scale(0.5) }</code></td>
                <td><span class="swatch test-scale"></span></td>
            </tr>
            <tr>
                <td><code>.translate()</code></td>
                <td><code>@x: 0, @y: 0</code></td>
                <td><code>.test-translate { .translate(15px, 5px) }</code></td>
                <td><span class="swatch test-translate"></span></td>
            </tr>
            <tr>
                <td><code>.background-clip()</code></td>
                <td><code>@clip</code></td>
                <td><code>.test-clip { border: 5px solid @yellow;padding:5px;.background-clip(content); }</code>
                    <ul>
                        <li>border</li>
                        <li>padding-box</li>
                        <li>content</li>
                    </ul>
                </td>
                <td><span class="swatch test-clip">Content</span></td>
            </tr>
            <tr>
                <td><code>.background-size()</code></td>
                <td><code>@size</code></td>
                <td><code>.test-bgsize { background:url('http://placehold.it/260x180') no-repeat 0 0 @green;.background-size(10px auto) }</code></td>
                <td><span class="swatch test-bgsize"></span></td>
            </tr>
            <tr>
                <td><code>.box-sizing()</code></td>
                <td><code>@boxmodel</code></td>
                <td><code>.test-sizing { border:3px solid @red;padding:2px;.box-sizing(border-box) }</code></td>
                <td><span class="swatch test-sizing"></span></td>
            </tr>
            <tr>
                <td><code>.user-select()</code></td>
                <td><code>@select</code></td>
                <td><code>.test-select { .user-select(none) }</code><br/>
                    <ul>
                        <li>auto</li>
                        <li>none</li>
                        <li>text</li>
                    </ul>
                </td>
                <td><span class="test-select">select text</span></td>
            </tr>
            <tr>
                <td><code>.resizable()</code></td>
                <td><code>@direction: both</code></td>
                <td><code>.test-resizable { .resizable(both);max-width:40px;max-height:40px;}</code><br />
                    <ul>
                        <li>horizontal</li>
                        <li>vertical</li>
                        <li>both</li>
                    </ul>
                </td>
                <td><span class="swatch test-resizable"></span></td>
            </tr>
            <tr>
                <td><code>.content-columns()</code></td>
                <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
                <td colspan="2">
                    <code>.test-column { .content-columns(3,10) }</code><br />
                    <p class="test-column">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non</p>
                </td>
            </tr>
        </tbody>
    </table>
    <h3>Backgrounds and gradients</h3>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Mixin</th>
                <th>Parameters</th>
                <th>Usage</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>#translucent > .background()</code></td>
                <td><code>.test-transback { #translucent > .background(@green,0.5) }</code></td>
                <td><span class="swatch test-transback"></span></td>
            </tr>
            <tr>
                <td><code>#translucent > .border()</code></td>
                <td><code>.test-transborder { border:3px solid @black;#translucent > .border(@red,0.5) }</code></td>
                <td><span class="swatch test-transborder"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .vertical()</code></td>
                <td><code>.test-gradvert { #gradient > .vertical(@green, @yellow) }</code></td>
                <td><span class="swatch test-gradvert"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .horizontal()</code></td>
                <td><code>.test-gradhoriz { #gradient > .horizontal(@green, @yellow) }</code></td>
                <td><span class="swatch test-gradhoriz"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .directional()</code></td>
                <td><code>.test-graddirect{ #gradient > .directional(@green, @yellow, 45deg) }</code></td>
                <td><span class="swatch test-graddirect"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .vertical-three-colors()</code></td>
                <td><code>.test-gradthreecolors { #gradient > .vertical-three-colors(@black, @white, 50%, @grayDark) }</code></td>
                <td><span class="swatch test-gradthreecolors"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .radial()</code></td>
                <td><code>.test-gradradial { #gradient > .radial(@yellow, @blue) }</code></td>
                <td><span class="swatch test-gradradial"></span></td>
            </tr>
            <tr>
                <td><code>#gradient > .striped()</code></td>
                <td><code>.test-gradstriped { #gradient > .striped(@blue, 45deg) }</code></td>
                <td><span class="swatch test-gradstriped"></span></td>
            </tr>
            <tr>
                <td><code>.gradientBar()</code></td>
                <td><code>.test-gradbar { .gradientBar(@blue, @green) }</code></td>
                <td><span class="swatch test-gradbar"></span></td>
            </tr>
        </tbody>
    </table>
    
    

    
</article>
{% endblock %}
