mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-06 13:56:27 +02:00
Validated documentation
Checked through validator.w3.org, found a significant amount of errors in documentation pages, dealt with all of them (hopefully).
This commit is contained in:
@@ -65,7 +65,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="card-title">
|
||||
@@ -96,7 +96,7 @@
|
||||
<div class="section"><h2>Cards & sections</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>card</strong> module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -167,7 +167,7 @@
|
||||
<div class="section"><h2>Card mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>card</strong> module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Card mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -183,7 +183,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -218,7 +218,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-color</span> ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-alt-size</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -237,14 +237,14 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-size</span> ('large', 480px);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Card section mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span)</td>
|
||||
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span>)</td>
|
||||
<td data-label="Description">Creates a new card section color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -253,7 +253,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-section-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -280,7 +280,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-color</span> ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-section-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -65,7 +65,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
||||
@@ -96,7 +96,7 @@
|
||||
<div class="section"><h2>Text highlighting</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module's styling of <code><mark></code> elements is highly customizable.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -155,7 +155,7 @@
|
||||
<div class="section"><h2>Alerts</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining alerts.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -220,7 +220,7 @@
|
||||
<div class="section"><h2>Tooltips</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -281,7 +281,7 @@
|
||||
<div class="section"><h2>Text highlighting mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code><mark></code> elements (color and style variants).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -297,7 +297,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-mark-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -320,7 +320,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-color</span> ('secondary', #e53935, #fafafa);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-mark-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -370,7 +370,7 @@
|
||||
<div class="section"><h2>Alert mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to alerts (color and style variants).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -386,7 +386,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-alert-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -409,7 +409,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-color</span> ('urgent', #ffca28, #212121);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-alert-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -455,7 +455,7 @@
|
||||
<div class="section"><h2>Tooltip mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (color and style variants).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -471,7 +471,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-tooltip-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -494,7 +494,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-color</span> ('primary', #0277bd, #fafafa);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-tooltip-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -64,7 +64,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="core-title">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="section"><h2>Typography & headings</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>core</strong> module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table class="striped" style="width: 100%;">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -254,7 +254,7 @@
|
||||
<div class="section"><h2>Common elements & fixes</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>core</strong> module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%;" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -67,7 +67,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="grid-title">
|
||||
@@ -98,7 +98,7 @@
|
||||
<div class="section"><h2>Classes & breakpoints</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -63,7 +63,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
|
@@ -66,7 +66,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="input-control-title">
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -258,7 +258,7 @@
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -319,7 +319,7 @@
|
||||
<div class="section"><h2>Button & button groups</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -402,7 +402,7 @@
|
||||
<div class="section"><h2>Button mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -418,7 +418,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -449,7 +449,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-color</span> ('primary', #0277bd, 0.9, 1, #fafafa);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -65,7 +65,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="navigation-title">
|
||||
@@ -96,7 +96,7 @@
|
||||
<div class="section"><h2>Header</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains definitions for styling the <code><header></code> element, along with its contents (logo and links).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -185,7 +185,7 @@
|
||||
<div class="section"><h2>Navigation bar</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains definitions for styling <code><nav></code> elements, along with the links they contain.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -237,19 +237,19 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-include-sublink-bar</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">true</td>
|
||||
<td data-label="Description">Enables the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-left-position</td><td data-label="Type">Position left</td>
|
||||
<td data-label="Description">Left position of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">3px</td>
|
||||
<td data-label="Description">Left position of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">3px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-width</td><td data-label="Type">Border width</td>
|
||||
<td data-label="Description">Width of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">1px</td>
|
||||
<td data-label="Description">Width of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Color of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">#263238</td>
|
||||
<td data-label="Description">Color of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">#263238</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
@@ -270,7 +270,7 @@
|
||||
<div class="section"><h2>Footer</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code><footer></code> element.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -67,7 +67,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="progress-title">
|
||||
@@ -98,7 +98,7 @@
|
||||
<div class="section"><h2>Progress bar</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>progress</strong> module's styling of <code><progress></code> elements is highly customizable.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -153,7 +153,7 @@
|
||||
<div class="section"><h2>Donut spinner</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -192,7 +192,7 @@
|
||||
<div class="section"><h2>Progress bar mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code><progress></code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -212,7 +212,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -235,7 +235,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-color</span> ('secondary', #e53935, #eeeeee);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -274,7 +274,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-style</span> ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-inline</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -304,7 +304,7 @@
|
||||
<div class="section"><h2>Donut spinner mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -320,7 +320,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -343,7 +343,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-spinner-donut-alt-color</span> ('secondary', #ffebee, #c62828);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -65,7 +65,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="tab-title">
|
||||
@@ -96,7 +96,7 @@
|
||||
<div class="section"><h2>Tab styling</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>tab</strong> module contains definitions for tab styling, using custom classes and structures.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -71,7 +71,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="table-title">
|
||||
@@ -102,7 +102,7 @@
|
||||
<div class="section"><h2>Table styling</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>table</strong> module contains definitions for tables and table variants.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
@@ -65,7 +65,7 @@
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="utility-title">
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="section"><h2>Visibility helpers & legacy features</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -156,7 +156,7 @@
|
||||
<div class="section"><h2>Breadcrumbs</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -207,7 +207,7 @@
|
||||
<div class="section"><h2>Close icon</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's close icon uses a custom class and a few variable to customize its appearance.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -242,7 +242,7 @@
|
||||
<div class="section"><h2>Generic border & shadow mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a few mixins for creating generic borders, border styles and shadows.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -262,7 +262,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -277,7 +277,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-generic</span> ('bordered');</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-radial-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -296,7 +296,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-radial-style</span> ('rounded', 2px);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-box-shadow-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -326,7 +326,7 @@
|
||||
<div class="section"><h2>Responsive sizing & spacing mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive sizing and spacing classes.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -342,7 +342,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-margin-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -389,7 +389,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-margin-responsive</span> ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-padding-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -447,7 +447,7 @@
|
||||
<div class="section"><h2>Responsive visibility helper mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive visibility helpers.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
@@ -463,7 +463,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
@@ -510,7 +510,7 @@
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-hidden-responsive</span> ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-visually-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
|
Reference in New Issue
Block a user