141 css/structure/jquery.mobile.controlgroup.css
View file
@@ -1,49 +1,79 @@
.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-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
.ui-controlgroup-controls label.ui-select,
.ui-controlgroup-controls label.ui-submit { position: absolute; left: -9999px; }
.ui-controlgroup li { list-style: none; }

.ui-controlgroup .ui-btn { margin: 0; }
.ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
.ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
.ui-controlgroup.ui-mini .ui-btn-icon-notext .ui-btn-inner,
.ui-header .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner,
.ui-footer .ui-controlgroup .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-btn-inner { text-align: center; }
.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }

.ui-controlgroup,
fieldset.ui-controlgroup {
padding: 0;
margin: .5em 0;
}
.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
margin: 0;
}
.ui-controlgroup-controls .ui-btn,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-select {
margin: 0;
}
.ui-controlgroup-controls .ui-btn:focus,
.ui-controlgroup-controls .ui-btn.ui-focus {
z-index: 1;
}
.ui-controlgroup-controls li {
list-style: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block;
vertical-align: middle;
}
.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 { display: inline-block; vertical-align: middle; zoom: 1; }
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
.ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
/* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
.ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }

.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
.ui-controlgroup-horizontal .ui-btn { border-right-width: 0; }
.ui-controlgroup-horizontal .ui-btn.ui-last-child { border-right-width: 1px; }

.ui-controlgroup .ui-btn-corner-all {
.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 > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
float: left;
clear: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
width: auto;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
width: 1.5em;
}
.ui-controlgroup-controls .ui-btn-icon-notext {
height: auto;
padding: .7em 1em;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
border-bottom-width: 0;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
border-bottom-width: 1px;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
border-right-width: 0;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
border-right-width: 1px;
}
.ui-controlgroup-controls .ui-btn-corner-all,
.ui-controlgroup-controls .ui-btn.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-controlgroup .ui-controlgroup-controls,
.ui-controlgroup .ui-radio,
.ui-controlgroup .ui-checkbox,
.ui-controlgroup .ui-select,
.ui-controlgroup li {
.ui-controlgroup-controls,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-select,
.ui-controlgroup-controls li {
-webkit-border-radius: inherit;
border-radius: inherit;
}
@@ -71,17 +101,24 @@
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}

.ui-controlgroup .ui-shadow:not(.ui-focus) {
.ui-controlgroup-controls a.ui-shadow:not(:focus),
.ui-controlgroup-controls button.ui-shadow:not(:focus),
.ui-controlgroup-controls div.ui-shadow:not(.ui-focus) {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

@media all and (min-width: 28em){
.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: 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%; }
}
/* Fixes legend not wrapping on IE10 */
.ui-controlgroup-label legend {
max-width: 100%;
}
.ui-controlgroup-controls > label {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
411 css/structure/jquery.mobile.core.css
View file

Large diffs are not rendered by default.

12 css/structure/jquery.mobile.dialog.css
View file
@@ -4,10 +4,10 @@
.ui-dialog-contain {
width: 92.5%;
max-width: 500px;
margin: 10% auto 15px auto;
margin: 10% auto 1em auto;
padding: 0;
position: relative;
top: -15px;
top: -1em;
}
.ui-dialog-contain > .ui-header,
.ui-dialog-contain > .ui-content,
@@ -18,15 +18,13 @@
margin: 0;
}
.ui-dialog-contain > .ui-header {
border: none;
overflow: hidden;
z-index: 10;
padding: 0;
}
.ui-dialog-contain > .ui-content {
padding: 15px;
border-top-width: 0;
}
.ui-dialog-contain > .ui-footer {
z-index: 10;
padding: 0 15px;
padding: 0 1em;
border-bottom-width: 0;
}
15 css/structure/jquery.mobile.fixedToolbar.css
View file
@@ -15,6 +15,14 @@
top: 0;
padding-top: 0;
}
.ui-header-fixed .ui-btn-left,
.ui-header-fixed .ui-btn-right {
margin-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden .ui-btn-left,
.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
margin-top: 0;
}
.ui-footer-fixed {
bottom: -1px;
padding-bottom: 1px;
@@ -43,7 +51,14 @@
}
.ui-page-header-fullscreen .ui-fixed-hidden,
.ui-page-footer-fullscreen .ui-fixed-hidden {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
.ui-header-fixed .ui-btn,
.ui-footer-fixed .ui-btn {
84 css/structure/jquery.mobile.forms.checkboxradio.css
View file
@@ -1,30 +1,54 @@
.ui-checkbox, .ui-radio { position: relative; clear: both; margin: 0; z-index: 1; }
.ui-checkbox .ui-btn, .ui-radio .ui-btn { text-align: left; z-index: 2; }
.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; }
.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-checkbox .ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 36px; }
.ui-checkbox .ui-btn-icon-top .ui-btn-inner, .ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
.ui-checkbox .ui-btn-icon-bottom .ui-btn-inner, .ui-radio .ui-btn-icon-bottom .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
.ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
.ui-checkbox .ui-btn-icon-top .ui-icon, .ui-radio .ui-btn-icon-top .ui-icon { top: 10px; }
.ui-checkbox .ui-btn-icon-bottom .ui-icon, .ui-radio .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }

.ui-controlgroup-horizontal .ui-checkbox .ui-icon,
.ui-controlgroup-horizontal .ui-radio .ui-icon { display: none; }
.ui-controlgroup-horizontal .ui-checkbox .ui-btn-inner,
.ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
.ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
.ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }

