mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 22:06:30 +02:00
Code Issues Releases Wiki Activity

Customization doc for drawer

Browse Source 
Documented customization for the new drawer component.
This commit is contained in:
Angelos Chalaris
2017-05-12 12:23:00 +03:00
parent 7b3bea996e
commit 6dd6194d77
6 changed files with 129 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
docs/customization/navigation.html
View File

@@ -265,6 +265,103 @@
</div>
</div>
<div class="row" id="drawer">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Drawer</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains custom classes and definitions for creating and styling a responsive drawer component.</p><br/>
<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>
</thead>
<tbody>
<tr>
<td data-label="Variable">$drawer-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the drawer component</td><td data-label="Sample value">'drawer'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the drawer component</td><td data-label="Sample value">#eceff1</td>
</tr>
<tr>
<td data-label="Variable">$drawer-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for the drawer component</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
<tr>
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-width</td><td data-label="Type">Width</td>
<td data-label="Description">Width for the drawer component</td><td data-label="Sample value">320px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the drawer component</td><td data-label="Sample value">4px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">Box shadow for the drawer component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
<tr>
<td data-label="Variable">$drawer-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
<td data-label="Description">Breakpoint for the drawer component on mobile devices</td><td data-label="Sample value">768px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-normal-height</td><td data-label="Type">Height</td>
<td data-label="Description">height of the drawer component on medium-sized and larger screens<sup><a href="#drawer-note-one">1</a></sup></td><td data-label="Sample value">calc(100vh - 48px)</td>
</tr>
<tr>
<td data-label="Variable">$drawer-right-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the right-aligned variant of the drawer component</td><td data-label="Sample value">'right'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-peristent-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the non-responsive variant of the drawer component</td><td data-label="Sample value">'persistent'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the toggle button of the drawer component</td><td data-label="Sample value">'drawer-toggle'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-font-size</td><td data-label="Type">Font size</td>
<td data-label="Description">Font size of the toggle button of the drawer component</td><td data-label="Sample value">2.5em</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-line-height</td><td data-label="Type">Line height</td>
<td data-label="Description">Line height of the toggle button of the drawer component</td><td data-label="Sample value">0.125</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-top</td><td data-label="Type">Position top</td>
<td data-label="Description">Top position of the toggle button of the drawer component</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the close button of the drawer component</td><td data-label="Sample value">'close'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-top</td><td data-label="Type">Position top</td>
<td data-label="Description">Top position of the close button of the drawer component</td><td data-label="Sample value">12px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-right</td><td data-label="Type">Position right</td>
<td data-label="Description">Right position of the close button of the drawer component<td data-label="Sample value">4px</td>
</tr>
</tbody>
</table><br/>
</div>
<div class="section">
<h3>Notes:</h3>
<ol>
<li id="drawer-note-one">The values of <code>$drawer-normal-height</code> <em>should be</em> the calculated value of the screen height minus the total height of the <code>&lt;header&gt;</code> element for best results.</li>
</ol>
</div>
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="card fluid">