From 5664602bd189821e3428213d0c9e1878d4edde72 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris <chalarangelo@gmail.com> Date: Mon, 17 Apr 2017 21:29:12 +0300 Subject: [PATCH] Customization docs for contextual --- docs/customization/contextual.html | 440 +++++++++++++++++++++++++++++ docs/v2/DEVLOG.md | 1 + 2 files changed, 441 insertions(+) diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index cf1f370..5f24701 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -66,6 +66,446 @@ </div> </div> + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Variables</caption> + <thead> + <tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Variable">$mark-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for <code><mark></code> elements</td><td data-label="Sample value">#0277bd</td> + </tr> + <tr> + <td data-label="Variable">$mark-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">Text color for <code><mark></code> elements</td><td data-label="Sample value">#fafafa</td> + </tr> + <tr> + <td data-label="Variable">$mark-font-size</td><td data-label="Type">Font size</td> + <td data-label="Description">Font size for <code><mark></code> elements</td><td data-label="Sample value">95%</td> + </tr> + <tr> + <td data-label="Variable">$mark-line-height</td><td data-label="Type">Line hieght</td> + <td data-label="Description">Line height for <code><mark></code> elements</td><td data-label="Sample value">1</td> + </tr> + <tr> + <td data-label="Variable">$mark-border-style</td><td data-label="Type">Border</td> + <td data-label="Description">Border style for <code><mark></code> elements</td><td data-label="Sample value">1px solid #0277bd</td> + </tr> + <tr> + <td data-label="Variable">$mark-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for <code><mark></code> elements</td><td data-label="Sample value">2px</td> + </tr> + <tr> + <td data-label="Variable">$mark-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for <code><mark></code> elements</td><td data-label="Sample value">2px 4px</td> + </tr> + <tr> + <td data-label="Variable">$mark-margin</td><td data-label="Type">Margin</td> + <td data-label="Description">Margin for <code><mark></code> elements</td><td data-label="Sample value">2px</td> + </tr> + <tr> + <td data-label="Variable">$mark-box-shadow</td><td data-label="Type">Box shadow</td> + <td data-label="Description">Box shadow for <code><mark></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + <tr> + <td data-label="Variable">$mark-inline-block-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for inline block <code><mark></code> elements</td><td data-label="Sample value">'inline-block'</td> + </tr> + </tbody> + </table><br/> + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Variables</caption> + <thead> + <tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Variable">$alert-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for alert components</td><td data-label="Sample value">'alert'</td> + </tr> + <tr> + <td data-label="Variable">$alert-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for alert components</td><td data-label="Sample value">#eeeeee</td> + </tr> + <tr> + <td data-label="Variable">$alert-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">Text color for alert components</td><td data-label="Sample value">$fore-color</td> + </tr> + <tr> + <td data-label="Variable">$alert-border-style</td><td data-label="Type">Border</td> + <td data-label="Description">Border style for alert components</td><td data-label="Sample value">1px solid #bdbdbd</td> + </tr> + <tr> + <td data-label="Variable">$alert-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for alert components</td><td data-label="Sample value">2px</td> + </tr> + <tr> + <td data-label="Variable">$alert-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for alert components</td><td data-label="Sample value">12px 16px</td> + </tr> + <tr> + <td data-label="Variable">$alert-margin</td><td data-label="Type">Margin</td> + <td data-label="Description">Margin for alert components</td><td data-label="Sample value">6px</td> + </tr> + <tr> + <td data-label="Variable">$alert-box-shadow</td><td data-label="Type">Box shadow</td> + <td data-label="Description">Box shadow for alert components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + <tr> + <td data-label="Variable">$alert-include-animated</td><td data-label="Type">Logical</td> + <td data-label="Description">Enables animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">true</td> + </tr> + <tr> + <td data-label="Variable">$alert-animated-class</td><td data-label="Type">String</td> + <td data-label="Description">Class name for animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">'animated'</td> + </tr> + </tbody> + </table><br/> + </div> + <div class="section"> + <h3>Notes:</h3> + <ol> + <li id="alert-note-one">The value of <code>$alert-animated-class</code> will only be used if <code>$alert-include-animated</code> is set to <code class="fore-tertiary">true</code>.</li> + </ol> + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Variables</caption> + <thead> + <tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Variable">$include-tooltip</td><td data-label="Type">Logical</td> + <td data-label="Description">Enables tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">true</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'tooltip'</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">$fore-color</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">Text color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">#fafafa</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">2px</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">12px 16px</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-tail-size</td><td data-label="Type">Position left</td> + <td data-label="Description">Left position for tooltip components's tail (calculated from value)<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">6px</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-box-shadow</td><td data-label="Type">Box shadow</td> + <td data-label="Description">Box shadow for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + <tr> + <td data-label="Variable">$tooltip-bottom-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for animated tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'bottom'</td> + </tr> + </tbody> + </table><br/> + </div> + <div class="section"> + <h3>Notes:</h3> + <ol> + <li id="tooltip-note-one">The values used in the tooltip components will only be used if <code>$include-tooltip</code> is set to <code class="fore-tertiary">true</code>.</li> + </ol> + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Mixin definitions</caption> + <thead> + <tr><th>Mixin</th><th>Description</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Mixin">make-mark-alt-color (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-back-color</span>. <span class="fore-tertiary">$mark-alt-fore-color</span>)</td> + <td data-label="Description">Creates a new <code><mark></code> color variant using the specified values.</td> + </tr> + <tr> + <td data-label="Mixin">make-mark-alt-style (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-border-style</span>, <span class="fore-primary">$mark-alt-border-radius</span>, <span class="fore-tertiary">$mark-alt-padding</span>, <span class="fore-tertiary">$mark-alt-font-size</span>, <span class="fore-tertiary">$mark-alt-line-height</span>, <span class="fore-tertiary">$mark-alt-box-shadow</span>)</td> + <td data-label="Description">Creates a new <code><mark></code> style variant using the specified values.</td> + </tr> + </tbody> + </table><br/> + <table 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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$mark-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the <code><mark></code> color variant</td><td data-label="Sample value">'secondary'</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for the <code><mark></code> color variant</td><td data-label="Sample value">#e53935</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">(Optional) Text color for the <code><mark></code> color variant</td><td data-label="Sample value">#fafafa</td> + </tr> + </tbody> + </table><br/> + <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"> + <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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$mark-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the <code><mark></code> style variant</td><td data-label="Sample value">'tag'</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-border-style</td><td data-label="Type">Border</td> + <td data-label="Description">Border style for the <code><mark></code> style variant</td><td data-label="Sample value">1px solid #0277bd</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for the <code><mark></code> style variant</td><td data-label="Sample value">200px</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for the <code><mark></code> style variant</td><td data-label="Sample value">4px 8px</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-font-size</td><td data-label="Type">Font size</td> + <td data-label="Description">Font size for the <code><mark></code> style variant</td><td data-label="Sample value">95%</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-line-height</td><td data-label="Type">Line height</td> + <td data-label="Description">Line height for the <code><mark></code> style variant</td><td data-label="Sample value">1</td> + </tr> + <tr> + <td data-label="Parameter">$mark-alt-box-shadow</td><td data-label="Type">Margin</td> + <td data-label="Description">Box shadow for the <code><mark></code> style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + </tbody> + </table><br/> + <h3>Sample usage</h3> + <pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-style</span> ('tag', 1px solid #0277bd, 200px, 4px 8px, 95%, 1, 0 1px 3px rgba(0,0,0, 0.1));</pre> + <br/> + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Mixin definitions</caption> + <thead> + <tr><th>Mixin</th><th>Description</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Mixin">make-alert-alt-color (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-back-color</span>. <span class="fore-tertiary">$alert-alt-fore-color</span>)</td> + <td data-label="Description">Creates a new alert color variant using the specified values.</td> + </tr> + <tr> + <td data-label="Mixin">make-alert-alt-style (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-border-style</span>, <span class="fore-primary">$alert-alt-border-radius</span>, <span class="fore-tertiary">$alert-alt-padding</span>, <span class="fore-tertiary">$alert-alt-margin</span>, <span class="fore-tertiary">$alert-alt-box-shadow</span>)</td> + <td data-label="Description">Creates a new alert style variant using the specified values.</td> + </tr> + </tbody> + </table><br/> + <table 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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the alert color variant</td><td data-label="Sample value">'urgent'</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for the alert color variant</td><td data-label="Sample value">#ffca28</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">(Optional) Text color for the alert color variant</td><td data-label="Sample value">#212121</td> + </tr> + </tbody> + </table><br/> + <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"> + <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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the alert style variant</td><td data-label="Sample value">'urgent'</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-border-style</td><td data-label="Type">Border</td> + <td data-label="Description">Border style for the alert style variant</td><td data-label="Sample value">1px solid #ff8f00</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for the alert style variant</td><td data-label="Sample value">2px</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for the alert style variant</td><td data-label="Sample value">12px 16px</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-margin</td><td data-label="Type">Margin</td> + <td data-label="Description">Margin for the alert style variant</td><td data-label="Sample value">6px</td> + </tr> + <tr> + <td data-label="Parameter">$alert-alt-box-shadow</td><td data-label="Type">Margin</td> + <td data-label="Description">Box shadow for the alert style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + </tbody> + </table><br/> + <h3>Sample usage</h3> + <pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-style</span> ('urgent', 1px solid #ff8f00, 2px, 12px 16px, 6px, 6px, 0 1px 3px rgba(0,0,0, 0.1));</pre> + <br/> + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-sm-12 col-lg-10 col-lg-offset-1"> + <div class="card fluid"> + <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"> + <caption>Mixin definitions</caption> + <thead> + <tr><th>Mixin</th><th>Description</th></tr> + </thead> + <tbody> + <tr> + <td data-label="Mixin">make-tooltip-alt-color (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-back-color</span>. <span class="fore-tertiary">$tooltip-alt-fore-color</span>)</td> + <td data-label="Description">Creates a new tooltip color variant using the specified values.</td> + </tr> + <tr> + <td data-label="Mixin">make-tooltip-alt-style (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-tail-size</span>, <span class="fore-primary">$tooltip-alt-border-radius</span>, <span class="fore-tertiary">$tooltip-alt-padding</span>, <span class="fore-tertiary">$tooltip-alt-box-shadow</span>)</td> + <td data-label="Description">Creates a new tooltip style variant using the specified values.</td> + </tr> + </tbody> + </table><br/> + <table 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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$tooltip-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the tooltip color variant</td><td data-label="Sample value">'primary'</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-back-color</td><td data-label="Type">Color</td> + <td data-label="Description">Background color for the tooltip color variant</td><td data-label="Sample value">#0277bd</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-fore-color</td><td data-label="Type">Color</td> + <td data-label="Description">(Optional) Text color for the tooltip color variant</td><td data-label="Sample value">#fafafa</td> + </tr> + </tbody> + </table><br/> + <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"> + <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> + </thead> + <tbody> + <tr> + <td data-label="Parameter">$tooltip-alt-name</td><td data-label="Type">String</td> + <td data-label="Description">Class name for the tooltip style variant</td><td data-label="Sample value">'large'</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-tail-size</td><td data-label="Type">Position left</td> + <td data-label="Description">Left position for tooltip style variant's tail (calculated from value)</td><td data-label="Sample value">8px</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-border-radius</td><td data-label="Type">Border radius</td> + <td data-label="Description">Border radius for the tooltip style variant</td><td data-label="Sample value">4px</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-padding</td><td data-label="Type">Padding</td> + <td data-label="Description">Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td> + </tr> + <tr> + <td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Margin</td> + <td data-label="Description">Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td> + </tr> + </tbody> + </table><br/> + <h3>Sample usage</h3> + <pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-style</span> ('large', 8px, 4px, 15px 20px, 0 1px 3px rgba(0,0,0, 0.1));</pre> + <br/> + </div> + </div> + </div> + </div> + <div class="row" style="padding-bottom: 20px; padding-top:20px;"> <div class="col-sm-12 col-lg-10 col-lg-offset-1"> <p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p> diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 5a15e93..7d04cc2 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -974,3 +974,4 @@ - Documented `card` module's customization. - Added base text and styles for all customization pages not yet finished. - Documented `tab` module's customization. +- Documented `contextual` module's customization.