From 773fd112d28226728fc5fef55352ad14b0f3ed05 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Tue, 19 Jan 2016 14:17:08 -0600
Subject: [PATCH] #822 drawer - used `in` instead of open and `out` instead of
 closed to be more inline with bootstrap terminology

---
 docs/examples/dashboard/example.js | 10 +++---
 docs/examples/dashboard/index.html |  2 +-
 scss/_drawer.scss                  | 40 ++++++++++-----------
 scss/_layout.scss                  |  4 +--
 scss/mixins/_drawer.scss           | 58 ++++++++++++++----------------
 scss/mixins/_layout.scss           |  3 +-
 6 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/docs/examples/dashboard/example.js b/docs/examples/dashboard/example.js
index 22c162e5..d7802399 100644
--- a/docs/examples/dashboard/example.js
+++ b/docs/examples/dashboard/example.js
@@ -27,17 +27,17 @@ $(document).ready(function() { // document ready is a little convoluted because
     var $container = $('.mdb-layout-container')
 
     // once clicked, just do away with responsive marker
-    //$container.removeClass('mdb-drawer-open-md')
+    //$container.removeClass('mdb-drawer-in-md')
 
     var $icon = $(this).find('.material-icons')
     if ($icon.text() == 'visibility_off') {
-      $container.addClass('mdb-drawer-closed')
-      $container.removeClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it close
+      $container.addClass('mdb-drawer-out')
+      $container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close
       $icon.text('visibility')
     }
     else {
-      $container.removeClass('mdb-drawer-closed')
-      $container.addClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it open
+      $container.removeClass('mdb-drawer-out')
+      $container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open
       $icon.text('visibility_off')
     }
   })
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index aa59224b..0dd9596f 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-overlay-md mdb-drawer-open-lg">
+  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
     <header class="mdb-layout-header">
       <!--
       <div class="collapse" id="navbar-header">
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 71936bd7..1aee2ad2 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -43,21 +43,21 @@
 // for top or bottom drawers, setup widths, heights and positions
 @include mdb-drawer-y-closed($mdb-layout-drawer-y-size);
 
-// 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).
+// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), as well
+//  as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px).
 //
 //
-// 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.
+// mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
+//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-in`
+//  without a size (for triggered openings).  Since the xs size is 0, instead of using `mdb-drawer-in-xs`
+//  (which is mostly meaningless), we create `mdb-drawer-in` meaning always open.
 //
-//  NOTE: mdb-drawer-open-* uses media-breakpoint-up()
+//  NOTE: mdb-drawer-in-* uses media-breakpoint-up()
 //
 //
-// mdb-drawer-closed
+// mdb-drawer-out
 //  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.
+//  strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins.
 //
 //
 // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
@@ -70,7 +70,7 @@
 //
 // 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) {
+:not(.mdb-drawer-out) {
 
   @each $breakpoint in map-keys($grid-breakpoints) {
 
@@ -83,28 +83,28 @@
 }
 
 ////----
-//// 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
+//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
 ////
-//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
+//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
 ////
-//.kitchen-sink-drawer:not(.mdb-drawer-closed) {
+//.kitchen-sink-drawer:not(.mdb-drawer-out) {
 //  @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
+//    // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, 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
+//  // Create a responsive overlay at mdb-drawer-overlay-md-down - 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
+//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
 ////
-//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
+//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in 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
+//.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
+//  @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
+//  @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
 //  @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
 //}
 
diff --git a/scss/_layout.scss b/scss/_layout.scss
index 8e7373e6..4bd5fff4 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -50,7 +50,7 @@
   flex-grow: 1;
 }
 
-// Backdrop
+// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
 .mdb-layout-backdrop {
   position: absolute;
   top: 0;
@@ -71,5 +71,5 @@
     pointer-events: none;
   }
 
-  // NOTE: the &.in style is responsive, generated by @mixin mdb-layout-overlay-backdrop-in() where needed.
+  // NOTE: the &.in style is responsive, generated by @mixin mdb-layout-backdrop-in() where needed.
 }
diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss
index b0f0f71b..5c068032 100644
--- a/scss/mixins/_drawer.scss
+++ b/scss/mixins/_drawer.scss
@@ -2,13 +2,13 @@
 //
 
 //----
