Merge fixes

src/modules/Lungo.Aside.coffee

@@ -39,7 +39,7 @@ Lungo.Aside = do (lng = Lungo) ->
       _callback = callback
       aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
       if lng.DEVICE is C.DEVICE.PHONE
-        lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
+        lng.Element.Cache.section.removeClass("aside").data("aside-#{aside_transition}", "hide")
       else
         lng.dom(".aside").removeClass("aside").addClass("asideHidding")
         lng.Element.Cache.aside = null
@@ -71,6 +71,8 @@ Lungo.Aside = do (lng = Lungo) ->
       section.removeAttr("data-aside-#{aside_transition}")
       if _callback then _callback.call _callback
       _callback = undefined
+    else
+      section.removeAttr("data-aside-#{aside_transition}").addClass "aside"
 
 
   ###

src/stylesheets/lungo.animation.slide.styl

@@ -2,32 +2,33 @@
 
 SCALE = .8
 
-[data-transition="slide"]
-  &[data-direction="in"]
-    z-index: 2
-    vendor(animation-name, slideIn)
-  &[data-direction="out"]
-    z-index: 1
-    vendor(animation-name, slideOut)
-  &[data-direction="back-in"]
-    z-index: 1
-    vendor(animation-name, slideBackIn)
-  &[data-direction="back-out"]
-    z-index: 2
-    vendor(animation-name, slideBackOut)
+section
+  &[data-transition="slide"]
+    &[data-direction="in"]
+      z-index: 2
+      vendor(animation-name, slideIn)
+    &[data-direction="out"]
+      z-index: 1
+      vendor(animation-name, slideOut)
+    &[data-direction="back-in"]
+      z-index: 1
+      vendor(animation-name, slideBackIn)
+    &[data-direction="back-out"]
+      z-index: 2
+      vendor(animation-name, slideBackOut)
 
 @keyframes slideIn
-  from { transform: translateX(100%); opacity: 0 }
-  to   { transform: translateX(0); opacity: 1 }
+  from { transform: translateX(100%) }
+  to   { transform: translateX(0) }
 
 @keyframes slideOut
-  from { transform: scale(1); opacity: 1 }
-  to   { transform: scale(SCALE); opacity: 0 }
+  from { transform: scale(1) }
+  to   { transform: scale(SCALE) }
 
 @keyframes slideBackOut
-  from { transform: translateX(0); opacity: 1 }
-  to   { transform: translateX(100%); opacity: 0 }
+  from { transform: translateX(0) }
+  to   { transform: translateX(100%) }
 
 @keyframes slideBackIn
-  from { transform: scale(SCALE); opacity: 0 }
-  to   { transform: scale(1); opacity: 1 }
+  from { transform: scale(SCALE) }
+  to   { transform: scale(1) }

src/stylesheets/lungo.layout.styl

@@ -91,7 +91,7 @@ body
     z-index: 2
     width: inherit
     &:not(.show)
-      z-index: 1
+      z-index: -1
 
   /* ========================================================================= */
   /* ================================= ASIDE ================================= */

src/stylesheets/lungo.media.phone.styl

@@ -1,8 +1,6 @@
 @import "__init.styl"
 
 /* ==== Any phone ==== */
-
-
 @media only screen and (max-width: 767px)
   body
     vendor(perspective, 800px)
@@ -14,20 +12,15 @@
       position: fixed
 
     & > aside
+      z-index: 0
       position: absolute
 
     & > section
       display: none
       &:not([data-transition]).show
         display: block
-
-      // &.show.aside
-      //   &:not(.right)
-      //     transform translateX(ASIDE_WIDTH)
-      //   &.right
-      //     transform translateX(-(ASIDE_WIDTH))
-      // &.show.hide
-      //   z-index: -1
+      &.aside
+        transform translateX(ASIDE_WIDTH)
 
     & [data-transition], & [data-aside-transition]
       display-box()

src/stylesheets/lungo.media.tablet.styl

@@ -51,9 +51,6 @@
 
       &:not([data-children])
         box-flex(1)
-        &[data-aside]
-          width: 500px !important
-          color: red !important
 
       &[data-children]
         width: 320px