beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added drawer component

Browse source 
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 2017-05-11 23:36:52 +03:00
parent 0c9eef3309
commit a4a1e84a7c
8 changed files with 161 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
dist/mini-default.css vendored
View file

@ -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
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -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.

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

@ -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.

2
src/mini/_contextual.scss
View file

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

80
src/mini/_grid.scss
View file

@ -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 {

73
src/mini/_navigation.scss
View file

@ -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;
}
}