Fixed z-index in aside & section

examples/test/index.html

@@ -379,9 +379,6 @@
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
     <script src="../../src/Lungo.Fallback.js"></script>
-    <!--
-    <script src="../../src/boot/Lungo.Boot.js"></script>
-    -->
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
@@ -389,9 +386,6 @@
     <script src="../../src/boot/Lungo.Boot.Data.js"></script>
     <script src="../../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../../src/boot/Lungo.Boot.Article.js"></script>
-    <!--
-    <script src="../../src/Lungo.App.js" ></script>
-    -->
 
     <!-- LungoJS - Sandbox App -->
     <script>
@@ -406,7 +400,6 @@
             }
         });
     </script>
-
     <script src="app/app.js"></script>
     <script src="app/view.js"></script>
     <script src="app/data.js"></script>

src/stylesheets/Lungo.layout.article.less

@@ -11,9 +11,9 @@
 @import "constants.less";
 
 article {
-    //position: absolute;
+    // @todo: section position absolute or FIXED
+    // position: absolute;
     position: fixed;
-    // width: 100% !important;
     width: inherit;
     height: auto;
     top: 0;
@@ -36,10 +36,6 @@ article {
         font-weight: normal;
         line-height: 1.4em;
     }
-
-    & > .loading {
-        //margin-top: 10%;
-    }
 }
 
 header:not(.extended) ~ article { top: @header-height; }

src/stylesheets/Lungo.layout.aside.less

@@ -21,17 +21,21 @@ section.aside {
 }
 
 aside {
-    position: absolute;
+    // @todo: section position absolute or FIXED
+    // position: absolute;
+    position: fixed;
+
     height: auto;
     top: 0;
     bottom: 0;
     display: none;
-    z-index: 0;
+    z-index: -1;
 
     width: @aside-width;
 
     &.right { right: 0px; }
-    &.current {
+    &.show {
+        z-index: 0;
         display: block;
     }
 

src/stylesheets/Lungo.layout.less

@@ -11,14 +11,14 @@
 @import "mixins.less";
 
 section {
-    //position: absolute; /* position: fixed on iOS5 & Android 4 */
+    // @todo: section position absolute or FIXED
+    // position: absolute; /* position: fixed on iOS5 & Android 4 */
     position: fixed;
     left:  0;
     top:  0;
     width: 100%;
     height: 100%;
-    z-index: 0;
-
+    z-index: -1;
     display: none;
     visibility: hidden;
     .transition(all 250ms @defaultTrasition);
@@ -29,8 +29,9 @@ section {
         display: block;
         visibility: visible;
     }
+
     &.hide {
-        z-index: 0;
+        z-index: -1;
         display: none;
         visibility: hidden;
     }
@@ -58,12 +59,8 @@ section {
         .transform(translate(100%, 0));
         visibility: visible !important;
 
-        &:first-child, &.show {
-            .transform(translate(0%, 0));
-        }
-        &.hide {
-            .transform(translate(-100%, 0));
-        }
+        &:first-child, &.show { .transform(translate(0%, 0)); }
+        &.hide { .transform(translate(-100%, 0)); }
     }
 }
 
@@ -73,7 +70,7 @@ header, footer  {
     width: 100%;
     height: @header-height;
     display: block;
-    z-index: 2;
+    z-index: 1;
 
     line-height: @header-height;
     overflow: hidden;

src/stylesheets/css/Lungo.layout.css

@@ -14,7 +14,7 @@ section {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: -1;
   display: none;
   visibility: hidden;
   -webkit-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -36,7 +36,7 @@ section.show {
   visibility: visible;
 }
 section.hide {
-  z-index: 0;
+  z-index: -1;
   display: none;
   visibility: hidden;
 }
@@ -128,7 +128,7 @@ footer {
   width: 100%;
   height: 42px;
   display: block;
-  z-index: 2;
+  z-index: 1;
   line-height: 42px;
   overflow: hidden;
 }