#822 - drawers - converted to mixins to allow for different default x and y drawers, as well as to allow for totally custom generated drawer sizes.

- different default drawer sizes (x width or y height) in an app
- easy generation of custom drawer size classes

scss/_drawer.scss

@@ -36,57 +36,12 @@
 
 //----------------
 // Sizing and positioning below here
-//
-// TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.
-// These should definitely be passed in as args: $mdb-layout-drawer-x-overlay-breakpoint, $mdb-layout-drawer-size
 
 // for left or right drawers, setup widths, heights and positions
-@each $side in (left right) {
+@include mdb-drawer-x-closed($mdb-layout-drawer-x-size);
-  .mdb-drawer-fixed-#{$side} {
-    > .mdb-layout-drawer {
-      // position
-      top: 0;
-      #{$side}: 0;
-
-      width: $mdb-layout-drawer-size;
-      height: 100%;
-
-      @if $side == left {
-        transform: translateX(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
-      } @else {
-        transform: translateX($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
-      }
-    }
-
-    > .mdb-layout-content {
-      margin-#{$side}: 0;
-    }
-  }
-}
 
 // for top or bottom drawers, setup widths, heights and positions
-@each $side in (top bottom) {
+@include mdb-drawer-y-closed($mdb-layout-drawer-y-size);
-  .mdb-drawer-fixed-#{$side} { // style to force closed in all responsive cases
-    > .mdb-layout-drawer {
-      // position
-      #{$side}: 0;
-      left: 0;
-
-      width: 100%;
-      height: $mdb-layout-drawer-size;
-
-      @if $side == top {
-        transform: translateY(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
-      } @else {
-        transform: translateY($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
-      }
-    }
-
-    > .mdb-layout-content {
-      margin-#{$side}: 0;
-    }
-  }
-}
 
 // Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-open')), as well
 //  as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
@@ -112,7 +67,6 @@
 //  NOTE: mdb-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
 //
 
-
 //
 // Drawer open positioning, and style options (push is default, overlay is optional)
 //  - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above)
@@ -121,103 +75,14 @@
   @each $breakpoint in map-keys($grid-breakpoints) {
 
     // e.g. &, &-sm, &-md, &-lg
-    $name: "&-#{$breakpoint}";
+    $name: mdb-drawer-breakpoint-name($breakpoint);
-    @if $breakpoint == xs {
-      $name: "&";
-    }
 
-    &.mdb-drawer-open {
+    @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
-      $name: "&-#{$breakpoint}";
+    @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
-      @if $breakpoint == xs {
-        $name: "&";
-      }
-      // e.g. &, &-sm, &-md, &-lg
-      #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
-
-        @include media-breakpoint-up($breakpoint) {
-
-          // mdb-drawer-fixed-(left and right) styles
-          @each $side in (left right) {
-
-            &.mdb-drawer-fixed-#{$side} {
-
-              // 1. Push - drawer will push the header and content (default behavior)
-              &,
-              &.mdb-drawer-push {
-                > .mdb-layout-header {
-                  width: calc(100% - #{$mdb-layout-drawer-size});
-                  margin-#{$side}: $mdb-layout-drawer-size;
-                }
-
-                > .mdb-layout-drawer {
-                  transform: translateX(0);
-                }
-
-                > .mdb-layout-content {
-                  margin-#{$side}: $mdb-layout-drawer-size;
-                }
-              }
-            }
-          }
-
-          // mdb-drawer-fixed-(top and bottom) styles
-          @each $side in (top bottom) {
-
-            &.mdb-drawer-fixed-#{$side} {
-
-              // 1. Push - drawer will push the header or content
-              > .mdb-layout-header {
-                //height: calc(100% - #{$mdb-layout-drawer-size});
-                @if $side == top { // only add margin-top on a header when the drawer is at the top
-                  margin-#{$side}: $mdb-layout-drawer-size;
-                }
-              }
-
-              > .mdb-layout-drawer {
-                transform: translateY(0);
-              }
-
-              > .mdb-layout-content {
-                @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
-                  margin-#{$side}: $mdb-layout-drawer-size;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
 
     //
     // Overlay - left/right responsive overlay classes and marker class
     //
-    @mixin drawer-x-overlay($side) {
-      > .mdb-layout-header,
-      > .mdb-layout-content {
-        width: 100%;
-        margin-#{$side}: 0;
-        overflow: hidden;
-      }
-    }
-    @mixin 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;
-        }
-      }
-    }
-
     &.mdb-drawer-overlay {
       #{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
 
@@ -230,11 +95,11 @@
               // 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 drawer-x-overlay($side)
+                @include mdb-drawer-x-overlay($side)
               }
             } @else {
               @include media-breakpoint-down($breakpoint) { // overlay responsive class
-                @include drawer-x-overlay($side)
+                @include mdb-drawer-x-overlay($side)
               }
             }
           }
@@ -249,11 +114,11 @@
               // 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 drawer-y-overlay($side)
+                @include mdb-drawer-y-overlay($side)
               }
             } @else {
               @include media-breakpoint-down($breakpoint) { // overlay responsive class
-                @include drawer-y-overlay($side)
+                @include mdb-drawer-y-overlay($side)
               }
             }
           }
