mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-29 18:47:51 +01:00
Customization docs for contextual
This commit is contained in:
Angelos Chalaris
parent
1667214996
commit
5664602bd1
@ -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>
|
||||
|
||||
@ -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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user