app/views/styleguide/04 Buttons & Links/_buttons_and_links.html
<section class="sg-body">
<section class="sg-example" id="4.1">
<h3>
<a href="#4.1">4.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_buttons.scss</span>
<h2>Links <code>a</code></h2>
<ul class="sg-modifiers">
<li>
<strong>:hover</strong>
-
Hovered link
</li>
<li>
<strong>:active</strong>
-
Active link
</li>
<li>
<strong>.strong</strong>
-
Enhanced link
</li>
<li>
<strong>.weak</strong>
-
Secondary link
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style=""> <a class="$modifier-class">Link</a></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">:hover</span>
<div style=""> <a class="pseudo-class-hover">Link</a></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">:active</span>
<div style=""> <a class="pseudo-class-active">Link</a></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.strong</span>
<div style=""> <a class="strong">Link</a></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.weak</span>
<div style=""> <a class="weak">Link</a></div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><a class="">Link</a></pre>
</div>
</div>
</section>
<section class="sg-example" id="4.2">
<h3>
<a href="#4.2">4.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_buttons.scss</span>
<h2>Button <code>.button</code></h2>
<ul class="sg-modifiers">
<li>
<strong>:hover</strong>
-
Hovered primary button
</li>
<li>
<strong>.active</strong>
-
Active primary button
</li>
<li>
<strong>.block</strong>
-
Primary button that takes the whole width
</li>
<li>
<strong>.small</strong>
-
Small primary button
</li>
<li>
<strong>.large</strong>
-
Large primary button
</li>
<li>
<strong>.disabled</strong>
-
Disabled link
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<a class="button">Button</a>
<a class="button"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">:hover</span>
<div style="">
<a class="button pseudo-class-hover">Button</a>
<a class="button pseudo-class-hover"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="">
<a class="button active">Button</a>
<a class="button active"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block</span>
<div style="">
<a class="button block">Button</a>
<a class="button block"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<a class="button small">Button</a>
<a class="button small"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<a class="button large">Button</a>
<a class="button large"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.disabled</span>
<div style="">
<a class="button disabled">Button</a>
<a class="button disabled"><i class="icon-tag"></i> Button</a>
</div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><a class="button">Button</a>
<a class="button"><i class="icon-tag"></i> Button</a></pre>
</div>
</div>
</section>
<section class="sg-example" id="4.3">
<h3>
<a href="#4.3">4.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_buttons.scss</span>
<h2>Primary Button <code>.primary-button</code></h2>
<ul class="sg-modifiers">
<li>
<strong>:hover</strong>
-
Hovered primary button
</li>
<li>
<strong>.active</strong>
-
Active primary button
</li>
<li>
<strong>.block</strong>
-
Primary button that takes the whole width
</li>
<li>
<strong>.small</strong>
-
Small primary button
</li>
<li>
<strong>.large</strong>
-
Large primary button
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<a class="primary-button">Primary Button</a>
<a class="primary-button"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">:hover</span>
<div style="">
<a class="primary-button pseudo-class-hover">Primary Button</a>
<a class="primary-button pseudo-class-hover"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="">
<a class="primary-button active">Primary Button</a>
<a class="primary-button active"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block</span>
<div style="">
<a class="primary-button block">Primary Button</a>
<a class="primary-button block"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<a class="primary-button small">Primary Button</a>
<a class="primary-button small"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<a class="primary-button large">Primary Button</a>
<a class="primary-button large"><i class="icon-tag"></i> Primary Button</a>
</div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><a class="primary-button">Primary Button</a>
<a class="primary-button"><i class="icon-tag bright"></i> Primary Button</a></pre>
</div>
</div>
</section>
<section class="sg-example" id="4.4">
<h3>
<a href="#4.4">4.4</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_buttons.scss</span>
<h2>Tertiary Buttons <code>.tertiary-button</code></h2>
<ul class="sg-modifiers">
<li>
<strong>:hover</strong>
-
Hovered tag button
</li>
<li>
<strong>:active</strong>
-
Active tag button
</li>
<li>
<strong>.block</strong>
-
Tertiary button that takes the whole width
</li>
<li>
<strong>.small</strong>
-
Small tertiary button
</li>
<li>
<strong>.large</strong>
-
Large tertiary button
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-dark sg-canvas">
<div style="">
<a class="tertiary-button">Tertiary Button</a>
<a class="tertiary-button"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
<div class="align-left bg-dark sg-canvas sg-modifier">
<span class="sg-modifier-name">:hover</span>
<div style="">
<a class="tertiary-button pseudo-class-hover">Tertiary Button</a>
<a class="tertiary-button pseudo-class-hover"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
<div class="align-left bg-dark sg-canvas sg-modifier">
<span class="sg-modifier-name">:active</span>
<div style="">
<a class="tertiary-button pseudo-class-active">Tertiary Button</a>
<a class="tertiary-button pseudo-class-active"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
<div class="align-left bg-dark sg-canvas sg-modifier">
<span class="sg-modifier-name">.block</span>
<div style="">
<a class="tertiary-button block">Tertiary Button</a>
<a class="tertiary-button block"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
<div class="align-left bg-dark sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<a class="tertiary-button small">Tertiary Button</a>
<a class="tertiary-button small"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
<div class="align-left bg-dark sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<a class="tertiary-button large">Tertiary Button</a>
<a class="tertiary-button large"><i class="icon-tag"></i> Tertiary Button</a>
</div>
</div>
</div>
</section>
<section class="sg-example" id="4.5">
<h3>
<a href="#4.5">4.5</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_buttons.scss</span>
<h2>Extended Buttons <code>.button</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.small</strong>
-
Small extended button
</li>
<li>
<strong>.large</strong>
-
Large extended button
</li>
<li>
<strong>.block</strong>
-
Block extended button
</li>
<li>
<strong>.block small</strong>
-
Block extended button
</li>
<li>
<strong>.block large</strong>
-
Block extended button
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<a class="button">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<a class="button small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<a class="button large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block</span>
<div style="">
<a class="button block">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button block">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button block">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block small</span>
<div style="">
<a class="button block small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button block small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button block small">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block large</span>
<div style="">
<a class="button block large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="primary-button block large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
<a class="tertiary-button block large">Dropdown Button <i class="icon-arrow-down stand-alone"></i></a>
</div>
</div>
</div>
</section>
<section class="sg-example" id="4.6">
<h3>
<a href="#4.6">4.6</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_button-groups.scss</span>
<h2>Button group - groups several buttons into one element <code>.button-group</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.primary</strong>
-
Primary button group
</li>
<li>
<strong>.tertiary</strong>
-
Secondary button group
</li>
<li>
<strong>.small</strong>
-
Small button group
</li>
<li>
<strong>.large</strong>
-
Large button group
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="button-group">
<button class="button active">Alle</button>
<button class="button">Medienträge</button>
<button class="button">Sets</button>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.primary</span>
<div style="">
<div class="button-group primary">
<button class="button primary active">Alle</button>
<button class="button primary">Medienträge</button>
<button class="button primary">Sets</button>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.tertiary</span>
<div style="">
<div class="button-group tertiary">
<button class="button tertiary active">Alle</button>
<button class="button tertiary">Medienträge</button>
<button class="button tertiary">Sets</button>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<div class="button-group small">
<button class="button small active">Alle</button>
<button class="button small">Medienträge</button>
<button class="button small">Sets</button>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<div class="button-group large">
<button class="button large active">Alle</button>
<button class="button large">Medienträge</button>
<button class="button large">Sets</button>
</div>
</div>
</div>
</div>
</section>
</section>