jquery_mobile_rails 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,6 @@
1
1
  /*
2
- * jQuery Mobile Git Build: SHA1: caa77b258660731d663844fe7867aa2c3a107ab1 <> Date: Wed Feb 20 15:03:27 2013 -0500
2
+ * jQuery Mobile 1.3.1
3
+ * Git HEAD hash: 74b4bec049fd93e4fe40205e6157de16eb64eb46 <> Date: Wed Apr 10 2013 21:57:23 UTC
3
4
  * http://jquerymobile.com
4
5
  *
5
6
  * Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
@@ -9,22 +10,28 @@
9
10
  */
10
11
 
11
12
 
12
-
13
+ /* some unsets - more probably needed */
13
14
  .ui-mobile, .ui-mobile body { height: 99.9%; }
14
15
  .ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
15
16
  .ui-mobile a img, .ui-mobile fieldset { border-width: 0; }
17
+ /* responsive page widths */
16
18
  .ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
19
+ /* Issue #2066 */
17
20
  body.ui-mobile-viewport,
18
21
  div.ui-mobile-viewport { overflow-x: hidden; }
22
+ /* "page" containers - full-screen views, one should always be in view post-pageload */
19
23
  .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
20
24
  .ui-mobile .ui-page-active { display: block; overflow: visible; }
25
+ /* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
21
26
  .ui-page { outline: none; }
27
+ /*orientations from js are available */
22
28
  @media screen and (orientation: portrait){
23
- .ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
29
+ .ui-mobile .ui-page { min-height: 420px; }
24
30
  }
25
31
  @media screen and (orientation: landscape){
26
- .ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
32
+ .ui-mobile .ui-page { min-height: 300px; }
27
33
  }
34
+ /* loading screen */
28
35
  .ui-loading .ui-loader { display: block; }
29
36
  .ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
30
37
  .ui-loader-default { background: none; filter: Alpha(Opacity=18); opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
@@ -36,7 +43,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
36
43
  .ui-loader-textonly { padding: 15px; margin-left: -115px; }
37
44
  .ui-loader-textonly .ui-icon { display: none; }
38
45
  .ui-loader-fakefix { position: absolute; }
46
+ /*fouc*/
39
47
  .ui-mobile-rendering > * { visibility: hidden; }
48
+ /*headers, content panels*/
40
49
  .ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; }
41
50
  .ui-bar { font-size: 16px; margin: 0; }
42
51
  .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
@@ -60,7 +69,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
60
69
  .ui-header-fixed > .ui-btn-icon-notext { top: 7px;}
61
70
  .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
62
71
  .ui-footer .ui-title { margin: .6em 15px .8em; }
72
+ /* content area*/
63
73
  .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
74
+ /* corner styling for dialogs and popups */
64
75
  .ui-corner-all > .ui-header:first-child,
65
76
  .ui-corner-all > .ui-content:first-child,
66
77
  .ui-corner-all > .ui-footer:first-child {
@@ -77,10 +88,14 @@ div.ui-mobile-viewport { overflow-x: hidden; }
77
88
  -webkit-border-bottom-right-radius: inherit;
78
89
  border-bottom-right-radius: inherit;
79
90
  }
91
+ /* icons sizing */
80
92
  .ui-icon { width: 18px; height: 18px; }
93
+ /* non-js content hiding */
81
94
  .ui-nojs { position: absolute; left: -9999px; }
95
+ /* accessible content hiding */
82
96
  .ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
83
97
  .ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
98
+ /* Transitions originally inspired by those from jQtouch, nice work, folks */
84
99
  .ui-mobile-viewport-transitioning,
85
100
  .ui-mobile-viewport-transitioning .ui-page {
86
101
  width: 100%;
@@ -94,24 +109,18 @@ div.ui-mobile-viewport { overflow-x: hidden; }
94
109
  opacity: 0;
95
110
  }
96
111
  .in {
97
- -webkit-animation-fill-mode: both;
98
112
  -webkit-animation-timing-function: ease-out;
99
113
  -webkit-animation-duration: 350ms;
100
- -moz-animation-fill-mode: both;
101
114
  -moz-animation-timing-function: ease-out;
102
115
  -moz-animation-duration: 350ms;
103
- animation-fill-mode: both;
104
116
  animation-timing-function: ease-out;
105
117
  animation-duration: 350ms;
106
118
  }
107
119
  .out {
108
- -webkit-animation-fill-mode: both;
109
120
  -webkit-animation-timing-function: ease-in;
110
121
  -webkit-animation-duration: 225ms;
111
- -moz-animation-fill-mode: both;
112
122
  -moz-animation-timing-function: ease-in;
113
123
  -moz-animation-duration: 225ms;
114
- animation-fill-mode: both;
115
124
  animation-timing-function: ease-in;
116
125
  animation-duration: 225ms;
117
126
  }
@@ -256,9 +265,10 @@ div.ui-mobile-viewport { overflow-x: hidden; }
256
265
  opacity: 0;
257
266
  }
258
267
  }
268
+ /* keyframes for slidein from sides */
259
269
  @-webkit-keyframes slideinfromright {
260
- from { -webkit-transform: translateX(100%); }
261
- to { -webkit-transform: translateX(0); }
270
+ from { -webkit-transform: translate3d(100%,0,0); }
271
+ to { -webkit-transform: translate3d(0,0,0); }
262
272
  }
263
273
  @-moz-keyframes slideinfromright {
264
274
  from { -moz-transform: translateX(100%); }
@@ -269,8 +279,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
269
279
  to { transform: translateX(0); }
270
280
  }
