From 995e8422c0225d3a7980f07c7715e35000a48366 Mon Sep 17 00:00:00 2001 From: "S. Andrew Sheppard" Date: Wed, 17 Sep 2014 14:21:02 -0500 Subject: [PATCH] simplify comparison to jquery mobile 1.4.4 css and move spinner gif to icons.css to ensure valid relative path --- css/jquery.mobile.icons.css | 6 + scss/wq/jquery-mobile.scss | 422 ++++++++++++++++++------------------ 2 files changed, 221 insertions(+), 207 deletions(-) diff --git a/css/jquery.mobile.icons.css b/css/jquery.mobile.icons.css index 3671c1d2..f1e8ca25 100644 --- a/css/jquery.mobile.icons.css +++ b/css/jquery.mobile.icons.css @@ -10,6 +10,12 @@ */ +/* wq.app customization: Moved loader from theme to here, to fix relative path */ +.ui-icon-loading { + background: url("images/ajax-loader.gif"); + background-size: 2.875em 2.875em; +} + /* SVG icons */ .ui-icon-action:after { background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M9%2C5v3l5-4L9%2C0v3c0%2C0-5%2C0-5%2C7C6%2C5%2C9%2C5%2C9%2C5z%20M11%2C12H2V5h1l2-2H0v11h13V7l-2%2C2V12z%22%2F%3E%3C%2Fsvg%3E"); diff --git a/scss/wq/jquery-mobile.scss b/scss/wq/jquery-mobile.scss index 98ed2f63..8374b905 100644 --- a/scss/wq/jquery-mobile.scss +++ b/scss/wq/jquery-mobile.scss @@ -3,20 +3,224 @@ * SASS/SCSS mixins for building custom jQuery Mobile themes * (c) 2012-2014 S. Andrew Sheppard * http://wq.io/license - */ - -/* Styles adapted from jquery.mobile.theme.css. * - * jQuery Mobile 1.4.4 - * http://jquerymobile.com - * - * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors - * Released under the MIT license. - * http://jquery.org/license + * Styles adapted almost verbatim from jquery.mobile.theme.css + * (try `diff jquery.mobile.theme-1.4.4.css jquery-mobile.scss`) */ +/*! +* jQuery Mobile 1.4.4 +* Git HEAD hash: b4150fb1c561b614da796c210877fb25e74cf622 <> Date: Fri Sep 12 2014 16:43:26 UTC +* http://jquerymobile.com +* +* Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors +* Released under the MIT license. +* http://jquery.org/license +* +*/ + @import "compass/css3"; +@mixin jquery-mobile-global( + $font: sans-serif, + $round: .6em, + $btn-round: .3125em, +) +{ + +/* Globals */ +/* Font +-----------------------------------------------------------------------------------------------------------*/ +html { + font-size: 100%; +} +body, +input, +select, +textarea, +button, +.ui-btn { + font-size: 1em; + line-height: 1.3; + font-family: $font; +} +legend, +.ui-input-text input, +.ui-input-search input { + color: inherit; + text-shadow: inherit; +} +/* Form labels (overrides font-weight bold in bars, and mini font-size) */ +.ui-mobile label, +div.ui-controlgroup-label { + font-weight: normal; + font-size: 16px; +} +/* Separators +-----------------------------------------------------------------------------------------------------------*/ +/* Field contain separator (< 28em) */ +.ui-field-contain { + border-bottom-color: #828282; + border-bottom-color: rgba(0,0,0,.15); + border-bottom-width: 1px; + border-bottom-style: solid; +} +/* Table opt-in classes: strokes between each row, and alternating row stripes */ +/* Classes table-stroke and table-stripe are deprecated in 1.4. */ +.table-stroke thead th, +.table-stripe thead th, +.table-stripe tbody tr:last-child { + border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */ + border-bottom: 1px solid rgba(0,0,0,.1); +} +.table-stroke tbody th, +.table-stroke tbody td { + border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */ + border-bottom: 1px solid rgba(0,0,0,.05); +} +.table-stripe.table-stroke tbody tr:last-child th, +.table-stripe.table-stroke tbody tr:last-child td { + border-bottom: 0; +} +.table-stripe tbody tr:nth-child(odd) td, +.table-stripe tbody tr:nth-child(odd) th { + background-color: #eeeeee; /* non-RGBA fallback */ + background-color: rgba(0,0,0,.04); +} +/* Buttons +-----------------------------------------------------------------------------------------------------------*/ +.ui-btn, +label.ui-btn { + font-weight: bold; + border-width: 1px; + border-style: solid; +} +.ui-btn { + text-decoration: none !important; +} +.ui-btn-active { + cursor: pointer; +} +/* Corner rounding +-----------------------------------------------------------------------------------------------------------*/ +/* Class ui-btn-corner-all deprecated in 1.4 */ +.ui-corner-all { + @include border-radius($round); +} +/* Buttons */ +.ui-btn-corner-all, +.ui-btn.ui-corner-all, +/* Slider track */ +.ui-slider-track.ui-corner-all, +/* Flipswitch */ +.ui-flipswitch.ui-corner-all, +/* Count bubble */ +.ui-li-count { + @include border-radius($btn-round); +} +/* Icon-only buttons */ +.ui-btn-icon-notext.ui-btn-corner-all, +.ui-btn-icon-notext.ui-corner-all { + @include border-radius(1em); +} +/* Radius clip workaround for cleaning up corner trapping */ +.ui-btn-corner-all, +.ui-corner-all { + @include background-clip(); +} +/* Popup arrow */ +.ui-popup.ui-corner-all > .ui-popup-arrow-guide { + left: $round; + right: $round; + top: $round; + bottom: $round; +} +/* Shadow +-----------------------------------------------------------------------------------------------------------*/ +.ui-shadow { + @include box-shadow(0 1px 3px rgba(0,0,0,.15)); +} +.ui-shadow-inset { + @include box-shadow(inset 0 1px 3px rgba(0,0,0,.2)); +} +.ui-overlay-shadow { + @include box-shadow(0 0 12px rgba(0,0,0,.6)); +} +/* Icons +-----------------------------------------------------------------------------------------------------------*/ +.ui-btn-icon-left:after, +.ui-btn-icon-right:after, +.ui-btn-icon-top:after, +.ui-btn-icon-bottom:after, +.ui-btn-icon-notext:after { + background-color: #666 /*{global-icon-color}*/; + background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/; + background-position: center center; + background-repeat: no-repeat; + @include border-radius(1em); +} +/* Alt icons */ +.ui-alt-icon.ui-btn:after, +.ui-alt-icon .ui-btn:after, +html .ui-alt-icon.ui-checkbox-off:after, +html .ui-alt-icon.ui-radio-off:after, +html .ui-alt-icon .ui-checkbox-off:after, +html .ui-alt-icon .ui-radio-off:after { + background-color: #666 /*{global-icon-color}*/; + background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/; +} +/* No disc */ +.ui-nodisc-icon.ui-btn:after, +.ui-nodisc-icon .ui-btn:after { + background-color: transparent; +} +/* Icon shadow */ +.ui-shadow-icon.ui-btn:after, +.ui-shadow-icon .ui-btn:after { + @include box-shadow(0 1px 0 rgba(255,255,255,.3)); +} +/* Checkbox and radio */ +.ui-btn.ui-checkbox-off:after, +.ui-btn.ui-checkbox-on:after, +.ui-btn.ui-radio-off:after, +.ui-btn.ui-radio-on:after { + display: block; + width: 18px; + height: 18px; + margin: -9px 2px 0 2px; +} +.ui-checkbox-off:after, +.ui-btn.ui-radio-off:after { + filter: Alpha(Opacity=30); + opacity: .3; +} +.ui-btn.ui-checkbox-off:after, +.ui-btn.ui-checkbox-on:after { + @include border-radius(.1875em); +} +.ui-btn.ui-checkbox-off:after { + background-color: #666; + background-color: rgba(0,0,0,.3); +} +.ui-radio .ui-btn.ui-radio-on:after { + background-image: none; + background-color: #fff; + width: 8px; + height: 8px; + border-width: 5px; + border-style: solid; +} +.ui-alt-icon.ui-btn.ui-radio-on:after, +.ui-alt-icon .ui-btn.ui-radio-on:after { + background-color: #000; +} + +/* wq.app customization: Loader moved to jquery.mobile.icons.css */ + +@include jquery-mobile-global2(); + +} + @mixin jquery-mobile-theme( $theme: a, @@ -224,204 +428,8 @@ html head + body .ui-body-$theme.ui-focus { } -@mixin jquery-mobile-global( - $font: sans-serif, - $round: .6em, - $btn-round: .3125em, -) -{ - -/* Globals */ -/* Font ------------------------------------------------------------------------------------------------------------*/ -html { - font-size: 100%; -} -body, -input, -select, -textarea, -button, -.ui-btn { - font-size: 1em; - line-height: 1.3; - font-family: $font; -} -legend, -.ui-input-text input, -.ui-input-search input { - color: inherit; - text-shadow: inherit; -} -/* Form labels (overrides font-weight bold in bars, and mini font-size) */ -.ui-mobile label, -div.ui-controlgroup-label { - font-weight: normal; - font-size: 16px; -} -/* Separators ------------------------------------------------------------------------------------------------------------*/ -/* Field contain separator (< 28em) */ -.ui-field-contain { - border-bottom-color: #828282; - border-bottom-color: rgba(0,0,0,.15); - border-bottom-width: 1px; - border-bottom-style: solid; -} -/* Table opt-in classes: strokes between each row, and alternating row stripes */ -/* Classes table-stroke and table-stripe are deprecated in 1.4. */ -.table-stroke thead th, -.table-stripe thead th, -.table-stripe tbody tr:last-child { - border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */ - border-bottom: 1px solid rgba(0,0,0,.1); -} -.table-stroke tbody th, -.table-stroke tbody td { - border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */ - border-bottom: 1px solid rgba(0,0,0,.05); -} -.table-stripe.table-stroke tbody tr:last-child th, -.table-stripe.table-stroke tbody tr:last-child td { - border-bottom: 0; -} -.table-stripe tbody tr:nth-child(odd) td, -.table-stripe tbody tr:nth-child(odd) th { - background-color: #eeeeee; /* non-RGBA fallback */ - background-color: rgba(0,0,0,.04); -} -/* Buttons ------------------------------------------------------------------------------------------------------------*/ -.ui-btn, -label.ui-btn { - font-weight: bold; - border-width: 1px; - border-style: solid; -} -.ui-btn { - text-decoration: none !important; -} -.ui-btn-active { - cursor: pointer; -} -/* Corner rounding ------------------------------------------------------------------------------------------------------------*/ -/* Class ui-btn-corner-all deprecated in 1.4 */ -.ui-corner-all { - @include border-radius($round); -} -/* Buttons */ -.ui-btn-corner-all, -.ui-btn.ui-corner-all, -/* Slider track */ -.ui-slider-track.ui-corner-all, -/* Flipswitch */ -.ui-flipswitch.ui-corner-all, -/* Count bubble */ -.ui-li-count { - @include border-radius($btn-round); -} -/* Icon-only buttons */ -.ui-btn-icon-notext.ui-btn-corner-all, -.ui-btn-icon-notext.ui-corner-all { - @include border-radius(1em); -} -/* Radius clip workaround for cleaning up corner trapping */ -.ui-btn-corner-all, -.ui-corner-all { - @include background-clip(); -} -/* Popup arrow */ -.ui-popup.ui-corner-all > .ui-popup-arrow-guide { - left: $round /*{global-radii-blocks}*/; - right: $round /*{global-radii-blocks}*/; - top: $round /*{global-radii-blocks}*/; - bottom: $round /*{global-radii-blocks}*/; -} -/* Shadow ------------------------------------------------------------------------------------------------------------*/ -.ui-shadow { - @include box-shadow(0 1px 3px rgba(0,0,0,.15)); -} -.ui-shadow-inset { - @include box-shadow(inset 0 1px 3px rgba(0,0,0,.2)); -} -.ui-overlay-shadow { - @include box-shadow(0 0 12px rgba(0,0,0,.6)); -} -/* Icons ------------------------------------------------------------------------------------------------------------*/ -.ui-btn-icon-left:after, -.ui-btn-icon-right:after, -.ui-btn-icon-top:after, -.ui-btn-icon-bottom:after, -.ui-btn-icon-notext:after { - background-color: #666 /*{global-icon-color}*/; - background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/; - background-position: center center; - background-repeat: no-repeat; - @include border-radius(1em); -} -/* Alt icons */ -.ui-alt-icon.ui-btn:after, -.ui-alt-icon .ui-btn:after, -html .ui-alt-icon.ui-checkbox-off:after, -html .ui-alt-icon.ui-radio-off:after, -html .ui-alt-icon .ui-checkbox-off:after, -html .ui-alt-icon .ui-radio-off:after { - background-color: #666 /*{global-icon-color}*/; - background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/; -} -/* No disc */ -.ui-nodisc-icon.ui-btn:after, -.ui-nodisc-icon .ui-btn:after { - background-color: transparent; -} -/* Icon shadow */ -.ui-shadow-icon.ui-btn:after, -.ui-shadow-icon .ui-btn:after { - @include box-shadow(0 1px 0 rgba(255,255,255,.3)); -} -/* Checkbox and radio */ -.ui-btn.ui-checkbox-off:after, -.ui-btn.ui-checkbox-on:after, -.ui-btn.ui-radio-off:after, -.ui-btn.ui-radio-on:after { - display: block; - width: 18px; - height: 18px; - margin: -9px 2px 0 2px; -} -.ui-checkbox-off:after, -.ui-btn.ui-radio-off:after { - filter: Alpha(Opacity=30); - opacity: .3; -} -.ui-btn.ui-checkbox-off:after, -.ui-btn.ui-checkbox-on:after { - @include border-radius(.1875em); -} -.ui-btn.ui-checkbox-off:after { - background-color: #666; - background-color: rgba(0,0,0,.3); -} -.ui-radio .ui-btn.ui-radio-on:after { - background-image: none; - background-color: #fff; - width: 8px; - height: 8px; - border-width: 5px; - border-style: solid; -} -.ui-alt-icon.ui-btn.ui-radio-on:after, -.ui-alt-icon .ui-btn.ui-radio-on:after { - background-color: #000; -} -/* Loader */ -.ui-icon-loading { - background: url("images/ajax-loader.gif"); - background-size: 2.875em 2.875em; -} +/* Second global mixin to keep general structure of jquery.mobile.theme */ +@mixin jquery-mobile-global2() { /* Structure */ /* Disabled