Nav links improved

examples/test/index.html

@@ -48,7 +48,7 @@
                 <span class="subtitle">@soyjavi</span>
             </div>
             <nav class="onright">
-                <a href="#profiles" data-target="aside"  class="autohide" data-icon="group"></a>
+                <a href="#profiles" data-target="aside" class="autohide" data-icon="group"></a>
             </nav>
         </header>
 
@@ -57,7 +57,7 @@
             <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Calendar</a>
         </nav>
 
-        <!--
+
         <footer class="toolbar with-labels">
             <nav>
                 <a href="#nav-1" data-target="article" data-icon="clock" data-label="Alarm"></a>
@@ -66,7 +66,7 @@
                 <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
             </nav>
         </footer>
-        -->
+
         <!--
         <footer class="toolbar">
             <nav>
@@ -79,7 +79,6 @@
         -->
 
         <article id="nav-1" class="list indented scrollable">
-
             <ul class="form">
                 <li data-loading="black big"></li>
                 <li id="loading-code" style="background-color: grey;"></li>
@@ -145,11 +144,11 @@
     <section id="test-2" class="pop">
         <header data-title="Auto title centered">
             <nav class="onleft">
-                <a href="#back" data-target="section" class="current" data-icon="left"></a>
+                <a href="#" class="cancel" data-icon="close"  data-label="CANCEL"></a>
             </nav>
 
             <nav class="onright ">
-                <a href="#" class="active" data-icon="mail" style="background: rgba(0, 255, 0, 0.4);"data-label="ENVIAR"></a>
+                <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
             </nav>
         </header>
         <article></article>

src/stylesheets/css/Lungo.theme.default.css

@@ -54,6 +54,12 @@ header nav a {
 header nav:not(.plain) a {
   box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2);
 }
+header nav:not(.plain) a.accept {
+  background: rgba(0, 255, 0, 0.4);
+}
+header nav:not(.plain) a.cancel {
+  background: rgba(255, 0, 0, 0.4);
+}
 header nav:not(.plain).onright a {
   box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2);
 }

src/stylesheets/less/Lungo.layout.nav.less

@@ -38,8 +38,6 @@ nav {
 			display: inline;
 			font-weight: bold;
 		}
-		
-		.icon ~ abbr { margin-left: 4px; }
 	}
 
 	& .bubble {
@@ -50,6 +48,10 @@ nav {
 	}
 }
 
+header, footer {
+	&:not(.toolbar) nav .icon ~ abbr { margin-left: 6px; }
+}
+
 .toolbar {
 	height:  40px;
 

src/stylesheets/less/Lungo.theme.default.less

@@ -88,7 +88,12 @@ header nav {
 	}
 	
 	&:not(.plain) {
-		& a { box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
+		& a { 
+			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); }
+		}
 		&.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }
 		
 		& a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }