diff options
Diffstat (limited to 'static/development-bundle/demos/demos.css')
-rw-r--r-- | static/development-bundle/demos/demos.css | 334 |
1 files changed, 334 insertions, 0 deletions
diff --git a/static/development-bundle/demos/demos.css b/static/development-bundle/demos/demos.css new file mode 100644 index 0000000..2d2ce1f --- /dev/null +++ b/static/development-bundle/demos/demos.css | |||
@@ -0,0 +1,334 @@ | |||
1 | body { | ||
2 | font-size: 62.5%; | ||
3 | } | ||
4 | |||
5 | table { | ||
6 | font-size: 1em; | ||
7 | } | ||
8 | |||
9 | /* Site | ||
10 | -------------------------------- */ | ||
11 | |||
12 | body { | ||
13 | font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; | ||
14 | } | ||
15 | |||
16 | /* Layout | ||
17 | -------------------------------- */ | ||
18 | |||
19 | .layout-grid { | ||
20 | width: 960px; | ||
21 | } | ||
22 | |||
23 | .layout-grid td { | ||
24 | vertical-align: top; | ||
25 | } | ||
26 | |||
27 | .layout-grid td.left-nav { | ||
28 | width: 140px; | ||
29 | } | ||
30 | |||
31 | .layout-grid td.normal { | ||
32 | border-left: 1px solid #eee; | ||
33 | padding: 20px 24px; | ||
34 | font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; | ||
35 | } | ||
36 | |||
37 | .layout-grid td.demos { | ||
38 | background: url('/images/demos_bg.jpg') no-repeat; | ||
39 | height: 337px; | ||
40 | overflow: hidden; | ||
41 | } | ||
42 | |||
43 | /* Normal | ||
44 | -------------------------------- */ | ||
45 | |||
46 | .normal h3, | ||
47 | .normal h4 { | ||
48 | margin: 0; | ||
49 | font-weight: normal; | ||
50 | } | ||
51 | |||
52 | .normal h3 { | ||
53 | padding: 0 0 9px; | ||
54 | font-size: 1.8em; | ||
55 | } | ||
56 | |||
57 | .normal h4 { | ||
58 | padding-bottom: 21px; | ||
59 | border-bottom: 1px dashed #999; | ||
60 | font-size: 1.2em; | ||
61 | font-weight: bold; | ||
62 | } | ||
63 | |||
64 | .normal p { | ||
65 | font-size: 1.2em; | ||
66 | } | ||
67 | |||
68 | /* Demos */ | ||
69 | |||
70 | .demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li { | ||
71 | margin: 0; | ||
72 | padding: 0 | ||
73 | } | ||
74 | |||
75 | .demos-nav { | ||
76 | float: left; | ||
77 | width: 170px; | ||
78 | font-size: 1.3em; | ||
79 | } | ||
80 | |||
81 | .demos-nav dt, | ||
82 | .demos-nav h4 { | ||
83 | margin: 0; | ||
84 | padding: 0; | ||
85 | font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; | ||
86 | color: #e87b10; | ||
87 | } | ||
88 | |||
89 | .demos-nav dt, | ||
90 | .demos-nav h4 { | ||
91 | margin-top: 1.5em; | ||
92 | margin-bottom: 0; | ||
93 | padding-left: 8px; | ||
94 | padding-bottom:5px; | ||
95 | line-height: 1.2em; | ||
96 | border-bottom: 1px solid #F4F4F4; | ||
97 | } | ||
98 | |||
99 | .demos-nav dd a, | ||
100 | .demos-nav li a { | ||
101 | border-bottom: 1px solid #F4F4F4; | ||
102 | display:block; | ||
103 | padding: 4px 3px 4px 8px; | ||
104 | font-size: 90%; | ||
105 | text-decoration: none; | ||
106 | color: #555 ; | ||
107 | margin:2px 0; | ||
108 | height:13px; | ||
109 | } | ||
110 | |||
111 | .demos-nav dd a:hover, | ||
112 | .demos-nav dd a:focus, | ||
113 | .demos-nav dd a:hover, | ||
114 | .demos-nav dd a:focus { | ||
115 | background: #f3f3f3; | ||
116 | color:#000; | ||
117 | -moz-border-radius: 5px; -webkit-border-radius: 5px; | ||
118 | } | ||
119 | .demos-nav dd a.selected { | ||
120 | background: #555; | ||
121 | color:#ffffff; | ||
122 | -moz-border-radius: 5px; -webkit-border-radius: 5px; | ||
123 | } | ||
124 | |||
125 | |||
126 | /* new styles for demo pages, added by Filament 12.29.08 | ||
127 | eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts | ||
128 | */ | ||
129 | |||
130 | .normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; } | ||
131 | .normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; } | ||
132 | .normal a:link, | ||
133 | .normal a:visited { color:#1b75bb; text-decoration:none; } | ||
134 | .normal a:hover, | ||
135 | .normal a:active { color:#0b559b; } | ||
136 | |||
137 | #demo-config { padding:20px 0 0; } | ||
138 | |||
139 | #demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; } | ||
140 | #demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; } | ||
141 | |||
142 | #demo-config-menu { float:right; width:180px; } | ||
143 | #demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; } | ||
144 | |||
145 | #demo-config-menu ul { list-style: none; padding: 0; margin: 0; } | ||
146 | |||
147 | #demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } | ||
148 | |||
149 | #demo-config-menu li a:link, | ||
150 | #demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; } | ||
151 | * html #demo-config-menu li a:link, | ||
152 | * html #demo-config-menu li a:visited { padding:1px 8px 2px; } | ||
153 | #demo-config-menu li a:hover, | ||
154 | #demo-config-menu li a:active { background-color:#f6f6f6; } | ||
155 | |||
156 | #demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; } | ||
157 | |||
158 | #demo-config-menu li.demo-config-on a:link, | ||
159 | #demo-config-menu li.demo-config-on a:visited, | ||
160 | #demo-config-menu li.demo-config-on a:hover, | ||
161 | #demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; } | ||
162 | |||
163 | #demo-source, #demo-notes { | ||
164 | clear: both; | ||
165 | padding: 20px 0 0; | ||
166 | font-size: 1.3em; | ||
167 | } | ||
168 | |||
169 | #demo-notes { width:520px; color:#333; font-size: 1em; } | ||
170 | #demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; } | ||
171 | #demo-source pre, #demo-source code { padding: 0; } | ||
172 | code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; } | ||
173 | |||
174 | #demo-source a:link, | ||
175 | #demo-source a:visited, | ||
176 | #demo-source a:hover, | ||
177 | #demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; } | ||
178 | |||
179 | #demo-source a.source-open:link, | ||
180 | #demo-source a.source-open:visited, | ||
181 | #demo-source a.source-open:hover, | ||
182 | #demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); } | ||
183 | |||
184 | #demo-source a.source-closed:link, | ||
185 | #demo-source a.source-closed:visited, | ||
186 | #demo-source a.source-closed:hover, | ||
187 | #demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } | ||
188 | |||
189 | div.demo { | ||
190 | padding:12px; | ||
191 | font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; | ||
192 | } | ||
193 | |||
194 | div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; } | ||
195 | |||
196 | div.demo-description { | ||
197 | clear:both; | ||
198 | padding:12px; | ||
199 | font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; | ||
200 | font-size: 1.3em; | ||
201 | line-height: 1.4em; | ||
202 | } | ||
203 | |||
204 | .ui-draggable, .ui-droppable { | ||
205 | background-position: top left; | ||
206 | } | ||
207 | |||
208 | .left-nav .demos-nav { | ||
209 | padding-right: 10px; | ||
210 | } | ||
211 | |||
212 | #demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; } | ||
213 | #demo-link a span.ui-icon { float:left; margin-right:3px; } | ||
214 | |||
215 | /* Component containers | ||
216 | ----------------------------------*/ | ||
217 | #widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } | ||
218 | #widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } | ||
219 | #widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } | ||
220 | #widget-docs .ui-widget-header a { color: #ffffff; } | ||
221 | #widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; } | ||
222 | #widget-docs .ui-widget-content a { color: #222222; } | ||
223 | |||
224 | /* Interaction states | ||
225 | ----------------------------------*/ | ||
226 | #widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } | ||
227 | #widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; } | ||
228 | #widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } | ||
229 | #widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; } | ||
230 | #widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; } | ||
231 | #widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; } | ||
232 | |||
233 | /* Interaction Cues | ||
234 | ----------------------------------*/ | ||
235 | #widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; } | ||
236 | #widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; } | ||
237 | #widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; } | ||
238 | #widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } | ||
239 | #widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; } | ||
240 | #widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } | ||
241 | |||
242 | /* Icons | ||
243 | ----------------------------------*/ | ||
244 | |||
245 | /* states and images */ | ||
246 | #demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); } | ||
247 | #widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } | ||
248 | #widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } | ||
249 | #widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); } | ||
250 | #widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } | ||
251 | #widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } | ||
252 | #widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); } | ||
253 | #widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); } | ||
254 | |||
255 | |||
256 | /* Misc visuals | ||
257 | ----------------------------------*/ | ||
258 | |||
259 | /* Corner radius */ | ||
260 | #widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } | ||
261 | #widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } | ||
262 | #widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } | ||
263 | #widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } | ||
264 | #widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } | ||
265 | #widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } | ||
266 | #widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } | ||
267 | #widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } | ||
268 | #widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } | ||
269 | |||
270 | /* Overlays */ | ||
271 | #widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } | ||
272 | #widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } | ||
273 | |||
274 | /* | ||
275 | ----------------------------------*/ | ||
276 | |||
277 | #widget-docs { margin:20px 0 0; border: none; } | ||
278 | |||
279 | #widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; } | ||
280 | #widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; } | ||
281 | #widget-docs code strong { color:#000; } | ||
282 | #widget-docs p { margin:0 3em 1.2em 0; } | ||
283 | #widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; } | ||
284 | #widget-docs ul { list-style-type: none; } | ||
285 | |||
286 | #widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; } | ||
287 | #widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; } | ||
288 | .normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; } | ||
289 | |||
290 | #docs-overview-main { width:400px; } | ||
291 | #docs-overview-sidebar { float:right; width:200px; } | ||
292 | #docs-overview-sidebar a span { color:#666; } | ||
293 | #widget-docs #docs-overview-main p { margin-right:0; } | ||
294 | #widget-docs #docs-overview-sidebar h4 { padding-left:0; } | ||
295 | |||
296 | .docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; } | ||
297 | #widget-docs .docs-list-header h2 { float:left; margin:0; } | ||
298 | #widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; } | ||
299 | |||
300 | .docs-list { float:left; width:100%; padding:0 0 10px; } | ||
301 | .docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; } | ||
302 | #widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; } | ||
303 | #widget-docs .param-header h3 { width:50%; } | ||
304 | #widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; } | ||
305 | #widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; } | ||
306 | #widget-docs .param-header p { width:24%; } | ||
307 | #widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; } | ||
308 | |||
309 | .param-details { padding-left:13px; } | ||
310 | .param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;} | ||
311 | .param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; } | ||
312 | |||
313 | |||
314 | /* overrides for ui-tab styles */ | ||
315 | #widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; } | ||
316 | #widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; } | ||
317 | |||
318 | #widget-docs .ui-tabs-nav li a:link, | ||
319 | #widget-docs .ui-tabs-nav li a:visited, | ||
320 | #widget-docs .ui-tabs-nav li a:hover, | ||
321 | #widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; } | ||
322 | |||
323 | #widget-docs .ui-tabs-nav li.ui-tabs-selected a:link, | ||
324 | #widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited, | ||
325 | #widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover, | ||
326 | #widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color:#e6820E; } | ||
327 | |||
328 | #widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; } | ||
329 | |||
330 | #widget-docs .ui-widget-content a:link, | ||
331 | #widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; } | ||
332 | #widget-docs .ui-widget-content a:hover, | ||
333 | #widget-docs .ui-widget-content a:active { color:#0b559b; } | ||
334 | |||