Permalink
Browse files

Button: Class ui-input-btn for all input buttons instead of ui-submit…

…. Adjusted rules for buttons in field containers.
  • Loading branch information...
jaspermdegroot committed May 4, 2013
1 parent bb2eda5 commit 2c2be730b41c888e3e17ca1a1cdbc0ab26bd3ebd
Showing with 40 additions and 13 deletions.
  1. +35 −7 css/structure/jquery.mobile.button.css
  2. +1 −1 css/structure/jquery.mobile.core.css
  3. +4 −5 js/widgets/forms/button.js
@@ -1,3 +1,4 @@
+/* TODO: This file only contains CSS for the button widget and should be renamed to jquery.mobile.forms.button.css */
button.ui-btn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -21,7 +22,6 @@ button.ui-btn-icon-notext {
margin-right: 0;
margin-left: 0;
}
-
/* Hide the native input element */
.ui-btn > input[type="button"],
.ui-btn > input[type="submit"],
@@ -52,11 +52,39 @@ button.ui-btn-icon-notext {
.ui-state-disabled input[type="reset"] {
display: none;
}
-
-.ui-field-contain .ui-btn.ui-submit { margin: 0; }
-label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
+label.ui-input-btn {
+ font-size: 16px;
+ line-height: 1.4;
+ font-weight: normal;
+ margin: 0 0 .3em;
+ display: block;
+}
+.ui-field-contain > .ui-input-btn,
+.ui-field-contain > button.ui-btn {
+ margin: 0;
+}
@media (min-width: 28em) {
- .ui-field-contain label.ui-submit { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-btn.ui-submit { width: 78%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
- .ui-hide-label .ui-btn.ui-submit { width: auto; display: block; }
+ .ui-field-contain label.ui-input-btn {
+ vertical-align: top;
+ display: inline-block;
+ width: 20%;
+ margin: 0 2% 0 0;
+ }
+ .ui-field-contain > .ui-input-btn,
+ .ui-field-contain > button.ui-btn {
+ width: 78%;
+ display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ .ui-hide-label > .ui-input-btn {
+ width: auto;
+ display: block;
+ }
+ .ui-hide-label > button.ui-btn {
+ width: 100%;
+ display: block;
+ }
}
@@ -232,5 +232,5 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-nojs { position: absolute; left: -9999px; }
/* accessible content hiding */
-.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
+.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-input-btn, .ui-hide-label .ui-controlgroup-label,
.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
@@ -28,6 +28,8 @@ $.widget( "mobile.button", $.mobile.widget, {
classes = "ui-btn";
if ( isInput ) {
+ classes += " ui-input-btn";
+
// TODO: When we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
/* if ( $el[0].className.length ) {
classes = $el[0].className;
@@ -40,11 +42,6 @@ $.widget( "mobile.button", $.mobile.widget, {
classes += " ui-btn-right";
}
- if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
- classes += " ui-submit";
- }
- $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
-
this.button = $( "<div></div>" )
[ "text" ]( $el.val() )
.insertBefore( $el )
@@ -66,6 +63,8 @@ $.widget( "mobile.button", $.mobile.widget, {
this.button = $el.addClass( classes );
}
+ $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-input-btn" );
+
$.extend( this, {
isInput: isInput,
buttonClasses: classes,

0 comments on commit 2c2be73

Please sign in to comment.