Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 38d8b72

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: Changed theme C, D, and E to A or B.
1 parent e9801b6 commit 38d8b72

34 files changed

+165
-249
lines changed

‎demos/widgets/accordions/index.php‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<p>Collapsible sets start with the same markup as <a href="../collapsibles/" data-ajax="false">individual collapsibles</a> which have a heading followed by the collapsible content. By adding a parent wrapper with a <code>data-role="collapsible-set"</code> attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.</p>
3535

3636
<div data-demo-html="true">
37-
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
37+
<div data-role="collapsible-set" data-theme="a" data-content-theme="a">
3838
<div data-role="collapsible">
3939
<h3>Section 1</h3>
4040
<p>I'm the collapsible content for section 1</p>
@@ -92,7 +92,7 @@
9292
<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the set. </p>
9393

9494
<div data-demo-html="true">
95-
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
95+
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true">
9696
<div data-role="collapsible">
9797
<h3>I'm a mini collapsible</h3>
9898
<p>This is good for tight spaces.</p>
@@ -114,7 +114,7 @@
114114
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on any of its collapsibles individually.</p>
115115

116116
<div data-demo-html="true">
117-
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
117+
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
118118
<div data-role="collapsible">
119119
<h3>Icon set on the set</h3>
120120
<p>Specify the open and close icons on the set to apply it to all the collapsibles within.</p>
@@ -135,7 +135,7 @@
135135
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on any of its collapsibles individually.</p>
136136

137137
<div data-demo-html="true">
138-
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-iconpos="right">
138+
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-iconpos="right">
139139
<div data-role="collapsible">
140140
<h3>Right</h3>
141141
<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on set.</p>
@@ -159,7 +159,7 @@
159159
<p>Add the <code>data-corners="false"</code> attribute to get an inset collapsible set without rounded corners.</p>
160160

161161
<div data-demo-html="true">
162-
<div data-role="collapsible-set" data-corners="false" data-theme="c" data-content-theme="d">
162+
<div data-role="collapsible-set" data-corners="false" data-theme="a" data-content-theme="a">
163163
<div data-role="collapsible">
164164
<h3>Section 1</h3>
165165
<p>Collapsible content</p>
@@ -196,18 +196,18 @@
196196
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
197197

198198
<div data-demo-html="true">
199-
<div data-role="collapsible-set" data-content-theme="c">
200-
<div data-role="collapsible" data-theme="b" data-content-theme="b">
199+
<div data-role="collapsible-set" data-content-theme="a">
200+
<div data-role="collapsible" data-theme="b" data-content-theme="a">
201201
<h3>Section header, swatch B</h3>
202-
<p>Collapsible content, swatch "b"</p>
202+
<p>Collapsible content, swatch "a"</p>
203203
</div>
204-
<div data-role="collapsible" data-theme="a" data-content-theme="a">
204+
<div data-role="collapsible" data-theme="a" data-content-theme="b">
205205
<h3>Section header, swatch A</h3>
206-
<p>Collapsible content, swatch "a"</p>
206+
<p>Collapsible content, swatch "b"</p>
207207
</div>
208-
<div data-role="collapsible" data-theme="e" data-content-theme="d">
209-
<h3>Section header, swatch E</h3>
210-
<p>Collapsible content, swatch "d"</p>
208+
<div data-role="collapsible" data-theme="b" data-content-theme="b">
209+
<h3>Section header, swatch B</h3>
210+
<p>Collapsible content, swatch "b"</p>
211211
</div>
212212
</div>
213213
</div><!--/demo-html -->

‎demos/widgets/autocomplete/autocomplete-remote.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
7171
<h3>Cities worldwide</h3>
7272
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
73-
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>
73+
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>
7474
</div><!--/demo-html -->
7575

7676
<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">Back to autocomplete</a>

‎demos/widgets/buttons/index.php‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@
6262
<p>
6363
<a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
6464
<a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
65-
<a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
66-
<a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
67-
<a href="#" data-role="button" data-theme="e" data-inline="true">E</a>
6865
</p>
6966
</div><!--/demo-html -->
7067

@@ -84,26 +81,26 @@
8481
<p>An <a href="../icons/">icon</a> can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.</p>
8582

