Permalink
Browse files

Merge pull request #4498 from uGoMobi/buttons_form

Standardize buttons and form
  • Loading branch information...
2 parents b11416c + c682b42 commit ea5e7f1638c362d385b9b296bf15e87163822fea @jaspermdegroot jaspermdegroot committed Jun 8, 2012
@@ -1,16 +1,16 @@
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
-.ui-mini { margin: .25em 5px; }
-.ui-btn-inner { padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 0; padding: 0; }
+.ui-btn.ui-mini { margin-top: .25em; margin-bottom: .25em; }
+.ui-btn-left, .ui-btn-right, .ui-input-clear, .ui-btn-inline,
+.ui-grid-a .ui-btn, .ui-grid-b .ui-btn, .ui-grid-c .ui-btn, .ui-grid-d .ui-btn, .ui-grid-e .ui-btn { margin-right: 5px; margin-left: 5px; }
+.ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 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-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
.ui-btn-block { display: block; }
-.ui-header .ui-btn,
-.ui-footer .ui-btn { display: inline-block; margin: 0; }
+.ui-header > .ui-btn,
+.ui-footer > .ui-btn { display: inline-block; margin: 0; }
.ui-header .ui-btn-block,
-.ui-footer .ui-btn-block { display: block; margin: .25em 5px; }
-.ui-header .ui-btn-block.ui-fullsize,
-.ui-footer .ui-btn-block.ui-fullsize { margin: .5em 5px; }
+.ui-footer .ui-btn-block { display: block; }
.ui-header .ui-btn-inner,
.ui-footer .ui-btn-inner,
@@ -33,16 +33,20 @@
.ui-header .ui-btn-icon-left .ui-btn-inner,
.ui-footer .ui-btn-icon-left .ui-btn-inner,
+.ui-mini.ui-btn-icon-left .ui-btn-inner,
.ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
.ui-footer .ui-btn-icon-right .ui-btn-inner,
+.ui-mini.ui-btn-icon-right .ui-btn-inner,
.ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; }
.ui-header .ui-btn-icon-top .ui-btn-inner,
-.ui-footer .ui-btn-icon-top .ui-btn-inner,
-.ui-mini .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
+.ui-footer .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
+.ui-mini.ui-btn-icon-top .ui-btn-inner,
+.ui-mini .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
.ui-header .ui-btn-icon-bottom .ui-btn-inner,
-.ui-footer .ui-btn-icon-bottom .ui-btn-inner,
-.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
+.ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
+.ui-mini.ui-btn-icon-bottom .ui-btn-inner,
+.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
/*btn icon positioning*/
.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
@@ -72,3 +76,11 @@
/*hiding native button,inputs */
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
+
+.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; }
+@media all and (min-width: 450px){
+ .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; }
+}
@@ -1,30 +1,39 @@
-.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: 0em 0 .5em; zoom: 1; }
+.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0; zoom: 1; }
+.ui-controlgroup.ui-mini, fieldset.ui-controlgroup.ui-mini { margin: .25em 0; }
+.ui-field-contain .ui-controlgroup, .ui-field-contain fieldset.ui-controlgroup { margin: 0; }
+.ui-bar .ui-controlgroup { margin: 0 5px; }
-.ui-bar .ui-controlgroup { margin: 0 .3em; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
.ui-controlgroup-controls { display: block; width: 100%;}
.ui-controlgroup li { list-style: none; }
.ui-controlgroup-vertical .ui-btn,
-.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
-.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
-.ui-controlgroup-horizontal { padding: 0; }
-.ui-controlgroup-horizontal .ui-btn-inner { text-align:center; }
-.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -6px 0 0; }
+.ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { width: 18px; height: 20px; padding: .6em 20px .6em 20px }
+.ui-controlgroup.ui-mini .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
+
+.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
+.ui-controlgroup-horizontal .ui-controlgroup-controls:after { content: ""; display: table; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls:after { clear: both; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls { zoom: 1; }
+.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; height: 20px; }
+.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; }
+.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select,
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; clear: none; margin: 0 -1px 0 0; }
+.ui-controlgroup-horizontal .ui-select .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
.ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
-/* conflicts with listview..
-.ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; }
-.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
-*/
@media all and (min-width: 450px){
.ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; }
- .ui-field-contain .ui-controlgroup .ui-select { width: 100%; }
+ .ui-field-contain .ui-controlgroup-controls { width: 78%; display: inline-block; }
+ .ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
.ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
+ .ui-hide-label .ui-controlgroup-controls { width: 100%; }
}
@@ -68,5 +68,5 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-nojs { position: absolute; left: -9999px; }
/* accessible content hiding */
-.ui-hide-label 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-submit, .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); }
@@ -1,5 +1,7 @@
-.ui-checkbox, .ui-radio { position: relative; clear: both; margin: .2em 0 .5em; z-index: 1; }
-.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }
+.ui-checkbox, .ui-radio { position: relative; clear: both; margin: 0; z-index: 1; }
+.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: .5em 0; text-align: left; z-index: 2; }
+.ui-checkbox .ui-btn.ui-mini, .ui-radio .ui-btn.ui-mini { margin: .25em 0; }
+.ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
.ui-checkbox .ui-mini.ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-mini.ui-btn-icon-left .ui-btn-inner { padding-left: 36px; }
@@ -1,5 +1,5 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
-.ui-field-contain:first-child { border-top-width: 0; }
+.ui-field-contain:last-child { border-bottom-width: 0; }
.ui-header .ui-field-contain-left,
.ui-header .ui-field-contain-right {
position: absolute;
@@ -13,6 +13,8 @@
right: 1em;
}
+.ui-field-contain, .ui-mobile fieldset.ui-field-contain { width: 100%; } /* This prevents horizontal scrollbar in IE7 */
+
@media all and (min-width: 450px){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}
@@ -1,18 +1,24 @@
.ui-select { display: block; position: relative; }
.ui-select select { position: absolute; left: -9999px; top: -9999px; }
-.ui-select .ui-btn { overflow: hidden; opacity: 1; margin: 0; }
+.ui-select .ui-btn { overflow: hidden; opacity: 1; }
+.ui-field-contain .ui-select .ui-btn { margin: 0; }
/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: none; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; }
.ui-select .ui-disabled { opacity: .3; }
@-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }}
-.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; }
-
-.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
-.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
-.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
-
+.ui-select .ui-btn.ui-select-nativeonly { border-radius: 0; }
+.ui-select .ui-btn.ui-select-nativeonly select { opacity: 1; text-indent: 0; }
+
+.ui-select .ui-btn-icon-right .ui-btn-inner, .ui-select .ui-li-has-count .ui-btn-inner { padding-right: 45px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 32px; }
+.ui-select .ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 80px; }
+.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 67px; }
+.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+.ui-select .ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 45px; }
+.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 32px; }
/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
@@ -21,7 +27,6 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden !important;
/* This !important is required for iPad Safari specifically. See https://github.com/jquery/jquery-mobile/issues/2647 */ }
.ui-select .ui-btn-text { text-overflow: ellipsis; }
-.ui-select .ui-btn-text span { display: inline-block; }
.ui-selectmenu { padding: 6px; min-width: 160px; }
.ui-selectmenu .ui-listview { margin: 0; }
@@ -35,7 +40,8 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
@media all and (min-width: 450px){
.ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-select { width: 60%; display: inline-block; }
+ .ui-field-contain .ui-select { width: 78%; display: inline-block; }
+ .ui-hide-label .ui-select { width: 100%; }
}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
@@ -1,6 +1,9 @@
label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
input.ui-slider-input,
-.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
+.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; outline: 0; }
+.ui-field-contain input.ui-slider-input { margin: 0; }
+/* To do: Exclude ui-slider-input from textinput widget initSelector. The class ui-input-text is added to the slider input and label. When this is fixed, the rule below can be deleted. */
+input.ui-slider-input, .ui-field-contain input.ui-slider-input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
div.ui-slider-mini { height: 12px; margin-left: 10px; }
@@ -1,10 +1,13 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
-input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; outline: 0; }
-.ui-header input.ui-input-text,
-.ui-footer input.ui-input-text { margin-left: 1.25%; padding: .4em 1%; width: 95.5% } /* Note that padding left/right on text inputs is factored into how the element is displayed in Firefox, but does not actually pad the text inside it. */
+input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; display: block; width: 100%; outline: 0; }
+input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 0; }
+.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text { margin: 0; }
+input.ui-input-text, textarea.ui-input-text, .ui-input-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
-.ui-input-search { padding: 0 30px; background-image: none; position: relative; }
+.ui-input-search { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
+.ui-input-search.ui-mini { margin: .25em 0; }
+.ui-field-contain .ui-input-search { margin: 0; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
@@ -14,15 +17,13 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }
-/* orientation adjustments - incomplete!*/
@media all and (min-width: 450px){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
- .ui-field-contain .ui-input-search { width: 60%; display: inline-block; }
- .ui-field-contain .ui-input-search { width: 50%; }
+ .ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
- .ui-hide-label .ui-input-search { padding: .4em; width: 97%; }
+ .ui-hide-label .ui-input-search { width: 100%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}
Oops, something went wrong.

0 comments on commit ea5e7f1

Please sign in to comment.