From 59831c66f0863d53afea443b9b0dfdb3ae05b088 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Fri, 15 Jan 2016 16:25:00 -0600
Subject: [PATCH] #822 implementation of x overlay with a marker class
 (non-responsive)

---
 docs/examples/dashboard/index.html |   2 +-
 scss/_drawer.scss                  | 190 ++++++++++++++++++++---------
 scss/mixins/_breakpoints.scss      |  66 +++++-----
 scss/variables/_drawer.scss        |   4 -
 4 files changed, 164 insertions(+), 98 deletions(-)

diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index c802a706..851a4f19 100644
--- a/docs/examples/dashboard/index.html
+++ b/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">
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 8e69a25d..82f91ccb 100644
--- a/scss/_drawer.scss
+++ b/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,96 +91,164 @@
 // 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,
-//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open`
-//  a.k.a always open.
-//  Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+//
+// mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+//  We 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, instead of using `mdb-drawer-open-xs`
+//  (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,
-//  regardless of the responsive class present. If (for some strange reason) both mdb-drawer-closed and mdb-drawer-open
-//  are present, it appears that the closed option wins.
+//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
+//  strange reason) both mdb-drawer-closed and mdb-drawer-open 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: "&";
     }
 
-    // e.g. &, &-sm, &-md, &-lg
-    #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+    &.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
 
-      @include media-breakpoint-up($breakpoint) {
+        @include media-breakpoint-up($breakpoint) {
 
-        // mdb-drawer-fixed-(left and right) styles
-        @each $side in (left right) {
+          // 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)
-            &,
-            &.mdb-drawer-push {
-              > .mdb-layout-header {
-                width: calc(100% - #{$mdb-layout-drawer-size});
-                margin-#{$side}: $mdb-layout-drawer-size;
-              }
+              // 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-drawer {
+                  transform: translateX(0);
+                }
 
-              > .mdb-layout-content {
-                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;
+                > .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} {
 
-      // 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) {
-
-            // 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;
+              // 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-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;
+              > .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 {
+    //    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)
+        //      }
+        //    }
+        //  }
+        //}
+      }
+    }
   }
 }
-
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index ffbe5d27..441435ab 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -1,34 +1,34 @@
-// case where behavior is responsive, or with a marker class
-@mixin media-breakpoint-down-or($breakpoint, $name) {
-  #{unquote($name)} {
-    @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
+//// case where behavior is responsive, or with a marker class
+//@mixin media-breakpoint-down-or($breakpoint, $name) {
+//  #{unquote($name)} {
+//    @content
+//  }
 //
-//    >> 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);
-}
+//  @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)
+////    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);
+//}
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
index 7c7c6f90..8a9c21f3 100644
--- a/scss/variables/_drawer.scss
+++ b/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;