271
281
  @-webkit-keyframes slideinfromleft {
272
- from { -webkit-transform: translateX(-100%); }
273
- to { -webkit-transform: translateX(0); }
282
+ from { -webkit-transform: translate3d(-100%,0,0); }
283
+ to { -webkit-transform: translate3d(0,0,0); }
274
284
  }
275
285
  @-moz-keyframes slideinfromleft {
276
286
  from { -moz-transform: translateX(-100%); }
@@ -280,9 +290,10 @@ div.ui-mobile-viewport { overflow-x: hidden; }
280
290
  from { transform: translateX(-100%); }
281
291
  to { transform: translateX(0); }
282
292
  }
293
+ /* keyframes for slideout to sides */
283
294
  @-webkit-keyframes slideouttoleft {
284
- from { -webkit-transform: translateX(0); }
285
- to { -webkit-transform: translateX(-100%); }
295
+ from { -webkit-transform: translate3d(0,0,0); }
296
+ to { -webkit-transform: translate3d(-100%,0,0); }
286
297
  }
287
298
  @-moz-keyframes slideouttoleft {
288
299
  from { -moz-transform: translateX(0); }
@@ -293,8 +304,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
293
304
  to { transform: translateX(-100%); }
294
305
  }
295
306
  @-webkit-keyframes slideouttoright {
296
- from { -webkit-transform: translateX(0); }
297
- to { -webkit-transform: translateX(100%); }
307
+ from { -webkit-transform: translate3d(0,0,0); }
308
+ to { -webkit-transform: translate3d(100%,0,0); }
298
309
  }
299
310
  @-moz-keyframes slideouttoright {
300
311
  from { -moz-transform: translateX(0); }
@@ -313,7 +324,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
313
324
  animation-duration: 350ms;
314
325
  }
315
326
  .slide.out {
316
- -webkit-transform: translateX(-100%);
327
+ -webkit-transform: translate3d(-100%,0,0);
317
328
  -webkit-animation-name: slideouttoleft;
318
329
  -moz-transform: translateX(-100%);
319
330
  -moz-animation-name: slideouttoleft;
@@ -321,7 +332,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
321
332
  animation-name: slideouttoleft;
322
333
  }
323
334
  .slide.in {
324
- -webkit-transform: translateX(0);
335
+ -webkit-transform: translate3d(0,0,0);
325
336
  -webkit-animation-name: slideinfromright;
326
337
  -moz-transform: translateX(0);
327
338
  -moz-animation-name: slideinfromright;
@@ -329,7 +340,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
329
340
  animation-name: slideinfromright;
330
341
  }
331
342
  .slide.out.reverse {
332
- -webkit-transform: translateX(100%);
343
+ -webkit-transform: translate3d(100%,0,0);
333
344
  -webkit-animation-name: slideouttoright;
334
345
  -moz-transform: translateX(100%);
335
346
  -moz-animation-name: slideouttoright;
@@ -337,7 +348,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
337
348
  animation-name: slideouttoright;
338
349
  }
339
350
  .slide.in.reverse {
340
- -webkit-transform: translateX(0);
351
+ -webkit-transform: translate3d(0,0,0);
341
352
  -webkit-animation-name: slideinfromleft;
342
353
  -moz-transform: translateX(0);
343
354
  -moz-animation-name: slideinfromleft;
@@ -388,6 +399,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
388
399
  animation-name: fadein;
389
400
  animation-duration: 200ms;
390
401
  }
402
+ /* slide down */
391
403
  .slidedown.out {
392
404
  -webkit-animation-name: fadeout;
393
405
  -webkit-animation-duration: 100ms;
@@ -450,6 +462,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
450
462
  from { transform: translateY(0); }
451
463
  to { transform: translateY(-100%); }
452
464
  }
465
+ /* slide up */
453
466
  .slideup.out {
454
467
  -webkit-animation-name: fadeout;
455
468
  -webkit-animation-duration: 100ms;
@@ -512,6 +525,12 @@ div.ui-mobile-viewport { overflow-x: hidden; }
512
525
  from { transform: translateY(0); }
513
526
  to { transform: translateY(100%); }
514
527
  }
528
+ /* The properties in this rule are only necessary for the 'flip' transition.
529
+ * We need specify the perspective to create a projection matrix. This will add
530
+ * some depth as the element flips. The depth number represents the distance of
531
+ * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
532
+ * value.
533
+ */
515
534
  .viewport-flip {
516
535
  -webkit-perspective: 1000;
517
536
  -moz-perspective: 1000;
@@ -520,7 +539,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
520
539
  }
521
540
  .flip {
522
541
  -webkit-backface-visibility: hidden;
523
- -webkit-transform: translateX(0);
542
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
524
543
  -moz-backface-visibility: hidden;
525
544
  -moz-transform: translateX(0);
526
545
  backface-visibility: hidden;
@@ -606,6 +625,12 @@ div.ui-mobile-viewport { overflow-x: hidden; }
606
625
  from { transform: rotateY(90deg) scale(.9); }
607
626
  to { transform: rotateY(0); }
608
627
  }
628
+ /* The properties in this rule are only necessary for the 'flip' transition.
629
+ * We need specify the perspective to create a projection matrix. This will add
630
+ * some depth as the element flips. The depth number represents the distance of
631
+ * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
632
+ * value.
633
+ */
609
634
  .viewport-turn {
610
635
  -webkit-perspective: 200px;
611
636
  -moz-perspective: 200px;
@@ -615,7 +640,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
615
640
  }
