#822 implementation of x overlay with a marker class (non-responsive)

docs/examples/dashboard/index.html

@@ -9,7 +9,7 @@ js: example.js
 <link href="example.css" rel="stylesheet">
 
 <div class="mdb-layout-canvas">
-  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-lg">
+  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg">
     <header class="mdb-layout-header">
       <!--
       <div class="collapse" id="navbar-header">

scss/_drawer.scss

@@ -1,3 +1,5 @@
+// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
+
 // Drawer.
 .mdb-layout-drawer {
   position: absolute;
@@ -89,25 +91,46 @@
 // 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).
 //
-// To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
+//
-//  `mdb-drawer-open` without a size (for triggered openings).  Since the xs size is 0,
+// mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
-//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open`
+//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-open`
-//  a.k.a always open.
+//  without a size (for triggered openings).  Since the xs size is 0, instead of using `mdb-drawer-open-xs`
-//  Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+//  (which is mostly meaningless), we create `mdb-drawer-open` meaning always open.
+//
+//  NOTE: mdb-drawer-open-* uses media-breakpoint-up()
+//
 //
 // mdb-drawer-closed
-//  Note that this also makes a provision for mdb-drawer-closed, a marker class that will _force_ the drawer closed,
+//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
-//  regardless of the responsive class present. If (for some strange reason) both mdb-drawer-closed and mdb-drawer-open
+//  strange reason) both mdb-drawer-closed and mdb-drawer-open are present, it appears that the closed option wins.
-//  are present, it appears that the closed option wins.
 //
-.mdb-drawer-open {
+//
+// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
+//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
+//  Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay.
+//
+//  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)
+:not(.mdb-drawer-closed) {
+
   @each $breakpoint in map-keys($grid-breakpoints) {
 
+    // e.g. &, &-sm, &-md, &-lg
     $name: "&-#{$breakpoint}";
     @if $breakpoint == xs {
       $name: "&";
     }
 
+    &.mdb-drawer-open {
+      $name: "&-#{$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
 
@@ -116,7 +139,7 @@
           // mdb-drawer-fixed-(left and right) styles
           @each $side in (left right) {
 
-          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
+            &.mdb-drawer-fixed-#{$side} {
 
               // 1. Push - drawer will push the header and content (default behavior)
               &,
@@ -134,29 +157,13 @@
                   margin-#{$side}: $mdb-layout-drawer-size;
                 }
               }
-
-            // 2. Overlay - drawer will overlay content/header at the pre-configured breakpoint OR if marked as mdb-drawer-overlay
-            @include media-breakpoint-down-or($mdb-layout-drawer-x-overlay-breakpoint, "&.mdb-drawer-overlay") {
-              > .mdb-layout-header,
-              > .mdb-layout-content {
-                width: 100%;
-                margin-#{$side}: 0;
-                overflow: hidden;
             }
           }
-          }
-        }
-      }
-
-
-
-      // top bottom
-      #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
 
           // mdb-drawer-fixed-(top and bottom) styles
           @each $side in (top bottom) {
 
-          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
+            &.mdb-drawer-fixed-#{$side} {
 
               // 1. Push - drawer will push the header or content
               > .mdb-layout-header {
@@ -180,5 +187,68 @@
         }
       }
     }
-}
 
+    //
+    // 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 {
+    //    width: 100%;
+    //    margin-#{$side}: 0;
+    //    overflow: hidden;
+    //  }
+    //}
+
+    &.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 drawer-x-overlay($side)
+              }
+            } @else {
+              @include media-breakpoint-down($breakpoint) { // overlay responsive class
+                @include 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 drawer-y-overlay($side)
+        //      }
+        //    } @else {
+        //      @include media-breakpoint-down($breakpoint) { // overlay responsive class
+        //        @include drawer-y-overlay($side)
+        //      }
+        //    }
+        //  }
+        //}
+      }
+    }
+  }
+}

scss/mixins/_breakpoints.scss

@@ -1,34 +1,34 @@
-// case where behavior is responsive, or with a marker class
+//// case where behavior is responsive, or with a marker class
-@mixin media-breakpoint-down-or($breakpoint, $name) {
+//@mixin media-breakpoint-down-or($breakpoint, $name) {
-  #{unquote($name)} {
+//  #{unquote($name)} {
-    @content
+//    @content
-  }
+//  }
-
-  @include media-breakpoint-down($breakpoint) {
-    @content
-  }
-}
-
-// case where behavior is responsive, or with a marker class
-@mixin media-breakpoint-up-or($breakpoint, $name) {
-  #{unquote($name)} {
-    @content
-  }
-
-  @include media-breakpoint-up($breakpoint) {
-    @content
-  }
-}
-
-// Name of the previous breakpoint, or null
 //
-//    >> breakpoint-next(sm)
+//  @include media-breakpoint-down($breakpoint) {
-//    xs
+//    @content
-//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+//  }
-//    xs
+//}
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//
-//    xs
+//// case where behavior is responsive, or with a marker class
-@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+//@mixin media-breakpoint-up-or($breakpoint, $name) {
-  $n: index($breakpoint-names, $name);
+//  #{unquote($name)} {
-  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+//    @content
-}
+//  }
+//
+//  @include media-breakpoint-up($breakpoint) {
+//    @content
+//  }
+//}
+//
+//// Name of the previous breakpoint, or null
+////
+////    >> breakpoint-next(sm)
+////    xs
+////    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+////    xs
+////    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+////    xs
+//@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+//  $n: index($breakpoint-names, $name);
+//  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+//}

scss/variables/_drawer.scss

@@ -2,9 +2,5 @@
 $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
 $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
-// when media-breakpoint-down(md), make the drawer overlay instead of push the content/header (left right)
-// note: a good combo appears to be mdb-drawer-open-lg and md for the value below
-$mdb-layout-drawer-x-overlay-breakpoint: md;
-
 // Sizing
 $mdb-layout-drawer-size: 240px !default;