Home Explore Help
Sign In
pwa
/
Lungo.js
mirror of https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

New header navigation

@soyjavi 14 years ago
parent
dcf1ebe6f4
commit
2fe40b020f
11 changed files with 100 additions and 81 deletions
Unified View Show Diff Stats
  1. 28 12
      examples/test/index.html
  2. 1 1
      src/stylesheets/css/Lungo.base.css
  3. 1 1
      src/stylesheets/css/Lungo.layout.css
  4. 1 1
      src/stylesheets/css/Lungo.layout.nav.css
  5. 20 7
      src/stylesheets/css/Lungo.theme.default.css
  6. 1 1
      src/stylesheets/css/Lungo.widgets.button.css
  7. 0 1
      src/stylesheets/less/Lungo.base.less
  8. 7 24
      src/stylesheets/less/Lungo.layout.less
  9. 8 13
      src/stylesheets/less/Lungo.layout.nav.less
  10. 23 5
      src/stylesheets/less/Lungo.theme.default.less
  11. 10 15
      src/stylesheets/less/Lungo.widgets.button.less

+ 28 - 12
examples/test/index.html
View File 

@@ -37,16 +37,21 @@
 
 </head>
 
 </head>
 
 
 
 <body class="app">
 
 <body class="app">
 
+
 
+
 
     <section id="test-1" class="pop">
 
     <section id="test-1" class="pop">
 
-        <header data-title="Test-1" class="extended">
 
+        <header class="extended">
 
+            <nav class="onleft">
 
+                <a href="#kitchen-sink-scroll" class="active" data-target="aside" data-icon="home"></a>
 
+            </nav>
 
             <div class="onleft">
 
             <div class="onleft">
 
-                <a href="#kitchen-sink-scroll" class="button default onleft" data-target="aside" data-icon="items"></a>
 
-                <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items">Prueba</a>
 
-                <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside">Prueba</a>
 
+                <span class="title with-subtitle">Javi Jiménez</span>
 
+                <span class="subtitle ">@souhavi</span>
 
             </div>
 
             </div>
 
             <nav class="onright">
 
             <nav class="onright">
 
-                <a href="#" class="active" data-icon="star"></a>
 
-                <a href="#profiles" class="active"  data-target="aside" data-icon="plus">&nbsp;Add</a>
 
+                <a href="#profiles" class="active" data-target="aside" data-icon="plus"></a>
 
+
 
+                <a href="#" class="active" data-icon="mail" style="background: rgba(0, 255, 0, 0.4);"data-label="ENVIAR"></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
@@ -126,9 +131,9 @@
 
 
 
         <article id="nav-2" class="list indented">
 
         <article id="nav-2" class="list indented">
 
             <div>
 
             <div>
 
-                <a href="#test-2" data-target="section" class="button big">Test 2</a>
 
-                <a href="#test-2"  class="button big red ">Test 2</a>
 
-                <a href="#test-2" class="button big facebook">Test 2</a>
 
+                <a href="#test-2" data-target="section" class="button big" data-icon="check">Test 2</a>
 
+                <a href="#test-2"  class="button big red " data-icon="check">Test 2</a>
 
+                <a href="#test-2" class="button big green" data-icon="check">Test 2</a>
 
             </div>
 
             </div>
 
         </article>
 
         </article>
 
 
 
@@ -137,10 +142,21 @@
 
         <article id="nav-4"></article>
 
         <article id="nav-4"></article>
 
     </section>
 
     </section>
 
 
 
+
 
+
 
+
 
     <section id="test-2" class="pop">
 
     <section id="test-2" class="pop">
 
-        <header data-title="Test-2" data-back="home"></header>
 
-        <article>
 
-        </article>
 
+        <header data-title="Auto title centered">
 
+            <nav class="onleft">
 
+                <a href="#back" data-target="section" class="current" data-icon="left"></a>
 
+            </nav>
 
+
 
+            <nav class="onright plain">
 
+                <a href="#" class="" data-icon="items" data-label="Text"></a>
 
+                <a href="#" class="" data-icon="remove"></a>
 
+            </nav>
 
+        </header>
 
+        <article></article>
 
     </section>
 
     </section>
 
 
 
     <!-- Third parties dependencies -->
 
     <!-- Third parties dependencies -->

File diff suppressed because it is too large
+ 1 - 1
src/stylesheets/css/Lungo.base.css


File diff suppressed because it is too large
+ 1 - 1
src/stylesheets/css/Lungo.layout.css


File diff suppressed because it is too large
+ 1 - 1
src/stylesheets/css/Lungo.layout.nav.css


+ 20 - 7
src/stylesheets/css/Lungo.theme.default.css
View File 

