Additional bug fixes and animation tweaks

src/definitions/modules/sidebar.js

@@ -97,6 +97,32 @@ $.fn.sidebar = function(parameters) {
           ;
         },
 
+        event: {
+          clickaway: function(event) {
+            console.log(event.target);
+            if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) {
+              module.verbose('User clicked on dimmed page');
+              $.proxy(module.hide, element)();
+            }
+          }
+        },
+
+        bind: {
+          clickaway: function() {
+            console.log($body);
+            $body
+              .on('click' + eventNamespace, module.event.clickaway)
+            ;
+          }
+        },
+        unbind: {
+          clickaway: function() {
+            $body
+              .off('click' + eventNamespace)
+            ;
+          }
+        },
+
         refresh: function() {
           module.verbose('Refreshing selector cache');
           $style  = $('style[title=' + namespace + ']');
@@ -235,7 +261,9 @@ $.fn.sidebar = function(parameters) {
             module.set.inward();
             requestAnimationFrame(function() {
               module.set.visible();
-              module.set.pushed();
+              requestAnimationFrame(function() {
+                module.set.pushed();
+              });
             });
             $pusher
               .off(transitionEnd)
@@ -244,6 +272,7 @@ $.fn.sidebar = function(parameters) {
                   module.remove.inward();
                   module.set.active();
                   $pusher.off(transitionEnd);
+                  module.bind.clickaway();
                   $.proxy(callback, element)();
                 }
               })
@@ -261,6 +290,7 @@ $.fn.sidebar = function(parameters) {
             if(settings.animation == 'overlay') {
               $module. removeClass(className.visible);
             }
+            module.unbind.clickaway();
             requestAnimationFrame(function() {
               module.set.outward();
               module.remove.active();

src/definitions/modules/sidebar.less

@@ -100,27 +100,33 @@ body.pushable > .pusher > .page:after {
             States
 *******************************/
 
-/*--------------
-    Animating
----------------*/
-
-
 /*--------------
      Pushed
 ---------------*/
 
-/* Show Dimmer */
+/* Add Canvas BG */
 body.pushable.pushed,
 body.pushable.hide,
 body.pushable.show {
   background: @canvasBackground !important;
 }
 
-/*body.pushed > .pusher > .page:after {
+/* Remove Scroll */
+body.pushed > .pusher > .page {
+  overflow: hidden;
+}
+
+/* Show Dimmer */
+body.pushed > .pusher > .page:after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;
-}*/
+}
+
+/*--------------
+     Visible
+---------------*/
+
 body > .visible.ui.sidebar {
   visibility: visible;
 }
@@ -171,14 +177,16 @@ body.pushing.pushed > .pusher {
 }
 body.pushing > .ui.sidebar {
   transform: translate3d(-100%, 0, 0);
+  z-index: 3;
 }
 body.pushing > .pusher {
-  transform: translate3d(0, 0, 0);
+  transform: translate3d(0px, 0, 0);
+  z-index: 2;
 }
 
 /* Pushed */
 body.pushing.pushed .visible.sidebar {
-  transform: translate3d(0%, 0, 0);
+  transform: translate3d(0px, 0, 0);
 }
 body.pushing.pushed > .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
@@ -280,7 +288,7 @@ body.scale.down > .ui.sidebar {
 
 /* Pushed */
 body.scale.down.pushed > .pusher {
-  transform: translate3d(0, 0, -@sidebarWidth);
+  transform: translate3d(210px, 0px, -500px);
 }
 body.scale.down.pushed > .visible.ui.sidebar {
   transform: translate3d(0, 0, 0);
@@ -348,7 +356,7 @@ body.recede > .pusher::after {
 
 /* Pushed */
 body.recede.pushed > .pusher {
-  transform: translate3d(0px, 0, -200px) rotateY(-25deg);
+  transform: translate3d(15%, 0px, -400px) rotateY(-15deg);
 }
 body.recede.pushed > .visible.ui.sidebar {
   transform: translate3d(0, 0, 0);
@@ -371,10 +379,12 @@ body.open.door {
 body.open.door > .ui.sidebar {
   opacity: 1;
   transform: translate3d(-100%, 0, 0);
+  z-index: 3;
 }
 body.open.door > .pusher {
   transform-origin: 100% 50%;
   transform-style: preserve-3d;
+  z-index: 2;
 }
 
 
@@ -418,6 +428,12 @@ body.rotate.in.pushed .visible.ui.sidebar {
   transform: translate3d(0%, 0, 0) rotateY(0deg);
 }
 
+/* Return Animation */
+body.rotate.in.hide > .visible.ui.sidebar {
+  transform: translate3d(-100%, 0, 0) rotateY(0deg);
+  transition: transform @animationDuration ease 0s;
+}
+
 /* Animation */
 body.rotate.in.show > .visible.ui.sidebar,
 body.rotate.in.hide > .visible.ui.sidebar {