616
641
  .turn {
617
642
  -webkit-backface-visibility: hidden;
618
- -webkit-transform: translateX(0);
643
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
619
644
  -webkit-transform-origin: 0;
620
645
 
621
646
  -moz-backface-visibility: hidden;
@@ -707,6 +732,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
707
732
  from { transform: rotateY(90deg) scale(.9); }
708
733
  to { transform: rotateY(0); }
709
734
  }
735
+ /* flow transition */
710
736
  .flow {
711
737
  -webkit-transform-origin: 50% 30%;
712
738
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
@@ -824,21 +850,29 @@ div.ui-mobile-viewport { overflow-x: hidden; }
824
850
  30%, 40% { transform: translateX(0) scale(.7); }
825
851
  100% { transform: translateX(0) scale(1); }
826
852
  }
853
+ /* content configurations. */
827
854
  .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
828
855
  .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; }
856
+ /* grid solo: 100 - single item fallback */
829
857
  .ui-grid-solo .ui-block-a { display: block; float: none; }
858
+ /* Lower percentages for older browsers (i.e. IE7) to prevent wrapping. -.5px to fix BB5 wrap issue. */
859
+ /* grid a: 50/50 */
830
860
  .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%; }
831
861
  .ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; }
832
862
  .ui-grid-a .ui-block-a { clear: left; }
863
+ /* grid b: 33/33/33 */
833
864
  .ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.25%; }
834
865
  .ui-grid-b > :nth-child(n) { width: 33.333%; margin-right: -.5px; }
835
866
  .ui-grid-b .ui-block-a { clear: left; }
867
+ /* grid c: 25/25/25/25 */
836
868
  .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%; }
837
869
  .ui-grid-c > :nth-child(n) { width: 25%; margin-right: -.5px; }
838
870
  .ui-grid-c .ui-block-a { clear: left; }
871
+ /* grid d: 20/20/20/20/20 */
839
872
  .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%; }
840
873
  .ui-grid-d > :nth-child(n) { width: 20%; }
841
874
  .ui-grid-d .ui-block-a { clear: left; }
875
+ /* preset breakpoint to switch to stacked grid styles below 35em (560px) */
842
876
  @media all and (max-width: 35em) {
843
877
  .ui-responsive .ui-block-a,
844
878
  .ui-responsive .ui-block-b,
@@ -849,6 +883,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
849
883
  float:none;
850
884
  }
851
885
  }
886
+ /* fixed page header & footer configuration */
852
887
  .ui-header-fixed,
853
888
  .ui-footer-fixed {
854
889
  left: 0;
@@ -899,6 +934,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
899
934
  .ui-footer-fixed .ui-btn {
900
935
  z-index: 10;
901
936
  }
937
+ /* workarounds for other widgets */
902
938
  .ui-android-2x-fixed .ui-li-has-thumb {
903
939
  -webkit-transform: translate3d(0,0,0);
904
940
  }
@@ -909,6 +945,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
909
945
  .ui-navbar ul { list-style:none; margin: 0; padding: 0; position: relative; display: block; border: 0; max-width: 100%; overflow: visible; zoom: 1; }
910
946
  .ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; }
911
947
  .ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; }
948
+ /* add border if not in header/footer (full width) */
912
949
  .ui-navbar li:last-child .ui-btn,
913
950
  .ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; }
914
951
  .ui-header .ui-navbar li:last-child .ui-btn,
@@ -918,6 +955,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
918
955
  .ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; }
919
956
  .ui-header .ui-navbar li .ui-btn,
920
957
  .ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
958
+ /* fixing gaps caused by subpixel problem */
921
959
  .ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn,
922
960
  .ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; }
923
961
  .ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
@@ -940,7 +978,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
940
978
  .ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; zoom: 1; }
941
979
  .ui-btn input, .ui-btn button { z-index: 2; }
942
980
  .ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
943
- .ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; }
981
+ .ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; } /* .ui-mobile to increase specificity level */
944
982
  .ui-btn-block { display: block; }
945
983
  .ui-header > .ui-btn,
946
984
  .ui-footer > .ui-btn { display: inline-block; margin: 0; }
@@ -977,11 +1015,12 @@ div.ui-btn-text { width: auto; }
977
1015
  .ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
978
1016
  .ui-mini.ui-btn-icon-bottom .ui-btn-inner,
979
1017
  .ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
980
- .ui-btn-inner,
981
- .ui-btn-text {
1018
+ /* Corner styling inheritance */
1019
+ .ui-btn-inner {
982
1020
  -webkit-border-radius: inherit;
983
1021
  border-radius: inherit;
984
1022
  }
1023
+ /*btn icon positioning*/
985
1024
  .ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
986
1025
  .ui-btn-icon-left > .ui-btn-inner > .ui-icon, .ui-btn-icon-right > .ui-btn-inner > .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
987
1026
  .ui-btn-icon-top .ui-btn-inner .ui-icon, .ui-btn-icon-bottom .ui-btn-inner .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
@@ -1005,7 +1044,9 @@ div.ui-btn-text { width: auto; }
1005
1044
  .ui-footer .ui-btn-icon-bottom .ui-icon,
1006
1045
  .ui-mini.ui-btn-icon-bottom .ui-icon,
1007
1046
  .ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
1047
+ /*hiding native button,inputs */
1008
1048
  .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; border: none; text-indent: -9999px; }
1049
+ /* Fixes IE/WP filter alpha opacity bugs */
1009
1050
  .ui-disabled .ui-btn-hidden { display: none; }