8683
<div data-demo-html="true">
87-
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
88-
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
89-
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
90-
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Arrow left</a>
91-
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Arrow right</a>
92-
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Arrow up</a>
93-
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Arrow down</a>
94-
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
95-
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Gear</a>
96-
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
97-
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Forward</a>
98-
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Back</a>
99-
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Grid</a>
100-
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Star</a>
101-
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Alert</a>
102-
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Info</a>
103-
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
104-
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Search</a>
105-
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true">Bars</a>
106-
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
84+
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Plus</a>
85+
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-inline="true">Minus</a>
86+
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a>
87+
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true">Arrow left</a>
88+
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Arrow right</a>
89+
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-inline="true">Arrow up</a>
90+
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-inline="true">Arrow down</a>
91+
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-inline="true">Check</a>
92+
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true">Gear</a>
93+
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true">Refresh</a>
94+
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-inline="true">Forward</a>
95+
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-inline="true">Back</a>
96+
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-inline="true">Grid</a>
97+
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true">Star</a>
98+
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-inline="true">Alert</a>
99+
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-inline="true">Info</a>
100+
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
101+
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true">Search</a>
102+
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true">Bars</a>
103+
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">Edit</a>
107104
</div><!--/demo-html -->
108105

109106
<h2 id="button-icon-position">Icon position</h2>

‎demos/widgets/collapsibles/index.php‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
<p>Add the <code>data-content-theme</code> attribute to set a theme for the content of the collapsible. To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This applies the swatch's border and <em>flat</em> background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.</p>
4949

5050
<div data-demo-html="true">
51-
<div data-role="collapsible" data-theme="b" data-content-theme="d">
51+
<div data-role="collapsible" data-theme="a" data-content-theme="a">
5252
<h4>Heading</h4>
53-
<p>I'm the collapsible content with a themed content block set to "d".</p>
53+
<p>I'm the collapsible content with a themed content block set to "a".</p>
5454
</div>
5555
</div><!--/demo-html -->
5656

@@ -59,7 +59,7 @@
5959
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
6060

6161
<div data-demo-html="true">
62-
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
62+
<div data-role="collapsible" data-collapsed="false" data-theme="a" data-content-theme="a">
6363
<h4>Heading</h4>
6464
<ul data-role="listview">
6565
<li><a href="#">List item 1</a></li>
@@ -86,10 +86,10 @@
8686

8787
<h2>Icons</h2>
8888

89-
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="arrow-d"</code> and <code>data-expanded-icon="arrow-u"</code>.</p>
89+
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="carat-d"</code> and <code>data-expanded-icon="carat-u"</code>.</p>
9090

9191
<div data-demo-html="true">
92-
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
92+
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
9393
<h4>Heading</h4>
9494
<ul data-role="listview" data-inset="false">
9595
<li>Read-only list item 1</li>
@@ -102,7 +102,7 @@
102102
<h2>Icon positioning</h2>
103103
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
104104

105-
<div data-role="collapsible" data-iconpos="right" data-theme="b" data-content-theme="d">
105+
<div data-role="collapsible" data-iconpos="right" data-theme="a" data-content-theme="a">
106106
<h3>I'm a header</h3>
107107
<p><code>data-iconpos="right"</code></p>
108108
</div>
@@ -112,7 +112,7 @@
112112
<p>For forms, use a <code>fieldset</code> and <code>legend</code> for the collapsible.</p>
113113
<div data-demo-html="true">
114114
<form>
115-
<fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
115+
<fieldset data-role="collapsible" data-theme="a" data-content-theme="a">
116116
<legend>Legend</legend>
117117

118118
<label for="textinput-f">Text Input:</label>
@@ -135,7 +135,7 @@
135135
<p>By default collapsibles have an inset appearance. To make them full width without corner styling add the <code>data-inset="false"</code> attribute to the element.</p>
136136

137137
<div data-demo-html="true">
138-
<div data-role="collapsible" data-inset="false" data-theme="c" data-content-theme="d">
138+
<div data-role="collapsible" data-inset="false" data-content-theme="a">
139139
<h4>Heading</h4>
140140
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
141141
</div>
@@ -146,7 +146,7 @@
146146
<p>This is an example of a series of individual collapsibles. The difference with a "Collapsible Set" is that multiple collapsible rows can be open at once.</p>
147147