/* input, label positioning */
.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
.ui-checkbox,
.ui-radio {
margin: .5em 0;
position: relative;
}
.ui-checkbox .ui-btn,
.ui-radio .ui-btn {
margin: 0;
text-align: left;
white-space: normal; /* Nowrap + ellipsis doesn't work on label. Issue #1419. */
z-index: 2;
}
.ui-controlgroup .ui-checkbox .ui-btn.ui-focus,
.ui-controlgroup .ui-radio .ui-btn.ui-focus {
z-index: 3;
}
.ui-checkbox .ui-btn-icon-top,
.ui-radio .ui-btn-icon-top,
.ui-checkbox .ui-btn-icon-bottom,
.ui-radio .ui-btn-icon-bottom {
text-align: center;
}
.ui-controlgroup-horizontal .ui-checkbox .ui-btn:after,
.ui-controlgroup-horizontal .ui-radio .ui-btn:after {
content: none;
display: none;
}
/* Native input positioning */
.ui-checkbox input,
.ui-radio input {
position: absolute;
left: .625em;
top: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 0;
outline: 0 !important;
z-index: 1;
}
.ui-controlgroup-horizontal .ui-checkbox input,
.ui-controlgroup-horizontal .ui-radio input {
left: 50%;
margin-left: -9px;
}
.ui-checkbox input:disabled,
.ui-radio input:disabled {
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
65 css/structure/jquery.mobile.forms.fieldcontain.css
View file
@@ -1,6 +1,61 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
.ui-field-contain:last-child { border-bottom-width: 0; }
.ui-field-contain { max-width: 100%; } /* This prevents horizontal scrollbar in IE7 */
@media all and (min-width: 28em){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
.ui-field-contain,
.ui-mobile fieldset.ui-field-contain {
display: block;
position: relative;
overflow: visible;
clear: both;
padding: .8em 0;
}
.ui-field-contain > label + [class*="ui-"],
.ui-field-contain .ui-controlgroup-controls {
margin: 0;
}
.ui-field-contain:last-child {
border-bottom-width: 0;
}
@media (min-width: 28em) {
.ui-field-contain,
.ui-mobile fieldset.ui-field-contain {
padding: 0;
margin: 1em 0;
border-bottom-width: 0;
}
.ui-field-contain:before,
.ui-field-contain:after {
content: "";
display: table;
}
.ui-field-contain:after {
clear: both;
}
.ui-field-contain > label,
.ui-field-contain .ui-controlgroup-label,
.ui-field-contain > .ui-rangeslider > label {
float: left;
width: 20%;
margin: .5em 2% 0 0;
}
.ui-popup .ui-field-contain > label,
.ui-popup .ui-field-contain .ui-controlgroup-label,
.ui-popup .ui-field-contain > .ui-rangeslider > label {
float: none;
width: auto;
margin: 0 0 .4em;
}
.ui-field-contain > label + [class*="ui-"],
.ui-field-contain .ui-controlgroup-controls {
float: left;
width: 78%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui-hide-label > label + [class*="ui-"],
.ui-hide-label .ui-controlgroup-controls,
.ui-popup .ui-field-contain > label + [class*="ui-"],
.ui-popup .ui-field-contain .ui-controlgroup-controls {
float: none;
width: 100%;
}
}
78 css/structure/jquery.mobile.forms.rangeslider.css
View file
@@ -1,6 +1,5 @@
.ui-rangeslider {
zoom: 1;
margin: 0;
margin: .5em 0;
}
.ui-rangeslider:before,
.ui-rangeslider:after {
@@ -10,31 +9,14 @@
.ui-rangeslider:after {
clear: both;
}
/* Margin-top/bottom: .5em * 16px/14px to make it equal to ui-rangeslider-sliders margin (input font-size is 14px) */
.ui-rangeslider input.ui-input-text.ui-slider-input {
margin: .57143em 0;
}
.ui-rangeslider.ui-mini input.ui-slider-input {
margin: .28571em 0;
}
.ui-rangeslider input.ui-slider-input.ui-rangeslider-last {
.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
float: right;
}
.ui-rangeslider .ui-rangeslider-sliders {
position: relative;
overflow: visible;
height: 30px;
margin: .5em 68px;
}
.ui-rangeslider.ui-mini .ui-rangeslider-sliders {
margin: .25em 68px;
}
.ui-field-contain .ui-rangeslider input.ui-slider-input,
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
margin-top: 0;
margin-bottom: 0;
margin: 0 68px;
}
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
position: absolute;
@@ -65,41 +47,21 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:
height: 12px;
}

@media all and (min-width: 28em){
.ui-field-contain .ui-rangeslider label.ui-slider {
float: left;
}
.ui-field-contain .ui-rangeslider input.ui-slider-input {
position: relative;
z-index: 1;
}
.ui-field-contain .ui-rangeslider input.ui-slider-input.ui-rangeslider-first,
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input.ui-rangeslider-first {
margin-right: 17px;
}
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
float: left;
width: 78%;
margin: 0 -68px;
}
.ui-field-contain .ui-rangeslider .ui-slider-track,
.ui-field-contain .ui-rangeslider.ui-mini .ui-slider-track {
right: 68px;
left: 68px;
}
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-slider-input.ui-rangeslider-first {
margin: 0;
}
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders,
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
width: auto;
float: none;
margin: 0 68px;
}
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-slider-track,
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-slider-track {
right: 0;
left: 0;
}
/* Hide the second label (the first is moved outside the div) */
div.ui-rangeslider label {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
.ui-field-contain .ui-rangeslider input.ui-slider-input,
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
margin-top: 0;
margin-bottom: 0;
}
176 css/structure/jquery.mobile.forms.select.css
View file
@@ -1,51 +1,141 @@
.ui-select { display: block; position: relative; }
.ui-select select { position: absolute; left: -9999px; top: -9999px; }
.ui-select .ui-btn { 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%; filter: Alpha(Opacity=0); opacity: 0; z-index: 2; }

.ui-select .ui-disabled { opacity: .3; }
.ui-select {
margin-top: .5em;
margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
position: relative;
}
.ui-select > select {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
.ui-select .ui-btn {
margin: 0;
opacity: 1; /* 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 {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 1.5em;
min-height: 100%;
height: 3em;
max-height: 100%;
outline: 0;
-webkit-border-radius: inherit;
border-radius: inherit;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
filter: Alpha(Opacity=0);
opacity: 0;
z-index: 2;
}
@-moz-document url-prefix() {
.ui-select .ui-btn select {
opacity: 0.0001;
}
}
/* Display none because of issues with IE/WP's filter alpha opacity */
.ui-select .ui-disabled select { display: none; }

@-moz-document url-prefix() { .ui-select .ui-btn select { opacity: 0.0001; }}
.ui-select .ui-btn.ui-select-nativeonly { border-radius: 0; border: 0; }
.ui-select .ui-btn.ui-select-nativeonly select { opacity: 1; text-indent: 0; display: block; }
.ui-select .ui-disabled.ui-select-nativeonly .ui-btn-inner { opacity: 0; }
.ui-select .ui-state-disabled select {
display: none;
}
/* Because we add all classes of the select and option elements to the span... */
.ui-select span.ui-state-disabled {
filter: Alpha(Opacity=100);
opacity: 1;
}
.ui-select .ui-btn.ui-select-nativeonly {
border-radius: 0;
border: 0;
}
.ui-select .ui-btn.ui-select-nativeonly select {
opacity: 1;
text-indent: 0;
display: block;
}
/* ui-li-count is styled in the listview CSS. We set padding and offset here because select supports icon position while listview doesn't. */
.ui-select .ui-li-has-count.ui-btn {
padding-right: 2.8125em;
}
.ui-select .ui-li-has-count.ui-btn-icon-right {
padding-right: 4.6875em;
}
.ui-select .ui-btn-icon-right .ui-li-count {
right: 3.636em;
}
/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
.ui-select .ui-btn > span:not(.ui-li-count) {
display: block;
text-overflow: ellipsis;
overflow: hidden !important;
white-space: nowrap;
}

.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; }
.ui-selectmenu.ui-popup {
min-width: 11em;
}

/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
.ui-selectmenu .ui-dialog-contain {
overflow: hidden;
}

/*listbox*/
.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-selectmenu .ui-header {
margin: 0;
padding: 0;
border: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
z-index: 1;
position: relative;
}
.ui-selectmenu.ui-popup .ui-header {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
/* 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 */
.ui-selectmenu.ui-popup .ui-header h1:after {
content: '.';
visibility: hidden;
}
.ui-selectmenu .ui-header .ui-title {
margin: 0 2.875em;
}
.ui-selectmenu.ui-dialog .ui-content {
overflow: visible;
z-index: 1;
}

.ui-selectmenu { padding: 6px; min-width: 160px; }
.ui-selectmenu .ui-listview { margin: 0; }
.ui-selectmenu .ui-btn.ui-li-divider { cursor: default; }
.ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; }
.ui-selectmenu-list .ui-li .ui-icon { display: block; }
.ui-li.ui-selectmenu-placeholder { display: none; }
.ui-selectmenu .ui-header { margin: 0; padding: 0; }
.ui-selectmenu.ui-popup .ui-header { -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; }
.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
.ui-selectmenu .ui-selectmenu-list {
margin: 0;
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-header:not(.ui-screen-hidden) + .ui-selectmenu-list {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
}
.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-btn {
border-top-width: 0;
}
.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-btn {
border-bottom-width: 0;
}

@media all and (min-width: 28em){
.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: 78%; display: inline-block; }
.ui-hide-label .ui-select { width: 100%; }
.ui-selectmenu .ui-btn.ui-li-divider {
cursor: default;
}

/* 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 */
.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
.ui-screen-hidden,
.ui-selectmenu .ui-selectmenu-placeholder {
display: none;
}
125 css/structure/jquery.mobile.forms.slider.css
View file
@@ -1,48 +1,36 @@
label.ui-slider {
font-size: 16px;
line-height: 1.4;
font-weight: normal;
margin: 0;
display: block;
}
.ui-field-contain label.ui-slider {
margin-bottom: .4em;
}
div.ui-slider {
height: 30px;
margin: .5em 0;
zoom: 1;
}
div.ui-slider.ui-mini {
margin: .25em 0;
}
.ui-field-contain div.ui-slider,
.ui-field-contain div.ui-slider.ui-mini {
margin: 0;
padding: 0;
-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
}
div.ui-slider:before, div.ui-slider:after {
div.ui-slider:before,
div.ui-slider:after {
content: "";
display: table;
}
div.ui-slider:after {
clear: both;
}
/* High level of specificity to override Textinput CSS. */
input.ui-input-text.ui-slider-input {
input.ui-slider-input {
display: block;
float: left;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 4px;
width: 40px;
height: 22px;
line-height: 22px;
font-size: 14px;
border-width: 0;
height: 20px;
line-height: 20px;
background-image: none;
font-weight: bold;
border-width: 1px;
border-style: solid;
outline: 0;
text-align: center;
vertical-align: text-bottom;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
@@ -53,10 +41,11 @@ input.ui-input-text.ui-slider-input {
-webkit-appearance: none;
margin: 0;
}
.ui-slider-track,
.ui-slider-switch {
.ui-slider-track {
position: relative;
overflow: visible;
border-width: 1px;
border-style: solid;
height: 15px;
margin: 0 15px 0 68px;
top: 6px;
@@ -65,62 +54,51 @@ input.ui-input-text.ui-slider-input {
height: 12px;
top: 8px;
}
.ui-slider-bg {
border: none;
.ui-slider-track .ui-slider-bg {
height: 100%;
}
/* High level of specificity to override button margins in grids */
.ui-slider-track .ui-btn.ui-slider-handle,
.ui-slider-switch .ui-btn.ui-slider-handle {
.ui-slider-track .ui-btn.ui-slider-handle {
position: absolute;
z-index: 1;
top: 50%;
width: 28px;
height: 28px;
margin: -15px 0 0 -15px;
outline: 0;
padding: 0;
}
.ui-slider-track.ui-mini .ui-slider-handle {
height: 14px;
width: 14px;
margin: -8px 0 0 -7px;
}
.ui-slider-handle .ui-btn-inner {
padding: 0;
height: 100%;
}
.ui-slider-track.ui-mini .ui-slider-handle .ui-btn-inner {
height: 30px;
width: 30px;
padding: 0;
margin: -9px 0 0 -9px;
border-top: none;
margin: -8px 0 0 -8px;
}
select.ui-slider-switch {
display: none;
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
div.ui-slider-switch {
display: inline-block;
height: 32px;
width: 5.8em;
margin: .5em 0;
top: 0;
}
/* reset the clearfix */
div.ui-slider-switch:before, div.ui-slider-switch:after {
div.ui-slider-switch:before,
div.ui-slider-switch:after {
display: none;
clear: none;
}
div.ui-slider-switch.ui-mini {
width: 5em;
height: 29px;
margin: .25em 0;
top: 0;
}
.ui-field-contain .ui-slider-switch,
.ui-field-contain .ui-slider-switch.ui-mini {
margin: 0;
}
.ui-slider-inneroffset {
margin: 0 16px;
position: relative;
@@ -142,13 +120,6 @@ div.ui-slider-switch.ui-mini {
-webkit-transition: left 70ms linear;
-moz-transition: left 70ms linear;
}
.ui-slider-switch.ui-mini .ui-slider-handle .ui-btn-inner {
height: 30px;
width: 30px;
padding: 0;
margin: 0;
border-top: none;
}
.ui-slider-switch .ui-slider-label {
position: absolute;
text-align: center;
@@ -158,7 +129,6 @@ div.ui-slider-switch.ui-mini {
top: 0;
line-height: 2;
min-height: 100%;
border-width: 0;
white-space: nowrap;
cursor: pointer;
}
@@ -175,28 +145,21 @@ div.ui-slider-switch.ui-mini {
right: 0;
text-indent: 1.5em;
}

@media all and (min-width: 28em){
.ui-field-contain label.ui-slider {
vertical-align: top;
display: inline-block;
width: 20%;
margin: 0 2% 0 0;
}
.ui-field-contain div.ui-slider {
display: inline-block;
width: 78%;
}
.ui-field-contain.ui-hide-label div.ui-slider {
display: block;
width: auto;
}
/* The corner radii for ui-slider-switch/track can be specified in theme CSS. The bg and handle inherits. */
.ui-slider-track .ui-slider-bg,
.ui-slider-switch .ui-slider-label,
.ui-slider-switch .ui-slider-inneroffset,
.ui-slider-handle {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-field-contain div.ui-slider-switch {
margin: 0;
}
@media (min-width: 28em) {
.ui-field-contain div.ui-slider-switch,
.ui-field-contain.ui-hide-label div.ui-slider-switch {
display: inline-block;
width: 5.8em;
}
.ui-field-contain div.ui-slider-switch.ui-mini {
width: 5em;
}
}
16 css/structure/jquery.mobile.forms.slider.tooltip.css
View file
@@ -1,5 +1,21 @@
/* slider tooltip
-----------------------------------------------------------------------------------------------------------*/

.ui-slider-popup {
width: 64px;
height: 64px;
font-size: 36px;
padding-top: 14px;
opacity: 0.8;
}

.ui-slider-popup {
position: absolute !important;
text-align: center;
z-index: 100;
}

.ui-slider-track .ui-btn.ui-slider-handle {
font-size: .9em;
line-height: 30px;
}
165 css/structure/jquery.mobile.forms.textinput.css
View file
@@ -1,46 +1,123 @@
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; margin: .5em 0; min-height: 1.4em; line-height: 1.4em; font-size: 16px; display: block; width: 100%; outline: 0; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
.ui-input-search { padding: 0 30px; }
div.ui-input-text { padding: 0 .4em; }
div.ui-input-has-clear { padding: 0 30px 0 .4em; }
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
textarea.ui-input-text { -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; }
textarea.ui-mini { height: 45px; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { right: -3px; }
.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }

.ui-input-text,
.ui-input-search {
margin: .5em 0;
background-image: none;
border-width: 1px;
border-style: solid;
}
.ui-input-text input,
.ui-input-search input,
textarea.ui-input-text {
padding: .4em;
min-height: 2.2em;
line-height: 1.4em;
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
.ui-input-text input,
.ui-input-search input {
margin: 0;
text-align: left; /* Opera aligns type="date" right by default */
border: 0;
background: transparent none;
-webkit-appearance: none;
-webkit-border-radius: inherit;
border-radius: inherit;
}
textarea.ui-input-text {
height: 3.125em;
overflow: auto;
resize: vertical;
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
-o-transition: height 200ms linear;
transition: height 200ms linear;
}
.ui-mini .ui-input-text input,
.ui-mini .ui-input-search input,
.ui-input-text.ui-mini input,
.ui-input-search.ui-mini input,
.ui-mini textarea.ui-input-text,
textarea.ui-mini {
font-size: 14px;
}
/* Same margin for mini textareas as other mini sized widgets (12.5/14 * 0.5em) */
.ui-mini textarea.ui-input-text,
textarea.ui-mini {
margin: .446em 0;
}
.ui-input-has-clear,
.ui-input-search {
position: relative;
}
/* Padding on the div instead of input because of browser spinners etc. */
.ui-input-has-clear {
padding-right: 2.25em;
}
.ui-input-has-clear input {
padding-right: 0;
/* Autofill on Chrome has bg color so we unset corners right as well. */
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.ui-input-search input {
padding-left: 1.75em;
padding-right: 2.25em;
}
.ui-input-search:after {
position: absolute;
left: .3125em;
top: 50%;
margin-top: -9px;
content: "";
width: 18px;
height: 18px;
opacity: .5;
}
.ui-input-search .ui-input-clear,
.ui-input-text .ui-input-clear {
position: absolute;
right: 0;
top: 50%;
margin: -13px .3125em 0;
}
.ui-input-search .ui-input-clear-hidden,
.ui-input-text .ui-input-clear-hidden {
display: none;
}
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }

/* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
input[type=number]::-webkit-outer-spin-button { margin: 0; }

/* Resolves issue #5756: Textinput in IE10 has a default clear icon */
input[data-clear-btn=true]::-ms-clear { display: none; }
.ui-input-text input::-moz-placeholder,
.ui-input-search input::-moz-placeholder,
textarea.ui-input-text::-moz-placeholder {
color: #aaa;
}
/* Same for IE10 */
.ui-input-text input:-ms-input-placeholder,
.ui-input-search input:-ms-input-placeholder,
textarea.ui-input-text:-ms-input-placeholder {
color: #aaa;
}

@media all and (min-width: 28em){
.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,
.ui-field-contain div.ui-input-text { width: 78%; display: inline-block; }
.ui-field-contain .ui-input-search,
.ui-field-contain div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search,
.ui-hide-label div.ui-input-text,
.ui-input-search input.ui-input-text,
div.ui-input-text input.ui-input-text { width: 100%; }
}
/* Resolves issue #5131: Width of textinput depends on its type,
for Android 4.1 */
.ui-input-text input[type=number]::-webkit-outer-spin-button {
margin: 0;
}
/* Resolves issue #5756: Textinput in IE10 has a default clear button */
.ui-input-text input::-ms-clear,
.ui-input-search input::-ms-clear {
display: none;
}
.ui-input-text input:focus,
.ui-input-search input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
114 css/structure/jquery.mobile.grid.css
View file
@@ -1,35 +1,93 @@
/* content configurations. */
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d,
.ui-grid-solo {
overflow: hidden;
}
.ui-block-a,
.ui-block-b,
.ui-block-c,
.ui-block-d,
.ui-block-e {
margin: 0;
padding: 0;
border: 0;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* force new row */
.ui-block-a {
clear: left;
}
ul.ui-grid-a,
ul.ui-grid-b,
ul.ui-grid-c,
ul.ui-grid-d,
ul.ui-grid-solo,
li.ui-block-a,
li.ui-block-b,
li.ui-block-c,
li.ui-block-d,
li.ui-block-e {
margin-left: 0;
margin-right: 0;
padding: 0;
list-style: none;
}
[class*="ui-grid-"] .ui-btn,
[class*="ui-grid-"] button.ui-btn-inline,
[class*="ui-grid-"] button.ui-btn-icon-notext {
margin-right: .3125em;
margin-left: .3125em;
}

/* grid solo: 100 - single item fallback */
.ui-grid-solo .ui-block-a { display: block; float: none; }
/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping. -.5px to fix BB5 wrap issue. */
/* grid a: 50/50 */
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%; }
.ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; }
.ui-grid-a .ui-block-a { clear: left; }
/* grid b: 33/33/33 */
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.25%; }
.ui-grid-b > :nth-child(n) { width: 33.333%; margin-right: -.5px; }
.ui-grid-b .ui-block-a { clear: left; }
/* grid c: 25/25/25/25 */
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.925%; }
.ui-grid-c > :nth-child(n) { width: 25%; margin-right: -.5px; }
.ui-grid-c .ui-block-a { clear: left; }
/* grid d: 20/20/20/20/20 */
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.925%; }
.ui-grid-d > :nth-child(n) { width: 20%; }
.ui-grid-d .ui-block-a { clear: left; }
.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b {
/* width: 49.95%; IE7 */
/* margin-right: -.5px; BB5 */
width: 50%;
}
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c {
/* width: 33.25%; IE7 */
/* margin-right: -.5px; BB5 */
width: 33.333%;
}
.ui-grid-c .ui-block-a,
.ui-grid-c .ui-block-b,
.ui-grid-c .ui-block-c,
.ui-grid-c .ui-block-d {
/* width: 24.925%; IE7 */
/* margin-right: -.5px; BB5 */
width: 25%;
}
.ui-grid-d .ui-block-a,
.ui-grid-d .ui-block-b,
.ui-grid-d .ui-block-c,
.ui-grid-d .ui-block-d,
.ui-grid-d .ui-block-e {
/* width: 19.925%; IE7 */
width: 20%;
}
.ui-grid-solo .ui-block-a {
width: 100%;
float: none;
}

/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
@media all and (max-width: 35em) {
.ui-responsive .ui-block-a,
.ui-responsive .ui-block-b,
.ui-responsive .ui-block-c,
.ui-responsive .ui-block-d,
.ui-responsive .ui-block-e {
@media (max-width: 35em) {
.ui-responsive > .ui-block-a,
.ui-responsive > .ui-block-b,
.ui-responsive > .ui-block-c,
.ui-responsive > .ui-block-d,
.ui-responsive > .ui-block-e {
width: 100%;
float:none;
float: none;
}
}
356 css/structure/jquery.mobile.listview.css
View file
@@ -1,99 +1,297 @@
.ui-listview { margin: 0; }
ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-content .ui-listview, .ui-panel-inner > .ui-listview { margin: -15px; }
.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset { margin: 1em 0; }
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
.ui-listview, .ui-li { list-style: none; padding: 0; }
.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-static { background-image: none; }
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */

.ui-listview .ui-li > .ui-btn-text {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child,
.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
.ui-listview,
.ui-listview > li {
margin: 0;
padding: 0;
list-style: none;
}
.ui-content .ui-listview,
.ui-panel-inner > .ui-listview {
margin: -1em;
}
.ui-collapsible-content > .ui-listview {
margin: -.625em -1em;
}
.ui-content .ui-listview-inset,
.ui-panel-inner > .ui-listview-inset,
.ui-collapsible-content > .ui-listview-inset {
margin: 1em 0;
}
.ui-listview > li {
display: block;
position: relative;
overflow: visible;
}
.ui-listview .ui-li-static,
.ui-listview .ui-li-divider,
.ui-listview > li > a.ui-btn {
margin: 0;
display: block;
position: relative;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-listview > li > .ui-btn:focus {
z-index: 1;
}
.ui-listview .ui-li-static,
.ui-listview .ui-li-divider,
.ui-listview > li > a.ui-btn {
border-width: 1px 0 0 0;
border-style: solid;
}
.ui-listview-inset .ui-li-static,
.ui-listview-inset .ui-li-divider,
.ui-listview-inset > li > a.ui-btn {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-listview .ui-li-static.ui-last-child,
.ui-listview .ui-li-divider.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
border-bottom-width: 1px;
}
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
border-top-width: 0;
}
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child,
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
border-bottom-width: 0;
}
.ui-listview > li.ui-first-child,
.ui-listview > li.ui-first-child > a.ui-btn {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-listview > .ui-li.ui-last-child,
.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
.ui-listview > li.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
.ui-listview > li.ui-li-has-alt > a.ui-btn {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.ui-listview > li.ui-first-child > a.ui-btn + a.ui-btn {
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
.ui-listview > li.ui-last-child > a.ui-btn + a.ui-btn {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-listview > .ui-li.ui-last-child .ui-li-thumb:not(.ui-li-icon) {
.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 59px; padding-left: 100px; }
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; }
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
@media all and (min-width: 480px){
.ui-li-aside { width: 45%; }
}
.ui-li-divider { cursor: default; }
.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 53px; }
.ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 88px; }
.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; }
.ui-li-has-count.ui-li-divider .ui-li-count, .ui-li-has-count .ui-link-inherit .ui-li-count { margin-top: -.95em; }
.ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 40px; }
.ui-li-has-alt.ui-li-has-count .ui-li-count { right: 53px; }
.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -13px 0 0 0; border-bottom-width: 1px; z-index: -1;}
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }

.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }

.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
.ui-collapsible-content .ui-listview-filter { margin: -10px -15px 10px -15px; border-bottom: inherit; }
.ui-listview-filter-inset { margin: -15px -5px; background: transparent; }
.ui-collapsible-content .ui-listview-filter-inset { margin: -5px; border-bottom-width: 0; }
.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }

.ui-li.ui-screen-hidden{ display:none; }
/* Odd iPad positioning issue. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.ui-li .ui-btn-text { overflow: visible; }
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
-webkit-border-radius: inherit;
border-bottom-radius: inherit;
}
.ui-listview .ui-li-static {
padding: .7em 1em;
}
.ui-listview .ui-li-divider {
padding: .5em 1.143em;
font-size: 14px;
font-weight: bold;
cursor: default;
outline: 0; /* Dividers in custom selectmenus have tabindex */
}
.ui-listview .ui-li-has-count > .ui-btn,
.ui-listview .ui-li-static.ui-li-has-count,
.ui-listview .ui-li-divider.ui-li-has-count {
padding-right: 2.8125em;
}
.ui-listview .ui-li-has-count > .ui-btn[class*="ui-icon-"] {
padding-right: 4.6875em;
}
.ui-listview .ui-li-has-thumb > .ui-btn,
.ui-listview .ui-li-static.ui-li-has-thumb {
min-height: 3.625em;
padding-left: 6.25em;
}
.ui-listview .ui-li-has-icon > .ui-btn,
.ui-listview .ui-li-static.ui-li-has-icon {
min-height: 1.25em;
padding-left: 2.5em;
}
/* Used by both listview and custom multiple select button */
.ui-li-count {
position: absolute;
font-size: 11px;
font-weight: bold;
text-align: center;
border-width: 1px;
border-style: solid;
padding: 0 .5em;
line-height: 1.9;
min-height: 1.818em;
min-width: .818em;
right: .909em;
top: 50%;
margin-top: -1em;
}
.ui-listview .ui-btn[class*="ui-icon-"] .ui-li-count {
right: 3.636em;
}
.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child {
position: absolute;
left: 0;
top: 0;
max-height: 5em;
max-width: 5em;
}
.ui-listview .ui-li-has-icon > img:first-child,
.ui-listview .ui-li-has-icon > .ui-btn > img:first-child {
position: absolute;
left: .625em;
top: .9em;
max-height: 1em;
max-width: 1em;
}
.ui-listview > li h1,
.ui-listview > li h2,
.ui-listview > li h3,
.ui-listview > li h4,
.ui-listview > li h5,
.ui-listview > li h6 {
font-size: 1em;
font-weight: bold;
display: block;
margin: .45em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-listview > li p {
font-size: .75em;
font-weight: normal;
display: block;
margin: .6em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-listview .ui-li-aside {
position: absolute;
top: 1em;
right: 3.333em;
margin: 0;
text-align: right;
}
.ui-listview > li.ui-li-has-alt > .ui-btn {
margin-right: 2.5em;
border-right-width: 0;
}
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn {
position: absolute;
width: 2.5em;
height: 100%;
min-height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-left-width: 1px;
top: 0;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.ui-listview-inset > li.ui-li-has-alt > .ui-btn + .ui-btn {
border-right-width: 1px;
}
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn:focus {
z-index: 3;
}
ol.ui-listview,
ol.ui-listview .ui-li-divider {
counter-reset: listnumbering;
}
ol.ui-listview > li > .ui-btn,
ol.ui-listview > li.ui-li-static {
vertical-align: middle;
}
ol.ui-listview > li > .ui-btn:before,
ol.ui-listview > li.ui-li-static:before,
ol.ui-listview > li.ui-field-contain > label:before,
ol.ui-listview > li.ui-field-contain > .ui-controlgroup-label:before {
display: inline-block;
font-size: .9em;
font-weight: normal;
padding-right: .3em;
min-width: 1.4em;
line-height: 1.5;
vertical-align: middle;
counter-increment: listnumbering;
content: counter(listnumbering) ".";
}
ol.ui-listview > li.ui-field-contain:before {
content: none;
display: none;
}
ol.ui-listview > li h1:first-child,
ol.ui-listview > li h2:first-child,
ol.ui-listview > li h3:first-child,
ol.ui-listview > li h4:first-child,
ol.ui-listview > li h5:first-child,
ol.ui-listview > li h6:first-child,
ol.ui-listview > li p:first-child,
ol.ui-listview > li img:first-child + * {
display: inline-block;
vertical-align: middle;
}
ol.ui-listview > li h1:first-child ~ *,
ol.ui-listview > li h2:first-child ~ *,
ol.ui-listview > li h3:first-child ~ *,
ol.ui-listview > li h4:first-child ~ *,
ol.ui-listview > li h5:first-child ~ *,
ol.ui-listview > li h6:first-child ~ *,
ol.ui-listview > li p:first-child ~ *,
ol.ui-listview > li img:first-child + * ~ * {
margin-top: 0;
text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
}
.ui-listview-filter {
border-width: 0;
overflow: hidden;
margin: -1em -1em 1em -1em;
}
.ui-listview-filter-inset {
margin: 1em -.3125em -1em;
background: transparent;
}
.ui-collapsible-content .ui-listview-filter {
margin: -.625em -1em .625em -1em;
border-bottom: inherit;
}
.ui-collapsible-content .ui-listview-filter-inset {
margin: -.3125em;
border-bottom-width: 0;
}
.ui-listview-filter .ui-input-search {
margin: .3125em;
width: auto;
display: block;
}
.ui-listview > li.ui-screen-hidden {
display:none;
}
108 css/structure/jquery.mobile.navbar.css
View file
@@ -1,36 +1,78 @@
.ui-navbar { max-width: 100%; }
.ui-navbar.ui-mini { margin: 0; }
.ui-navbar ul:before, .ui-navbar ul:after { content: " "; display: table; }
.ui-navbar ul:after { clear: both; }
.ui-navbar ul { list-style:none; margin: 0; padding: 0; position: relative; display: block; border: 0; max-width: 100%; overflow: visible; zoom: 1; }
.ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; }
.ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; }
.ui-navbar {
max-width: 100%;
}
.ui-navbar ul:before,
.ui-navbar ul:after {
content: "";
display: table;
}
.ui-navbar ul:after {
clear: both;
}
.ui-navbar ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: block;
border: 0;
max-width: 100%;
overflow: visible;
}
.ui-navbar li .ui-btn {
font-size: 12.5px;
display: block;
margin: 0;
border-right-width: 0;
}
.ui-navbar .ui-btn:focus {
z-index: 1;
}

/* add border if not in header/footer (full width) */
.ui-navbar li:last-child .ui-btn,
.ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; }
.ui-header .ui-navbar li:last-child .ui-btn,
.ui-footer .ui-navbar li:last-child .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-block-b .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: -1px; border-right-width: 0; }
.ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; }
.ui-header .ui-navbar li .ui-btn,
.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
/* fixes gaps caused by subpixel problem */
.ui-navbar li:last-child .ui-btn {
margin-right: -4px;
}
.ui-navbar li:last-child .ui-btn:after {
margin-right: 4px;
}

/* fixing gaps caused by subpixel problem */
.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn,
.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; }
.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn,
.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn { margin-right: -4px; }
.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon,
.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon,
.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon,
.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon,
.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon,
.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 8px; }
.ui-content .ui-navbar li:last-child .ui-btn,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn {
border-right-width: 1px;
margin-right: 0;
}
.ui-content .ui-navbar li:last-child .ui-btn:after,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn:after {
margin-right: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn {
border-right-width: 1px;
margin-right: -1px;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn:after {
margin-right: 1px;
}

.ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em }
.ui-navbar li .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
.ui-navbar li .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
.ui-navbar .ui-grid-duo .ui-btn {
border-top-width: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
border-top-width: 1px;
}
.ui-header .ui-navbar .ui-btn,
.ui-footer .ui-navbar .ui-btn {
border-top-width: 0;
border-bottom-width: 0;
}
.ui-header .ui-navbar .ui-grid-duo .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-btn {
border-top-width: 1px;
}
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
border-top-width: 0;
}
6 css/structure/jquery.mobile.panel.css
View file
@@ -29,15 +29,15 @@
z-index: 999;
}
.ui-panel-inner {
padding: 15px;
padding: 1em;
}

/* content-wrap */
.ui-panel-content-wrap {
position: relative;
left: 0;
min-height: inherit;
border: none;
border: 0;
z-index: 999;
}
.ui-panel-content-wrap-display-overlay,
@@ -50,7 +50,7 @@
.ui-panel-dismiss {
position: absolute;
top: 0;
left:0;
left: 0;
height: 100%;
width: 100%;
z-index: 1002;
154 css/structure/jquery.mobile.popup.arrow.css
View file
@@ -1,3 +1,155 @@
/* Dimensions related to the popup arrow
-----------------------------------------------------------------------------------------------------------*/
/* desired triangle height: 10px */

/**
* guide for the arrow - its width, height, and offset are theme-dependent and
* should be expessed as left, right, top, bottom, so that the element bearing
* such a class becomes stretched inside its parent position: relative element.
* The left/top/right/bottom specified below should reflect the corresponding
* border radii and so it leaves room for the shadow:
* ..--------------------..
* ." ^ top ".
* / v \
* | +------------------+ |
* | | | |
* | left| |right|
* |<--->| |<--->|
* | +------------------+ |
* \ ^ /
* `. v bottom .'
* ""--------------------""
* The idea is that the top/left of the arrow container box does not move to a
* coordinate smaller than the top/left of the guide and the right/bottom of
* the arrow container box does not move to a coordinate larger than the
* bottom/right of the guide. This will help us avoid the following situation:
* ..--------------------..
* ." ^ top ".
* /|/ v \
* / | +------------------+ |
* \ | | | |
* \| left| |right|
* |<--->| |<--->|
* | +------------------+ |
* \ ^ /
* `. v bottom .'
* ""--------------------""
* The arrow should not receive a top/left coordinate such that it is too close
* to one of the corners, because then at first the shadow of the arrow and,
* given a coordinate even closer to the corner, even the body of the arrow will
* "stick out" of the corner of the popup. The guide provides a hint to the
* arrow positioning code as to which range of values is acceptable for the
* arrow container's top/left coordinate.
**/

.ui-popup.ui-corner-all > .arrow-guide {
left: .6em /*{global-radii-blocks}*/;
right: .6em /*{global-radii-blocks}*/;
top: .6em /*{global-radii-blocks}*/;
bottom: .6em /*{global-radii-blocks}*/;
}

.arrow-container {
width: 20px;
height: 20px;
}

/* aside from the "infinities" (-1000,2000), triangle height is used */
.arrow-container.l {
left: -10px;
clip: rect(-1000px,10px,2000px,-1000px);
}

.arrow-container.ie.l {
clip: rect(-1000px 10px 2000px -1000px);
}

.arrow-container.t {
top: -10px;
clip: rect(-1000px,2000px,10px,-1000px);
}

.arrow-container.ie.t {
clip: rect(-1000px 2000px 10px -1000px);
}

.arrow-container.r {
right: -10px;
clip: rect(-1000px,2000px,2000px,10px);
}

.arrow-container.ie.r {
clip: rect(-1000px 2000px 2000px 10px);
}

.arrow-container.b {
bottom: -10px;
clip: rect(10px,2000px,1000px,-1000px);
}

.arrow-container.ie.b {
clip: rect(10px 2000px 1000px -1000px);
}

/**
* The arrow needs to be centred inside the arrow container such that, when
* rotated 45 degrees, its corners touch, but do not break through, the sides
* of the arrow container:
*
* +----------+
* | /\ |
* | / \ <------ arrow container
* | / \ |
* | / \ |
* |/ arrow \|
* |\ /|
* | \ / |
* | \ / |
* | \ / |
* | \/ |
* +----------+
**/
.arrow {
/* (2*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
width: 14.142135624px;
height: 14.142135624px;
/* ( (2*desired triangle height) - (above width/height) ) / 2 */
left: 2.928932188px;
top: 2.928932188px;
}

.arrow-container.ie .arrow {
/* Fix rotation center - see http://www.useragentman.com/IETransformsTranslator/ */
margin-left: -3px;
margin-top: -3px;
}

.arrow-background {
/* desired triangle height is used here */
width: 20px;
height: 20px;
}

.arrow-container.t .arrow-background {
/* 0px triangle height */
background-position: 0 10px;
}

.arrow-container.l .arrow-background {
/* triangle height 0px */
background-position: 10px 0;
}

/* For some reason (probably because of all the decimal places) there's a
rounding error in the background position, so push it over by one */
.arrow-container.b .arrow-background {
background-position: 0 11px;
}

.arrow-container.r .arrow-background {
background-position: 11px 0;
}

.ui-popup > .arrow-guide {
position: absolute;
left: 0;
@@ -33,7 +185,7 @@

.arrow-background {
position: absolute;
border: none;
border: 0;
}

.arrow-container.ie .arrow-background {
61 css/structure/jquery.mobile.popup.css
View file
@@ -1,6 +1,6 @@
.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
position: absolute !important; /* See line #553 of popup.js */
position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
}
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
@@ -31,28 +31,43 @@
.ui-popup {
position: relative;
}
.ui-popup.ui-body-inherit {
border-width: 1px;
border-style: solid;
}
.ui-popup-hidden {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
visibility: hidden;
}
.ui-popup.ui-content,
.ui-popup .ui-content {
overflow: visible;
}
.ui-popup > .ui-header {
border-top-width: 0;
}
.ui-popup > .ui-footer {
border-bottom-width: 0;
}
.ui-popup > p,
.ui-popup > h1,
.ui-popup > h2,
.ui-popup > h3,
.ui-popup > h4,
.ui-popup > h5,
.ui-popup > h6 {
margin: .5em 7px;
margin: .5em .4375em;
}
.ui-popup > span {
display: block;
margin: .5em 7px;
}
.ui-popup .ui-title {
font-size: 16px;
font-weight: bold;
margin-top: .5em;
margin-bottom: .5em;
margin: .5em .4375em;
}
.ui-popup-container .ui-content > p,
.ui-popup-container .ui-content > h1,
@@ -85,8 +100,6 @@
margin-bottom: 0;
}
.ui-popup > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
@@ -100,30 +113,16 @@
.ui-popup iframe {
vertical-align: middle;
}

@media all and (min-width: 28em){
.ui-popup .ui-field-contain label.ui-submit,
.ui-popup .ui-field-contain .ui-controlgroup-label,
.ui-popup .ui-field-contain label.ui-select,
.ui-popup .ui-field-contain label.ui-input-text {
font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em;
}
.ui-popup .ui-field-contain .ui-btn.ui-submit,
.ui-popup .ui-field-contain .ui-controlgroup-controls,
.ui-popup .ui-field-contain .ui-select,
.ui-popup .ui-field-contain input.ui-input-text,
.ui-popup .ui-field-contain textarea.ui-input-text,
.ui-popup .ui-field-contain .ui-input-search {
width: 100%; display: block;
}
}
.ui-popup > .ui-btn-left,
.ui-popup > .ui-btn-right {
position: absolute;
top: -9px;
margin: 0;
z-index: 1101;
}
.ui-popup > .ui-btn-left { left: -9px; }
.ui-popup > .ui-btn-right { right: -9px; }
.ui-popup-hidden { top: -99999px; left: -9999px; visibility: hidden; }
.ui-popup > .ui-btn-left {
left: -9px;
}
.ui-popup > .ui-btn-right {
right: -9px;
}
6 css/structure/jquery.mobile.structure.css
View file
@@ -1,5 +1,6 @@
@import url( "jquery.mobile.core.css" );
@import url( "jquery.mobile.transitions.css" );
@import url( "jquery.mobile.forms.fieldcontain.css" );
@import url( "jquery.mobile.grid.css" );
@import url( "jquery.mobile.fixedToolbar.css" );
@import url( "jquery.mobile.navbar.css" );
@@ -10,13 +11,12 @@
@import url( "jquery.mobile.popup.css" );
@import url( "jquery.mobile.popup.arrow.css" );
@import url( "jquery.mobile.forms.checkboxradio.css" );
@import url( "jquery.mobile.forms.fieldcontain.css" );
@import url( "jquery.mobile.forms.select.css" );
@import url( "jquery.mobile.forms.textinput.css" );
@import url( "jquery.mobile.forms.rangeslider.css" );
@import url( "jquery.mobile.listview.css" );
@import url( "jquery.mobile.forms.slider.css" );
@import url( "jquery.mobile.forms.slider.tooltip.css" );
@import url( "jquery.mobile.forms.rangeslider.css" );
@import url( "jquery.mobile.forms.textinput.css" );
@import url( "jquery.mobile.table.css" );
@import url( "jquery.mobile.table.columntoggle.css" );
@import url( "jquery.mobile.table.reflow.css" );
4 css/structure/jquery.mobile.table.columntoggle.css
View file
@@ -4,7 +4,7 @@

.ui-table-columntoggle-btn {
float: right;
margin-bottom:.8em;
margin-bottom: .8em;
}
/* Remove top/bottom margins around the fieldcontain on check list */
.ui-table-columntoggle-popup fieldset {
@@ -29,7 +29,6 @@
}
}


/* Preset breakpoints if ".ui-responsive" class added to table */

/* Show priority 1 at 320px (20em x 16px) */
@@ -75,7 +74,6 @@
}
}


/* Unchecked manually: Always hide */
.ui-table-columntoggle th.ui-table-cell-hidden,
.ui-table-columntoggle td.ui-table-cell-hidden,
32 css/structure/jquery.mobile.table.css
View file
@@ -1,38 +1,38 @@
.ui-table {
border: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
border: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
}
.ui-table th,
.ui-table td {
line-height: 1.5em;
text-align: left;
padding: .4em .5em;
vertical-align:top;
line-height: 1.5em;
text-align: left;
padding: .4em .5em;
vertical-align:top;
}
.ui-table th .ui-btn,
.ui-table td .ui-btn {
line-height: normal;
}
.ui-table th {
font-weight: bold;
font-weight: bold;
}
.ui-table caption {
text-align:left;
margin-bottom:1.4em;
opacity: .5;
text-align: left;
margin-bottom: 1.4em;
opacity: .5;
}

/* Add strokes between each row */
.table-stroke thead th {
border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0, 0, 0, .1);
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);
border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0, 0, 0, .05);
}


