beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dist/mini-default.css vendored
View file

@ -1175,7 +1175,6 @@ footer.sticky {
background: #eceff1;
border: 1px solid #c9c9c9;
margin: 0;
transition: left,right 0.3s;
z-index: 1110;
}

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

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">

6
docs/v2/DEVLOG.md
View file

@ -1153,3 +1153,9 @@
- Update all flavor demos.
- Create codepen for `.drawer`, new section in `quick_reference`.
- Look into updating the templates.
## 20170512
- `$include-drawer` is now a *hidden* flag.
- Updated `.drawer` to include a `$drawer-box-shadow` just in case.
- Updated customization for the new `.drawer` component.

33
src/flavors/mini-default.scss
View file

@ -285,22 +285,23 @@ $footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
$drawer-name: 'drawer'; // Class name for the drawer component.
$drawer-back-color: #eceff1; // Background color of the drawer component.
$drawer-border-style: 1px solid #c9c9c9; // Border style of the drawer component.
$drawer-width: 320px; // Width of the drawer component.
$drawer-padding: 0; // Padding of the drawer component.
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component.
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu.
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component.
$drawer-persistent: 'persistent'; // Class name for the persisten variant of the drawer component.
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle.
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon.
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon.
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon.
$drawer-close-name: 'close'; // Class name of the close element for the drawer component.
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon.
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon.
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: #eceff1; // Background color of the drawer component
$drawer-border-style: 1px solid #c9c9c9; // Border style of the drawer component
$drawer-width: 320px; // Width of the drawer component
$drawer-padding: 0; // Padding of the drawer component
$drawer-box-shadow: none; // Box shadow for the drawer component
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.

14
src/mini/_navigation.scss
View file

@ -14,12 +14,12 @@ $nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
$include-drawer: true !default; // Should the drawer component be included? (`true`/`false`)
$include-drawer: true !default; // [Hidden flag] Should the drawer component be included? (`true`/`false`)
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$drawer-right-name: 'right' !default; // Class name for the right variant of the drawer component.
$drawer-persistent: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'close' !default; // Class name of the close element for the drawer component.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
@ -240,11 +240,13 @@ footer {
overflow-y: auto;
background: $drawer-back-color;
border: $drawer-border-style;
margin: 0;
@if $drawer-padding != 0 {
padding: $drawer-padding;
}
margin: 0;
transition: left,right 0.3s;
@if $drawer-box-shadow != none {
box-shadow: $drawer-box-shadow;
}
z-index: 1110;
&:not(.#{$drawer-right-name}) {
left: -$drawer-width;
@ -268,12 +270,12 @@ footer {
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent}) {
.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
position: static;
height: 100%;
z-index: 1100;
}
.#{$drawer-toggle-name}:not(.#{$drawer-persistent}) {
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
display: none;
}
}