Permalink
Browse files

Fixes #3898 - Header/footer mini button styles cleaned up. Footer but…

…tons 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”.
  • Loading branch information...
Wilto committed Mar 28, 2012
1 parent 9f6b2a7 commit bbe901dd0180a6fd67f7d8d4ef87c465498d99ca
@@ -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; }
@@ -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,
@@ -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"
};
@@ -34,6 +34,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
$navbtns.buttonMarkup({
corners: false,
shadow: false,
inline: true,
iconpos: iconpos
});
@@ -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 &&

2 comments on commit bbe901d

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Mar 28, 2012

Contributor

This is likely going to need a bit more work and/or cleanup before RC2.

Contributor

Wilto replied Mar 28, 2012

This is likely going to need a bit more work and/or cleanup before RC2.

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Mar 29, 2012

Contributor

Hey Mat. Looks like this change made the buttons in header toolbars really tight to the top.

Check out this page for an example http://jquerymobile.com/test/docs/pages/index.html

Contributor

scottjehl replied Mar 29, 2012

Hey Mat. Looks like this change made the buttons in header toolbars really tight to the top.

Check out this page for an example http://jquerymobile.com/test/docs/pages/index.html

Please sign in to comment.