1010
1051
  .ui-disabled { z-index: 1; }
1011
1052
  .ui-field-contain .ui-btn.ui-submit { margin: 0; }
@@ -1029,18 +1070,18 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1029
1070
  .ui-collapsible-heading .ui-btn-icon-bottom .ui-btn-inner { text-align: center; }
1030
1071
  .ui-collapsible-heading .ui-btn-icon-left.ui-mini .ui-btn-inner { padding-left: 30px; }
1031
1072
  .ui-collapsible-heading .ui-btn-icon-right.ui-mini .ui-btn-inner { padding-right: 30px; }
1032
- .ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
1073
+ .ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0 1px 2px; text-indent: -9999px; }
1033
1074
  .ui-collapsible-heading .ui-btn span.ui-btn .ui-btn-inner { padding: 10px 0; }
1034
1075
  .ui-collapsible-heading .ui-btn span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
1035
- .ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
1076
+ .ui-collapsible-heading-status { position: absolute; top: -9999px; left: 0; }
1036
1077
  .ui-collapsible-content {
1037
1078
  display: block;
1038
1079
  margin: 0 -15px;
1039
1080
  padding: 10px 15px;
1040
1081
  border-left-width: 0;
1041
1082
  border-right-width: 0;
1042
- border-top: none;
1043
- background-image: none;
1083
+ border-top: none; /* Overrides ui-body-* */
1084
+ background-image: none; /* Overrides ui-body-* */
1044
1085
  }
1045
1086
  .ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
1046
1087
  .ui-collapsible-content-collapsed { display: none; }
@@ -1101,6 +1142,7 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1101
1142
  .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
1102
1143
  .ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
1103
1144
  .ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
1145
+ /* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
1104
1146
  .ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }
1105
1147
  .ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
1106
1148
  .ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
@@ -1155,7 +1197,7 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1155
1197
  .ui-hide-label .ui-controlgroup-controls { width: 100%; }
1156
1198
  }
1157
1199
  .ui-dialog {
1158
- background: none !important;
1200
+ background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
1159
1201
  }
1160
1202
  .ui-dialog-contain {
1161
1203
  width: 92.5%;
@@ -1188,13 +1230,13 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1188
1230
  }
1189
1231
  .ui-popup-open .ui-header-fixed,
1190
1232
  .ui-popup-open .ui-footer-fixed {
1191
- position: absolute !important;
1233
+ position: absolute !important; /* See line #553 of popup.js */
1192
1234
  }
1193
1235
  .ui-popup-screen {
1194
- background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
1195
- top: 0px;
1196
- left: 0px;
1197
- right: 0px;
1236
+ 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. */
1237
+ top: 0;
1238
+ left: 0;
1239
+ right: 0;
1198
1240
  bottom: 1px;
1199
1241
  position: absolute;
1200
1242
  filter: Alpha(Opacity=0);
@@ -1339,10 +1381,11 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1339
1381
  .ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
1340
1382
  .ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
1341
1383
  .ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }
1384
+ /* input, label positioning */
1342
1385
  .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; }
1343
1386
  .ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
1344
1387
  .ui-field-contain:last-child { border-bottom-width: 0; }
1345
- .ui-field-contain { max-width: 100%; }
1388
+ .ui-field-contain { max-width: 100%; } /* This prevents horizontal scrollbar in IE7 */
1346
1389
  @media all and (min-width: 28em){
1347
1390
  .ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
1348
1391
  }
@@ -1350,8 +1393,10 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1350
1393
  .ui-select select { position: absolute; left: -9999px; top: -9999px; }
1351
1394
  .ui-select .ui-btn { opacity: 1; }
1352
1395
  .ui-field-contain .ui-select .ui-btn { margin: 0; }
1396
+ /* 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. */
1353
1397
  .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; }
1354
1398
  .ui-select .ui-disabled { opacity: .3; }
1399
+ /* Display none because of issues with IE/WP's filter alpha opacity */
1355
1400
  .ui-select .ui-disabled select { display: none; }
1356
1401
  @-moz-document url-prefix() { .ui-select .ui-btn select { opacity: 0.0001; }}
1357
1402
  .ui-select .ui-btn.ui-select-nativeonly { border-radius: 0; border: 0; }
@@ -1365,9 +1410,11 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1365
1410
  .ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
1366
1411
  .ui-select .ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 45px; }
1367
1412
  .ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 32px; }
1413
+ /* labels */
1368
1414
  label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
1415
+ /*listbox*/
1369
1416
  .ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden !important;
1370
- }
1417
+ /* This !important is required for iPad Safari specifically. See https://github.com/jquery/jquery-mobile/issues/2647 */ }
1371
1418
  .ui-select .ui-btn-text { text-overflow: ellipsis; }
1372
1419
  .ui-selectmenu { padding: 6px; min-width: 160px; }
1373
1420
  .ui-selectmenu .ui-listview { margin: 0; }
@@ -1383,6 +1430,7 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin
1383
1430
  .ui-field-contain .ui-select { width: 78%; display: inline-block; }
1384
1431
  .ui-hide-label .ui-select { width: 100%; }
1385
1432
  }
1433
+ /* 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 */
1386
1434
  .ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
1387
1435
  label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
1388
1436
  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; }
@@ -1403,9 +1451,11 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
1403
1451
  textarea.ui-mini { height: 45px; }
1404
1452
  .ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
1405
1453
  .ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
1406
- .ui-mini .ui-input-clear { margin-top: -14px; right: -3px; }
1454
+ .ui-mini .ui-input-clear { right: -3px; }
1407
1455
  .ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