1,849 css/themes/default/jquery.mobile.theme.css
View file

Large diffs are not rendered by default.

62 demos/_assets/css/jqm-demos.css
View file
@@ -5,7 +5,7 @@
/* Page */
body, .jqm-demos {
background-color: #fefefe;
font-size: 1.05em;
font-size: 1em;
}

/* Header */
@@ -366,7 +366,7 @@ h2.jqm-home-widget {
margin-bottom: .1em;
}
/* List dividers */
.jqm-list .ui-bar-d {
.jqm-list .ui-bar-a {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .9em;
@@ -384,36 +384,36 @@ h2.jqm-home-widget {
font-size: 0.95em;
border-top: none;
}
.jqm-list .ui-btn-up-d,
.jqm-list .ui-btn-hover-d,
.jqm-list .ui-btn-down-d {
.jqm-list .ui-btn-up-a,
.jqm-list .ui-btn-hover-a,
.jqm-list .ui-btn-down-a {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
border-color: #eee;
}
.jqm-list .ui-btn-up-d {
.jqm-list .ui-btn-up-a {
background-color: #fff;
background-image: none;
}
.jqm-list .ui-btn-hover-d {
.jqm-list .ui-btn-hover-a {
background-color: #f8f8f8;
background-image: none;
}
.jqm-list .ui-btn-up-d.ui-btn-active,
.jqm-list .ui-btn-hover-d.ui-btn-active,
.jqm-list .ui-btn-down-d.ui-btn-active,
.jqm-list .ui-btn-up-d.ui-focus,
.jqm-list .ui-btn-hover-d.ui-focus,
.jqm-list .ui-btn-down-d.ui-focus {
.jqm-list .ui-btn-up-a.ui-btn-active,
.jqm-list .ui-btn-hover-a.ui-btn-active,
.jqm-list .ui-btn-down-a.ui-btn-active,
.jqm-list .ui-btn-up-a.ui-focus,
.jqm-list .ui-btn-hover-a.ui-focus,
.jqm-list .ui-btn-down-a.ui-focus {
border-color: #34bae8;
background-color: #34bae8;
background-image: none;
color: #fff;
text-shadow: 0 1px 0 #369;
}
.jqm-list .ui-btn-up-d.ui-focus,
.jqm-list .ui-btn-hover-d.ui-focus,
.jqm-list .ui-btn-down-d.ui-focus {
.jqm-list .ui-btn-up-a.ui-focus,
.jqm-list .ui-btn-hover-a.ui-focus,
.jqm-list .ui-btn-down-a.ui-focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@@ -432,18 +432,6 @@ h2.jqm-home-widget {
overflow: visible;
white-space: normal;
}
/* ### TEMPORARY ### */
/* padding count bubble position when icon is false needs to be fixed in the framework CSS (some classes shouldn't be added) */
.jqm-list .ui-li-count {
right: 10px !important;
}
.jqm-demos .jqm-list .ui-btn-icon-right .ui-btn-inner {
padding-right: 0;
}
.jqm-demos .jqm-list .ui-li-has-arrow .ui-btn-inner a.ui-link-inherit {
padding-right: 15px;
}
/* ### END ### */

/* List filter */
.jqm-demos-home .jqm-content > .ui-listview-filter,
@@ -553,7 +541,17 @@ h2.jqm-home-widget {
-moz-box-shadow: -5px 0 5px rgba(0,0,0,.10);
box-shadow: -5px 0 5px rgba(0,0,0,.10);
}

/* tabs */
.tabs-list-left{
width:25%;
float:left;
vertical-align:top;
}
.tabs-list-content{
width:73%;
float:right;
margin:1em 0;
}
/* Responsive */
@media (min-width:46em) {
/* Header logo */
@@ -581,7 +579,6 @@ h2.jqm-home-widget {
.jqm-demos-home .jqm-content .jqm-intro {
line-height: 1.45;
margin: -.2em .8em .4em .8em;

}

/* Header buttons */
@@ -638,8 +635,9 @@ h2.jqm-home-widget {
}

/* Footer */
.ui-page .jqm-footer{
position:absolute;
.ui-page .jqm-footer {
position: absolute;
bottom: 0;
}
.jqm-footer {
overflow: hidden;
7 demos/_assets/js/globalnav.js
View file
@@ -3,12 +3,11 @@
$.widget( "mobile.listview", $.mobile.listview, {
options: {
theme: null,
countTheme: "c",
headerTheme: "b",
dividerTheme: "b",
countTheme: null,
dividerTheme: null,
icon: "arrow-r",
splitIcon: "arrow-r",
splitTheme: "b",
splitTheme: null,
corners: true,
shadow: true,
inset: false,
4 demos/_assets/js/h2widget.js
View file
@@ -101,15 +101,15 @@
});
//h2 widget
$( document ).on( "mobileinit", function(){
$.widget( "mobile.h2linker", $.mobile.widget, {
$.widget( "mobile.h2linker", {
options:{
initSelector: ":jqmData(quicklinks='true')"
},

_create:function(){
var self = this,
bodyid = "ui-page-top",
panel = "<div data-role='panel' class='jqm-nav-panel jqm-quicklink-panel' data-position='right' data-display='overlay' data-theme='c'><ul data-role='listview' data-inset='false' data-theme='d' data-divider-theme='d' data-icon='false' class='jqm-list'><li data-role='list-divider'>Jump to section</li></ul></div>",
panel = "<div data-role='panel' class='jqm-nav-panel jqm-quicklink-panel' data-position='right' data-display='overlay' data-theme='c'><ul data-role='listview' data-inset='false' data-theme='a' data-divider-theme='a' data-icon='false' class='jqm-list'><li data-role='list-divider'>Jump to section</li></ul></div>",
first = true,
h2dictionary = new Object();
if(typeof $("body").attr("id") === "undefined"){
15 demos/_assets/js/jqm-demos.js
View file
@@ -81,8 +81,8 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
$( this ).find( ".jqm-search ul.jqm-list" ).listview({
globalNav: "demos",
inset: true,
theme: "d",
dividerTheme: "d",
theme: null,
dividerTheme: null,
icon: false,
filter: true,
filterReveal: true,
@@ -124,8 +124,8 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
$( this ).find( ".jqm-content ul.jqm-list " ).listview({
globalNav: "demos",
inset: true,
theme: "d",
dividerTheme: "d",
theme: null,
dividerTheme: null,
icon: false,
filter: true,
filterReveal: true,
@@ -197,12 +197,11 @@ $( document ).on( "mobileinit", function() {
$.widget( "mobile.listview", $.mobile.listview, {
options: {
theme: null,
countTheme: "c",
headerTheme: "b",
dividerTheme: "b",
countTheme: null,
dividerTheme: null,
icon: "arrow-r",
splitIcon: "arrow-r",
splitTheme: "b",
splitTheme: null,
corners: true,
shadow: true,
inset: false,
2 demos/_assets/js/view-source.js
View file
@@ -156,7 +156,7 @@ $.fn.viewSourceCode = function() {
};

$( document ).on( "pagebeforecreate", "[data-role='page']", function() {
$( this ).find( "[data-demo-html='true'], [data-demo-js], [data-demo-css], [data-demo-php]" ).viewSourceCode();
$( this ).find( "[data-demo-html], [data-demo-js], [data-demo-css], [data-demo-php]" ).viewSourceCode();
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
});
2 demos/examples/index.php
View file
@@ -28,7 +28,7 @@

<p class="jqm-intro">This section explores how you can customize, extend, re-style and take full advantage of jQuery Mobile.</p>

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-divider-theme="d" data-icon="false" data-filter-placeholder="Search demos..." data-global-nav="demos" class="jqm-list">
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search demos..." data-global-nav="demos" class="jqm-list">
<?php include( '../nav-examples.php' ); ?>
</ul>

2 demos/examples/listviews/grid-listview.php
View file
@@ -33,7 +33,7 @@

<p>Create a listview from an unordered list. For this demo we used an inset listview to show you how you can apply the corner styling to the tiles as well.</p>

<p>In this demo there are two breakpoints. At the first breakpoint we swap from the regular stacked layout to a three column grid layout with tiles. At the second we swith from three to four columns.</p>
<p>In this demo there are two breakpoints. At the first breakpoint we swap from the regular stacked layout to a three column grid layout with tiles. At the second we switch from three to four columns.</p>

<p>The list items have a thumbail. In the grid layout those will get the same size as the tile. One list item doesn't hold an image to demonstrate how you can take advantage of class <code>ui-li-has-thumb</code> to adjust the style.</p>

5 demos/examples/popups/arrow.php
View file
@@ -13,7 +13,8 @@
<script src="../../../js/"></script>
<script>
$( document ).on( "click", function( e ) {
if ( $( e.target ).parents( "#arrow-popup-demo-content" ).length > 0 ) {
var el = $( e.target );
if ( el.attr( "id" ) === "clickable-area" || el.parents( "#clickable-area" ).length > 0 ) {
$( ".click-tracker" ).css( { left: e.pageX, top: e.pageY } );
$( "#arrow-popup" ).popup( "open", { x: e.pageX, y: e.pageY } );
}
@@ -58,7 +59,7 @@
<p>And here's another paragraph to help the popup achieve a decent height.</p>
</div>
</div>
<a href="#"><div class="ui-body-c really-tall"></div></a>
<a id="clickable-area" href="#"><div class="ui-body-c really-tall"></div></a>

</div><!-- /content -->

2 demos/examples/slider/tooltip.php
View file
@@ -33,6 +33,8 @@
<input type="range" name="slider-2" id="slider-2" min="0" max="100" value="50" data-show-value="true">
<label for="slider-3">Both options together:</label>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-show-value="true" data-popup-enabled="true">
<label for="slider-3">Both options together (mini):</label>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-show-value="true" data-popup-enabled="true" data-mini="true">
</form>
</div><!-- /demo-html -->

2 demos/faq/index.php
View file
@@ -28,7 +28,7 @@

<p class="jqm-intro">We've collected common questions and solutions to help get you up to speed and solve tricky issues when working with jQuery Mobile.</p>

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-divider-theme="d" data-icon="false" data-filter-placeholder="Search questions..." data-global-nav="demos" class="jqm-list">
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search questions..." data-global-nav="demos" class="jqm-list">
<?php include( '../nav-faq.php' ); ?>
</ul>

2 demos/faq/my-html-5-inputs-look-different-in-browsers.php
View file
@@ -30,7 +30,7 @@

<h2>Answer:</h2>

<p class="jqm-intro">jQuery Mobile does not have control over the the UI for most of the newer HTML5 input elements like date, color and number. The keyboards and pickers provided are browser-dependent but will safely fall back to a standard input if it's not supported. We do apply basic border and color styles to inputs for these elements so there is some visual consistency. See the <a href="../widgets/textinputs/index.html">text input page</a> for examples of all the input types available</p>
<p class="jqm-intro">jQuery Mobile does not have control over the UI for most of the newer HTML5 input elements like date, color and number. The keyboards and pickers provided are browser-dependent but will safely fall back to a standard input if it's not supported. We do apply basic border and color styles to inputs for these elements so there is some visual consistency. See the <a href="../widgets/textinputs/index.html">text input page</a> for examples of all the input types available</p>

<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">All Questions &amp; Answers</a>

4 demos/global-nav.php
View file
@@ -1,5 +1,5 @@
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list">
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="a" data-icon="false" data-global-nav="demos" class="jqm-list">
<li data-role="list-divider">jQuery Mobile Demos</li>
<li><a href="./">Home</a></li>
<li><a href="intro/">Introduction</a></li>
15 demos/index.php
View file
@@ -32,13 +32,13 @@

</div>

<div data-role="popup" id="api-popup" class="home-pop ui-content" data-theme="d" data-overlay-theme="b">
<div data-role="popup" id="api-popup" class="home-pop ui-content" data-theme="a" data-overlay-theme="b">
<p>The API docs are a separate site from the demos and cover the technical details of each jQuery Mobile plugin in depth.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-mini="true" data-theme="c">Stay here</a>
<a href="http://api.jquerymobile.com" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" data-theme="f">Visit API Site </a>
</div>

<ul data-role="listview" data-inset="true" data-theme="d" data-icon="false" data-filter-placeholder="Search..." class="jqm-list jqm-home-list">
<ul data-role="listview" data-inset="true" data-theme="a" data-icon="false" data-filter-placeholder="Search..." class="jqm-list jqm-home-list">
<li><a href="intro/"><h2>Introduction</h2><p>New to jQuery Mobile? Start here.</p></a></li>
<li><a href="examples/"><h2>Demo Showcase</h2><p>Examples of how to customize and extend jQuery Mobile.</p></a></li>
<li><a href="faq/"><h2>Questions &amp; Answers</h2><p>Common issues and questions, explained.</p></a></li>
@@ -49,9 +49,18 @@

<p class="jqm-intro">Test drive every component in the library, and easily build pages by copying and pasting the markup configuration you need.</p>

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-divider-theme="d" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list">
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list">
<?php include( 'nav-widgets.php' ); ?>
</ul>

<h2>Tests</h2>

<ul data-role="listview" data-inset="true" data-theme="a" data-divider-theme="a" data-icon="false" class="jqm-list">
<li data-role="list-divider">Theming</li>
<li><a href="test/theming/" data-ajax="false">Theme inheritance</a></li>
<li data-role="list-divider">Icons</li>
<li><a href="test/icons/font-icons.php" data-ajax="false">Font icons</a></li>
</ul>

</div><!-- /content -->

4 demos/nav-widgets.php
View file
@@ -46,7 +46,9 @@

<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>

<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
<li data-section="Widgets" data-filtertext="selectmenus native optgroup disabled forms"><a href="widgets/selects/">Select</a></li>

<li data-section="Widgets" data-filtertext="selectmenus custom multiple optgroup disabled forms"><a href="widgets/selects/custom-selects.php">Select, custom</a></li>

<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

142 demos/test/icons/font-icons.css
View file
@@ -0,0 +1,142 @@
@font-face {
font-family: 'icons'; /* custom set of 50 icons via Icomoon */
src:url('fonts/icons.eot');
src:url('fonts/icons.eot?#iefix') format('embedded-opentype'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype'),
url('fonts/icons.svg#icons') format('svg'); /* iefix not used in test */
font-weight: normal;
font-style: normal;
}

.test-btn {
font-size: 1em;
padding: .75em 2em;
margin: .5em 0;
display: block;
text-align: center;
box-sizing: border-box;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
position: relative;
}
.test-btn-inline {
padding-left: 1em;
padding-right: 1em;
}
a.test-btn {
text-decoration: none;
}
button.test-btn {
width: 100%;
cursor: pointer;
}
.test-btn:focus {
outline: 0;
z-index: 1;
}
.test-btn-inline,
.test-btn-icon-notext {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
button.test-btn-inline,
button.test-btn-icon-notext {
width: auto;
}
.test-listview,
.test-listview > li {
margin: 0;
padding: 0;
list-style: none;
}
.test-listview > li > a {
display: block;
margin: 0;
}
.test-listview > li:not(:first-child) > a {
border-top-width: 0;
}
.test-listview > li:first-child,
.test-listview > li:first-child > a {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.test-listview > li:last-child,
.test-listview > li:last-child > a {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
[class*="test-btn-icon"]:before {
font-family: 'icons';
speak: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1em; /* the selected icons have a (16 x N) px crisp size */
line-height: 1;
display: block;
position: absolute;
top: 50%;
margin-top: -.5em;
}
.test-icon-plus:before {
content: "\e00a";
}
.test-icon-minus:before {
content: "\e00b";
}
.test-icon-arrow-l:before {
content: "\e02c";
}
.test-icon-arrow-r:before {
content: "\e02d";
}
.test-btn-icon-left {
padding-left: 2em;
}
.test-btn-icon-right {
padding-right: 2em;
}
.test-btn-icon-left:before {
left: .5em;
}
.test-btn-icon-right:before {
right: .5em;
}
.test-btn-icon-notext,
button.test-btn-icon-notext {
padding: 0;
height: 2.5em;
width: 2.5em;
}
.test-btn-icon-notext:before {
left: 50%;
margin-left: -.5em;
}
.test-btn-icon-notext.ui-btn-corner-all {
-webkit-border-radius: 1.25em;
border-radius: 1.25em;
}
.ui-btn-a,
.ui-btn-a:link,
.ui-btn-a:visited,
.ui-btn-a:before {
color: #777;
}
.ui-btn-a:hover,
.ui-btn-a:hover:before {
color: #444;
}
.ui-btn-a:active,
.ui-btn-a:active:before {
color: #111;
}
54 demos/test/icons/font-icons.php
View file
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font icons test - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="font-icons.css">
<link rel="shortcut icon" href="../../favicon.ico">
<script src="../../../js/jquery.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<a href="../../" data-rel="back">Back</a>
<h1>Font icons test</h1>
<div style="margin:1em 0;">
<a href="#" data-role="none" class="test-btn test-btn-icon-notext test-icon-plus ui-btn-a ui-btn-corner-all ui-shadow"><span class="ui-hidden-accessible">Icon only anchor</span></a>
<button data-role="none" class="test-btn test-btn-icon-notext test-icon-minus ui-btn-a ui-btn-corner-all ui-shadow"><span class="ui-hidden-accessible">Icon only button</span></button>
</div>
<div style="margin:1em 0;">
<a href="#" data-role="none" class="test-btn test-btn-icon-left test-icon-arrow-l ui-btn-a ui-btn-corner-all ui-shadow">Anchor</a>
<button data-role="none" class="test-btn test-btn-icon-right test-icon-arrow-r ui-btn-a ui-btn-corner-all ui-shadow">Button</button>
</div>
<div style="margin:1em 0;">
<a href="#" data-role="none" class="test-btn test-btn-icon-left test-icon-arrow-l test-btn-inline ui-btn-a ui-btn-corner-all ui-shadow">Anchor</a>
<button data-role="none" class="test-btn test-btn-icon-right test-icon-arrow-r test-btn-inline ui-btn-a ui-btn-corner-all ui-shadow">Button</button>
</div>
<ul class="test-listview ui-corner-all ui-shadow">
<li><a href="#" data-role="none" class="test-btn test-btn-icon-right test-icon-arrow-r ui-btn-a">List button</a></li>
<li><a href="#" data-role="none" class="test-btn test-btn-icon-right test-icon-arrow-r ui-btn-a">List button</a></li>
<li><a href="#" data-role="none" class="test-btn test-btn-icon-right test-icon-arrow-r ui-btn-a">List button</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>