-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathclasses.xml
212 lines (212 loc) · 10.2 KB
/
classes.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
<entry name="classes">
<title>Classes</title>
<desc>CSS classes for common styles</desc>
<longdesc>
<h2>Style Classes</h2>
<p>jQuery Mobile uses the following style classes:</p>
<table>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-corner-all</div></td>
<td>Adds rounded corners to the element.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-shadow</div></td>
<td>Adds an item shadow around the element.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-overlay-shadow</div></td>
<td>Adds an overlay shadow around the element. The intended effect is for the element to appear to float above other elements.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-mini</div></td>
<td>Reduces the font size and scales down paddings proportionally to produce a miniature version of the element for use in toolbars and tight spaces.</td>
</tr>
</table>
<p>These classes can be applied any of the framework's widgets.</p>
<h3>Widget-specific classes</h3>
<table>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-collapsible-inset</div></td>
<td>The <a href="/collapsible/">collapsible</a> widget has horizontal margins, borders, and rounded corners when this class is applied.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-listview-inset</div></td>
<td>The <a href="/listview/">listview</a> widget has horizontal margins, borders, and rounded corners when this class is applied.</td>
</tr>
</table>
<h3>Button-specific classes</h3>
<p>In addition to the style classes, you can add the following classes to <code>a</code> (anchor) and <code>button</code> elements to render them touch-friendly:</p>
<table>
<tr><th colspan="2">Basic options</th></tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn</div></td>
<td>You must add this class to indicate that the element is to be styled as a button. This is a prerequisite for adding any other button-related classes.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-inline</div></td>
<td>Displays the button inline. This means that it will only consume as much space as is needed for the label. This allows you to place buttons side by side, flowing with the text.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-shadow-icon</div></td>
<td>Draws a shadow around the icon.</td>
</tr>
<tr><th colspan="2">Icon positioning</th></tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-icon-top</div></td>
<td>The icon appears above the text</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-icon-right</div></td>
<td>The icon appears to the right of the text</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-icon-bottom</div></td>
<td>The icon appears below the text</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-icon-left</div></td>
<td>The icon appears to the left of the text</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-icon-notext</div></td>
<td>The button text is suppressed, and only the icon is shown. The result is a circular button the size of the icon.</td>
</tr>
<tr><th colspan="2">Theme</th></tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-btn-[a-z]</div></td>
<td>Sets the color scheme (swatch) for the button. Use a single letter from a-z that maps to the swatches included in your theme. For example: <code>ui-btn-b</code></td>
</tr>
</table>
<h3 id="icon-classes">Icon classes</h3>
<p><a href="/icons/">Icons</a> are used by a variety of widgets. The table below lists all the available icon classes. The widgets which support an icon usually have an option named "icon". The value for that option is the name of the icon, which is appended to the prefix <code>ui-icon-</code> to create the icon class name. In the class list below, the icon names are emphasized as part of the icon class name.</p>
<table>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>alert</strong></div></td>
<td>An exclamation mark inside a triangle.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>arrow-l</strong></div></td>
<td>An arrow pointing left (←).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>arrow-r</strong></div></td>
<td>An arrow pointing right (→).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>arrow-u</strong></div></td>
<td>An arrow pointing up (↑).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>arrow-d</strong></div></td>
<td>An arrow pointing down (↓).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>back</strong></div></td>
<td>A curved arrow arcing counterclockwise upwards.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>bars</strong></div></td>
<td>Three horizontal bars one above the other.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>carat-b</strong></div></td>
<td>A carat pointing down (v).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>carat-l</strong></div></td>
<td>A carat pointing left (<).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>carat-r</strong></div></td>
<td>A carat pointing right (>).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>carat-t</strong></div></td>
<td>A carat pointing up (^).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>check</strong></div></td>
<td>A checkmark (✓).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>delete</strong></div></td>
<td>A diagonal cross similar to (✕).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>edit</strong></div></td>
<td>A pencil - similar to (✎) but pointing to the lower left.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>forward</strong></div></td>
<td>A curved arrow arcing clockwise upwards.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>gear</strong></div></td>
<td>A gear (⚙).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>grid</strong></div></td>
<td>A 3✕3 grid.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>home</strong></div></td>
<td>A house similar to (⌂).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>minus</strong></div></td>
<td>A "minus" sign (-).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>plus</strong></div></td>
<td>A "plus" sign (+).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>refresh</strong></div></td>
<td>A circular arrow similar to (⟳).</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>search</strong></div></td>
<td>A magnifying glass.</td>
</tr>
<tr>
<td class="enum-value"><div style="white-space: nowrap;">ui-icon-<strong>star</strong></div></td>
<td>A star similar to (✭).</td>
</tr>
</table>
<h3 id="theme-classes">Theme-related classes</h3>
<p>The class prefixes in the table below are used for applying a swatch to various parts of the user interface. The actual class name is constructed by appending the swatch letter (a-z) to the prefix. For example, the class <code>ui-body-<strong>a</strong></code> is the swatch applied to the page.</p>
<table>
<tr>
<td class="enum-value" id="theme-classes-ui-bar"><div style="white-space: nowrap;">ui-bar-[a-z]</div></td>
<td>Sets the color scheme (swatch) for a bar. This includes headers and footers, or bars you include in the page.</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-body"><div style="white-space: nowrap;">ui-body-[a-z]</div></td>
<td>Sets the color scheme (swatch) for a content block. This includes page content panes (<span class="warning">deprecated as of 1.4.0</span>), listview items, popups, collapsibles, the loader widget, sliders, and panels.</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-btn"><div style="white-space: nowrap;">ui-btn-[a-z]</div></td>
<td>Sets the color scheme (swatch) for a button.</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-group-theme"><div style="white-space: nowrap;">ui-group-theme-[a-z]</div></td>
<td>Sets the color scheme (swatch) for controlgroups, listviews, and collapsible sets (accordions).</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-overlay"><div style="white-space: nowrap;">ui-overlay-[a-z]</div></td>
<td>Sets the color scheme (swatch) for backgrounds such as those of popup widgets, and page containers.</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-page-theme"><div style="white-space: nowrap;">ui-page-theme-[a-z]</div></td>
<td>Sets the color scheme (swatch) for pages.</td>
</tr>
<tr>
<td class="enum-value" id="theme-classes-ui-panel-page-container"><div style="white-space: nowrap;">ui-panel-page-container-[a-z]</div></td>
<td>Panels temporarily set the theme on the page container using this class.</td>
</tr>
</table>
</longdesc>
<category slug="css-framework"/>
</entry>