mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 08:10:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 Refactored drawer creation to allow for simplified custom drawer creation.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-18 12:53:44 -06:00
parent 642dc96cc4
commit 880cf63001
3 changed files with 186 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
scss/_drawer.scss
View File

@ -74,65 +74,37 @@
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint);
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint); @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint); @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
// @include mdb-drawer-x-overlay-down($breakpoint);
// Overlay - left/right responsive overlay classes and marker class @include mdb-drawer-y-overlay-down($breakpoint);
//
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
// x - left/right
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
@if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-x-overlay($side)
}
} @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-x-overlay($side)
}
}
} }
} }
//// y - top/bottom ////----
@each $side in (top bottom) { //// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg and allows for triggers mdb-drawer-open && mdb-drawer-closed
&.mdb-drawer-fixed-#{$side} { ////
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
@if $breakpoint == xs { // overlay marker class (non-responsive) ////
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-y-overlay($side)
}
} @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-y-overlay($side)
}
}
}
}
}
}
}
}
//// Example: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg
//@include mdb-drawer-x-closed(500px, ".kitchen-sink-drawer");
//
//.kitchen-sink-drawer:not(.mdb-drawer-closed) { //.kitchen-sink-drawer:not(.mdb-drawer-closed) {
// @include mdb-drawer-x-open-up(500px, lg); // @each $breakpoint in (xs lg) {
// // xs gives us the static marker class i.e. mdb-drawer-open && mdb-drawer-closed, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint);
// }
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
// @include mdb-drawer-x-overlay-down(md);
//}
//
////----
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed
////
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
////
//.kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) {
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//} //}
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">

6
scss/_layout.scss
View File

@ -19,18 +19,16 @@
flex-direction: column; // allows for sticky header and footer flex-direction: column; // allows for sticky header and footer
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; // TODO: why?
} }
// Header layout (fixed top), belongs in a mdb-layout-container // Header layout (fixed top), belongs in a mdb-layout-container
.mdb-layout-header { .mdb-layout-header {
// FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time.
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 100%; width: 100%;
max-height: 1000px; max-height: 1000px;
flex-direction: column; flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child
flex-wrap: nowrap; flex-wrap: nowrap;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;

126
scss/mixins/_drawer.scss
View File

@ -1,19 +1,34 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
// //
// Example: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg
// @include mdb-drawer-x-closed(500px, ".kitchen-sink-drawer"); //----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg and allows for triggers mdb-drawer-open && mdb-drawer-closed
//
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
// //
// .kitchen-sink-drawer:not(.mdb-drawer-closed) { // .kitchen-sink-drawer:not(.mdb-drawer-closed) {
// @include mdb-drawer-x-open-up(500px, lg); // @each $breakpoint in (xs lg) {
// // xs gives us the static marker class i.e. mdb-drawer-open && mdb-drawer-closed, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint);
// }
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
// @include mdb-drawer-x-overlay-down(md);
// } // }
//
// <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
//
// $parent -null or something enclosing it i.e. "&" //----
@mixin mdb-drawer-x-closed($size, $parent: "") { // Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed
//
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
//
// .kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) {
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
// }
@mixin mdb-drawer-x-closed($size) {
@each $side in (left right) { @each $side in (left right) {
#{unquote($parent)} {
&.mdb-drawer-fixed-#{$side} { &.mdb-drawer-fixed-#{$side} {
> .mdb-layout-drawer { > .mdb-layout-drawer {
// position // position
@ -36,12 +51,9 @@
} }
} }
} }
}
// $parent -null or something enclosing it i.e. "&" @mixin mdb-drawer-y-closed($size) {
@mixin mdb-drawer-y-closed($size, $parent: "") {
@each $side in (top bottom) { @each $side in (top bottom) {
#{unquote($parent)} {
&.mdb-drawer-fixed-#{$side} { &.mdb-drawer-fixed-#{$side} {
> .mdb-layout-drawer { > .mdb-layout-drawer {
// position // position
@ -64,7 +76,6 @@
} }
} }
} }
}
@function mdb-drawer-breakpoint-name($breakpoint) { @function mdb-drawer-breakpoint-name($breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
@ -129,17 +140,22 @@
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint);
&.mdb-drawer-open { &.mdb-drawer-open {
// e.g. &, &-sm, &-md, &-lg
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
@include media-breakpoint-up($breakpoint) { @if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive)
@include mdb-drawer-x-open($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(left and right) styles // mdb-drawer-fixed-(left and right) styles
@include mdb-drawer-x-open($size); @include mdb-drawer-x-open($size);
} }
} }
} }
} }
}
// breakpoint based open to a particular size // breakpoint based open to a particular size
@mixin mdb-drawer-y-open-up($size, $breakpoint) { @mixin mdb-drawer-y-open-up($size, $breakpoint) {
@ -147,18 +163,26 @@
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint);
&.mdb-drawer-open { &.mdb-drawer-open {
// e.g. &, &-sm, &-md, &-lg
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
@if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive)
@include mdb-drawer-y-open($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(top and bottom) styles // mdb-drawer-fixed-(left and right) styles
@include mdb-drawer-y-open($size); @include mdb-drawer-y-open($size);
} }
} }
} }
} }
}
@mixin mdb-drawer-x-overlay($side) { @mixin mdb-drawer-x-overlay() {
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
> .mdb-layout-header, > .mdb-layout-header,
> .mdb-layout-content { > .mdb-layout-content {
width: 100%; width: 100%;
@ -166,8 +190,12 @@
overflow: hidden; overflow: hidden;
} }
} }
}
}
@mixin mdb-drawer-y-overlay($side) { @mixin mdb-drawer-y-overlay() {
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
> .mdb-layout-header, > .mdb-layout-header,
> .mdb-layout-content { > .mdb-layout-content {
overflow: hidden; overflow: hidden;
@ -185,3 +213,61 @@
} }
} }
} }
}
}
@mixin mdb-drawer-x-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint);
//
// Overlay - left/right responsive overlay classes and marker class
//
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
// x - left/right
@if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-x-overlay()
}
} @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-x-overlay()
}
}
}
}
}
@mixin mdb-drawer-y-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint);
//
// Overlay - top/bottom responsive overlay classes and marker class
//
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
//// y - top/bottom
@if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-y-overlay();
}
} @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-y-overlay();
}
}
}
}
}