From 079cae0ac0e3e7ee9eac3340832c890bf14a8e30 Mon Sep 17 00:00:00 2001
From: Sean Johnson <sjohnson@sjohnsonaz.com>
Date: Thu, 10 Aug 2017 17:40:20 -0700
Subject: [PATCH] Fixed Drawer mask.

---
 src/styl/drawer/drawer.styl | 108 +++++++++++++++++++++---------------
 test/html/index.html        |   5 +-
 test/ts/index.ts            |   9 +++
 3 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/src/styl/drawer/drawer.styl b/src/styl/drawer/drawer.styl
index 5f083b7..076b3e5 100644
--- a/src/styl/drawer/drawer.styl
+++ b/src/styl/drawer/drawer.styl
@@ -1,55 +1,75 @@
 @import "drawer-settings.styl";
-.drawer-mask {
+.drawer {
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: black;
-    opacity: 0.5;
-}
-.drawer {
-    display: block;
-    position: fixed;
-    background-color: $drawer-background-color;
-    padding: $drawer-padding;
-    border: $drawer-border-width solid $drawer-border-color;
-    border-radius: $drawer-border-radius;
-    max-height: 100%;
-    max-width: 100%;
-    overflow: auto;
-    box-shadow: $drawer-box-shadow;
-    z-index: $drawer-z-index;
+    background-color: $drawer-mask-background-color;
     visibility: hidden;
-    transition: transform $drawer-transition-duration, visibility $drawer-transition-duration;
-    &.drawer-top {
-        top: 0;
-        left: 0;
-        right: 0;
-        transform: translateY(-200%);
-    }
-    &.drawer-right {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        transform: translateX(200%);
-    }
-    &.drawer-bottom {
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: translateY(200%);
-    }
-    &.drawer-left {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        transform: translateX(- 200%);
-    }
+    opacity: 0;
+    z-index: $drawer-z-index;
+        transition: transform 0s $drawer-transition-duration, visibility 0s $drawer-transition-duration, opacity $drawer-transition-duration, overflow $drawer-transition-duration;
     &.drawer-open {
-        transition: transform 0.5s;
-        transform: none;
+        opacity: 1;
         visibility: visible;
+        transition: transform 0s 0s, visibility $drawer-transition-duration 0s, opacity $drawer-transition-duration, overflow 0s;
+    }
+    & > .drawer-content {
+        display: block;
+        position: fixed;
+        background-color: $drawer-background-color;
+        padding: $drawer-padding;
+        border: $drawer-border-width solid $drawer-border-color;
+        border-radius: $drawer-border-radius;
+        max-height: 100%;
+        max-width: 100%;
+        overflow: auto;
+        box-shadow: $drawer-box-shadow;
+        z-index: $drawer-z-index + 1;
+        visibility: hidden;
+        transition: transform $drawer-transition-duration, visibility $drawer-transition-duration;
+        .drawer-top&{
+            top: 0;
+            left: 0;
+            right: 0;
+            transform: translateY(-200%);
+            .drawer-full& {
+                bottom: 0;
+            }
+        }
+        .drawer-right& {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            transform: translateX(200%);
+            .drawer-full& {
+                left: 0;
+            }
+        }
+        .drawer-bottom& {
+            right: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateY(200%);
+            .drawer-full& {
+                top: 0;
+            }
+        }
+        .drawer-left& {
+            top: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateX(- 200%);
+            .drawer-full& {
+                right: 0;
+            }
+        }
+        .drawer-open& {
+            transition: transform 0.5s;
+            transform: none;
+            visibility: visible;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/test/html/index.html b/test/html/index.html
index 3d848fd..8393c68 100644
--- a/test/html/index.html
+++ b/test/html/index.html
@@ -317,7 +317,10 @@ <h3>Breadcrumb</h3>
                     <h3>Drawer</h3>
                     <button id="clickOpenDrawer" class="button">Open Drawer</button>
                     <div id="drawer" class="drawer drawer-bottom">
-                        <p>Drawer Content</p>
+                        <div class="drawer-content">
+                            <button id="clickCloseDrawer" class="button pull-right">Close</button>
+                            <p>Drawer Content</p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/test/ts/index.ts b/test/ts/index.ts
index f08a220..8836d22 100644
--- a/test/ts/index.ts
+++ b/test/ts/index.ts
@@ -39,6 +39,15 @@ $(function () {
     $('#clickOpenDrawer').click(function (event) {
         $('#drawer').toggleClass('drawer-open');
     });
+    $('#clickCloseDrawer').click(function (event) {
+        $('#drawer').toggleClass('drawer-open');
+    });
+    $('#drawer').click(function (event) {
+        $('#drawer').toggleClass('drawer-open');
+    });
+    $('.drawer-content').click(function (event) {
+        event.stopPropagation();
+    });
 
     $('.tab-container').each(function (index, element) {
         var ul = $($(element).children()[0]);