1456
+ /* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
1408
1457
  input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }
1458
+ /* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
1409
1459
  input[type=number]::-webkit-outer-spin-button { margin: 0; }
1410
1460
  @media all and (min-width: 28em){
1411
1461
  .ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
@@ -1434,6 +1484,7 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
1434
1484
  .ui-rangeslider:after {
1435
1485
  clear: both;
1436
1486
  }
1487
+ /* Margin-top/bottom: .5em * 16px/14px to make it equal to ui-rangeslider-sliders margin (input font-size is 14px) */
1437
1488
  .ui-rangeslider input.ui-input-text.ui-slider-input {
1438
1489
  margin: .57143em 0;
1439
1490
  }
@@ -1478,11 +1529,12 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
1478
1529
  border-width: 0;
1479
1530
  height: 0;
1480
1531
  }
1481
- html >body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
1532
+ /* this makes ie6 and ie7 set height to 0 to fix z-index problem */
1533
+ html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
1482
1534
  height: 15px;
1483
1535
  border-width: 1px;
1484
1536
  }
1485
- html >body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
1537
+ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
1486
1538
  height: 12px;
1487
1539
  }
1488
1540
  @media all and (min-width: 28em){
@@ -1540,7 +1592,11 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
1540
1592
  .ui-li-static { background-image: none; }
1541
1593
  .ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
1542
1594
  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) ". "; }
1543
- ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
1595
+ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
1596
+ .ui-listview .ui-li > .ui-btn-text {
1597
+ -webkit-border-radius: inherit;
1598
+ border-radius: inherit;
1599
+ }
1544
1600
  .ui-listview > .ui-li.ui-first-child,
1545
1601
  .ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
1546
1602
  -webkit-border-top-right-radius: inherit;
@@ -1582,6 +1638,8 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
1582
1638
  .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; }
1583
1639
  .ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
1584
1640
  .ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
1641
+ ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
1642
+ ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
1585
1643
  .ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
1586
1644
  .ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
1587
1645
  .ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
@@ -1601,13 +1659,14 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
1601
1659
  .ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
1602
1660
  .ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
1603
1661
  .ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
1604
- .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
1662
+ .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }
1605
1663
  .ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
1606
1664
  .ui-collapsible-content .ui-listview-filter { margin: -10px -15px 10px -15px; border-bottom: inherit; }
1607
1665
  .ui-listview-filter-inset { margin: -15px -5px; background: transparent; }
1608
1666
  .ui-collapsible-content .ui-listview-filter-inset { margin: -5px; border-bottom-width: 0; }
1609
1667
  .ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
1610
1668
  .ui-li.ui-screen-hidden{ display:none; }
1669
+ /* Odd iPad positioning issue. */
1611
1670
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
1612
1671
  .ui-li .ui-btn-text { overflow: visible; }
1613
1672
  }
