Quick reference for drawer
Updated quick reference with the requred documentation for the .drawer component.
This commit is contained in:
Angelos Chalaris
parent
6dd6194d77
commit
4a564505af
71
dist/mini-dark.css
vendored
71
dist/mini-dark.css
vendored
|
|
@ -1156,6 +1156,75 @@ footer.sticky {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
.drawer-toggle:before {
|
||||
position: relative;
|
||||
top: 0.4375rem;
|
||||
font-family: sans-serif;
|
||||
font-size: 2.5rem;
|
||||
line-height: 0.125;
|
||||
content: '\2261';
|
||||
}
|
||||
|
||||
.drawer {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: #37474f;
|
||||
border: 1px solid #324148;
|
||||
margin: 0;
|
||||
z-index: 1110;
|
||||
}
|
||||
|
||||
.drawer:not(.right) {
|
||||
left: -320px;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.drawer.right {
|
||||
right: -320px;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
|
||||
.drawer .close {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.25rem;
|
||||
z-index: 1111;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.drawer:not(.persistent) {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
}
|
||||
.drawer:not(.persistent) .close {
|
||||
display: none;
|
||||
}
|
||||
.drawer-toggle:not(.persistent) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .drawer:not(.right) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .drawer.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
@ -1659,7 +1728,7 @@ mark.inline-block {
|
|||
color: #0c0c0c;
|
||||
border-radius: 2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
z-index: 1110;
|
||||
z-index: 1111;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
3
dist/mini-default.css
vendored
3
dist/mini-default.css
vendored
|
|
@ -1208,6 +1208,9 @@ footer.sticky {
|
|||
height: 100%;
|
||||
z-index: 1100;
|
||||
}
|
||||
.drawer:not(.persistent) .close {
|
||||
display: none;
|
||||
}
|
||||
.drawer-toggle:not(.persistent) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -237,7 +237,7 @@
|
|||
<p>Drawers are responsive and will expand into normal containers on larger screens. If you want to avoid this, add the <code>.persistent</code> class to both your <code>.drawer-toggle</code> and <code>.drawer</code> elements. You can also change the position of the drawer from the left side of the screen to the right by applying the <code>.right</code> class to your <code>.drawer</code> element.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><header>
|
||||
<label for="drawer-checkbox" class="button"></label>
|
||||
<label for="drawer-checkbox" class="button drawer-toggle"></label>
|
||||
</header>
|
||||
|
||||
<input type="checkbox" id="drawer-checkbox">
|
||||
|
|
@ -255,10 +255,10 @@
|
|||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="drawer">
|
||||
<pre><nav class="drawer">
|
||||
<label for="drawer-checkbox" class="close"></label>
|
||||
<a href="#">Home</a>
|
||||
</div></pre>
|
||||
</nav></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can apply the <code>.drawer</code> class to a <code><nav></code> element, effectively making your page's navigation menu collapse on smaller screen sizes.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
|
|
|
|||
|
|
@ -535,6 +535,35 @@
|
|||
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Drawer <a href="https://codepen.io/chalarangelo/pen/JNvPrB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header>
|
||||
<label for="drawer-checkbox" class="button drawer-toggle"></label>
|
||||
</header>
|
||||
|
||||
<input type="checkbox" id="drawer-checkbox">
|
||||
<div class="drawer">
|
||||
<label for="drawer-checkbox" class="close"></label>
|
||||
<a href="#">Home</a>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Structure as follows:<ol>
|
||||
<li><code><label></code> element with the <code>.drawer-toggle</code> class in the <code><header></code> element, linked to the <code class="fore-secondary">id</code> of the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> used to toggle the drawer component</li>
|
||||
<li><code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element with a unique <code class="fore-secondary">id</code></li>
|
||||
<li><code><div></code> element with the <code>.drawer</code> class immediately after the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code></li>
|
||||
<li>Empty <code><label></code> element with the <code>.close</code> class inside the <code>.drawer</code>, linked to the <code class="fore-secondary">id</code> of the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code></li>
|
||||
</ol></li>
|
||||
<li>Drawers are left-aligned and expand on non-mobile screen sizes by default</li>
|
||||
<li>Use <code>.right</code> to create right-aligned drawers or <code>.persistent</code> for non-responsive drawers.</li>
|
||||
<li>Apply the <code>.drawer</code> class on a navigation bar and combine with grid classes for best results</li>
|
||||
<li>Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
|
|
|
|||
|
|
@ -1146,12 +1146,10 @@
|
|||
- Tested `.drawer` on the `modules.html` page, it seems to work pretty well.
|
||||
- Documented `.drawer` component, updated descriptions wherever possible, the customization documentation will be added in later.
|
||||
- *TODO* list for tomorrow (before release):
|
||||
- Update customization documentation for `.drawer`.
|
||||
- Update flavors to use the new `.drawer` component, rebuild.
|
||||
- Update all navigation menus on all pages to use both the `.drawer` and show the new menus.
|
||||
- Update all flavors to work with new components etc.
|
||||
- Update all flavor demos.
|
||||
- Create codepen for `.drawer`, new section in `quick_reference`.
|
||||
- Look into updating the templates.
|
||||
|
||||
## 20170512
|
||||
|
|
@ -1159,3 +1157,5 @@
|
|||
- `$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.
|
||||
- Updated `mini-default`, `mini-lite` and `mini-dark` for the new `.drawer` component, the other two flavors will be updated later today.
|
||||
- Updated `quick_reference` for `.drawer`, added a codepen for the component.
|
||||
|
|
|
|||
|
|
@ -276,6 +276,23 @@ $nav-include-sublink-bar: true; // Should a left border bar be added t
|
|||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #616161; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // 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
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
|
|
|
|||
|
|
@ -276,18 +276,9 @@ $nav-include-sublink-bar: true; // Should a left border bar be added t
|
|||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$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-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // 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
|
||||
|
|
@ -302,6 +293,15 @@ $drawer-toggle-top: 0.4375rem; // Top position for the drawer componen
|
|||
$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
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$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
|
||||
// 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.
|
||||
|
|
|
|||
|
|
@ -244,6 +244,7 @@ $header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
|||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
|
|
@ -256,8 +257,9 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
|
|||
// 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.
|
||||
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements will not be stylized. If
|
||||
// you set it to `true`, please refer to a full flavor to find the required variable definitions.
|
||||
// [2] - Due to the fact that the values of $include-nav-styles and $include-drawer are set to `false`, <nav> elements
|
||||
// will not be stylized and the drawer component will not be included. If you set it to `true`, please refer to a full
|
||||
// flavor to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
|
|
|
|||
|
|
@ -274,6 +274,9 @@ footer {
|
|||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
& .#{$drawer-close-name} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Reference in a new issue