Customization docs for tabs
This commit is contained in:
Angelos Chalaris
parent
d7482bbcfe
commit
1667214996
|
|
@ -66,6 +66,93 @@
|
|||
</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>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">
|
||||
<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">$tab-container-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for tab components' containers</td><td data-label="Sample value">'tabs'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-container-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for tab components' containers</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for tab components</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for tab components</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' labels (default)</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-selected-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' labels (selected)</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' labels (default)</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-selected-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' labels (selected)</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-hover-opacity</td><td data-label="Type">Opaciy</td>
|
||||
<td data-label="Description">Opacity for tab components' labels (hover)</td><td data-label="Sample value">0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for tab components' labels</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for tab components' labels</td><td data-label="Sample value">26px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' panels</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' panels</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for tab components' panels</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for tab components' panels</td><td data-label="Sample value">400px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-stacked-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for tabs components' mobile view</td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-stacked-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for stacked tab components</td><td data-label="Sample value">'stacked'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><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>
|
||||
|
|
|
|||
|
|
@ -973,3 +973,4 @@
|
|||
- Dealt with a couple of minor mistakes in existing modules.
|
||||
- Documented `card` module's customization.
|
||||
- Added base text and styles for all customization pages not yet finished.
|
||||
- Documented `tab` module's customization.
|
||||
|
|
|
|||
Loading…
Reference in a new issue