@@ -16,8 +16,9 @@
 
 }
 
 }
 
 /* @group <header> & <footer> & <article> */
 
 /* @group <header> & <footer> & <article> */
 
 header {
 
 header {
 
-  border-top-left-radius: 5px;
 
-  border-top-right-radius: 5px;
 
+  /*border-top-left-radius: 5px;
 
+	border-top-right-radius: 5px;*/
 
+
 
   border-bottom: 1px solid #1a2838;
 
   border-bottom: 1px solid #1a2838;
 
   background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
 
   background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
 
   box-shadow: inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4;
 
   box-shadow: inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4;
 
@@ -47,12 +48,24 @@ article .title {
 
 }
 
 }
 
 /* @end */
 
 /* @end */
 
 /* @group <nav> */
 
 /* @group <nav> */
 
-nav a {
 
-  color: rgba(255, 255, 255, 0.5);
 
-}
 
-nav a.current,
 
-nav a.active {
 
+header nav a {
 
   color: #ffffff;
 
   color: #ffffff;
 
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
 
+}
 
+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: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);
 
+}
 
+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);
 
+}
 
+header nav:not(.plain).onright 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);
 
+}
 
+header nav.plain a:active {
 
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
 
 }
 
 }
 
 .toolbar a {
 
 .toolbar a {
 
   color: #cdd9e3;
 
   color: #cdd9e3;

File diff suppressed because it is too large
+ 1 - 1
src/stylesheets/css/Lungo.widgets.button.css


+ 0 - 1
src/stylesheets/less/Lungo.base.less
View File 

@@ -83,7 +83,6 @@ video {
 
 }
 
 }
 
 
 
 a {
 
 a {
 
-	color: #fff;
 
 	text-decoration: none;	
 	text-decoration: none;	
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 
 }
 
 }

+ 7 - 24
src/stylesheets/less/Lungo.layout.less
View File 

@@ -83,14 +83,14 @@ header, footer  {
 
 
 
 header  {
 
 header  {
 
 	top: 0px;
 
 	top: 0px;
 
-	& .onleft { margin-left: 4px !important;}
 
-	& .onright {margin-right: 4px !important;}
 
+	/*& .onleft { margin-left: 4px !important;}
 
+	& .onright {margin-right: 4px !important;}*/
 
 }
 
 }
 
 
 
 footer  { bottom: 0px; }
 
 footer  { bottom: 0px; }
 
 
 
 header .title, footer .title  {
 
 header .title, footer .title  {
 
-	margin: 0 4px;	
+	//margin: 0 4px;	
 	z-index: -1;
 
 	z-index: -1;
 
 	font-size: 15px;
 
 	font-size: 15px;
 
 	font-weight: bold;
 
 	font-weight: bold;
 
@@ -103,11 +103,10 @@ header .title, footer .title  {
 
 		text-align: center;
 
 		text-align: center;
 
 		display: inline-block;
 
 		display: inline-block;
 
 	}
 
 	}
 
-}
 
-
 
-.with-subtitle {
 
-	line-height: 20px;
 
-	padding-top: 4px;
 
+	&.with-subtitle {
 
+		line-height: 20px;
 
+		padding-top: 4px;
 
+	}
 
 }
 
 }
 
 
 
 .subtitle {
 
 .subtitle {
 
@@ -115,20 +114,4 @@ header .title, footer .title  {
 
 	font-size: 11px;
 
 	font-size: 11px;
 
 	line-height: 11px;
 
 	line-height: 11px;
 
 }
 
 }
 
-
 
-/*.title > .subtitle {
 
-	//line-height: 21px;
 
-	font-weight: normal;
 
-	font-size: 12px;
 
-	height: 12px;
 
-	line-height: 12px;
 
-}*/
 
-
 
-section header a.button, section footer a.button  {
 
-	margin: 5px 1px 0px;
 
-	/*
 
-	&:first-of-type { margin-left: 4px; }	
-	&:last-child { margin-right: 4px; }
 
-	*/
 
-}
 
 /* @end */
 
 /* @end */

+ 8 - 13
src/stylesheets/less/Lungo.layout.nav.less
View File 

@@ -10,16 +10,13 @@
 
 @import "constants.less";
 
 @import "constants.less";
 
 @import "mixins.less";
 
 @import "mixins.less";
 
 
 
-@header_footer_height: 40px;
 
-	@header_extended_height: 74px;
 
-
 
-/* @group <nav> */
 
 nav {
 
 nav {
 
-	height: inherit;
 
+	height: auto;
 
 	text-align: center;
 
 	text-align: center;
 
 
 
 	& a {
 
 	& a {
 
 		padding: 0 6px;
 
 		padding: 0 6px;
 
+		min-width: 28px;
 
 		z-index: 1000;
 
 		z-index: 1000;
 
 		float: left;
 
 		float: left;
 
 
 
@@ -38,11 +35,11 @@ nav {
 
 
 
 		& abbr {
 
 		& abbr {
 
     		position: relative;
 
     		position: relative;
 
-    		margin-left: 2px;
 
-			display: none;
 
+			display: inline;
 
+			font-weight: bold;
 
 		}
 
 		}
 
-
 
-		&.current abbr, &.active abbr { display: inline; }
 
+		
+		.icon ~ abbr { margin-left: 4px; }
 
 	}
 
 	}
 
 
 
 	& .bubble {
 
 	& .bubble {
 
@@ -65,8 +62,7 @@ nav {
 
 		padding: 0;
 
 		padding: 0;
 
 		height:  36px;
 
 		height:  36px;
 
 	}
 
 	}
 
-
 
-
 
+	
 	&.with-labels {
 
 	&.with-labels {
 
 		height: @with-labels-height;
 
 		height: @with-labels-height;
 
 
 
@@ -115,5 +111,4 @@ nav {
 
     z-index: 2;
 
     z-index: 2;
 
 
 
     & a { padding: 0px; font-weight: bold;}
 
     & a { padding: 0px; font-weight: bold;}
 
-}
 
-/* @end */
 
+}

+ 23 - 5
src/stylesheets/less/Lungo.theme.default.less
View File 

@@ -36,8 +36,8 @@
 
 
 
 /* @group <header> & <footer> & <article> */
 
 /* @group <header> & <footer> & <article> */
 
 header {
 
 header {
 
-	border-top-left-radius: 5px;
 
-	border-top-right-radius: 5px;
 
+	/*border-top-left-radius: 5px;
 
+	border-top-right-radius: 5px;*/
 
 	border-bottom: 1px solid #1a2838;
 
 	border-bottom: 1px solid #1a2838;
 
 	
 	
 	background: @background-main;
 
 	background: @background-main;
 
@@ -77,9 +77,27 @@ article {
 
 /* @end */
 
 /* @end */
 
 
 
 /* @group <nav> */
 
 /* @group <nav> */
 
-nav a {
 
-	color: rgba(255,255,255,0.5);
 
-	&.current, &.active {  color: @white; }
 
+@nav-a-active: 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);
 
+header nav {
 
+	
+	& a {
 
+		color: @white;
 
+		text-shadow: 0 1px 0 rgba(0,0,0,0.3);
 
+	}
 
+	
+	&:not(.plain) {
 
+		& a {
 
+			box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
 
+			&:active { box-shadow: @nav-a-active; }
 
+		}
 
+			
+		&.onright a {
 
+			box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 
+			&:active { box-shadow: @nav-a-active }
 
+		}
 
+	}
 
+		
+	&.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
 
 }
 
 }
 
 
 
 .toolbar a {
 
 .toolbar a {

+ 10 - 15
src/stylesheets/less/Lungo.widgets.button.less
View File 

@@ -12,18 +12,19 @@
 
 
 
 a.button {
 
 a.button {
 
 	display: inline-block;
 
 	display: inline-block;
 
-	height: 32px;
 
-	//min-width: 32px;
 
-	padding: 0 9px 0 8px;
 
+	height: 40px;
 
+	padding: 0 8px;
 
 	color: #fff !important;
 
 	color: #fff !important;
 
-	outline: none;
 
 
 
 	background: #5a5a5a;
 
 	background: #5a5a5a;
 
-
 
-	.user-select(none);
 
-	line-height: 31px;
 
+	
+	font-size: 16px;
 
 	text-align: center;
 
 	text-align: center;
 
 	text-decoration: none;
 
 	text-decoration: none;
 
+	line-height: 42px;
 
+	
+	outline: none;
 
+	.user-select(none);
 
 
 
 	&:active, &.active {
 
 	&:active, &.active {
 
 		background: #4b4b4b;
 
 		background: #4b4b4b;
 
@@ -49,21 +50,15 @@ a.button {
 
 
 
 	&.big {
 
 	&.big {
 
 		width: 100%;
 
 		width: 100%;
 
-		height: 40px;
 
 		padding: 0px;
 
 		padding: 0px;
 
 		margin-bottom: 4px;
 
 		margin-bottom: 4px;
 
 
 
-		font-size: 16px;
 
-		line-height: 42px;
 
 		& .icon {
 
 		& .icon {
 
-			margin-right: 4px;
 
+			margin: 8px -18px 0 12px;
 
+			float: left;
 
 			font-size: 24px;
 
 			font-size: 24px;
 
 			height: 18px;
 
 			height: 18px;
 
 			width: 18px;
 
 			width: 18px;
 
 		}
 
 		}
 
-
 
-		& img {
 
-			/* TODO */
 
-		}
 
 	}
 
 	}
 
 }
 
 }