Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-17 21:01:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adjustments to spacing, layout management, consistency across elements

Browse source
This commit is contained in:
scottjehl 2010-10-05 17:42:11 -04:00
parent e03d33ac9e
commit adbdf7abc6
5 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css/jQuery.mobile.controlgroup.css
View file

@ -5,14 +5,21 @@
*/
.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
.ui-bar .ui-controlgroup { margin: 0 .3em; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
.ui-controlgroup-controls { display: block; width: 95%;}
.ui-controlgroup li { list-style: none; }
.ui-controlgroup-vertical .ui-btn,
.ui-controlgroup-vertical div.ui-checkbox, .ui-controlgroup-vertical div.ui-radio { margin: 0; border-bottom-width: 0; }
.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
.ui-controlgroup-horizontal { display: inline-block; padding: 0; }
.ui-controlgroup-horizontal { padding: 0; }
.ui-controlgroup-horizontal .ui-btn,
.ui-controlgroup-horizontal div.ui-checkbox, .ui-controlgroup-horizontal div.ui-radio { margin: 0 -5px 0 0; display: inline-block; }
.ui-controlgroup-horizontal div.ui-checkbox .ui-btn, .ui-controlgroup-horizontal div.ui-radio .ui-btn,
.ui-controlgroup-horizontal div.ui-checkbox:last-child, .ui-controlgroup-horizontal div.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; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
@media screen and (min-width: 480px){
.ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-controlgroup-controls { width: 60%; display: inline-block; }
}

2
css/jQuery.mobile.forms.fieldcontain.css
View file

@ -3,7 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-field-contain { background: none; padding: .5em 0; margin: 0; border-left-width: 0; border-right-width: 0; border-bottom-width: 0; }
.ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-left-width: 0; border-right-width: 0; border-bottom-width: 0; }
.ui-field-contain:first-child { border-top-width: 0; }
@media screen and (max-width: 480px){
.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }

10
css/jQuery.mobile.forms.select.css
View file

@ -3,11 +3,12 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-select { display: block; }
.ui-select select { position: absolute; left: -99999px; }
.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
/*listbox*/
.ui-listbox { position: relative; margin: 8px; padding: 0; z-index: 100; }
@ -20,4 +21,9 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
.ui-listbox .ui-listbox-option { margin: 0; text-align: left; }
/*used in listbox - to be removed/replaced with page-style hiding*/
.ui-helper-hidden,.ui-mobile .ui-content-hidden { display: none; }
.ui-helper-hidden,.ui-mobile .ui-content-hidden { display: none; }
@media screen and (min-width: 480px){
label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-select { width: 60%; display: inline-block; }
}

6
css/jQuery.mobile.forms.slider.css
View file

@ -4,9 +4,9 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-slider { display: block; }
input.ui-slider-input, select.ui-slider-select { display: inline-block; width: 40px; }
select.ui-slider-select { width: 60px; /*commented out for demo purposes... display: none; */ }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
input.ui-slider-input { display: inline-block; width: 40px; }
select.ui-slider-select { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 0; top: 4px; width: 66%; }
div.ui-slider-select { height: 36px; width: 50%; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 49%; }
div.ui-slider-labels { overflow: hidden; }

8
css/jQuery.mobile.forms.textinput.css
View file

@ -3,7 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-input-text, .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
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 { padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; }
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 { margin: 5px; padding: 0 0 0 30px; background-position: 6px 50%; background-repeat: no-repeat; }
@ -11,7 +11,7 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
/* orientation adjustments - incomplete!*/
@media screen and (min-width: 480px){
label.ui-input-text, .ui-controlgroup-label { vertical-align: top; }
label.ui-input-text, label.ui-select, .ui-ui-controlgroup-label { display: inline-block; width: 20%; margin: 0 2% 0 0; }
input.ui-input-text, textarea.ui-input-text, a.ui-select { width: 60%; display: inline-block; }
label.ui-input-text { vertical-align: top; }
label.ui-input-text, label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
input.ui-input-text, textarea.ui-input-text { width: 60%; display: inline-block; }
}