|
|
@@ -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;
|
|
|
+ }
|
|
|
+}
|
Angelos Chalaris