@@ -262,3 +127,12 @@
     }
   }
 }
+
+//// 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) {
+//  @include mdb-drawer-x-open-up(500px, lg);
+//}
+// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
+

scss/mixins/_drawer.scss

@@ -1 +1,187 @@
-// nothing yet, there was something, but it wasn't any good, but we expect to put something here soon!
+// 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");
+//
+//    .kitchen-sink-drawer:not(.mdb-drawer-closed) {
+//      @include mdb-drawer-x-open-up(500px, lg);
+//    }
+//
+//    <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: "") {
+  @each $side in (left right) {
+    #{unquote($parent)} {
+      &.mdb-drawer-fixed-#{$side} {
+        > .mdb-layout-drawer {
+          // position
+          top: 0;
+          #{$side}: 0;
+
+          width: $size;
+          height: 100%;
+
+          @if $side == left {
+            transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
+          } @else {
+            transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
+          }
+        }
+
+        > .mdb-layout-content {
+          margin-#{$side}: 0;
+        }
+      }
+    }
+  }
+}
+
+// $parent -null or something enclosing it i.e. "&"
+@mixin mdb-drawer-y-closed($size, $parent: "") {
+  @each $side in (top bottom) {
+    #{unquote($parent)} {
+      &.mdb-drawer-fixed-#{$side} {
+        > .mdb-layout-drawer {
+          // position
+          #{$side}: 0;
+          left: 0;
+
+          width: 100%;
+          height: $size;
+
+          @if $side == top {
+            transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
+          } @else {
+            transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
+          }
+        }
+
+        > .mdb-layout-content {
+          margin-#{$side}: 0;
+        }
+      }
+    }
+  }
+}
+
+@function mdb-drawer-breakpoint-name($breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: "&-#{$breakpoint}";
+  @if $breakpoint == xs {
+    $name: "&";
+  }
+  @return $name;
+}
+
+@mixin mdb-drawer-x-open($size) {
+  @each $side in (left right) {
+
+    &.mdb-drawer-fixed-#{$side} {
+      // Push - drawer will push the header and content (default behavior)
+      &,
+      &.mdb-drawer-push {
+        > .mdb-layout-header {
+          width: calc(100% - #{$size});
+          margin-#{$side}: $size;
+        }
+
+        > .mdb-layout-drawer {
+          transform: translateX(0);
+        }
+
+        > .mdb-layout-content {
+          margin-#{$side}: $size;
+        }
+      }
+    }
+  }
+}
+
+@mixin mdb-drawer-y-open($size) {
+  @each $side in (top bottom) {
+    &.mdb-drawer-fixed-#{$side} {
+
+      // 1. Push - drawer will push the header or content
+      > .mdb-layout-header {
+        @if $side == top { // only add margin-top on a header when the drawer is at the top
+          margin-#{$side}: $size;
+        }
+      }
+
+      > .mdb-layout-drawer {
+        transform: translateY(0);
+      }
+
+      > .mdb-layout-content {
+        @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
+          margin-#{$side}: $size;
+        }
+      }
+    }
+  }
+}
+
+// breakpoint based open to a particular size
+@mixin mdb-drawer-x-open-up($size, $breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: mdb-drawer-breakpoint-name($breakpoint);
+
+  &.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
+
+      @include media-breakpoint-up($breakpoint) {
+
+        // mdb-drawer-fixed-(left and right) styles
+        @include mdb-drawer-x-open($size);
+      }
+    }
+  }
+}
+
+// breakpoint based open to a particular size
+@mixin mdb-drawer-y-open-up($size, $breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: mdb-drawer-breakpoint-name($breakpoint);
+
+  &.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
+
+      @include media-breakpoint-up($breakpoint) {
+        // mdb-drawer-fixed-(top and bottom) styles
+        @include mdb-drawer-y-open($size);
+      }
+    }
+  }
+}
+
+@mixin mdb-drawer-x-overlay($side) {
+  > .mdb-layout-header,
+  > .mdb-layout-content {
+    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;
+    }
+  }
+}

scss/variables/_drawer.scss

@@ -1,6 +1,8 @@
 // Drawer
+// FIXME: review and integrate other variables from nav or something instead of these
 $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
 $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
 // Sizing
-$mdb-layout-drawer-size: 240px !default;
+$mdb-layout-drawer-x-size: 240px !default;
+$mdb-layout-drawer-y-size: 100px !default;