@@ -1640,6 +1699,7 @@ div.ui-slider:before, div.ui-slider:after {
1640
1699
  div.ui-slider:after {
1641
1700
  clear: both;
1642
1701
  }
1702
+ /* High level of specificity to override Textinput CSS. */
1643
1703
  input.ui-input-text.ui-slider-input {
1644
1704
  display: block;
1645
1705
  float: left;
@@ -1649,7 +1709,7 @@ input.ui-input-text.ui-slider-input {
1649
1709
  height: 22px;
1650
1710
  line-height: 22px;
1651
1711
  font-size: 14px;
1652
- border: none;
1712
+ border-width: 0;
1653
1713
  background-image: none;
1654
1714
  font-weight: bold;
1655
1715
  text-align: center;
@@ -1681,6 +1741,7 @@ input.ui-input-text.ui-slider-input {
1681
1741
  border: none;
1682
1742
  height: 100%;
1683
1743
  }
1744
+ /* High level of specificity to override button margins in grids */
1684
1745
  .ui-slider-track .ui-btn.ui-slider-handle,
1685
1746
  .ui-slider-switch .ui-btn.ui-slider-handle {
1686
1747
  position: absolute;
@@ -1717,6 +1778,11 @@ div.ui-slider-switch {
1717
1778
  margin: .5em 0;
1718
1779
  top: 0;
1719
1780
  }
1781
+ /* reset the clearfix */
1782
+ div.ui-slider-switch:before, div.ui-slider-switch:after {
1783
+ display: none;
1784
+ clear: none;
1785
+ }
1720
1786
  div.ui-slider-switch.ui-mini {
1721
1787
  width: 5em;
1722
1788
  height: 29px;
@@ -1830,32 +1896,40 @@ div.ui-slider-switch.ui-mini {
1830
1896
  margin-bottom:1.4em;
1831
1897
  opacity: .5;
1832
1898
  }
1899
+ /* Add strokes between each row */
1833
1900
  .table-stroke thead th {
1834
- border-bottom: 1px solid #d6d6d6;
1901
+ border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
1835
1902
  border-bottom: 1px solid rgba(0, 0, 0, .1);
1836
1903
  }
1837
1904
  .table-stroke tbody th,
1838
1905
  .table-stroke tbody td {
1839
- border-bottom: 1px solid #e6e6e6;
1906
+ border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */
1840
1907
  border-bottom: 1px solid rgba(0, 0, 0, .05);
1841
1908
  }
1909
+ /* Add alternating row stripes */
1842
1910
  .table-stripe tbody tr:nth-child(odd) td,
1843
1911
  .table-stripe tbody tr:nth-child(odd) th {
1844
- background-color: #eeeeee;
1912
+ background-color: #eeeeee; /* non-RGBA fallback */
1845
1913
  background-color: rgba(0,0,0,0.04);
1846
1914
  }
1915
+ /* Add stroke to the header and last item */
1847
1916
  .table-stripe thead th,
1848
1917
  .table-stripe tbody tr:last-child {
1849
- border-bottom: 1px solid #d6d6d6;
1918
+ border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
1850
1919
  border-bottom: 1px solid rgba(0, 0, 0, .1);
1851
1920
  }
1921
+ /*
1922
+ Styles for the table columntoggle mode
1923
+ */
1852
1924
  .ui-table-columntoggle-btn {
1853
1925
  float: right;
1854
1926
  margin-bottom:.8em;
1855
1927
  }
1928
+ /* Remove top/bottom margins around the fieldcontain on check list */
1856
1929
  .ui-table-columntoggle-popup fieldset {
1857
1930
  margin:0;
1858
1931
  }
1932
+ /* Hide all prioritized columns by default */
1859
1933
  @media only all {
1860
1934
  th.ui-table-priority-6,
1861
1935
  td.ui-table-priority-6,
@@ -1872,76 +1946,88 @@ div.ui-slider-switch.ui-mini {
1872
1946
  display: none;
1873
1947
  }
1874
1948
  }
1949
+ /* Preset breakpoints if ".ui-responsive" class added to table */
1950
+ /* Show priority 1 at 320px (20em x 16px) */
1875
1951
  @media screen and (min-width: 20em) {
1876
1952
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-1,
1877
1953
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-1 {
1878
1954
  display: table-cell;
1879
1955
  }
1880
1956
  }
1957
+ /* Show priority 2 at 480px (30em x 16px) */
1881
1958
  @media screen and (min-width: 30em) {
1882
1959
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-2,
1883
1960
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-2 {
1884
1961
  display: table-cell;
1885
1962
  }
1886
1963
  }
1964
+ /* Show priority 3 at 640px (40em x 16px) */
1887
1965
  @media screen and (min-width: 40em) {
1888
1966
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-3,
1889
1967
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-3 {
1890
1968
  display: table-cell;
1891
1969
  }
1892
1970
  }
1971
+ /* Show priority 4 at 800px (50em x 16px) */
1893
1972
  @media screen and (min-width: 50em) {
1894
1973
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-4,
1895
1974
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-4 {
1896
1975
  display: table-cell;
1897
1976
  }
1898
1977
  }
1978
+ /* Show priority 5 at 960px (60em x 16px) */
1899
1979
  @media screen and (min-width: 60em) {
1900
1980
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-5,
1901
1981
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-5 {
1902
1982
  display: table-cell;
1903
1983
  }
1904
1984
  }
1985
+ /* Show priority 6 at 1,120px (70em x 16px) */
1905
1986
  @media screen and (min-width: 70em) {
1906
1987
  .ui-table-columntoggle.ui-responsive th.ui-table-priority-6,
1907
1988
  .ui-table-columntoggle.ui-responsive td.ui-table-priority-6 {
1908
1989
  display: table-cell;
1909
1990
  }
1910
1991
  }
1992
+ /* Unchecked manually: Always hide */
1911
1993
  .ui-table-columntoggle th.ui-table-cell-hidden,
1912
1994
  .ui-table-columntoggle td.ui-table-cell-hidden,
1913
1995
  .ui-table-columntoggle.ui-responsive th.ui-table-cell-hidden,
1914
1996
  .ui-table-columntoggle.ui-responsive td.ui-table-cell-hidden {
1915
1997
  display: none;
1916
1998
  }
1999
+ /* Checked manually: Always show */
1917
2000
  .ui-table-columntoggle th.ui-table-cell-visible,
1918
2001
  .ui-table-columntoggle td.ui-table-cell-visible,
1919
2002
  .ui-table-columntoggle.ui-responsive th.ui-table-cell-visible,
1920
2003
  .ui-table-columntoggle.ui-responsive td.ui-table-cell-visible {
1921
2004
  display: table-cell;
1922
2005
  }
2006
+ /*
2007
+ Styles for the table columntoggle mode
2008
+ */
1923
2009
  .ui-table-reflow td .ui-table-cell-label,
1924
2010
  .ui-table-reflow th .ui-table-cell-label {
1925
2011
  display: none;
1926
2012
  }
1927
-
2013
+ /* Mobile first styles: Begin with the stacked presentation at narrow widths */
1928
2014
  @media only all {
1929
-
2015
+ /* Hide the table headers */
1930
2016
  .ui-table-reflow thead td,
1931
2017
  .ui-table-reflow thead th {
1932
2018
  display: none;
1933
2019
  }
1934
-
2020
+ /* Show the table cells as a block level element */
1935
2021
  .ui-table-reflow td,
1936
2022
  .ui-table-reflow th {
1937
2023
  text-align: left;
1938
2024
  display: block;
1939
2025
  }
1940
-
2026
+ /* Add a fair amount of top margin to visually separate each row when stacked */
1941
2027
  .ui-table-reflow tbody th {
1942
2028
  margin-top: 3em;
1943
2029
  }
1944
-
2030
+ /* Make the label elements a percentage width */
1945
2031
  .ui-table-reflow td .ui-table-cell-label,
1946
2032
  .ui-table-reflow th .ui-table-cell-label {
1947
2033
  display: block;
@@ -1950,7 +2036,7 @@ div.ui-slider-switch.ui-mini {
1950
2036
  display: inline-block;
1951
2037
  margin: -.4em 1em -.4em -.4em;
1952
2038
  }
1953
-
2039
+ /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
1954
2040
  .ui-table-reflow th .ui-table-cell-label-top,
1955
2041
  .ui-table-reflow td .ui-table-cell-label-top {
1956
2042
  display: block;
@@ -1961,13 +2047,13 @@ div.ui-slider-switch.ui-mini {
1961
2047
  font-weight: normal;
1962
2048
  }
1963
2049
  }
1964
-
2050
+ /* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */
1965
2051
  @media ( min-width: 35em ) {
1966
-
2052
+ /* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
1967
2053
  .ui-table-reflow.ui-responsive {
1968
2054
  display: table-row-group;
1969
2055
  }
1970
-
2056
+ /* Show the table header rows */
1971
2057
  .ui-table-reflow.ui-responsive td,
1972
2058
  .ui-table-reflow.ui-responsive th,
1973
2059
  .ui-table-reflow.ui-responsive tbody th,
@@ -1977,14 +2063,14 @@ div.ui-slider-switch.ui-mini {
1977
2063
  display: table-cell;
1978
2064
  margin: 0;
1979
2065
  }
1980
-
2066
+ /* Hide the labels in each cell */
1981
2067
  .ui-table-reflow.ui-responsive td .ui-table-cell-label,
1982
2068
  .ui-table-reflow.ui-responsive th .ui-table-cell-label {
1983
2069
  display: none;
1984
2070
  }
1985
2071
  }
1986
-
1987
-
2072
+ /* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
2073
+ /* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
1988
2074
  @media ( max-width: 35em ) {
1989
2075
  .ui-table-reflow.ui-responsive td,
1990
2076
  .ui-table-reflow.ui-responsive th {
@@ -1996,9 +2082,11 @@ div.ui-slider-switch.ui-mini {
1996
2082
  clear: left;
1997
2083
  }
1998
2084
  }
2085
+ /* panel */
1999
2086
  .ui-panel {
2000
2087
  width: 17em;
2001
2088
  min-height: 100%;
2089
+ max-height: none;
2002
2090
  border-width: 0;
2003
2091
  position: absolute;
2004
2092
  top: 0;
@@ -2006,15 +2094,17 @@ div.ui-slider-switch.ui-mini {
2006
2094
  }
2007
2095
  .ui-panel-closed {
2008
2096
  width: 0;
2097
+ max-height: 100%;
2009
2098
  overflow: hidden;
2099
+ visibility: hidden;
2010
2100
  }
2011
2101
  .ui-panel-fixed {
2012
2102
  position: fixed;
2013
- bottom: -1px;
2103
+ bottom: -1px; /* fixes gap on Chrome for Android */
2014
2104
  padding-bottom: 1px;
2015
2105
  }
2016
2106
  .ui-panel-display-overlay {
2017
- z-index: 1001;
2107
+ z-index: 1001; /* fixed toolbars have z-index 1000 */
2018
2108
  }
2019
2109
  .ui-panel-display-reveal {
2020
2110
  z-index: 0;
@@ -2025,6 +2115,7 @@ div.ui-slider-switch.ui-mini {
2025
2115
  .ui-panel-inner {
2026
2116
  padding: 15px;
2027
2117
  }
2118
+ /* content-wrap */
2028
2119
  .ui-panel-content-wrap {
2029
2120
  position: relative;
2030
2121
  left: 0;
@@ -2033,10 +2124,11 @@ div.ui-slider-switch.ui-mini {
2033
2124
  z-index: 999;
2034
2125
  }
2035
2126
  .ui-panel-content-wrap-display-overlay,
2036
- .ui-panel-animate.ui-panel-content-wrap > .ui-header,
2127
+ .ui-panel-animate.ui-panel-content-wrap > .ui-header, /* ios4 fix */
2037
2128
  .ui-panel-content-wrap-closed {
2038
2129
  position: static;
2039
2130
  }
2131
+ /* dismiss */
2040
2132
  .ui-panel-dismiss {
2041
2133
  position: absolute;
2042
2134
  top: 0;
@@ -2049,21 +2141,27 @@ div.ui-slider-switch.ui-mini {
2049
2141
  .ui-panel-dismiss-open {
2050
2142
  display: block;
2051
2143
  }
2144
+ /* animate class is added to panel, wrapper and fixed toolbars */
2052
2145
  .ui-panel-animate {
2053
2146
  -webkit-transition: -webkit-transform 350ms ease;
2054
2147
  -moz-transition: -moz-transform 350ms ease;
2055
2148
  transition: transform 350ms ease;
2056
2149
  }
2150
+ /* hardware acceleration for smoother transitions on WebKit browsers */
2057
2151
  .ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
2058
2152
  .ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
2153
+ .ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
2059
2154
  .ui-panel-animate.ui-panel-content-wrap,
2060
2155
  .ui-panel-animate.ui-panel-content-fixed-toolbar {
2061
2156
  -webkit-backface-visibility: hidden;
2062
2157
  -webkit-transform: translate3d(0,0,0);
2063
2158
  }
2159
+ /* positioning: panel */
2160
+ /* panel left */
2064
2161
  .ui-panel-position-left {
2065
2162
  left: -17em;
2066
2163
  }
2164
+ /* animated: panel left (for overlay and push) */
2067
2165
  .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
2068
2166
  .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
2069
2167
  left: 0;
@@ -2071,19 +2169,23 @@ div.ui-slider-switch.ui-mini {
2071
2169
  -moz-transform: translate3d(-17em,0,0);
2072
2170
  transform: translate3d(-17em,0,0);
2073
2171
  }
2074
- .ui-panel-position-left.ui-panel-display-reveal,
2172
+ /* panel left open */
2173
+ .ui-panel-position-left.ui-panel-display-reveal, /* negate "panel left" for reveal */
2075
2174
  .ui-panel-position-left.ui-panel-open {
2076
2175
  left: 0;
2077
2176
  }
2177
+ /* animated: panel left open (for overlay and push) */
2078
2178
  .ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
2079
2179
  .ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
2080
2180
  -webkit-transform: translate3d(0,0,0);
2081
- -moz-transform: translate3d(0,0,0);
2082
2181
  transform: translate3d(0,0,0);
2182
+ -moz-transform: none;
2083
2183
  }
2184
+ /* panel right */
2084
2185
  .ui-panel-position-right {
2085
2186
  right: -17em;
2086
2187
  }
2188
+ /* animated: panel right (for overlay and push) */
2087
2189
  .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
2088
2190
  .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
2089
2191
  right: 0;
@@ -2091,22 +2193,27 @@ div.ui-slider-switch.ui-mini {
2091
2193
  -moz-transform: translate3d(17em,0,0);
2092
2194
  transform: translate3d(17em,0,0);
2093
2195
  }
2094
- .ui-panel-position-right.ui-panel-display-reveal,
2196
+ /* panel right open */
2197
+ .ui-panel-position-right.ui-panel-display-reveal, /* negate "panel right" for reveal */
2095
2198
  .ui-panel-position-right.ui-panel-open {
2096
2199
  right: 0;
2097
2200
  }
2201
+ /* animated: panel right open (for overlay and push) */
2098
2202
  .ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
2099
2203
  .ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
2100
2204
  -webkit-transform: translate3d(0,0,0);
2101
- -moz-transform: translate3d(0,0,0);
2102
2205
  transform: translate3d(0,0,0);
2206
+ -moz-transform: none;
2103
2207
  }
2208
+ /* positioning: content wrap, fixed toolbars and dismiss */
2209
+ /* panel left open */
2104
2210
  .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
2105
2211
  .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
2106
2212
  .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
2107
2213
  left: 17em;
2108
2214
  right: -17em;
2109
2215
  }
2216
+ /* animated: panel left open (for reveal and push) */
2110
2217
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
2111
2218
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
2112
2219
  .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
@@ -2117,12 +2224,14 @@ div.ui-slider-switch.ui-mini {
2117
2224
  -moz-transform: translate3d(17em,0,0);
2118
2225
  transform: translate3d(17em,0,0);
2119
2226
  }
2227
+ /* panel right open */
2120
2228
  .ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open,
2121
2229
  .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open,
2122
2230
  .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
2123
2231
  left: -17em;
2124
2232
  right: 17em;
2125
2233
  }
2234
+ /* animated: panel right open (for reveal and push) */
2126
2235
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
2127
2236
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
2128
2237
  .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
@@ -2133,13 +2242,16 @@ div.ui-slider-switch.ui-mini {
2133
2242
  -moz-transform: translate3d(-17em,0,0);
2134
2243
  transform: translate3d(-17em,0,0);
2135
2244
  }
2245
+ /* negate "panel left/right open" for overlay */
2136
2246
  .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-overlay,
2137
2247
  .ui-panel-content-wrap-open.ui-panel-content-wrap-display-overlay {
2138
2248
  left: 0;
2139
2249
  }
2250
+ /* always disable overflow-x to prevent zoom issue on Android */
2140
2251
  .ui-page-active.ui-page-panel {
2141
2252
  overflow-x: hidden;
2142
2253
  }
2254
+ /* shadows and borders */
2143
2255
  .ui-panel-display-reveal {
2144
2256
  -webkit-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
2145
2257
  -moz-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
@@ -2150,15 +2262,15 @@ div.ui-slider-switch.ui-mini {
2150
2262
  -moz-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
2151
2263
  box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
2152
2264
  }
2153
- .ui-panel-position-right.ui-panel-display-overlay {
2154
- -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
2155
- -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
2156
- box-shadow: -5px 0px 5px rgba(0,0,0,.15);
2265
+ .ui-panel-display-overlay {
2266
+ -webkit-box-shadow: 5px 0 5px rgba(0,0,0,.15);
2267
+ -moz-box-shadow: 5px 0 5px rgba(0,0,0,.15);
2268
+ box-shadow: 5px 0 5px rgba(0,0,0,.15);
2157
2269
  }
2158
- .ui-panel-position-left.ui-panel-display-overlay {
2159
- -webkit-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
2160
- -moz-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
2161
- box-shadow: 5px 0px 5px rgba(0,0,0,.15);
2270
+ .ui-panel-position-right.ui-panel-display-overlay {
2271
+ -webkit-box-shadow: -5px 0 5px rgba(0,0,0,.15);
2272
+ -moz-box-shadow: -5px 0 5px rgba(0,0,0,.15);
2273
+ box-shadow: -5px 0 5px rgba(0,0,0,.15);
2162
2274
  }
2163
2275
  .ui-panel-display-push.ui-panel-open.ui-panel-position-left {
2164
2276
  border-right-width: 1px;
@@ -2174,6 +2286,7 @@ div.ui-slider-switch.ui-mini {
2174
2286
  .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
2175
2287
  margin-right: 1px;
2176
2288
  }
2289
+ /* wrap on wide viewports once open */
2177
2290
  @media (min-width:55em){
2178
2291
  .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
2179
2292
  .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,