Skip to content
This repository
Browse code

Merge branch 'css-corner-styling'

  • Loading branch information...
commit 277556bd12b90e0b5def861dfcff2474f3525305 2 parents 1d077a0 + 9044789
Gabriel "_|Nix|_" Schulhof gabrielschulhof authored
7 css/structure/jquery.mobile.button.css
@@ -49,6 +49,13 @@
49 49 .ui-mini.ui-btn-icon-bottom .ui-btn-inner,
50 50 .ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
51 51
  52 +/* Corner styling inheritance */
  53 +.ui-btn-inner,
  54 +.ui-btn-text {
  55 + -webkit-border-radius: inherit;
  56 + border-radius: inherit;
  57 +}
  58 +
52 59 /*btn icon positioning*/
53 60 .ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
54 61 .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; }
32 css/structure/jquery.mobile.collapsible.css
@@ -27,6 +27,36 @@
27 27 .ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
28 28 .ui-collapsible-content-collapsed { display: none; }
29 29
  30 +.ui-collapsible-set > .ui-collapsible.ui-corner-all {
  31 + -webkit-border-radius: 0;
  32 + border-radius: 0;
  33 +}
  34 +.ui-collapsible-heading,
  35 +.ui-collapsible-heading > .ui-btn {
  36 + -webkit-border-radius: inherit;
  37 + border-radius: inherit;
  38 +}
  39 +.ui-collapsible-set .ui-collapsible.ui-first-child {
  40 + -webkit-border-top-right-radius: inherit;
  41 + border-top-right-radius: inherit;
  42 + -webkit-border-top-left-radius: inherit;
  43 + border-top-left-radius: inherit;
  44 +}
  45 +.ui-collapsible-content,
  46 +.ui-collapsible-set .ui-collapsible.ui-last-child {
  47 + -webkit-border-bottom-right-radius: inherit;
  48 + border-bottom-right-radius: inherit;
  49 + -webkit-border-bottom-left-radius: inherit;
  50 + border-bottom-left-radius: inherit;
  51 +}
  52 +
  53 +.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) > .ui-collapsible-heading {
  54 + -webkit-border-bottom-right-radius: 0;
  55 + border-bottom-right-radius: 0;
  56 + -webkit-border-bottom-left-radius: 0;
  57 + border-bottom-left-radius: 0;
  58 +}
  59 +
30 60 .ui-collapsible-set { margin: .5em 0; }
31 61 .ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
32   -.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
  62 +.ui-collapsible-set .ui-collapsible.ui-first-child { margin-top: 0; }
71 css/structure/jquery.mobile.controlgroup.css
@@ -4,12 +4,10 @@
4 4 .ui-bar .ui-controlgroup { margin: 0 5px; }
5 5
6 6 .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
7   -.ui-controlgroup li { list-style: none; }
8   -.ui-controlgroup-vertical .ui-btn,
9   -.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
10   -.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
11 7 .ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
  8 +.ui-controlgroup li { list-style: none; }
12 9
  10 +.ui-controlgroup .ui-btn { margin: 0; }
13 11 .ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
14 12 .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
15 13 .ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
@@ -17,20 +15,65 @@
17 15 .ui-header .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner,
18 16 .ui-footer .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
19 17 .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
  18 +.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
  19 +.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
  20 +.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
20 21
21 22 .ui-controlgroup-horizontal .ui-controlgroup-controls:before,
22 23 .ui-controlgroup-horizontal .ui-controlgroup-controls:after { content: ""; display: table; }
23 24 .ui-controlgroup-horizontal .ui-controlgroup-controls:after { clear: both; }
24 25 .ui-controlgroup-horizontal .ui-controlgroup-controls { display: inline-block; vertical-align: middle; zoom: 1; }
25   -.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
26   -.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
27   -.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select,
28   -.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; clear: none; margin: 0 -1px 0 0; }
29   -.ui-controlgroup-horizontal .ui-select .ui-btn,
30   -.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn { float: none; margin: 0; }
31   -.ui-controlgroup-horizontal .ui-controlgroup-last, .ui-controlgroup-horizontal .ui-select:last-child,
32   -.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
33   -.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
  26 +.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
  27 +.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
  28 +.ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
  29 +
  30 +.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
  31 +.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
  32 +.ui-controlgroup-horizontal .ui-btn { border-right-width: 0; }
  33 +.ui-controlgroup-horizontal .ui-btn.ui-last-child { border-right-width: 1px; }
  34 +
  35 +.ui-controlgroup .ui-btn-corner-all {
  36 + -webkit-border-radius: 0;
  37 + border-radius: 0;
  38 +}
  39 +.ui-controlgroup .ui-controlgroup-controls,
  40 +.ui-controlgroup .ui-radio,
  41 +.ui-controlgroup .ui-checkbox,
  42 +.ui-controlgroup .ui-select,
  43 +.ui-controlgroup li {
  44 + -webkit-border-radius: inherit;
  45 + border-radius: inherit;
  46 +}
  47 +.ui-controlgroup-vertical .ui-btn.ui-first-child {
  48 + -webkit-border-top-left-radius: inherit;
  49 + border-top-left-radius: inherit;
  50 + -webkit-border-top-right-radius: inherit;
  51 + border-top-right-radius: inherit;
  52 +}
  53 +.ui-controlgroup-vertical .ui-btn.ui-last-child {
  54 + -webkit-border-bottom-left-radius: inherit;
  55 + border-bottom-left-radius: inherit;
  56 + -webkit-border-bottom-right-radius: inherit;
  57 + border-bottom-right-radius: inherit;
  58 +}
  59 +.ui-controlgroup-horizontal .ui-btn.ui-first-child {
  60 + -webkit-border-top-left-radius: inherit;
  61 + border-top-left-radius: inherit;
  62 + -webkit-border-bottom-left-radius: inherit;
  63 + border-bottom-left-radius: inherit;
  64 +}
  65 +.ui-controlgroup-horizontal .ui-btn.ui-last-child {
  66 + -webkit-border-top-right-radius: inherit;
  67 + border-top-right-radius: inherit;
  68 + -webkit-border-bottom-right-radius: inherit;
  69 + border-bottom-right-radius: inherit;
  70 +}
  71 +
  72 +.ui-controlgroup .ui-shadow:not(.ui-focus) {
  73 + -moz-box-shadow: none;
  74 + -webkit-box-shadow: none;
  75 + box-shadow: none;
  76 +}
