mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 11:29:10 +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) {
&.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-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"); //// 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);
//}
//
////----
//// 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;

232
scss/mixins/_drawer.scss
View File

@ -1,66 +1,77 @@
// 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 top: 0;
top: 0; #{$side}: 0;
#{$side}: 0;
width: $size; width: $size;
height: 100%; height: 100%;
@if $side == left { @if $side == left {
transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
} @else { } @else {
transform: translateX($size + 10px); // initial position of drawer (closed), way off screen transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
}
} }
}
> .mdb-layout-content { > .mdb-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
}
} }
} }
} }
} }
// $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 #{$side}: 0;
#{$side}: 0; left: 0;
left: 0;
width: 100%; width: 100%;
height: $size; height: $size;
@if $side == top { @if $side == top {
transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
} @else { } @else {
transform: translateY($size + 10px); // initial position of drawer (closed), way off screen transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
}
} }
}
> .mdb-layout-content { > .mdb-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
}
} }
} }
} }
@ -129,13 +140,18 @@
$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)
// mdb-drawer-fixed-(left and right) styles
@include mdb-drawer-x-open($size); @include mdb-drawer-x-open($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(left and right) styles
@include mdb-drawer-x-open($size);
}
} }
} }
} }
@ -147,41 +163,111 @@
$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-fixed-(top and bottom) styles // mdb-drawer-open marker class (non-responsive)
@include mdb-drawer-y-open($size); @include mdb-drawer-y-open($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(left and right) styles
@include mdb-drawer-y-open($size);
}
} }
} }
} }
} }
@mixin mdb-drawer-x-overlay($side) { @mixin mdb-drawer-x-overlay() {
> .mdb-layout-header, @each $side in (left right) {
> .mdb-layout-content { &.mdb-drawer-fixed-#{$side} {
width: 100%; > .mdb-layout-header,
margin-#{$side}: 0; > .mdb-layout-content {
overflow: hidden; width: 100%;
} margin-#{$side}: 0;
} overflow: hidden;
}
@mixin mdb-drawer-y-overlay($side) {
> .mdb-layout-header,
> .mdb-layout-content {
overflow: hidden;
}
> .mdb-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0;
}
}
> .mdb-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0;
} }
} }
} }
@mixin mdb-drawer-y-overlay() {
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
> .mdb-layout-header,
> .mdb-layout-content {
overflow: hidden;
}
> .mdb-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0;
}
}
> .mdb-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0;
}
}
}
}
}
@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();
}
}
}
}
}