From f806fc07d7f07ecb9cf42c7dcc84bbda9b7b94bb Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 22 Oct 2010 14:41:12 -0400 Subject: [PATCH] updated css to use min-width classes in place of media queries --- experiments/ui-datepicker/jquery.ui.datepicker.css | 2 +- themes/default/jquery.mobile.controlgroup.css | 6 ++---- themes/default/jquery.mobile.forms.select.css | 6 ++---- themes/default/jquery.mobile.forms.slider.css | 6 ++---- themes/default/jquery.mobile.forms.textinput.css | 10 ++++------ 5 files changed, 11 insertions(+), 19 deletions(-) diff --git a/experiments/ui-datepicker/jquery.ui.datepicker.css b/experiments/ui-datepicker/jquery.ui.datepicker.css index 4dceb575..fd07f3eb 100755 --- a/experiments/ui-datepicker/jquery.ui.datepicker.css +++ b/experiments/ui-datepicker/jquery.ui.datepicker.css @@ -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; } } \ No newline at end of file diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css index 63391c3e..bbe54ae2 100644 --- a/themes/default/jquery.mobile.controlgroup.css +++ b/themes/default/jquery.mobile.controlgroup.css @@ -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; } -} \ No newline at end of file +.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; } \ No newline at end of file diff --git a/themes/default/jquery.mobile.forms.select.css b/themes/default/jquery.mobile.forms.select.css index 1b5a4420..427c5598 100644 --- a/themes/default/jquery.mobile.forms.select.css +++ b/themes/default/jquery.mobile.forms.select.css @@ -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; } -} \ No newline at end of file +.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; } \ No newline at end of file diff --git a/themes/default/jquery.mobile.forms.slider.css b/themes/default/jquery.mobile.forms.slider.css index 862c872c..9ae108f5 100644 --- a/themes/default/jquery.mobile.forms.slider.css +++ b/themes/default/jquery.mobile.forms.slider.css @@ -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%; } diff --git a/themes/default/jquery.mobile.forms.textinput.css b/themes/default/jquery.mobile.forms.textinput.css index 564662d4..8fb38b7d 100644 --- a/themes/default/jquery.mobile.forms.textinput.css +++ b/themes/default/jquery.mobile.forms.textinput.css @@ -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%; } -} \ No newline at end of file +.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%; } \ No newline at end of file