148148
<div data-demo-html="true">
149-
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
149+
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
150150
<h3>Pets</h3>
151151
<ul data-role="listview">
152152
<li><a href="#">Canary</a></li>
@@ -157,7 +157,7 @@
157157
<li><a href="#">Mouse</a></li>
158158
</ul>
159159
</div><!-- /collapsible -->
160-
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
160+
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
161161
<h3>Farm animals</h3>
162162
<ul data-role="listview">
163163
<li><a href="#">Chicken</a></li>
@@ -168,7 +168,7 @@
168168
<li><a href="#">Sheep</a></li>
169169
</ul>
170170
</div><!-- /collapsible -->
171-
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
171+
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
172172
<h3>Wild Animals</h3>
173173
<ul data-role="listview">
174174
<li><a href="#">Aardvark</a></li>
@@ -186,7 +186,7 @@
186186

187187
<div data-demo-html="true" data-demo-css="#negateDoubleBorder">
188188
<div id="demo-borders">
189-
<div data-role="collapsible" data-theme="e" data-content-theme="d" data-inset="false">
189+
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-inset="false">
190190
<h3>Pets</h3>
191191
<ul data-role="listview">
192192
<li><a href="#">Canary</a></li>
@@ -197,7 +197,7 @@
197197
<li><a href="#">Mouse</a></li>
198198
</ul>
199199
</div><!-- /collapsible -->
200-
<div data-role="collapsible" data-theme="e" data-content-theme="d" data-inset="false">
200+
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-inset="false">
201201
<h3>Farm animals</h3>
202202
<ul data-role="listview">
203203
<li><a href="#">Chicken</a></li>

‎demos/widgets/dialog/dialog-alt.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
<body>
1515

1616
<div data-role="page">
17-
<div data-role="header" data-theme="e">
17+
<div data-role="header" data-theme="a">
1818
<h1>Dialog</h1>
1919

2020
</div>
2121

22-
<div data-role="content" data-theme="e">
23-
<h1>I'm colorful</h1>
22+
<div data-role="content" data-theme="b">
23+
<h1>I'm themed</h1>
2424
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
2525
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="a">Good for you</a>
26-
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>
26+
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="a">Don't care, really</a>
2727
</div>
2828
</div>
2929

‎demos/widgets/dialog/dialog-overlay.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
</head>
1414
<body>
1515

16-
<div data-role="page" data-overlay-theme="e">
17-
<div data-role="header" data-theme="b">
16+
<div data-role="page" data-overlay-theme="b">
17+
<div data-role="header" data-theme="a">
1818
<h1>Dialog</h1>
1919
</div>
2020

21-
<div data-role="content" data-theme="d">
21+
<div data-role="content" data-theme="a">
2222
<h1>Custom overlay</h1>
23-
<p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
23+
<p>This dialog adds <code>data-overlay-theme="b"</code> to the page container to set the overlay swatch color.</p>
2424
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>
2525
</div>
2626

‎demos/widgets/dialog/dialog-success.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<div data-role="content" data-theme="b">
2424
<h3>Photos posted successfully</h3>
2525

26-
<a href="./" data-role="button" data-theme="b">View photo page</a>
27-
<a href="./" data-role="button" data-theme="c">Done</a>
26+
<a href="./" data-role="button" data-theme="a">View photo page</a>
27+
<a href="./" data-role="button" data-theme="a">Done</a>
2828
</div>
2929
</div>
3030

‎demos/widgets/dialog/dialog-with-select.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h1>Dialog select test</h1>
3232

3333
<div data-role="page" id="bar">
3434

35-
<div data-role="header" data-theme="d">
35+
<div data-role="header" data-theme="b">
3636
<h1>Sample Dialogs</h1>
3737
</div>
3838

@@ -105,9 +105,9 @@ <h1>Sample Dialogs</h1>
105105
</select>
106106
</div>
107107

108-
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>
108+
<a href="#foo" data-role="button" data-rel="back">Real Submit Would go here</a>
109109
</form>
110-
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>
110+
<a href="#foo" data-role="button" data-rel="back">Cancel</a>
111111
</div>
112112
</div>
113113

0 commit comments

Comments
 (0)