updated css to use min-width classes in place of media queries

This commit is contained in:
scottjehl 2010-10-22 14:41:12 -04:00
parent 38eb8aecc7
commit f806fc07d7
5 changed files with 11 additions and 19 deletions

View file

@ -23,6 +23,6 @@ div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; }
@media screen and (min-width: 480px){
.min-width-480 {
div.hasDatepicker { width: 63%; display: inline-block; margin: 0; }
}

View file

@ -23,7 +23,5 @@
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
*/
@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; }
}
.min-width-480 .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.min-width-480 .ui-controlgroup-controls { width: 60%; display: inline-block; }

View file

@ -23,7 +23,5 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
/*used in listbox - to be removed/replaced with page-style hiding*/
.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; }
}
.min-width-480 label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
.min-width-480 .ui-select { width: 60%; display: inline-block; }

View file

@ -9,10 +9,8 @@ select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 15px; top: 4px; width: 66%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
@media screen and (min-width: 480px){
label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
div.ui-slider { width: 45%; }
}
.min-width-480 label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
.min-width-480 div.ui-slider { width: 45%; }
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }

View file

@ -12,9 +12,7 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
.ui-input-search .ui-input-clear-hidden { display: none; }
/* orientation adjustments - incomplete!*/
@media screen and (min-width: 480px){
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, .ui-input-search { width: 60%; display: inline-block; }
.ui-input-search { width: 50%; }
}
.min-width-480 label.ui-input-text { vertical-align: top; }
.min-width-480 label.ui-input-text, label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
.min-width-480 input.ui-input-text, textarea.ui-input-text, .ui-input-search { width: 60%; display: inline-block; }
.min-width-480 .ui-input-search { width: 50%; }