-// 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
+// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
 //
-// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
+// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
 //
-//    .kitchen-sink-drawer:not(.mdb-drawer-closed) {
+//    .kitchen-sink-drawer:not(.mdb-drawer-out) {
 //      @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
+//        // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay
 //        @include mdb-drawer-x-closed(500px);
 //        @include mdb-drawer-x-open-up(500px, $breakpoint);
 //      }
@@ -17,13 +17,13 @@
 //    }
 
 //----
-// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed
+// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
 //
-// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
+// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in 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
+//    .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
+//      @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
+//      @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
 //      @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
 //    }
 
@@ -77,9 +77,9 @@
   }
 }
 
-@function mdb-drawer-breakpoint-name($breakpoint) {
+@function mdb-drawer-breakpoint-name($breakpoint, $suffix: "") {
   // e.g. &, &-sm, &-md, &-lg
-  $name: "&-#{$breakpoint}";
+  $name: "&-#{$breakpoint}#{$suffix}";
   @if $breakpoint == xs {
     $name: "&";
   }
@@ -134,13 +134,13 @@
 // 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);
+  $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
 
-  &.mdb-drawer-open {
-    #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+  &.mdb-drawer-in {
+    #{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
 
       @if $breakpoint == xs {
-        // mdb-drawer-open marker class (non-responsive)
+        // mdb-drawer-in marker class (non-responsive)
         @include mdb-drawer-x-open($size);
       } @else {
 
@@ -157,13 +157,13 @@
 // 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);
+  $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
 
-  &.mdb-drawer-open {
-    #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+  &.mdb-drawer-in {
+    #{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
 
       @if $breakpoint == xs {
-        // mdb-drawer-open marker class (non-responsive)
+        // mdb-drawer-in marker class (non-responsive)
         @include mdb-drawer-y-open($size);
       } @else {
 
@@ -178,7 +178,7 @@
 }
 
 @mixin mdb-drawer-x-overlay() {
-  @include mdb-layout-overlay-backdrop-in();
+  @include mdb-layout-backdrop-in();
 
   @each $side in (left right) {
     &.mdb-drawer-fixed-#{$side} {
@@ -192,7 +192,7 @@
 }
 
 @mixin mdb-drawer-y-overlay() {
-  @include mdb-layout-overlay-backdrop-in();
+  @include mdb-layout-backdrop-in();
 
   @each $side in (top bottom) {
     &.mdb-drawer-fixed-#{$side} {
@@ -211,13 +211,11 @@
   }
 }
 
+// Overlay - left/right responsive overlay classes and marker class
 @mixin mdb-drawer-x-overlay-down($breakpoint) {
   // e.g. &, &-sm, &-md, &-lg
-  $name: mdb-drawer-breakpoint-name($breakpoint);
+  $name: mdb-drawer-breakpoint-name($breakpoint, '-down');
 
-  //
-  // 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
 
@@ -226,7 +224,7 @@
       @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)
+        //  responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
         &.mdb-drawer-overlay {
           @include mdb-drawer-x-overlay()
         }
@@ -239,13 +237,11 @@
   }
 }
 
+// Overlay - top/bottom responsive overlay classes and marker class
 @mixin mdb-drawer-y-overlay-down($breakpoint) {
   // e.g. &, &-sm, &-md, &-lg
-  $name: mdb-drawer-breakpoint-name($breakpoint);
+  $name: mdb-drawer-breakpoint-name($breakpoint, "-down");
 
-  //
-  // 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
@@ -253,7 +249,7 @@
       @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)
+        //  responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
         &.mdb-drawer-overlay {
           @include mdb-drawer-y-overlay();
         }
diff --git a/scss/mixins/_layout.scss b/scss/mixins/_layout.scss
index 9771b27b..637b9521 100644
--- a/scss/mixins/_layout.scss
+++ b/scss/mixins/_layout.scss
@@ -1,4 +1,5 @@
-@mixin mdb-layout-overlay-backdrop-in() {
+// Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode
+@mixin mdb-layout-backdrop-in() {
 
   > .mdb-layout-backdrop {
     .in {