New footer dimensions and stylesheet ".with-labels"

examples/test/kitchensink.html

@@ -59,6 +59,9 @@
             <nav class="left">
                 <a href="#features" data-target="aside" data-icon="menu"></a>
             </nav>
+            <nav class="right">
+                <a href="#" data-loading="white" data-icon="user"></a>
+            </nav>
             <div class="left">
                 <span class="title with-subtitle">Lungo Framework</span>
                 <span class="subtitle">version 2.0</span>
@@ -66,10 +69,11 @@
         </header>
 
         <footer>
-            <nav>
-                <a href="#" data-icon="info"></a>
+            <nav class="with-labelss">
+                <a href="#" class="current" data-label="Inicio" data-icon="info"></a>
+                <a href="#" data-icon="user" data-count="3"></a>
                 <a href="#" data-icon="user"></a>
-                <a href="#" data-icon="mail"></a>
+                <a href="#" data-icon="mail" data-label="Cuenta" data-count="3" ></a>
             </nav>
         </footer>
 

src/stylesheets/Lungo.layout.article.less

@@ -41,7 +41,6 @@ article {
 header:not(.extended) ~ article { top: @header-height; }
     header.extended ~ article { top: @article_with_header_extended; }
 footer:not(.with-labels) ~ article { bottom: @article-bottom; }
-    footer.with-labels ~ article { bottom: @article-bottom-with-labels; }
 
 @media handheld, only screen and (min-width: 768px) {
     article.aside { .transform(translate3d(0px, 0, 0)); }

src/stylesheets/Lungo.layout.less

@@ -68,16 +68,16 @@ header, footer  {
     position: fixed;
     left: 0;
     width: 100%;
-    height: @header-height;
     display: block;
     z-index: 1;
 
-    line-height: @header-height;
     overflow: hidden;
 }
 
 header {
     top: 0;
+    height: @header-height;
+    line-height: @header-height;
 
     & .title {
         margin-left: 4px;
@@ -114,4 +114,5 @@ header {
 
 footer {
     bottom: 0;
+    height: @footer-height;
 }

src/stylesheets/Lungo.layout.nav.less

@@ -22,19 +22,15 @@ nav {
         height:  @header_nav_height;
 
         & .icon {
-            font-size: 1.7em;
-        }
+            font-size: 1.7em; }
 
         & img {
             width: 16px;
             height: 16px;
-            top: -1px !important;
-        }
+            top: -1px !important; }
 
         & abbr {
-            font-weight: bold;
-        }
-
+            font-weight: bold; }
     }
 
     & .bubble {
@@ -70,71 +66,68 @@ nav {
     }
 }
 
-header, footer {
-    &:not(.toolbar) nav {
-        & .icon ~ abbr { margin-left: 4px; float: right; }
-        & .loading {
-            margin-top: .5em;
-            font-size: 1.6em;
-        }
-    }
-}
+header nav {
+    & .icon ~ abbr {
+        margin-left: 4px;
+        float: right; }
 
-.toolbar {
-    height:  40px;
+    & .loading {
+        margin-top: .5em;
+        font-size: 1.6em;
 
-    & nav {
-        margin: 2px;
-        display: block;
+        & + .icon { display: none; }
     }
+}
+
+footer nav {
+    margin: 1px;
+    display: block;
 
     & a {
         padding: 0;
-        height:  36px;
-    }
-
-    &.with-labels {
-        height: @with-labels-height;
-
-        & a { height:  47px; }
-        & .icon { padding-bottom: 12px; }
-    }
+        height:  42px; }
 
     & .icon {
         display: block;
         top:  0px;
-        font-size: 2.1em;
-        line-height: 34px;
-    }
+        font-size: 2.0em !important;
+        line-height: 40px; }
 
     & .bubble {
-        top:  -56px;
+        top:  -38px;
         left: 4px;
 
         & .loading {
             top: 0;
-            font-size: 1.4em;
-        }
+            font-size: 1.4em; }
     }
 
-    & abbr {
-        position: absolute;
-        top: 34px;
-        width: inherit;
-        height: 14px;
-        margin-left: 0px;
-        display: block !important;
-
-        font-size: 11px;
-        line-height: 14px;
-
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    abbr {
+        display: none;
     }
 
     & .loading {
         top: .1em;
-        font-size: 2.3em;
+        font-size: 2.3em; }
+
+     &.with-labels {
+        & .icon { line-height: 32px; }
+        & .bubble { top: -32px; }
+
+        & abbr {
+            display: block;
+            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.scaffold.less

@@ -80,16 +80,19 @@ header nav {
     &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
 }
 
-.toolbar a {
-    color: @theme-light;
+footer nav {
+    & a {
+        color: @theme-light;
 
-    &.current, &.active {
-        color: @white;
-        background: @black;
-        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
+        &.current, &.active {
+            color: @white;
+            background: @black;
+            .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
+        }
     }
 }
 
+
 .groupbar {
     background: @theme-dark;
     & a {
@@ -154,7 +157,7 @@ section.aside {
 /* @end */
 
 /* @group .list */
-.list, .list li:not(.toolbar) a { color: #2a2a2a; }
+.list, .list li a { color: #2a2a2a; }
 
 section .list {
     & ul, & li { background: #fff; }
@@ -206,22 +209,6 @@ section .list {
         background: @theme-dark;
         color: @theme-light;
     }
-
-    & .toolbar {
-        border-bottom-color: rgba(0,0,0,0.2);
-
-        & .toolbar a {
-            .box-shadow(~"1px 0px 0px #d9d9d9");
-
-            &:last-child { .box-shadow(none); }
-            &.current {
-                background: transparent;
-                color: #333;
-                text-shadow: none !important;
-            }
-
-        }
-    }
 }
 /* @end */
 

src/stylesheets/constants.less

@@ -4,12 +4,10 @@
 @header-height: 42px;
     @header_nav_height: 41px;
     @header_groupbar_height: 30px;
-
-@header_footer_height: 40px;
-@footer_toolbar_height: 48px;
+@footer-height: 44px;
     @with-labels-height: 51px;
-@article-bottom: 41px;
-    @article-bottom-with-labels: 52px;
+
+@article-bottom: 45px;
     @article_with_header_extended: 72px;
 
 @border-radius: 3px;
@@ -48,4 +46,4 @@
 @twitter:           #35cdff;
     @twitter-active:    #2bafda;
 @facebook:          #3b5998;
-    @facebook-active:   #2c4579;
+    @facebook-active:   #2c4579;

src/stylesheets/css/Lungo.layout.article.css

@@ -38,10 +38,7 @@ header.extended ~ article {
   top: 72px;
 }
 footer:not(.with-labels) ~ article {
-  bottom: 41px;
-}
-footer.with-labels ~ article {
-  bottom: 52px;
+  bottom: 45px;
 }
 @media handheld, only screen and (min-width: 768px) {
   article.aside {

src/stylesheets/css/Lungo.layout.css

@@ -126,14 +126,14 @@ footer {
   position: fixed;
   left: 0;
   width: 100%;
-  height: 42px;
   display: block;
   z-index: 1;
-  line-height: 42px;
   overflow: hidden;
 }
 header {
   top: 0;
+  height: 42px;
+  line-height: 42px;
 }
 header .title {
   margin-left: 4px;
@@ -165,4 +165,5 @@ header .subtitle {
 }
 footer {
   bottom: 0;
+  height: 44px;
 }

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

@@ -58,53 +58,56 @@ nav.groupbar a .bubble {
   top: -6px;
   left: 0px;
 }
-header:not(.toolbar) nav .icon ~ abbr,
-footer:not(.toolbar) nav .icon ~ abbr {
+header nav .icon ~ abbr {
   margin-left: 4px;
   float: right;
 }
-header:not(.toolbar) nav .loading,
-footer:not(.toolbar) nav .loading {
+header nav .loading {
   margin-top: .5em;
   font-size: 1.6em;
 }
-.toolbar {
-  height: 40px;
+header nav .loading  + .icon {
+  display: none;
 }
-.toolbar nav {
-  margin: 2px;
+footer nav {
+  margin: 1px;
   display: block;
 }
-.toolbar a {
+footer nav a {
   padding: 0;
-  height: 36px;
+  height: 42px;
 }
-.toolbar.with-labels {
-  height: 51px;
-}
-.toolbar.with-labels a {
-  height: 47px;
-}
-.toolbar.with-labels .icon {
-  padding-bottom: 12px;
-}
-.toolbar .icon {
+footer nav .icon {
   display: block;
   top: 0px;
-  font-size: 2.1em;
-  line-height: 34px;
+  font-size: 2.0em !important;
+  line-height: 40px;
 }
-.toolbar .bubble {
-  top: -56px;
+footer nav .bubble {
+  top: -38px;
   left: 4px;
 }
-.toolbar .bubble .loading {
+footer nav .bubble .loading {
   top: 0;
   font-size: 1.4em;
 }
-.toolbar abbr {
+footer nav abbr {
+  display: none;
+}
+footer nav .loading {
+  top: .1em;
+  font-size: 2.3em;
+}
+footer nav.with-labels .icon {
+  line-height: 32px;
+}
+footer nav.with-labels .bubble {
+  top: -32px;
+}
+footer nav.with-labels abbr {
+  display: block;
   position: absolute;
-  top: 34px;
+  top: 30px;
   width: inherit;
   height: 14px;
   margin-left: 0px;
@@ -115,7 +118,3 @@ footer:not(.toolbar) nav .loading {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.toolbar .loading {
-  top: .1em;
-  font-size: 2.3em;
-}

src/stylesheets/css/Lungo.theme.scaffold.css

@@ -74,11 +74,11 @@ header nav:not(.plain).right a {
 header nav.plain a:active {
   text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
 }
-.toolbar a {
+footer nav a {
   color: #cccccc;
 }
-.toolbar a.current,
-.toolbar a.active {
+footer nav a.current,
+footer nav a.active {
   color: #ffffff;
   background: #000000;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
@@ -185,7 +185,7 @@ section.aside.right {
 /* @end */
 /* @group .list */
 .list,
-.list li:not(.toolbar) a {
+.list li a {
   color: #2a2a2a;
 }
 section .list ul,
@@ -234,30 +234,6 @@ section .list li {
   background: #333333;
   color: #cccccc;
 }
-.list .toolbar {
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-}
-.list .toolbar .toolbar a {
-  -webkit-box-shadow: 1px 0px 0px #d9d9d9;
-  -moz-box-shadow: 1px 0px 0px #d9d9d9;
-  box-shadow: 1px 0px 0px #d9d9d9;
-  -webkit-box-shadow: 1px 0px 0px #d9d9d9;
-  -moz-box-shadow: 1px 0px 0px #d9d9d9;
-  box-shadow: 1px 0px 0px #d9d9d9;
-}
-.list .toolbar .toolbar a:last-child {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.list .toolbar .toolbar a.current {
-  background: transparent;
-  color: #333;
-  text-shadow: none !important;
-}
 /* @end */
 /* @group widgets */
 .splash {

src/view/Lungo.View.Resize.js

@@ -19,7 +19,7 @@ Lungo.View.Resize = (function(lng, undefined) {
      */
     var toolbars = function() {
         if (!lng.Element.toolbars)
-            lng.Element.toolbars = lng.dom('.toolbar nav, .groupbar');
+            lng.Element.toolbars = lng.dom('footer nav, .groupbar');
 
         var toolbars = lng.Element.toolbars;