Stopping point for night

src/definitions/modules/dimmer.less

@@ -115,9 +115,15 @@ body.dimmable > .dimmer {
   position: fixed;
 }
 
-body.dimmed.dimmable > :not(.dimmer){
-  filter: @elementFilter;
+/*
+body.dimmable > :not(.dimmer) {
+  filter: @elementStartFilter;
+}
+body.dimmed.dimmable > :not(.dimmer) {
+  filter: @elementEndFilter;
+  transition: @elementTransition;
 }
+*/
 
 /*--------------
     Aligned

src/definitions/modules/sidebar.less

@@ -59,10 +59,12 @@
   top: 0px !important;
   bottom: auto !important;
 }
+
 .ui.right.sidebar {
   right: 0px !important;
   left: auto !important;
 }
+
 .ui.bottom.sidebar {
   top: auto !important;
   bottom: 0px !important;
@@ -91,8 +93,8 @@
   backface-visibility: hidden;
   will-change: transform;
 
-  transition: transform @duration @easing;
   z-index: @fixedLayer;
+  transition: transform @duration @easing;
 }
 
 /*--------------
@@ -101,10 +103,8 @@
 
 .pushable > .pusher {
   backface-visibility: hidden;
-  z-index: @middleLayer;
-  will-change: transform;
 
-  min-height: 100%;
+  height: 100%;
   transition: transform @duration @easing;
   background: @pageBackground;
 }
@@ -125,7 +125,6 @@
   height: 0px;
   overflow: hidden;
   opacity: 0;
-  z-index: @dimmerLayer;
   transition: opacity @duration;
   will-change: opacity;
 }
@@ -150,6 +149,13 @@
   overflow-x: hidden;
 }
 
+.pushable.pushed > .pusher:after {
+  z-index: @dimmerLayer;
+}
+.pushable.pushed > .pusher {
+  z-index: @middleLayer;
+}
+
 /*--------------
      Dimmed
 ---------------*/

src/definitions/modules/transition.js

@@ -310,7 +310,7 @@ $.fn.transition = function() {
 
         save: {
           displayType: function(displayType) {
-            module.displayType = displayType;
+            $module.data(metadata.displayType, displayType);
           },
           transitionExists: function(animation, exists) {
             $.fn.transition.exists[animation] = exists;
@@ -440,11 +440,11 @@ $.fn.transition = function() {
             return $.fn.transition.settings;
           },
           displayType: function() {
-            if(module.displayType === undefined) {
+            if($module.data(metadata.displayType) === undefined) {
               // create fake element to determine display state
-              module.can.transition();
+              module.can.transition(true);
             }
-            return module.displayType;
+            return $module.data(metadata.displayType);
           },
           style: function() {
             var
@@ -505,18 +505,19 @@ $.fn.transition = function() {
               return false;
             }
           },
-          transition: function() {
+          transition: function(forced) {
             var
-              elementClass     = $module.attr('class'),
-              tagName          = $module.prop('tagName'),
-              animation        = settings.animation,
-              transitionExists = module.get.transitionExists(settings.animation),
+              elementClass      = $module.attr('class'),
+              tagName           = $module.prop('tagName'),
+              animation         = settings.animation,
+              transitionExists  = module.get.transitionExists(settings.animation),
               $clone,
               currentAnimation,
               inAnimation,
+              animationExists,
               displayType
             ;
-            if( transitionExists === undefined || module.displayType === undefined) {
+            if( transitionExists === undefined || forced) {
               module.verbose('Determining whether animation exists');
               $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
               currentAnimation = $clone
@@ -541,19 +542,19 @@ $.fn.transition = function() {
               module.verbose('Determining final display state', displayType);
               if(currentAnimation != inAnimation) {
                 module.debug('Transition exists for animation', animation);
-                transitionExists = true;
+                animationExists = true;
               }
               else {
                 module.debug('Static animation found', animation, displayType);
-                transitionExists = false;
+                animationExists = false;
               }
               $clone.remove();
               module.save.displayType(displayType);
               if(transitionExists === undefined) {
-                module.save.transitionExists(animation, transitionExists);
+                module.save.transitionExists(animation, animationExists);
               }
             }
-            return transitionExists;
+            return transitionExists || animationExists;
           }
         },
 
@@ -822,6 +823,10 @@ $.fn.transition.settings = {
   // new animations will occur after previous ones
   queue       : true,
 
+  metadata : {
+    displayType: 'display'
+  },
+
   className   : {
     animating  : 'animating',
     disabled   : 'disabled',

src/themes/default/modules/dimmer.variables

@@ -20,8 +20,9 @@
 @textColor: @white;
 @overflow: hidden;
 
-// @elementFilter: ~"blur(15px) grayscale(0.7)";
-@elementFilter: '';
+@elementStartFilter: ~"blur(0px) grayscale(0)";
+@elementEndFilter: ~"blur(15px) grayscale(0.7)";
+@elementTransition: 1.5s all ease;
 
 /* Hidden (Default) */
 @hiddenOpacity: 0;