34 77
35 78 @media all and (min-width: 450px){
36 79 .ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
@@ -38,4 +81,4 @@
38 81 .ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
39 82 .ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
40 83 .ui-hide-label .ui-controlgroup-controls { width: 100%; }
41   -}
  84 +}
20 css/structure/jquery.mobile.core.css
@@ -65,9 +65,27 @@ div.ui-mobile-viewport { overflow-x: hidden; }
65 65 .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; }
66 66 .ui-footer .ui-title { margin: .6em 15px .8em; }
67 67
68   -/*content area*/
  68 +/* content area*/
69 69 .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
70 70
  71 +/* corner styling for dialogs and popups */
  72 +.ui-corner-all > .ui-header:first-child,
  73 +.ui-corner-all > .ui-content:first-child,
  74 +.ui-corner-all > .ui-footer:first-child {
  75 + -webkit-border-top-left-radius: inherit;
  76 + border-top-left-radius: inherit;
  77 + -webkit-border-top-right-radius: inherit;
  78 + border-top-right-radius: inherit;
  79 +}
  80 +.ui-corner-all > .ui-header:last-child,
  81 +.ui-corner-all > .ui-content:last-child,
  82 +.ui-corner-all > .ui-footer:last-child {
  83 + -webkit-border-bottom-left-radius: inherit;
  84 + border-bottom-left-radius: inherit;
  85 + -webkit-border-bottom-right-radius: inherit;
  86 + border-bottom-right-radius: inherit;
  87 +}
  88 +
71 89 /* icons sizing */
72 90 .ui-icon { width: 18px; height: 18px; }
73 91
13 css/structure/jquery.mobile.forms.checkboxradio.css
@@ -3,15 +3,13 @@
3 3 .ui-checkbox .ui-btn.ui-mini, .ui-radio .ui-btn.ui-mini { margin: .25em 0; }
4 4 .ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
5 5 .ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
  6 +
6 7 .ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
7 8 .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; }
8   -
9 9 .ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
10 10 .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; }
11   -
12   -.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; }
  11 +.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; }
13 12 .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; }
14   -
15 13 .ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
16 14 .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
17 15 .ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
@@ -22,5 +20,12 @@
22 20 .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
23 21 .ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
24 22
  23 +.ui-controlgroup-horizontal .ui-checkbox .ui-icon,
  24 +.ui-controlgroup-horizontal .ui-radio .ui-icon { display: none; }
  25 +.ui-controlgroup-horizontal .ui-checkbox .ui-btn-inner,
  26 +.ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
  27 +.ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
  28 +.ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }
  29 +
25 30 /* input, label positioning */
26 31 .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; }
48 css/structure/jquery.mobile.listview.css
@@ -4,21 +4,51 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
4 4 .ui-collapsible-content > .ui-listview { margin: -10px -15px; }
5 5 .ui-content .ui-listview-inset { margin: 1em 0; }
6 6 .ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
7   -.ui-listview, .ui-li { list-style:none; padding:0; }
8   -.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; }
9   -.ui-li.ui-btn { margin: 0; }
  7 +.ui-listview, .ui-li { list-style: none; padding: 0; }
  8 +.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; }
  9 +.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
  10 +.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
  11 +.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
  12 +.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
  13 +.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
10 14 .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
11 15 .ui-li-static { background-image: none; }
12 16 .ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
13 17 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) ". "; }
14 18 ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
15   -.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
16   -.ui-li-last, .ui-li.ui-field-contain.ui-li-last { border-bottom-width: 1px; }
17   -.ui-collapsible [class*="ui-body"] > .ui-listview:not(.ui-listview-inset) .ui-li-last { border-bottom-width: 0; }
18   -.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li:first-child { border-top-width: 0; }
  19 +
  20 +.ui-listview > .ui-li.ui-first-child,
  21 +.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
  22 + -webkit-border-top-right-radius: inherit;
  23 + border-top-right-radius: inherit;
  24 + -webkit-border-top-left-radius: inherit;
  25 + border-top-left-radius: inherit;
  26 +}
  27 +.ui-listview > .ui-li.ui-last-child,
  28 +.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
19 29 .ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
20   -.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last { -webkit-border-bottom-left-radius: inherit; -webkit-border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
21   -.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last .ui-li-link-alt { -webkit-border-bottom-right-radius: inherit; border-bottom-right-radius: inherit; }
  30 +.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
  31 + -webkit-border-bottom-right-radius: inherit;
  32 + border-bottom-right-radius: inherit;
  33 + -webkit-border-bottom-left-radius: inherit;
  34 + border-bottom-left-radius: inherit;
  35 +}
  36 +.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
  37 + -webkit-border-top-right-radius: inherit;
  38 + border-top-right-radius: inherit;
  39 +}
  40 +.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
  41 + -webkit-border-bottom-right-radius: inherit;
  42 + border-bottom-right-radius: inherit;
  43 +}
  44 +.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
  45 + -webkit-border-top-left-radius: inherit;
  46 + border-top-left-radius: inherit;
  47 +}
  48 +.ui-listview > .ui-li.ui-last-child .ui-li-thumb:not(.ui-li-icon) {
  49 + -webkit-border-bottom-left-radius: inherit;
  50 + border-bottom-left-radius: inherit;
  51 +}
