Fixes jquery-archive#3898 - Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Author: Wilto

css/structure/jquery.mobile.button.css

@@ -3,9 +3,14 @@
 .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
 .ui-btn input, .ui-btn button { z-index: 2; }
 .ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
+.ui-btn-block { display: block; }
+
+.ui-header .ui-btn,
+.ui-footer .ui-btn { display: inline-block; margin: 0; }
+
 .ui-header .ui-btn-inner,
 .ui-footer .ui-btn-inner,
-.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; }
+.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.25em .5em; }
 
 .ui-header .ui-fullsize .ui-btn-inner,
 .ui-footer .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 25px; }
@@ -30,10 +35,17 @@
 .ui-btn-icon-top .ui-icon { top: 10px; }
 .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
 
-.ui-mini.ui-btn-icon-left .ui-icon { left: 8px; }
-.ui-mini.ui-btn-icon-right .ui-icon { right: 8px; }
-.ui-mini.ui-btn-icon-top .ui-icon { top: 8px; }
-.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 8px; }
+.ui-btn-icon-left .ui-icon { left: 10px; }
+.ui-btn-icon-right .ui-icon { right: 10px; }
+.ui-btn-icon-top .ui-icon { top: 10px; }
+.ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
+
+.ui-header .ui-btn-icon-left .ui-icon,
+.ui-footer .ui-btn-icon-left .ui-icon,
+.ui-mini.ui-btn-icon-left .ui-icon { left: 7px; }
+.ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+.ui-mini.ui-btn-icon-top .ui-icon { top: 7px; }
+.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 7px; }
 
 /*hiding native button,inputs */
 .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }

css/structure/jquery.mobile.core.css

@@ -48,7 +48,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 .ui-header .ui-btn-left,
 .ui-header .ui-btn-right,
 .ui-footer .ui-btn-left,
-.ui-footer .ui-btn-right { position: absolute; top: -5px; }
+.ui-footer .ui-btn-right { position: absolute; top: 3px; }
 .ui-header .ui-btn-left,
 .ui-footer .ui-btn-left { left: 5px; }
 .ui-header .ui-btn-right,

js/jquery.mobile.buttonMarkup.js

@@ -78,6 +78,12 @@ $.fn.buttonMarkup = function( options ) {
 			buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
 		}
 
+		if ( o.inline !== undefined ) {			
+			// Used to control styling in headers/footers, where buttons default to `mini` style.
+			buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline";
+		}
+		
+		
 		if ( o.icon ) {
 			o.icon = "ui-icon-" + o.icon;
 			o.iconpos = o.iconpos || "left";
@@ -155,7 +161,6 @@ $.fn.buttonMarkup.defaults = {
 	corners: true,
 	shadow: true,
 	iconshadow: true,
-	inline: false,
 	wrapperEls: "span"
 };
 

js/jquery.mobile.navbar.js

@@ -34,6 +34,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
 		$navbtns.buttonMarkup({
 			corners:	false,
 			shadow:		false,
+			inline:     true,
 			iconpos:	iconpos
 		});
 

js/jquery.mobile.page.sections.js

@@ -46,14 +46,16 @@ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagec
 				// Add ARIA role
 				.attr( "role", role === "header" ? "banner" : "contentinfo" );
 
-			// Right,left buttons
-			$headeranchors	= $this.children( "a" );
-			leftbtn	= $headeranchors.hasClass( "ui-btn-left" );
-			rightbtn = $headeranchors.hasClass( "ui-btn-right" );
+			if( role === "header") {
+				// Right,left buttons
+				$headeranchors	= $this.children( "a" );
+				leftbtn	= $headeranchors.hasClass( "ui-btn-left" );
+				rightbtn = $headeranchors.hasClass( "ui-btn-right" );
 
-			leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
+				leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
 
-			rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+				rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+			}
 
 			// Auto-add back btn on pages beyond first view
 			if ( o.addBackBtn &&