Added drawer component
Thoroughly tested and not yet documented, a .drawer component has been added to allow for better menus on mobile devices.
This commit is contained in:
Angelos Chalaris
parent
0c9eef3309
commit
a4a1e84a7c
8 changed files with 161 additions and 85 deletions
68
dist/mini-default.css
vendored
68
dist/mini-default.css
vendored
|
|
@ -1155,6 +1155,72 @@ 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: absolute;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: #eceff1;
|
||||
border: 1px solid #c9c9c9;
|
||||
margin: 0;
|
||||
transition: left,right 0.3s;
|
||||
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.25rem;
|
||||
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: calc(100vh - 3rem);
|
||||
}
|
||||
.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.
|
||||
*/
|
||||
|
|
@ -1660,7 +1726,7 @@ mark.inline-block {
|
|||
color: #fafafa;
|
||||
border-radius: 2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
z-index: 1110;
|
||||
z-index: 1111;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
|
|||
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
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1142,3 +1142,4 @@
|
|||
- Updated `core` module documentation and customization documentation to explain fluid typography.
|
||||
- Fixed the `header` element bug that didn't allow them to work well with the `.row` class for responsive layouts. They should now display as expected.
|
||||
- Disabled fluid typography by default, it needs more testing and the `14px` font in smaller screens doesn't sit well with me. The feature is still there for those who want it.
|
||||
- Implemented `.drawer` component along with everything that it needs. Documentation pending.
|
||||
|
|
|
|||
|
|
@ -279,12 +279,28 @@ $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-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-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.25rem; // 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.
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ mark {
|
|||
@if $toast-box-shadow != none {
|
||||
box-shadow: $toast-box-shadow;
|
||||
}
|
||||
z-index: 1110;
|
||||
z-index: 1111;
|
||||
}
|
||||
}
|
||||
// Default styling for tooltips. Use mixins for alternate styles
|
||||
|
|
|
|||
|
|
@ -43,86 +43,6 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
|||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Basic definitions for rows defining column layouts.
|
||||
// @if $include-parent-layout {
|
||||
// @if $use-four-step-grid {
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > *{
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// @media screen and (min-width: #{$grid-small-breakpoint}){
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// }
|
||||
// @media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// }
|
||||
// @media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// @media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// }
|
||||
// @media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||
// box-sizing: border-box;
|
||||
// // Old syntax
|
||||
// -webkit-box-flex: 0;
|
||||
// // New syntax
|
||||
// -webkit-flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
// padding: $grid-column-padding;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// Legacy grid system definitions.
|
||||
@if $use-four-step-grid {
|
||||
@if $include-parent-layout {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,14 @@ $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`)
|
||||
$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-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.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
|
|
@ -212,3 +220,68 @@ footer {
|
|||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
// Responsive drawer component
|
||||
@if $include-drawer {
|
||||
.#{$drawer-toggle-name}:before {
|
||||
position: relative;
|
||||
top: $drawer-toggle-top;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size;
|
||||
line-height: $drawer-toggle-line-height;
|
||||
content: '\2261';
|
||||
}
|
||||
.#{$drawer-name} {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: $drawer-back-color;
|
||||
border: $drawer-border-style;
|
||||
@if $drawer-padding != 0 {
|
||||
padding: $drawer-padding;
|
||||
}
|
||||
margin: 0;
|
||||
transition: left,right 0.3s;
|
||||
z-index: 1110;
|
||||
&:not(.#{$drawer-right-name}) {
|
||||
left: -$drawer-width;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
&.#{$drawer-right-name} {
|
||||
right: -$drawer-width;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
& .#{$drawer-close-name} {
|
||||
position: absolute;
|
||||
top: $drawer-close-top;
|
||||
right: $drawer-close-right;
|
||||
z-index: 1111;
|
||||
padding: 0; // Fixes the extra padding added from <label> styling.
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$drawer-width}) {
|
||||
.#{$drawer-name} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
.#{$drawer-name}:not(.#{$drawer-persistent}) {
|
||||
position: static;
|
||||
@if $drawer-normal-height != 100vh {
|
||||
height: $drawer-normal-height;
|
||||
}
|
||||
}
|
||||
.#{$drawer-toggle-name}:not(.#{$drawer-persistent}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
|
||||
left: 0;
|
||||
}
|
||||
[type="checkbox"]:checked + .#{$drawer-name}.#{$drawer-right-name} {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue