Skip to content
This repository
Browse code

Mini styling for navbar with adjusted padding top and bottom. Set rig…

…ht border on last button when not in toolbar.
  • Loading branch information...
commit 36168c6ec80b5c6bd070ec0936cf0f1d18ffc7bd 1 parent de4c577
Jasper de Groot authored June 12, 2012
18  css/structure/jquery.mobile.navbar.css
@@ -3,6 +3,17 @@
3 3
 .ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; }
4 4
 .ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; }
5 5
 
  6
+/* add border if not in header/footer (full width) */
  7
+.ui-navbar li:last-child .ui-btn,
  8
+.ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; }
  9
+.ui-header .ui-navbar li:last-child .ui-btn,
  10
+.ui-footer .ui-navbar li:last-child .ui-btn,
  11
+.ui-header .ui-navbar .ui-grid-duo .ui-block-b .ui-btn,
  12
+.ui-footer .ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: -1px; border-right-width: 0; }
  13
+.ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; }
  14
+.ui-header .ui-navbar li .ui-btn,
  15
+.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
  16
+
6 17
 /* fixing gaps caused by subpixel problem */
7 18
 .ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn,
8 19
 .ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; }
@@ -15,7 +26,6 @@
15 26
 .ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon,
16 27
 .ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 7px; }
17 28
 
18  
-.ui-header .ui-navbar li .ui-btn,
19  
-.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
20  
-.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
21  
-.ui-navbar-noicons li .ui-btn .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; }
  29
+.ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em }
  30
+.ui-navbar li .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
  31
+.ui-navbar li .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
1  js/jquery.mobile.grid.js
@@ -30,6 +30,7 @@ $.fn.grid = function( options ) {
30 30
 					}
31 31
 				} else {
32 32
 					grid = "a";
  33
+					$this.addClass( "ui-grid-duo" );
33 34
 				}
34 35
 			}
35 36
 			iterator = gridCols[grid];
6  js/jquery.mobile.navbar.js
@@ -24,16 +24,12 @@ $.widget( "mobile.navbar", $.mobile.widget, {
24 24
 			iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
25 25
 									this.options.iconpos : undefined;
26 26
 
27  
-		$navbar.addClass( "ui-navbar" )
  27
+		$navbar.addClass( "ui-navbar ui-mini" )
28 28
 			.attr( "role","navigation" )
29 29
 			.find( "ul" )
30 30
 			.jqmEnhanceable()
31 31
 			.grid({ grid: this.options.grid });
32 32
 
33  
-		if ( !iconpos ) {
34  
-			$navbar.addClass( "ui-navbar-noicons" );
35  
-		}
36  
-
37 33
 		$navbtns.buttonMarkup({
38 34
 			corners:	false,
39 35
 			shadow:		false,

0 notes on commit 36168c6

Please sign in to comment.
Something went wrong with that request. Please try again.