Fix button stylesheet

src/stylesheets/Lungo.layout.less

@@ -56,20 +56,19 @@ section {
         .transform(translateX(100%));
         visibility: visible !important;
 
-        &:not(.show) > header > * {
+        & > header > *, & > article > * {
             opacity: 0;
-            .transition(opacity 300ms @defaultTrasition);
+            .transition(opacity 400ms @defaultTrasition);
         }
 
         &:first-child, &.show {
             .transform(translateX(0%));
-            & > header > * { opacity: 1; }
+            & > header > *, & > article > * { opacity: 1; }
         }
 
         &.hide {
             .transform(translateX(-100%));
-
-            & > header > * { opacity: 0; }
+            & > header > *, & > article > * { opacity: 0; }
         }
     }
 

src/stylesheets/Lungo.layout.nav.css

@@ -1,138 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Nav
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-/* DIMENSIONS */
-/* COLORS */
-header nav,
-footer nav {
-  height: auto;
-  text-align: center;
-}
-header nav a,
-footer nav a {
-  padding: 0 6px;
-  min-width: 28px;
-  z-index: 1000;
-  float: left;
-  height: 44px;
-}
-header nav a .icon,
-footer nav a .icon {
-  font-size: 1.7em;
-}
-header nav a img,
-footer nav a img {
-  width: 16px;
-  height: 16px;
-  top: -1px !important;
-}
-header nav a abbr,
-footer nav a abbr {
-  font-weight: bold;
-}
-header nav a .bubble,
-footer nav a .bubble {
-  position: relative;
-  top: -12px;
-  left: -12px;
-  margin-right: -20px;
-}
-header nav.groupbar,
-footer nav.groupbar {
-  position: absolute;
-  top: 44px;
-  height: 30px;
-  display: block;
-  width: 100%;
-  z-index: 2;
-  line-height: 30px;
-}
-header nav.groupbar a,
-footer nav.groupbar a {
-  padding: 0px;
-  margin: 0px;
-  font-weight: bold;
-  height: 30px;
-}
-header nav.groupbar a .icon,
-footer nav.groupbar a .icon {
-  font-size: 1.0em;
-}
-header nav.groupbar a .bubble,
-footer nav.groupbar a .bubble {
-  top: -6px;
-  left: 0px;
-}
-header nav.button a {
-  margin: 5px 5px 5px 0;
-  height: 32px;
-  line-height: 32px;
-}
-header nav.button a .icon {
-  line-height: 33px;
-}
-header nav.button a:first-child {
-  margin: 5px;
-}
-header nav .icon ~ abbr {
-  margin-left: 4px;
-  float: right;
-}
-header nav .loading {
-  margin-top: .5em;
-  font-size: 1.6em;
-}
-header nav .loading  + .icon {
-  display: none;
-}
-footer nav a {
-  display: block;
-  padding: 0;
-  height: 44px;
-}
-footer nav .icon {
-  display: block;
-  top: 0px;
-  font-size: 2.0em !important;
-  line-height: 44px;
-}
-footer nav .bubble {
-  top: -42px;
-  left: 4px;
-}
-footer nav .bubble .loading {
-  top: 0;
-  font-size: 1.4em;
-}
-footer nav abbr {
-  display: none;
-}
-footer nav .loading {
-  top: .1em;
-  font-size: 2.3em;
-}
-footer nav.with-labels .icon {
-  line-height: 36px;
-}
-footer nav.with-labels .bubble {
-  top: -34px;
-}
-footer nav.with-labels abbr {
-  display: block !important;
-  position: absolute;
-  top: 30px;
-  width: inherit;
-  height: 14px;
-  margin-left: 0px;
-  display: block !important;
-  font-size: 11px;
-  line-height: 14px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

src/stylesheets/Lungo.theme.default.less

@@ -10,6 +10,8 @@
 @import "mixins.less";
 @import "constants.less";
 
+@import "lungo.theme.default.font.less";
+
 
 @theme: #2A95D3;
 @theme-light:  #39ABE1;
@@ -65,26 +67,12 @@ section > article { background: #f4f5f5; }
 
 /* @group <nav> */
 header nav {
-    & a {
-        color: #fff;
-        // &:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
-    }
+    & a { color: #fff; }
 
     &.box {
-        .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)");
-        &.accept { background: rgba(0, 255, 0, 0.4); }
-        &.cancel { background: rgba(255, 0, 0, 0.4); }
-
-        &:active {
-            color: #fff;
-            &.accept { background: rgba(0, 255, 0, 0.2); }
-            &.cancel { background: rgba(255, 0, 0, 0.2); }
-            &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
-        }
-
-        &.right a {
-            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
-        }
+        &:not(.right) a { .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)"); }
+        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
+        & a:active { background: rgba(0,0,0,0.1); }
     }
 
     &.button a {
@@ -93,7 +81,6 @@ header nav {
         box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5);
         &:active { background: rgba(0,0,0,0.2); }
     }
-
 }
 
 footer nav a.current {

src/stylesheets/css/Lungo.layout.css

@@ -102,18 +102,19 @@ section[data-transition="slide"] {
   transform: translatex(100%);
   visibility: visible !important;
 }
-section[data-transition="slide"]:not(.show) > header > * {
+section[data-transition="slide"]  > header > *,
+section[data-transition="slide"]  > article > * {
   opacity: 0;
-  -webkit-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -webkit-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
@@ -129,7 +130,9 @@ section[data-transition="slide"].show {
   transform: translatex(0%);
 }
 section[data-transition="slide"]:first-child  > header > *,
-section[data-transition="slide"].show  > header > * {
+section[data-transition="slide"].show  > header > *,
+section[data-transition="slide"]:first-child  > article > *,
+section[data-transition="slide"].show  > article > * {
   opacity: 1;
 }
 section[data-transition="slide"].hide {
@@ -144,7 +147,8 @@ section[data-transition="slide"].hide {
   -o-transform: translatex(-100%);
   transform: translatex(-100%);
 }
-section[data-transition="slide"].hide  > header > * {
+section[data-transition="slide"].hide  > header > *,
+section[data-transition="slide"].hide  > article > * {
   opacity: 0;
 }
 section[data-transition="cover"] {

src/stylesheets/css/Lungo.layout.nav.css

@@ -8,35 +8,42 @@
  */
 /* DIMENSIONS */
 /* COLORS */
-nav {
+header nav,
+footer nav {
   height: auto;
   text-align: center;
 }
-nav a {
+header nav a,
+footer nav a {
   padding: 0 6px;
   min-width: 28px;
   z-index: 1000;
   float: left;
   height: 44px;
 }
-nav a .icon {
+header nav a .icon,
+footer nav a .icon {
   font-size: 1.7em;
 }
-nav a img {
+header nav a img,
+footer nav a img {
   width: 16px;
   height: 16px;
   top: -1px !important;
 }
-nav a abbr {
+header nav a abbr,
+footer nav a abbr {
   font-weight: bold;
 }
-nav a .bubble {
+header nav a .bubble,
+footer nav a .bubble {
   position: relative;
   top: -12px;
   left: -12px;
   margin-right: -20px;
 }
-nav.groupbar {
+header nav.groupbar,
+footer nav.groupbar {
   position: absolute;
   top: 44px;
   height: 30px;
@@ -45,16 +52,19 @@ nav.groupbar {
   z-index: 2;
   line-height: 30px;
 }
-nav.groupbar a {
+header nav.groupbar a,
+footer nav.groupbar a {
   padding: 0px;
   margin: 0px;
   font-weight: bold;
   height: 30px;
 }
-nav.groupbar a .icon {
+header nav.groupbar a .icon,
+footer nav.groupbar a .icon {
   font-size: 1.0em;
 }
-nav.groupbar a .bubble {
+header nav.groupbar a .bubble,
+footer nav.groupbar a .bubble {
   top: -6px;
   left: 0px;
 }