22 52 .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
23 53 .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
24 54 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
40 css/structure/jquery.mobile.popup.css
@@ -131,44 +131,4 @@
131 131 .ui-popup > .ui-btn-left { left: -9px; }
132 132 .ui-popup > .ui-btn-right { right: -9px; }
133 133
134   -.ui-popup.ui-corner-all > .ui-header,
135   -.ui-popup.ui-corner-all ~ .ui-content,
136   -.ui-popup.ui-corner-all > .ui-content:first-child {
137   - -webkit-border-top-left-radius: inherit;
138   - border-top-left-radius: inherit;
139   - -webkit-border-top-right-radius: inherit;
140   - border-top-right-radius: inherit;
141   -}
142   -
143   -.ui-popup.ui-corner-all > .ui-content,
144   -.ui-popup.ui-corner-all > .ui-footer,
145   -.ui-popup.ui-corner-all > .ui-header:nth-child(n):last-child {
146   - -webkit-border-bottom-left-radius: inherit;
147   - border-bottom-left-radius: inherit;
148   - -webkit-border-bottom-right-radius: inherit;
149   - border-bottom-right-radius: inherit;
150   -}
151   -
152   -.ui-popup.ui-corner-all > .ui-content:nth-child(2),
153   -.ui-popup.ui-corner-all > .ui-header:nth-child(2) {
154   - -webkit-border-top-left-radius: 0;
155   - border-top-left-radius: 0;
156   - -webkit-border-top-right-radius: 0;
157   - border-top-right-radius: 0;
158   -}
159   -
160   -.ui-popup.ui-corner-all > .ui-content:nth-last-child(1n+2),
161   -.ui-popup.ui-corner-all > .ui-footer:nth-last-child(1n+2) {
162   - -webkit-border-bottom-left-radius: 0;
163   - border-bottom-left-radius: 0;
164   - -webkit-border-bottom-right-radius: 0;
165   - border-bottom-right-radius: 0;
166   -}
167   -
168   -.ui-popup.ui-corner-all > .ui-header:only-child,
169   -.ui-popup.ui-corner-all > .ui-footer:only-child {
170   - -webkit-border-radius: inherit;
171   - border-radius: inherit;
172   -}
173   -
174 134 .ui-popup-hidden { top: -99999px; left: -9999px; }
128 css/themes/default/jquery.mobile.theme.css
@@ -798,68 +798,10 @@ a.ui-link-inherit {
798 798 /* corner rounding classes
799 799 -----------------------------------------------------------------------------------------------------------*/
800 800
801   -.ui-corner-tl {
802   - -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
803   - -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
804   - border-top-left-radius: .6em /*{global-radii-blocks}*/;
805   -}
806   -.ui-corner-tr {
807   - -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
808   - -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
809   - border-top-right-radius: .6em /*{global-radii-blocks}*/;
810   -}
811   -.ui-corner-bl {
812   - -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
813   - -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
814   - border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
815   -}
816   -.ui-corner-br {
817   - -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
818   - -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
819   - border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
820   -}
821   -.ui-corner-top {
822   - -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
823   - -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
824   - border-top-left-radius: .6em /*{global-radii-blocks}*/;
825   - -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
826   - -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
827   - border-top-right-radius: .6em /*{global-radii-blocks}*/;
828   -}
829   -.ui-corner-bottom {
830   - -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
831   - -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
832   - border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
833   - -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
834   - -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
835   - border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
836   - }
837   -.ui-corner-right {
838   - -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
839   - -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
840   - border-top-right-radius: .6em /*{global-radii-blocks}*/;
841   - -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
842   - -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
843   - border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
844   -}
845   -.ui-corner-left {
846   - -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
847   - -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
848   - border-top-left-radius: .6em /*{global-radii-blocks}*/;
849   - -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
850   - -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
851   - border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
852   -}
853 801 .ui-corner-all {
854   - -moz-border-radius: .6em /*{global-radii-blocks}*/;
855 802 -webkit-border-radius: .6em /*{global-radii-blocks}*/;
856 803 border-radius: .6em /*{global-radii-blocks}*/;
857 804 }
858   -.ui-corner-none {
859   - -moz-border-radius: 0;
860   - -webkit-border-radius: 0;
861   - border-radius: 0;
862   -}
863 805
864 806 /* Form field separator
865 807 -----------------------------------------------------------------------------------------------------------*/
@@ -1032,83 +974,13 @@ a.ui-link-inherit {
1032 974
1033 975 /* Button corner classes
1034 976 -----------------------------------------------------------------------------------------------------------*/
1035   -
1036   -.ui-btn-corner-tl {
1037   - -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
1038   - -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
1039   - border-top-left-radius: 1em /*{global-radii-buttons}*/;
1040   -}
1041   -.ui-btn-corner-tr {
1042   - -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
1043   - -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
1044   - border-top-right-radius: 1em /*{global-radii-buttons}*/;
1045   -}
1046   -.ui-btn-corner-bl {
1047   - -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
1048   - -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1049   - border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1050   -}
1051   -.ui-btn-corner-br {
1052   - -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
1053   - -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1054   - border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1055   -}
1056   -.ui-btn-corner-top {
1057   - -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
1058   - -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
1059   - border-top-left-radius: 1em /*{global-radii-buttons}*/;
1060   - -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
1061   - -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
1062   - border-top-right-radius: 1em /*{global-radii-buttons}*/;
1063   -}
1064   -.ui-btn-corner-bottom {
1065   - -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
1066   - -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1067   - border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1068   - -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
1069   - -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1070   - border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1071   -}
1072   -.ui-btn-corner-right {
1073   - -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
1074   - -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
1075   - border-top-right-radius: 1em /*{global-radii-buttons}*/;
1076   - -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
1077   - -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1078   - border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
1079   -}
1080   -.ui-btn-corner-left {
1081   - -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
1082   - -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
1083   - border-top-left-radius: 1em /*{global-radii-buttons}*/;
1084   - -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
1085   - -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1086   - border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
1087   -}
1088 977 .ui-btn-corner-all {
1089   - -moz-border-radius: 1em /*{global-radii-buttons}*/;
1090 978 -webkit-border-radius: 1em /*{global-radii-buttons}*/;
1091 979 border-radius: 1em /*{global-radii-buttons}*/;
1092 980 }
1093 981
1094 982 /* radius clip workaround for cleaning up corner trapping */
1095   -.ui-corner-tl,
1096   -.ui-corner-tr,
1097   -.ui-corner-bl,
1098   -.ui-corner-br,
1099   -.ui-corner-top,
1100   -.ui-corner-bottom,
1101   -.ui-corner-right,
1102   -.ui-corner-left,
1103 983 .ui-corner-all,
1104   -.ui-btn-corner-tl,
1105   -.ui-btn-corner-tr,
1106   -.ui-btn-corner-bl,
1107   -.ui-btn-corner-br,
1108   -.ui-btn-corner-top,
1109   -.ui-btn-corner-bottom,
1110   -.ui-btn-corner-right,
1111   -.ui-btn-corner-left,
1112 984 .ui-btn-corner-all {
1113 985 -webkit-background-clip: padding-box;
1114 986 -moz-background-clip: padding;
1  js/index.php
@@ -34,6 +34,7 @@
34 34 'widgets/dialog.js',
35 35 'widgets/page.sections.js',
36 36 'widgets/collapsible.js',
  37 + 'widgets/addFirstLastClasses.js',
37 38 'widgets/collapsibleSet.js',
38 39 'jquery.mobile.fieldContain.js',
39 40 'jquery.mobile.grid.js',
39 js/jquery.mobile.buttonMarkup.js
@@ -9,32 +9,6 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function
9 9 //>>excludeEnd("jqmBuildExclude");
10 10 (function( $, undefined ) {
11 11
12   -var cornerClasses = {
13   - "tl": " ui-btn-corner-tl",
14   - "tr": " ui-btn-corner-tr",
15   - "bl": " ui-btn-corner-bl",
16   - "br": " ui-btn-corner-br",
17   - "top": " ui-btn-corner-top",
18   - "bottom": " ui-btn-corner-bottom",
19   - "left": " ui-btn-corner-left",
20   - "right": " ui-btn-corner-right"
21   -};
22   -cornerClasses[true] = " ui-btn-corner-all";
23   -cornerClasses[false] = "";
24   -
25   -var groupCornerClasses = {
26   - "tl": " ui-corner-tl",
27   - "tr": " ui-corner-tr",
28   - "bl": " ui-corner-bl",
29   - "br": " ui-corner-br",
30   - "top": " ui-corner-top",
31   - "bottom": " ui-corner-bottom",
32   - "left": " ui-corner-left",
33   - "right": " ui-corner-right"
34   -};
35   -groupCornerClasses[true] = " ui-corner-all";
36   -groupCornerClasses[false] = "";
37   -
38 12 $.fn.buttonMarkup = function( options ) {
39 13 var $workingSet = this,
40 14 mapToDataAttr = function( key, value ) {
@@ -54,17 +28,14 @@ $.fn.buttonMarkup = function( options ) {
54 28 inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
55 29 shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
56 30 corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
57   - cornerstyle:options.cornerstyle!== undefined ? options.cornerstyle: el.jqmData( "cornerstyle" ),
58 31 iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
59 32 mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
60 33 }, options ),
61 34
62   - // Lookup table from which to grab corner classes
63   - cornerLookup,
64 35 // Classes Defined
65 36 innerClass = "ui-btn-inner",
66 37 textClass = "ui-btn-text",
67   - buttonClass, iconClass, cornerClass,
  38 + buttonClass, iconClass,
68 39 hover = false,
69 40 state = "up",
70 41 // Button inner markup
@@ -109,14 +80,11 @@ $.fn.buttonMarkup = function( options ) {
109 80 o.theme = $.mobile.getInheritedTheme( el, "c" );
110 81 }
111 82
112   - cornerLookup = ( o.cornerstyle === "group" ? groupCornerClasses: cornerClasses );
113   - cornerClass = ( cornerLookup[ o.corners ] ? cornerLookup[ o.corners ] : "" );
114   -
115 83 buttonClass = "ui-btn ";
116 84 buttonClass += ( hover ? "ui-btn-hover-" + o.theme : "" );
117 85 buttonClass += ( state ? " ui-btn-" + state + "-" + o.theme : "" );
118 86 buttonClass += o.shadow ? " ui-shadow" : "";
119   - buttonClass += cornerClass;
  87 + buttonClass += o.corners ? " ui-btn-corner-all" : "";
120 88
121 89 if ( o.mini !== undefined ) {
122 90 // Used to control styling in headers/footers, where buttons default to `mini` style.
@@ -147,8 +115,6 @@ $.fn.buttonMarkup = function( options ) {
147 115 }
148 116 }
149 117
150   - innerClass += cornerClass;
151   -
152 118 if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
153 119 el.attr( "title", el.getEncodedText() );
154 120 }
@@ -159,7 +125,6 @@ $.fn.buttonMarkup = function( options ) {
159 125 el.removeClass( "ui-link" ).addClass( buttonClass );
160 126
161 127 buttonInner.className = innerClass;
162   -
163 128 buttonText.className = textClass;
164 129 if ( !buttonElements ) {
165 130 buttonInner.appendChild( buttonText );
38 js/widgets/addFirstLastClasses.js
... ... @@ -0,0 +1,38 @@
  1 +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  2 +//>>description: Mark first and last visible item with classes ui-first-child resp. ui-last-child.
  3 +//>>label: addFirstLastClasses
  4 +//>>group: Widgets
  5 +
  6 +define( [ "jquery", "../jquery.mobile.core" ], function( $ ) {
  7 +//>>excludeEnd("jqmBuildExclude");
  8 +(function( $, undefined ) {
  9 +
  10 +$.mobile.behaviors.addFirstLastClasses = {
  11 + _getVisibles: function( $els, create ) {
  12 + var visibles;
  13 +
  14 + if ( create ) {
  15 + visibles = $els.not( ".ui-screen-hidden" );
  16 + } else {
  17 + visibles = $els.filter( ":visible" );
  18 + if ( visibles.length === 0 ) {
  19 + visibles = $els.not( ".ui-screen-hidden" );
  20 + }
  21 + }
  22 +
  23 + return visibles;
  24 + },
  25 +
  26 + _addFirstLastClasses: function( $els, $visibles, create ) {
  27 + $els.removeClass( "ui-first-child ui-last-child" );
  28 + $visibles.eq( 0 ).addClass( "ui-first-child" ).end().last().addClass( "ui-last-child" );
  29 + if ( !create ) {
  30 + this.element.trigger( "updatelayout" );
  31 + }
  32 + }
  33 +};
  34 +
  35 +})( jQuery );
  36 +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  37 +});
  38 +//>>excludeEnd("jqmBuildExclude");
37 js/widgets/collapsible.js
@@ -18,6 +18,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
18 18 theme: null,
19 19 contentTheme: null,
20 20 inset: true,
  21 + corners: true,
21 22 mini: false,
22 23 initSelector: ":jqmData(role='collapsible')"
23 24 },
@@ -30,7 +31,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
30 31 collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon,
31 32 expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon,
32 33 collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
33   - collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
  34 + collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
  35 + collapsibleClasses = "";
34 36
35 37 // Replace collapsibleHeading if it's a legend
36 38 if ( collapsibleHeading.is( "legend" ) ) {
@@ -67,6 +69,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
67 69 } else {
68 70 o.inset = true;
69 71 }
  72 + // Set corners for individual collapsibles to false when in a collapsible-set
  73 + o.corners = false;
70 74 // Gets the preference for mini in the set
71 75 if ( !o.mini ) {
72 76 o.mini = collapsibleSet.jqmData( "mini" );
@@ -77,13 +81,21 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
77 81 o.theme = $.mobile.getInheritedTheme( $el, "c" );
78 82 }
79 83 }
80   -
  84 +
81 85 if ( !!o.inset ) {
82   - collapsible.addClass( "ui-collapsible-inset" );
  86 + collapsibleClasses += " ui-collapsible-inset";
  87 + if ( !!o.corners ) {
  88 + collapsibleClasses += " ui-corner-all" ;
  89 + }
  90 + }
  91 + if ( o.contentTheme ) {
  92 + collapsibleClasses += " ui-collapsible-themed-content";
  93 + collapsibleContent.addClass( "ui-body-" + o.contentTheme );
  94 + }
  95 + if ( collapsibleClasses !== "" ) {
  96 + collapsible.addClass( collapsibleClasses );
83 97 }
84 98
85   - collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
86   -
87 99 collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
88 100 expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
89 101
@@ -105,19 +117,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
105 117 theme: o.theme
106 118 });
107 119
108   - if ( !!o.inset ) {
109   - collapsibleHeading
110   - .find( "a" ).first().add( ".ui-btn-inner", $el )
111   - .addClass( "ui-corner-top ui-corner-bottom" );
112   - }
113   -
114 120 //events
115 121 collapsible
116 122 .bind( "expand collapse", function( event ) {
117 123 if ( !event.isDefaultPrevented() ) {
118 124 var $this = $( this ),
119   - isCollapse = ( event.type === "collapse" ),
120   - contentTheme = o.contentTheme;
  125 + isCollapse = ( event.type === "collapse" );
121 126
122 127 event.preventDefault();
123 128
@@ -136,12 +141,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
136 141 $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
137 142 collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
138 143
139   - if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
140   - collapsibleHeading
141   - .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
142   - .toggleClass( "ui-corner-bottom", isCollapse );
143   - collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
144   - }
145 144 collapsibleContent.trigger( "updatelayout" );
146 145 }
147 146 })
59 js/widgets/collapsibleSet.js
@@ -5,7 +5,7 @@
5 5 //>>css.structure: ../css/structure/jquery.mobile.collapsible.css
6 6 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7 7
8   -define( [ "jquery", "../jquery.mobile.widget", "./collapsible" ], function( $ ) {
  8 +define( [ "jquery", "../jquery.mobile.widget", "./collapsible", "./addFirstLastClasses" ], function( $ ) {
9 9 //>>excludeEnd("jqmBuildExclude");
10 10 (function( $, undefined ) {
11 11
@@ -30,24 +30,16 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
30 30 o.inset = $el.jqmData( "inset" );
31 31 }
32 32 o.inset = o.inset !== undefined ? o.inset : true;
  33 + o.corners = o.corners !== undefined ? o.corners : true;
  34 +
  35 + if ( !!o.corners && !!o.inset ) {
  36 + $el.addClass( "ui-corner-all" );
  37 + }
33 38
34 39 // Initialize the collapsible set if it's not already initialized
35 40 if ( !$el.jqmData( "collapsiblebound" ) ) {
36 41 $el
37 42 .jqmData( "collapsiblebound", true )
38   - .bind( "expand collapse", function( event ) {
39   - var isCollapse = ( event.type === "collapse" ),
40   - collapsible = $( event.target ).closest( ".ui-collapsible" ),
41   - widget = collapsible.data( "collapsible" );
42   - if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
43   - collapsible.find( ".ui-collapsible-heading" ).first()
44   - .find( "a" ).first()
45   - .toggleClass( "ui-corner-bottom", isCollapse )
46   - .find( ".ui-btn-inner" )
47   - .toggleClass( "ui-corner-bottom", isCollapse );
48   - collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
49   - }
50   - })
51 43 .bind( "expand", function( event ) {
52 44 var closestCollapsible = $( event.target )
53 45 .closest( ".ui-collapsible" );
@@ -64,49 +56,28 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
64 56 var $el = this.element,
65 57 collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" ),
66 58 expanded = collapsiblesInSet.filter( ":jqmData(collapsed='false')" );
67   - this.refresh();
  59 + this._refresh( "true" );
68 60
69 61 // Because the corners are handled by the collapsible itself and the default state is collapsed
70 62 // That was causing https://github.com/jquery/jquery-mobile/issues/4116
71 63 expanded.trigger( "expand" );
72 64 },
73 65
74   - refresh: function() {
75   - var $el = this.element,
76   - o = this.options,
77   - collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
  66 + _refresh: function( create ) {
  67 + var collapsiblesInSet = this.element.children( ":jqmData(role='collapsible')" );
78 68
79 69 $.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
80 70
81   - // clean up borders
82   - if ( !!o.inset ) {
83   - collapsiblesInSet.each(function() {
84   - $( this ).jqmRemoveData( "collapsible-last" )
85   - .find( ".ui-collapsible-heading" )
86   - .find( "a" ).first()
87   - .removeClass( "ui-corner-top ui-corner-bottom" )
88   - .find( ".ui-btn-inner" )
89   - .removeClass( "ui-corner-top ui-corner-bottom" );
90   - });
  71 + this._addFirstLastClasses( collapsiblesInSet, this._getVisibles( collapsiblesInSet, create ), create );
  72 + },
91 73
92   - collapsiblesInSet.first()
93   - .find( "a" )
94   - .first()
95   - .addClass( "ui-corner-top" )
96   - .find( ".ui-btn-inner" )
97   - .addClass( "ui-corner-top" );
98   -
99   - collapsiblesInSet.last()
100   - .jqmData( "collapsible-last", true )
101   - .find( "a" )
102   - .first()
103   - .addClass( "ui-corner-bottom" )
104   - .find( ".ui-btn-inner" )
105   - .addClass( "ui-corner-bottom" );
106   - }
  74 + refresh: function() {
  75 + this._refresh( false );
107 76 }
108 77 });
109 78
  79 +$.widget( "mobile.collapsibleset", $.mobile.collapsibleset, $.mobile.behaviors.addFirstLastClasses );
  80 +
110 81 //auto self-init widgets
111 82 $( document ).bind( "pagecreate create", function( e ) {
112 83 $.mobile.collapsibleset.prototype.enhanceWithin( e.target );
35 js/widgets/controlgroup.js
@@ -7,6 +7,7 @@
7 7
8 8 define( [ "jquery",
9 9 "../jquery.mobile.buttonMarkup",
  10 + "./addFirstLastClasses",
10 11 "../jquery.mobile.widget" ], function( $ ) {
11 12 //>>excludeEnd("jqmBuildExclude");
12 13 (function( $, undefined ) {
@@ -47,14 +48,6 @@ define( [ "jquery",
47 48 this._refresh( true );
48 49 },
49 50
50   - _flipClasses: function( els, flCorners ) {
51   - els.removeClass( "ui-controlgroup-last" )
52   - .buttonMarkup( { corners: false, shadow: false } )
53   - .eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ], cornerstyle: "group" } )
54   - .end()
55   - .last().buttonMarkup( { corners: flCorners[ 1 ], cornerstyle: "group" } ).addClass( "ui-controlgroup-last" );
56   - },
57   -
58 51 _setOption: function( key, value ) {
59 52 var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
60 53
@@ -70,14 +63,11 @@ define( [ "jquery",
70 63 this.element
71 64 .removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
72 65 .addClass( "ui-controlgroup-" + value );
73   - this.options.type = value;
74   - this.refresh();
  66 + this._refresh( false );
75 67 },
76 68
77 69 _setCorners: function( value ) {
78 70 this.element.toggleClass( "ui-corner-all", value );
79   - this.options.corners = value;
80   - this.refresh();
81 71 },
82 72
83 73 _setShadow: function( value ) {
@@ -88,19 +78,16 @@ define( [ "jquery",
88 78 this.element.toggleClass( "ui-mini", value );
89 79 },
90 80
  81 + container: function() {
  82 + return this.element.children( ".ui-controlgroup-controls" );
  83 + },
  84 +
91 85 _refresh: function( create ) {
92   - var els = this.element
93   - .find( ".ui-btn" + ( ( !create && this.options.excludeInvisible ) ? ":visible" : "" ) )
94   - .not( '.ui-slider-handle' ),
95   - corners = [ true, true ];
96   -
97   - if ( !this.options.corners ) {
98   - corners = [ false, false ];
99   - } else if ( els.length > 1 ) {
100   - corners = ( this.options.type === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ] );
  86 + var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" );
  87 + if ( $.mobile.checkboxradio ) {
  88 + this.element.find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
101 89 }
102   -
103   - this._flipClasses( els, corners );
  90 + this._addFirstLastClasses( els, this.options.excludeInvisible ? this._getVisibles( els, create ) : els, create );
104 91 },
105 92
106 93 refresh: function() {
@@ -108,6 +95,8 @@ define( [ "jquery",
108 95 }
109 96 });
110 97
  98 + $.widget( "mobile.controlgroup", $.mobile.controlgroup, $.mobile.behaviors.addFirstLastClasses );
  99 +
111 100 // TODO: Implement a mechanism to allow widgets to become enhanced in the
112 101 // correct order when their correct enhancement depends on other widgets in
113 102 // the page being correctly enhanced already.
12 js/widgets/dialog.js
@@ -13,15 +13,17 @@ $.widget( "mobile.dialog", $.mobile.widget, {
13 13 options: {
14 14 closeBtnText: "Close",
15 15 overlayTheme: "a",
  16 + corners: true,
16 17 initSelector: ":jqmData(role='dialog')"
17 18 },
18 19 _create: function() {
19 20 var self = this,
20 21 $el = this.element,
21 22 headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
  23 + cornerClass = !!this.options.corners ? " ui-corner-all" : "",
22 24 dialogWrap = $( "<div/>", {
23 25 "role" : "dialog",
24   - "class" : "ui-dialog-contain ui-corner-all ui-overlay-shadow"
  26 + "class" : "ui-dialog-contain ui-overlay-shadow" + cornerClass
25 27 });
26 28
27 29 $el.addClass( "ui-dialog ui-overlay-" + this.options.overlayTheme );
@@ -32,13 +34,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
32 34 .wrapInner( dialogWrap )
33 35 .children()
34 36 .find( ":jqmData(role='header')" )
35   - .prepend( headerCloseButton )
36   - .end()
37   - .children( ':first-child')
38   - .addClass( "ui-corner-top" )
39   - .end()
40   - .children( ":last-child" )
41   - .addClass( "ui-corner-bottom" );
  37 + .prepend( headerCloseButton );
42 38
43 39 // this must be an anonymous function so that select menu dialogs can replace
44 40 // the close method. This is a change from previously just defining data-rel=back
22 js/widgets/forms/checkboxradio.js
@@ -34,13 +34,9 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
34 34 mini = inheritAttr( input, "mini" ) || o.mini,
35 35 checkedState = inputtype + "-on",
36 36 uncheckedState = inputtype + "-off",
37   - icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
38 37 iconpos = inheritAttr( input, "iconpos" ),
39   - activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
40   - checkedClass = "ui-" + checkedState + activeBtn,
41   - uncheckedClass = "ui-" + uncheckedState,
42   - checkedicon = icon ? checkedState : undefined,
43   - uncheckedicon = icon ? uncheckedState : undefined;
  38 + checkedClass = "ui-" + checkedState,
  39 + uncheckedClass = "ui-" + uncheckedState;
44 40
45 41 if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
46 42 return;
@@ -52,8 +48,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
52 48 inputtype: inputtype,
53 49 checkedClass: checkedClass,
54 50 uncheckedClass: uncheckedClass,
55   - checkedicon: checkedicon,
56   - uncheckedicon: uncheckedicon
  51 + checkedicon: checkedState,
  52 + uncheckedicon: uncheckedState
57 53 });
58 54
59 55 // If there's no selected theme check the data attr
@@ -63,7 +59,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
63 59
64 60 label.buttonMarkup({
65 61 theme: o.theme,
66   - icon: icon,
  62 + icon: uncheckedState,
67 63 shadow: false,
68 64 mini: mini,
69 65 iconpos: iconpos
@@ -180,13 +176,15 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
180 176 },
181 177
182 178 refresh: function() {
183   - var input = this.element[0],
  179 + var input = this.element[ 0 ],
  180 + active = " " + $.mobile.activeBtnClass,
  181 + checkedClass = this.checkedClass + ( this.element.parents( ".ui-controlgroup-horizontal" ).length ? active : "" ),
184 182 label = this.label;
185 183
186 184 if ( input.checked ) {
187   - label.addClass( this.checkedClass ).removeClass( this.uncheckedClass ).buttonMarkup( { icon: this.checkedicon } );
  185 + label.removeClass( this.uncheckedClass + active ).addClass( checkedClass ).buttonMarkup( { icon: this.checkedicon } );
188 186 } else {
189   - label.removeClass( this.checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( { icon: this.uncheckedicon } );;
  187 + label.removeClass( checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( { icon: this.uncheckedicon } );
190 188 }
191 189
192 190 if ( input.disabled ) {
3  js/widgets/listview.filter.js
@@ -46,6 +46,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
46 46 var $this = $( this ),
47 47 val = this.value.toLowerCase(),
48 48 listItems = null,
  49 + li = list.children(),
49 50 lastval = $this.jqmData( "lastval" ) + "",
50 51 childItems = false,
51 52 itemtext = "",
@@ -114,7 +115,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
114 115 //filtervalue is empty => show all
115 116 listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
116 117 }
117   - listview._refreshCorners();
  118 + listview._addFirstLastClasses( li, listview._getVisibles( li, false ), false );
118 119 })
119 120 .appendTo( wrapper )
120 121 .textinput();
89 js/widgets/listview.js
@@ -5,7 +5,7 @@
5 5 //>>css.structure: ../css/structure/jquery.mobile.listview.css
6 6 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7 7
8   -define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup", "./page", "./page.sections" ], function( $ ) {
  8 +define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup", "./page", "./page.sections", "./addFirstLastClasses" ], function( $ ) {
9 9 //>>excludeEnd("jqmBuildExclude");
10 10 (function( $, undefined ) {
11 11
@@ -24,6 +24,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
24 24 icon: "arrow-r",
25 25 splitIcon: "arrow-r",
26 26 splitTheme: "b",
  27 + corners: true,
  28 + shadow: true,
27 29 inset: false,
28 30 initSelector: ":jqmData(role='listview')"
29 31 },
@@ -32,81 +34,21 @@ $.widget( "mobile.listview", $.mobile.widget, {
32 34 var t = this,
33 35 listviewClasses = "";
34 36
35   - listviewClasses += t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "";
  37 + listviewClasses += t.options.inset ? " ui-listview-inset" : "";
  38 +
  39 + if ( !!t.options.inset ) {
  40 + listviewClasses += t.options.corners ? " ui-corner-all" : "";
  41 + listviewClasses += t.options.shadow ? " ui-shadow" : "";
  42 + }
36 43
37 44 // create listview markup
38 45 t.element.addClass(function( i, orig ) {
39   - return orig + " ui-listview " + listviewClasses;
  46 + return orig + " ui-listview" + listviewClasses;
40 47 });
41 48
42 49 t.refresh( true );
43 50 },
44 51
45   - _removeCorners: function( li, which ) {
46   - var top = "ui-corner-top ui-corner-tr ui-corner-tl",
47   - bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
48   -
49   - li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
50   -
51   - if ( which === "top" ) {
52   - li.removeClass( top );
53   - } else if ( which === "bottom" ) {
54   - li.removeClass( bot );
55   - } else {
56   - li.removeClass( top + " " + bot );
57   - }
58   - },
59   -
60   - _refreshCorners: function( create ) {
61   - var $li,
62   - $visibleli,
63   - $topli,
64   - $bottomli;
65   -
66   - $li = this.element.children( "li" );
67   - // At create time and when autodividers calls refresh the li are not visible yet so we need to rely on .ui-screen-hidden
68   - $visibleli = create || $li.filter( ":visible" ).length === 0 ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
69   -
70   - // ui-li-last is used for setting border-bottom on the last li
71   - $li.filter( ".ui-li-last" ).removeClass( "ui-li-last" );
72   -
73   - if ( this.options.inset ) {
74   - this._removeCorners( $li );
75   -
76   - // Select the first visible li element
77   - $topli = $visibleli.first()
78   - .addClass( "ui-corner-top" );
79   -
80   - $topli.add( $topli.find( ".ui-btn-inner" )
81   - .not( ".ui-li-link-alt span:first-child" ) )
82   - .addClass( "ui-corner-top" )
83   - .end()
84   - .find( ".ui-li-link-alt, .ui-li-link-alt span:first-child" )
85   - .addClass( "ui-corner-tr" )
86   - .end()
87   - .find( ".ui-li-thumb" )
88   - .not( ".ui-li-icon" )
89   - .addClass( "ui-corner-tl" );
90   -
91   - // Select the last visible li element
92   - $bottomli = $visibleli.last()
93   - .addClass( "ui-corner-bottom ui-li-last" );
94   -
95   - $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
96   - .find( ".ui-li-link-alt" )
97   - .addClass( "ui-corner-br" )
98   - .end()
99   - .find( ".ui-li-thumb" )
100   - .not( ".ui-li-icon" )
101   - .addClass( "ui-corner-bl" );
102   - } else {
103   - $visibleli.last().addClass( "ui-li-last" );
104   - }
105   - if ( !create ) {
106   - this.element.trigger( "updatelayout" );
107   - }
108   - },
109   -
110 52 // This is a generic utility method for finding the first
111 53 // node with a given nodeName. It uses basic DOM traversal
112 54 // to be fast and is meant to be a substitute for simple
@@ -177,7 +119,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
177 119 $list.find( ".ui-li-dec" ).remove();
178 120 }
179 121
180   - if ( ol ) {
  122 + if ( ol ) {
181 123 // Check if a start attribute has been set while taking a value of 0 into account
182 124 if ( start || start === 0 ) {
183 125 if ( !jsCount ) {
@@ -336,10 +278,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
336 278
337 279 this._addThumbClasses( li );
338 280 this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
339   -
340   - this._refreshCorners( create );
341   -
342   - // autodividers binds to this to redraw dividers after the listview refresh
  281 +
  282 + this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
  283 + // autodividers binds to this to redraw dividers after the listview refresh
343 284 this._trigger( "afterrefresh" );
344 285 },
345 286
@@ -439,6 +380,8 @@ $.widget( "mobile.listview", $.mobile.widget, {