BETA for router screen

src/router/Lungo.Router.js

@@ -34,12 +34,30 @@ Lungo.Router = (function(lng, undefined) {
             var target = (current) ? current.siblings(query) : lng.dom(query);
 
             if (target.length > 0) {
-                if (current) {
-                    _defineTransition(target, current);
-                    current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
+                // @todo: Analize Router
+
+                if (lng.DEVICE == DEVICE.PHONE) {
+                    if (current) {
+                        _defineTransition(target, current);
+                        current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
+                    }
+                    _showPhoneSection(target);
+
+                } else {
+                    if (current) {
+                        current.addClass(CLASS.HIDE);
+
+                        setTimeout(function() {
+                            current.removeClass(CLASS.SHOW);
+                        }, lng.Constants.TRANSITION.DURATION);
+                    }
+
+                    setTimeout(function() {
+                        target.addClass(CLASS.SHOW);
+                    }, lng.Constants.TRANSITION.DURATION);
                 }
 
-                _toggleSection(current, target);
+                _cacheView(current, target);
 
                 lng.Router.History.add(section_id);
             }
@@ -110,11 +128,29 @@ Lungo.Router = (function(lng, undefined) {
 
         _assignTransition(target, target.data('transition-origin'));
 
-        _toggleSection(current, target);
+        _showPhoneSection(target);
+        _cacheView(current, target);
     };
 
-    var _toggleSection = function(current, target) {
+    var _showPhoneSection = function(target) {
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
+    };
+
+    var _showTabletSection = function(current, target) {
+        if (current) {
+            current.addClass(CLASS.HIDE);
+
+            setTimeout(function() {
+                current.removeClass(CLASS.SHOW);
+            }, lng.Constants.TRANSITION.DURATION);
+        }
+
+        setTimeout(function() {
+            target.addClass(CLASS.SHOW);
+        }, lng.Constants.TRANSITION.DURATION + 50);
+    };
+
+    var _cacheView = function(current, target) {
         lng.Element.Cache.section = target;
         lng.Element.Cache.article = target.find(ELEMENT.ARTICLE + "." + CLASS.ACTIVE);
         lng.Element.Cache.aside = lng.View.Aside.active(target);

src/stylesheets/lungo.layout.aside.styl

@@ -10,7 +10,7 @@
 @import "constants.styl"
 
 aside
-  width: ASIDE_WIDTH
+  min-width: ASIDE_WIDTH
   display: none
   z-index: -1
 
@@ -20,7 +20,6 @@ aside
   &.show
     z-index: 0
 
-
   &.right
     right: 0px
 

src/stylesheets/lungo.layout.transition.styl

@@ -12,7 +12,7 @@
 section
   &[data-transition]
     // display: block !important
-    display-box()
+    // display-box()
     transition-property( opacity, z-index, transform )
     transition-duration( TRANSITION_TIME )
     transition-timing-function( DEFAULT_TRANSITION )
@@ -30,13 +30,13 @@ section
       opacity: 0
 
   /* Transition: SLIDE */
-  &[data-transition="slide"]
-    transform translateX(100%)
-    visibility: visible !important
-    &.show
-      transform translateX(0%)
-    &.hide
-      transform translateX(-100%)
+  // &[data-transition="slide"]
+  //   transform translateX(100%)
+  //   visibility: visible
+  //   &.show
+  //     transform translateX(0%)
+  //   &.hide
+  //     transform translateX(-100%)
 
   /* Transition: COVER */
   &[data-transition="cover"]

src/stylesheets/lungo.media.tablet.styl

@@ -6,16 +6,58 @@
 
   body
     display-box()
-    box-pack(justify)
     box-orient(horizontal)
     overflow: hidden
 
+  aside
+    width 15%
+    // transform translateX(-100%)
+    // transition-property transform
+    // transition-duration TRANSITION_TIME
+    // &.show
+    //   transition-delay TRANSITION_TIME
+    //   transform translateX(0%)
+
+
   section
     ordinal-group(2)
-    box-flex(1)
-    &:not(.show)
-      display: none !important
 
+    display: none
+    transform translateX(100%)
+
+    &.show
+      display-box()
+      -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
+      -webkit-animation-fill-mode: forwards
+
+    &.hide
+      -webkit-animation: hiding TRANSITION_TIME
+
+
+    &:not([data-child])
+      box-flex (1)
+
+    &[data-child]
+      width: 25%
+      margin-right: 0.5%
 
   [data-router=aside]
     display: none !important
+
+
+
+@-webkit-keyframes showing
+  0%
+    opacity: 0
+    transform translateX(100%)
+  100%
+    opacity: 1
+    transform translateX(0%)
+
+@-webkit-keyframes hiding
+  0%
+    opacity: 1
+    transform translateX(0%)
+  100%
+    opacity: 0
+    transform translateX(100%)

src/stylesheets/theme.lungo.styl

@@ -9,7 +9,7 @@
 
 /* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import "CSSmethods/vendor.styl"
-@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
 
 
 /* -------------------------- THEME -------------------------- */

src/view/Lungo.View.Aside.js

@@ -91,9 +91,6 @@ Lungo.View.Aside = (function(lng, undefined) {
                 setTimeout(function() {
                     lng.Element.Cache.aside.removeClass(CLASS.SHOW);
                 }, lng.Constants.TRANSITION.DURATION);
-
-            } else {
-                // lng.Element.Cache.aside.removeClass(CLASS.SHOW);
             }
         }
     };