Mercurial > hg > dml-open-cliopatria
comparison cpack/dml/web/css/pure/pure-skin-swi.css @ 0:718306e29690 tip
commiting public release
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 21:05:06 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:718306e29690 |
---|---|
1 body { | |
2 background-color: #ffffff; | |
3 } | |
4 | |
5 /* from PURE buttons-core.css */ | |
6 .pure-skin-swi .pure-button { | |
7 /* Structure */ | |
8 display: inline-block; | |
9 *display: inline; /*IE 6/7*/ | |
10 zoom: 1; | |
11 line-height: normal; | |
12 white-space: nowrap; | |
13 vertical-align: baseline; | |
14 text-align: center; | |
15 cursor: pointer; | |
16 -webkit-user-drag: none; | |
17 -webkit-user-select: none; | |
18 -moz-user-select: none; | |
19 -ms-user-select: none; | |
20 user-select: none; | |
21 } | |
22 | |
23 /* Firefox: Get rid of the inner focus border */ | |
24 .pure-skin-swi .pure-button::-moz-focus-inner{ | |
25 padding: 0; | |
26 border: 0; | |
27 } | |
28 /* end from PURE buttons-core.css */ | |
29 /* from PURE buttons.css */ | |
30 /*csslint unqualified-attributes:false*/ | |
31 | |
32 .pure-skin-swi .pure-button { | |
33 font-size: 100%; | |
34 *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/ | |
35 *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */ | |
36 padding: 0.5em 1.5em 0.5em; | |
37 color: #0c1113; /* rgba not supported (IE 8) */ | |
38 /* color: rgba(0, 0, 0, 0.80); rgba supported */ | |
39 /* *color: #444; IE 6 & 7 */ | |
40 border: 1px solid #9bb5bf; /*IE 6/7/8*/ | |
41 border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ | |
42 background-color: #b1c5cd; | |
43 text-decoration: none; | |
44 border-radius: 4px; | |
45 -webkit-font-smoothing: antialiased; | |
46 /* Transitions */ | |
47 -webkit-transition: 0.1s linear -webkit-box-shadow; | |
48 -moz-transition: 0.1s linear -moz-box-shadow; | |
49 -ms-transition: 0.1s linear box-shadow; | |
50 -o-transition: 0.1s linear box-shadow; | |
51 transition: 0.1s linear box-shadow; | |
52 } | |
53 | |
54 .pure-skin-swi .pure-button-hover, | |
55 .pure-skin-swi .pure-button:hover { | |
56 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); | |
57 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05))); | |
58 background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); | |
59 background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05)); | |
60 background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); | |
61 background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); | |
62 background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); | |
63 } | |
64 | |
65 .pure-skin-swi .pure-button:focus { | |
66 outline: 0; | |
67 } | |
68 .pure-skin-swi .pure-button-active, | |
69 .pure-skin-swi .pure-button:active { | |
70 box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; | |
71 } | |
72 | |
73 .pure-skin-swi .pure-button[disabled], | |
74 .pure-skin-swi .pure-button-disabled, | |
75 .pure-skin-swi .pure-button-disabled:hover, | |
76 .pure-skin-swi .pure-button-disabled:active { | |
77 border: none; | |
78 background-image: none; | |
79 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |
80 filter: alpha(opacity=40); | |
81 -khtml-opacity: 0.40; | |
82 -moz-opacity: 0.40; | |
83 opacity: 0.40; | |
84 cursor: not-allowed; | |
85 box-shadow: none; | |
86 } | |
87 | |
88 .pure-skin-swi .pure-button-hidden { | |
89 display: none; | |
90 } | |
91 | |
92 /* Firefox: Get rid of the inner focus border */ | |
93 .pure-skin-swi .pure-button::-moz-focus-inner{ | |
94 padding: 0; | |
95 border: 0; | |
96 } | |
97 | |
98 .pure-skin-swi .pure-button-primary, | |
99 .pure-skin-swi .pure-button-selected, | |
100 .pure-skin-swi a.pure-button-primary, | |
101 .pure-skin-swi a.pure-button-selected { | |
102 background-color: #457387; | |
103 color: #fcfdfd; | |
104 } | |
105 | |
106 /*! Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */ | |
107 /* This page lists core form styles adopted from Normalize.css. */ | |
108 /*! Copyright (c) Nicolas Gallagher and Jonathan Neal */ | |
109 | |
110 /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ | |
111 | |
112 /* This page has Normalize.css form-specific style rules applied to a .yui3-form context */ | |
113 | |
114 /* ========== | |
115 Forms Core | |
116 =========*/ | |
117 | |
118 | |
119 /* | |
120 * Corrects margin displayed oddly in IE 6/7. | |
121 */ | |
122 | |
123 .pure-skin-swi .pure-form { | |
124 margin: 0; | |
125 } | |
126 | |
127 /* Define consistent border, margin, and padding.*/ | |
128 | |
129 | |
130 .pure-skin-swi .pure-form fieldset { | |
131 border: 1px solid #c0c0c0; | |
132 margin: 0 2px; | |
133 padding: 0.35em 0.625em 0.75em; | |
134 } | |
135 | |
136 /* | |
137 * 1. Corrects color not being inherited in IE 6/7/8/9. | |
138 * 2. Corrects text not wrapping in Firefox 3. | |
139 * 3. Corrects alignment displayed oddly in IE 6/7. | |
140 */ | |
141 | |
142 .pure-skin-swi .pure-form legend { | |
143 border: 0; /* 1 */ | |
144 padding: 0; | |
145 white-space: normal; /* 2 */ | |
146 *margin-left: -7px; /* 3 */ | |
147 } | |
148 | |
149 /* | |
150 * 1. Corrects font size not being inherited in all browsers. | |
151 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, | |
152 * and Chrome. | |
153 * 3. Improves appearance and consistency in all browsers. | |
154 */ | |
155 | |
156 .pure-skin-swi .pure-form button, | |
157 .pure-skin-swi .pure-form input, | |
158 .pure-skin-swi .pure-form select, | |
159 .pure-skin-swi .pure-form textarea { | |
160 font-size: 100%; /* 1 */ | |
161 margin: 0; /* 2 */ | |
162 vertical-align: baseline; /* 3 */ | |
163 *vertical-align: middle; /* 3 */ | |
164 } | |
165 | |
166 /* | |
167 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in | |
168 * the UA stylesheet. | |
169 */ | |
170 | |
171 .pure-skin-swi .pure-form button, | |
172 .pure-skin-swi .pure-form input { | |
173 line-height: normal; | |
174 } | |
175 | |
176 /* | |
177 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
178 * and `video` controls. | |
179 * 2. Corrects inability to style clickable `input` types in iOS. | |
180 * 3. Improves usability and consistency of cursor style between image-type | |
181 * `input` and others. | |
182 * 4. Removes inner spacing in IE 7 without affecting normal text inputs. | |
183 * Known issue: inner spacing remains in IE 6. | |
184 */ | |
185 | |
186 .pure-skin-swi .pure-form button, | |
187 .pure-skin-swi .pure-form input[type="button"], /* 1 */ | |
188 .pure-skin-swi .pure-form input[type="reset"], | |
189 .pure-skin-swi .pure-form input[type="submit"] { | |
190 -webkit-appearance: button; /* 2 */ | |
191 cursor: pointer; /* 3 */ | |
192 *overflow: visible; /* 4 */ | |
193 } | |
194 | |
195 /* | |
196 * Re-set default cursor for disabled elements. | |
197 */ | |
198 | |
199 .pure-skin-swi .pure-form button[disabled], | |
200 .pure-skin-swi .pure-form input[disabled] { | |
201 cursor: default; | |
202 } | |
203 | |
204 /* | |
205 * 1. Addresses box sizing set to content-box in IE 8/9. | |
206 * 2. Removes excess padding in IE 8/9. | |
207 * 3. Removes excess padding in IE 7. | |
208 * Known issue: excess padding remains in IE 6. | |
209 */ | |
210 | |
211 .pure-skin-swi .pure-form input[type="checkbox"], | |
212 .pure-skin-swi .pure-form input[type="radio"] { | |
213 box-sizing: border-box; /* 1 */ | |
214 padding: 0; /* 2 */ | |
215 *height: 13px; /* 3 */ | |
216 *width: 13px; /* 3 */ | |
217 } | |
218 | |
219 /* | |
220 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. | |
221 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome | |
222 * (include `-moz` to future-proof). | |
223 */ | |
224 | |
225 .pure-skin-swi .pure-form input[type="search"] { | |
226 -webkit-appearance: textfield; /* 1 */ | |
227 -moz-box-sizing: content-box; | |
228 -webkit-box-sizing: content-box; /* 2 */ | |
229 box-sizing: content-box; | |
230 } | |
231 | |
232 /* | |
233 * Removes inner padding and search cancel button in Safari 5 and Chrome | |
234 * on OS X. | |
235 */ | |
236 | |
237 .pure-skin-swi .pure-form input[type="search"]::-webkit-search-cancel-button, | |
238 .pure-skin-swi .pure-form input[type="search"]::-webkit-search-decoration { | |
239 -webkit-appearance: none; | |
240 } | |
241 | |
242 /* | |
243 * Removes inner padding and border in Firefox 3+. | |
244 */ | |
245 | |
246 .pure-skin-swi .pure-form button::-moz-focus-inner, | |
247 .pure-skin-swi .pure-form input::-moz-focus-inner { | |
248 border: 0; | |
249 padding: 0; | |
250 } | |
251 | |
252 /* | |
253 * 1. Removes default vertical scrollbar in IE 6/7/8/9. | |
254 * 2. Improves readability and alignment in all browsers. | |
255 */ | |
256 | |
257 .pure-skin-swi .pure-form textarea { | |
258 overflow: auto; /* 1 */ | |
259 vertical-align: top; /* 2 */ | |
260 } | |
261 /* =============== forms-responsive.css =================*/ | |
262 @media only screen and (max-width : 480px) { | |
263 .pure-skin-swi .pure-form button[type="submit"] { | |
264 margin: 0.7em 0 0; | |
265 } | |
266 | |
267 .pure-skin-swi .pure-form input[type="text"], | |
268 .pure-skin-swi .pure-form input[type="password"], | |
269 .pure-skin-swi .pure-form input[type="email"], | |
270 .pure-skin-swi .pure-form input[type="url"], | |
271 .pure-skin-swi .pure-form input[type="date"], | |
272 .pure-skin-swi .pure-form input[type="month"], | |
273 .pure-skin-swi .pure-form input[type="time"], | |
274 .pure-skin-swi .pure-form input[type="datetime"], | |
275 .pure-skin-swi .pure-form input[type="datetime-local"], | |
276 .pure-skin-swi .pure-form input[type="week"], | |
277 .pure-skin-swi .pure-form input[type="number"], | |
278 .pure-skin-swi .pure-form input[type="search"], | |
279 .pure-skin-swi .pure-form input[type="tel"], | |
280 .pure-skin-swi .pure-form input[type="color"], | |
281 .pure-skin-swi .pure-form label { | |
282 margin-bottom: 0.3em; | |
283 display: block; | |
284 } | |
285 | |
286 .pure-skin-swi .pure-group input[type="text"], | |
287 .pure-skin-swi .pure-group input[type="password"], | |
288 .pure-skin-swi .pure-group input[type="email"], | |
289 .pure-skin-swi .pure-group input[type="url"], | |
290 .pure-skin-swi .pure-group input[type="date"], | |
291 .pure-skin-swi .pure-group input[type="month"], | |
292 .pure-skin-swi .pure-group input[type="time"], | |
293 .pure-skin-swi .pure-group input[type="datetime"], | |
294 .pure-skin-swi .pure-group input[type="datetime-local"], | |
295 .pure-skin-swi .pure-group input[type="week"], | |
296 .pure-skin-swi .pure-group input[type="number"], | |
297 .pure-skin-swi .pure-group input[type="search"], | |
298 .pure-skin-swi .pure-group input[type="tel"], | |
299 .pure-skin-swi .pure-group input[type="color"] { | |
300 margin-bottom: 0; | |
301 } | |
302 | |
303 .pure-skin-swi .pure-form-aligned .pure-control-group label { | |
304 margin-bottom: 0.3em; | |
305 text-align: left; | |
306 display: block; | |
307 width: 100%; | |
308 } | |
309 | |
310 .pure-skin-swi .pure-form-aligned .pure-controls { | |
311 margin: 1.5em 0 0 0; | |
312 } | |
313 | |
314 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ | |
315 .pure-skin-swi .pure-form .pure-help-inline, | |
316 .pure-skin-swi .pure-form-message-inline, | |
317 .pure-skin-swi .pure-form-message { | |
318 display: block; | |
319 font-size: 80%; | |
320 /* increased bottom padding to make it group with its related input element */ | |
321 padding: 0.2em 0 0.8em; | |
322 } | |
323 } | |
324 | |
325 /* =============== forms.css =================================*/ | |
326 .pure-skin-swi .pure-form input[type="text"], | |
327 .pure-skin-swi .pure-form input[type="password"], | |
328 .pure-skin-swi .pure-form input[type="email"], | |
329 .pure-skin-swi .pure-form input[type="url"], | |
330 .pure-skin-swi .pure-form input[type="date"], | |
331 .pure-skin-swi .pure-form input[type="month"], | |
332 .pure-skin-swi .pure-form input[type="time"], | |
333 .pure-skin-swi .pure-form input[type="datetime"], | |
334 .pure-skin-swi .pure-form input[type="datetime-local"], | |
335 .pure-skin-swi .pure-form input[type="week"], | |
336 .pure-skin-swi .pure-form input[type="number"], | |
337 .pure-skin-swi .pure-form input[type="search"], | |
338 .pure-skin-swi .pure-form input[type="tel"], | |
339 .pure-skin-swi .pure-form input[type="color"], | |
340 .pure-skin-swi .pure-form select, | |
341 .pure-skin-swi .pure-form textarea { | |
342 padding: 0.5em 0.6em; | |
343 display: inline-block; | |
344 border: 1px solid #e6e6e6; | |
345 font-size: 0.8em; | |
346 box-shadow: inset 0 1px 3px #e6e6e6; | |
347 border-radius: 8px; | |
348 -webkit-transition: 0.3s linear border; | |
349 -moz-transition: 0.3s linear border; | |
350 -ms-transition: 0.3s linear border; | |
351 -o-transition: 0.3s linear border; | |
352 transition: 0.3s linear border; | |
353 -webkit-box-sizing: border-box; | |
354 -moz-box-sizing: border-box; | |
355 box-sizing: border-box; | |
356 -webkit-font-smoothing: antialiased; | |
357 } | |
358 | |
359 .pure-skin-swi .pure-form input[type="text"]:focus, | |
360 .pure-skin-swi .pure-form input[type="password"]:focus, | |
361 .pure-skin-swi .pure-form input[type="email"]:focus, | |
362 .pure-skin-swi .pure-form input[type="url"]:focus, | |
363 .pure-skin-swi .pure-form input[type="date"]:focus, | |
364 .pure-skin-swi .pure-form input[type="month"]:focus, | |
365 .pure-skin-swi .pure-form input[type="time"]:focus, | |
366 .pure-skin-swi .pure-form input[type="datetime"]:focus, | |
367 .pure-skin-swi .pure-form input[type="datetime-local"]:focus, | |
368 .pure-skin-swi .pure-form input[type="week"]:focus, | |
369 .pure-skin-swi .pure-form input[type="number"]:focus, | |
370 .pure-skin-swi .pure-form input[type="search"]:focus, | |
371 .pure-skin-swi .pure-form input[type="tel"]:focus, | |
372 .pure-skin-swi .pure-form input[type="color"]:focus, | |
373 .pure-skin-swi .pure-form select:focus, | |
374 .pure-skin-swi .pure-form textarea:focus { | |
375 outline: 0; | |
376 outline: thin dotted \9; /* IE6-9 */ | |
377 border-color: #129FEA; | |
378 } | |
379 | |
380 .pure-skin-swi .pure-form input[type="file"]:focus, | |
381 .pure-skin-swi .pure-form input[type="radio"]:focus, | |
382 .pure-skin-swi .pure-form input[type="checkbox"]:focus { | |
383 outline: thin dotted #333; | |
384 outline: 1px auto #129FEA; | |
385 } | |
386 .pure-skin-swi .pure-form .pure-checkbox, | |
387 .pure-skin-swi .pure-form .pure-radio { | |
388 margin: 0.5em 0; | |
389 display: block; | |
390 } | |
391 .pure-skin-swi .pure-form input[type="text"][disabled], | |
392 .pure-skin-swi .pure-form input[type="password"][disabled], | |
393 .pure-skin-swi .pure-form input[type="email"][disabled], | |
394 .pure-skin-swi .pure-form input[type="url"][disabled], | |
395 .pure-skin-swi .pure-form input[type="date"][disabled], | |
396 .pure-skin-swi .pure-form input[type="month"][disabled], | |
397 .pure-skin-swi .pure-form input[type="time"][disabled], | |
398 .pure-skin-swi .pure-form input[type="datetime"][disabled], | |
399 .pure-skin-swi .pure-form input[type="datetime-local"][disabled], | |
400 .pure-skin-swi .pure-form input[type="week"][disabled], | |
401 .pure-skin-swi .pure-form input[type="number"][disabled], | |
402 .pure-skin-swi .pure-form input[type="search"][disabled], | |
403 .pure-skin-swi .pure-form input[type="tel"][disabled], | |
404 .pure-skin-swi .pure-form input[type="color"][disabled], | |
405 .pure-skin-swi .pure-form select[disabled], | |
406 .pure-skin-swi .pure-form textarea[disabled] { | |
407 cursor: not-allowed; | |
408 box-shadow: inset 0 1px 10px #ededed; | |
409 background-color: #ededed; | |
410 color: #adadad; | |
411 border-color: #e6e6e6; | |
412 } | |
413 .pure-skin-swi .pure-form input[readonly], | |
414 .pure-skin-swi .pure-form select[readonly], | |
415 .pure-skin-swi .pure-form textarea[readonly], | |
416 .pure-skin-swi .pure-form input[readonly]:focus, | |
417 .pure-skin-swi .pure-form select[readonly]:focus, | |
418 .pure-skin-swi .pure-form textarea[readonly]:focus { | |
419 background: #eee; /* menu hover bg color */ | |
420 color: #777; /* menu text color */ | |
421 border-color: #ccc; | |
422 } | |
423 .pure-skin-swi .pure-form input:focus:invalid, | |
424 .pure-skin-swi .pure-form textarea:focus:invalid, | |
425 .pure-skin-swi .pure-form select:focus:invalid { | |
426 color: #b94a48; | |
427 border: 1px solid #ee5f5b; | |
428 } | |
429 .pure-skin-swi .pure-form input:focus:invalid:focus, | |
430 .pure-skin-swi .pure-form textarea:focus:invalid:focus, | |
431 .pure-skin-swi .pure-form select:focus:invalid:focus { | |
432 border-color: #e9322d; | |
433 } | |
434 .pure-skin-swi .pure-form input[type="file"]:focus:invalid:focus, | |
435 .pure-skin-swi .pure-form input[type="radio"]:focus:invalid:focus, | |
436 .pure-skin-swi .pure-form input[type="checkbox"]:focus:invalid:focus { | |
437 outline-color: #e9322d; | |
438 } | |
439 .pure-skin-swi .pure-form select { | |
440 border: 1px solid #e6e6e6; | |
441 background-color: white; | |
442 } | |
443 .pure-skin-swi .pure-form select[multiple] { | |
444 height: auto; | |
445 } | |
446 .pure-skin-swi .pure-form label { | |
447 margin: 0.5em 0 0.2em; | |
448 color: #4f4f4f; | |
449 font-size:90%; | |
450 } | |
451 .pure-skin-swi .pure-form fieldset { | |
452 margin: 0; | |
453 padding: 0.35em 0 0.75em; | |
454 border: 0; | |
455 } | |
456 .pure-skin-swi .pure-form legend { | |
457 display: block; | |
458 width: 100%; | |
459 padding: 0.3em 0; | |
460 margin-bottom: 0.3em; | |
461 font-size: 125%; | |
462 color: #262626; | |
463 border-bottom: 1px solid #ededed; | |
464 } | |
465 | |
466 .pure-skin-swi .pure-form-stacked input[type="text"], | |
467 .pure-skin-swi .pure-form-stacked input[type="password"], | |
468 .pure-skin-swi .pure-form-stacked input[type="email"], | |
469 .pure-skin-swi .pure-form-stacked input[type="url"], | |
470 .pure-skin-swi .pure-form-stacked input[type="date"], | |
471 .pure-skin-swi .pure-form-stacked input[type="month"], | |
472 .pure-skin-swi .pure-form-stacked input[type="time"], | |
473 .pure-skin-swi .pure-form-stacked input[type="datetime"], | |
474 .pure-skin-swi .pure-form-stacked input[type="datetime-local"], | |
475 .pure-skin-swi .pure-form-stacked input[type="week"], | |
476 .pure-skin-swi .pure-form-stacked input[type="number"], | |
477 .pure-skin-swi .pure-form-stacked input[type="search"], | |
478 .pure-skin-swi .pure-form-stacked input[type="tel"], | |
479 .pure-skin-swi .pure-form-stacked input[type="color"], | |
480 .pure-skin-swi .pure-form-stacked select, | |
481 .pure-skin-swi .pure-form-stacked label, | |
482 .pure-skin-swi .pure-form-stacked textarea { | |
483 display: block; | |
484 margin: 0.25em 0; | |
485 } | |
486 | |
487 .pure-skin-swi .pure-form-aligned input, | |
488 .pure-skin-swi .pure-form-aligned textarea, | |
489 .pure-skin-swi .pure-form-aligned select, | |
490 /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ | |
491 .pure-skin-swi .pure-form-aligned .pure-help-inline, | |
492 .pure-skin-swi .pure-form-message-inline { | |
493 display: inline-block; | |
494 *display: inline; /* IE7 inline-block hack */ | |
495 *zoom: 1; | |
496 vertical-align: middle; | |
497 } | |
498 | |
499 /* aligned Forms */ | |
500 .pure-skin-swi .pure-form-aligned .pure-control-group { | |
501 margin-bottom: 0.5em; | |
502 } | |
503 .pure-skin-swi .pure-form-aligned .pure-control-group label { | |
504 text-align: right; | |
505 display: inline-block; | |
506 vertical-align: middle; | |
507 width: 10em; | |
508 margin: 0 1em 0 0; | |
509 } | |
510 .pure-skin-swi .pure-form-aligned .pure-controls { | |
511 margin: 1.5em 0 0 10em; | |
512 } | |
513 | |
514 /* Rounded Inputs */ | |
515 .pure-skin-swi .pure-form input.pure-input-rounded, | |
516 .pure-skin-swi .pure-form .pure-input-rounded { | |
517 border-radius: 60px; | |
518 padding: 0.5em 1em; | |
519 } | |
520 | |
521 /* Grouped Inputs */ | |
522 .pure-skin-swi .pure-form .pure-group fieldset { | |
523 margin-bottom: 10px; | |
524 } | |
525 .pure-skin-swi .pure-form .pure-group input { | |
526 display: block; | |
527 padding: 0.5em 0.6em; | |
528 margin: 0; | |
529 border-radius: 0; | |
530 position: relative; | |
531 top: -1px; | |
532 } | |
533 .pure-skin-swi .pure-form .pure-group input:focus { | |
534 z-index: 2; | |
535 } | |
536 .pure-skin-swi .pure-form .pure-group input:first-child { | |
537 top: 1px; | |
538 border-radius: 8px 8px 0px 0px; | |
539 } | |
540 .pure-skin-swi .pure-form .pure-group input:last-child { | |
541 top: -2px; | |
542 border-radius: 0px 0px 8px 8px; | |
543 } | |
544 .pure-skin-swi .pure-form .pure-group button { | |
545 margin: 0.35em 0; | |
546 } | |
547 | |
548 .pure-skin-swi .pure-form .pure-input-1 { | |
549 width: 100%; | |
550 } | |
551 .pure-skin-swi .pure-form .pure-input-2-3 { | |
552 width: 66%; | |
553 } | |
554 .pure-skin-swi .pure-form .pure-input-1-2 { | |
555 width: 50%; | |
556 } | |
557 .pure-skin-swi .pure-form .pure-input-1-3 { | |
558 width: 33%; | |
559 } | |
560 .pure-skin-swi .pure-form .pure-input-1-4 { | |
561 width: 25%; | |
562 } | |
563 | |
564 /* Inline help for forms */ | |
565 /* Note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ | |
566 .pure-skin-swi .pure-form .pure-help-inline, | |
567 .pure-skin-swi .pure-form-message-inline { | |
568 display: inline-block; | |
569 padding-left: 0.3em; | |
570 color: #adadad; | |
571 vertical-align: middle; | |
572 font-size: 90%; | |
573 } | |
574 | |
575 /* Block help for forms */ | |
576 .pure-skin-swi .pure-form-message { | |
577 display: block; | |
578 color: #adadad; | |
579 font-size: 90%; | |
580 } | |
581 /* note no template for forms-r.css. no skinnable properties */ | |
582 | |
583 /* foundational CSS */ | |
584 .pure-skin-swi .pure-table { | |
585 /* Remove spacing between table cells (from Normalize.css) */ | |
586 border-collapse: collapse; | |
587 border-spacing: 0; | |
588 empty-cells: show; | |
589 border: 1px solid #d7e1e5; | |
590 } | |
591 | |
592 .pure-skin-swi .pure-table caption { | |
593 color: #adadad; | |
594 font: italic 85%/1 arial, sans-serif; | |
595 padding: 1em 0; | |
596 text-align: center; | |
597 } | |
598 | |
599 .pure-skin-swi .pure-table td, | |
600 .pure-skin-swi .pure-table th { | |
601 border-left: 1px solid #d7e1e5;/* inner column border */ | |
602 border-width: 0 0 0 1px; | |
603 font-size: inherit; | |
604 margin: 0; | |
605 overflow: visible; /*to make ths where the title is really long work*/ | |
606 padding: 0.3em 0.6em; /* cell padding */ | |
607 } | |
608 | |
609 .pure-skin-swi .pure-table td:first-child, | |
610 .pure-skin-swi .pure-table th:first-child { | |
611 border-left-width: 0; | |
612 } | |
613 | |
614 .pure-skin-swi .pure-table thead { | |
615 background-color: #d7e1e5; | |
616 color: #243238; | |
617 text-align: left; | |
618 vertical-align: bottom; | |
619 } | |
620 | |
621 /* | |
622 striping: | |
623 even - #fff (white) | |
624 odd - #f2f2f2 (light gray) | |
625 */ | |
626 .pure-skin-swi .pure-table td { | |
627 background-color: #e9eff1; | |
628 color: #32474e; | |
629 } | |
630 .pure-skin-swi .pure-table-odd td { | |
631 background-color: #d7e1e5; | |
632 color: #1e2b2f; | |
633 } | |
634 | |
635 /* nth-child selector for modern browsers */ | |
636 .pure-skin-swi .pure-table-striped tr:nth-child(2n-1) td { | |
637 background-color: #d7e1e5; | |
638 color: #1e2b2f; | |
639 } | |
640 | |
641 | |
642 /* BORDERED TABLES */ | |
643 .pure-skin-swi .pure-table-bordered td { | |
644 border-bottom: 1px solid #d7e1e5; | |
645 } | |
646 .pure-skin-swi .pure-table-bordered tbody > tr:last-child td, | |
647 .pure-skin-swi .pure-table-horizontal tbody > tr:last-child td { | |
648 border-bottom-width: 0; | |
649 } | |
650 | |
651 /* HORIZONTAL BORDERED TABLES */ | |
652 .pure-skin-swi .pure-table-horizontal td, | |
653 .pure-skin-swi .pure-table-horizontal th { | |
654 border-width: 0 0 1px 0; | |
655 border-bottom:1px solid #d7e1e5; | |
656 } | |
657 .pure-skin-swi .pure-table-horizontal tbody > tr:last-child td { | |
658 border-bottom-width: 0; | |
659 } | |
660 | |
661 /* from PURE menu-core.css */ | |
662 /*csslint adjoining-classes:false, outline-none:false*/ | |
663 /*TODO: Remove this lint rule override after a refactor of this code.*/ | |
664 | |
665 .pure-skin-swi .pure-menu ul { | |
666 position: absolute; | |
667 visibility: hidden; | |
668 } | |
669 | |
670 .pure-skin-swi .pure-menu.pure-menu-open { | |
671 visibility: visible; | |
672 z-index: 2; | |
673 width: 100%; | |
674 } | |
675 | |
676 .pure-skin-swi .pure-menu ul { | |
677 left: -10000px; | |
678 list-style: none; | |
679 margin: 0; | |
680 padding: 0; | |
681 top: -10000px; | |
682 z-index: 1; | |
683 } | |
684 | |
685 .pure-skin-swi .pure-menu > ul { position: relative; } | |
686 | |
687 .pure-skin-swi .pure-menu-open > ul { | |
688 left: 0; | |
689 top: 0; | |
690 visibility: visible; | |
691 } | |
692 | |
693 .pure-skin-swi .pure-menu-open > ul:focus { | |
694 outline: 0; | |
695 } | |
696 | |
697 .pure-skin-swi .pure-menu li { | |
698 position: relative; | |
699 } | |
700 | |
701 .pure-skin-swi .pure-menu a, .pure-skin-swi .pure-menu .pure-menu-heading { | |
702 display: block; | |
703 color: inherit; | |
704 line-height: 1.5em; | |
705 padding: 0.35em 1.4em; | |
706 text-decoration: none; | |
707 white-space: nowrap; | |
708 } | |
709 | |
710 .pure-skin-swi .pure-menu.pure-menu-horizontal > .pure-menu-heading { | |
711 display: inline-block; | |
712 *display: inline; | |
713 zoom: 1; | |
714 margin: 0; | |
715 vertical-align: middle; | |
716 } | |
717 .pure-skin-swi .pure-menu.pure-menu-horizontal > ul { | |
718 display: inline-block; | |
719 *display: inline; | |
720 zoom: 1; | |
721 vertical-align: middle; | |
722 /* height: 2.4em; removed for Skin Builder */ | |
723 } | |
724 | |
725 .pure-skin-swi .pure-menu li a { padding: 0.35em 1.4em; } | |
726 | |
727 .pure-skin-swi .pure-menu-can-have-children > .pure-menu-label:after { | |
728 content: '\25B8'; | |
729 float: right; | |
730 font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */ | |
731 margin-right: -20px; | |
732 margin-top: -1px; | |
733 } | |
734 | |
735 .pure-skin-swi .pure-menu-can-have-children > .pure-menu-label { | |
736 padding-right: 30px; | |
737 } | |
738 | |
739 .pure-skin-swi .pure-menu-separator { | |
740 background-color: #d7e1e5; | |
741 display: block; | |
742 height: 1px; | |
743 font-size: 0; | |
744 margin: 7px 2px; | |
745 overflow: hidden; | |
746 } | |
747 | |
748 .pure-skin-swi .pure-menu-hidden { | |
749 display: none; | |
750 } | |
751 | |
752 /* FIXED MENU */ | |
753 .pure-skin-swi .pure-menu-fixed { | |
754 position: fixed; | |
755 top:0; | |
756 left:0; | |
757 width: 100%; | |
758 } | |
759 | |
760 | |
761 /* HORIZONTAL MENU CODE */ | |
762 | |
763 /* Initial menus should be inline-block so that they are horizontal */ | |
764 .pure-skin-swi .pure-menu-horizontal li { | |
765 display: inline-block; | |
766 *display: inline; | |
767 zoom: 1; | |
768 vertical-align: middle; | |
769 } | |
770 | |
771 /* Submenus should still be display:block; */ | |
772 .pure-skin-swi .pure-menu-horizontal li li { | |
773 display: block; | |
774 } | |
775 | |
776 /* Content after should be down arrow */ | |
777 .pure-skin-swi .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after { | |
778 content: "\25BE"; | |
779 } | |
780 /*Add extra padding to elements that have the arrow so that the hover looks nice */ | |
781 .pure-skin-swi .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label { | |
782 padding-right: 30px; | |
783 } | |
784 | |
785 /* Adjusting separator for vertical menus */ | |
786 .pure-skin-swi .pure-menu-horizontal li.pure-menu-separator { | |
787 height: 50%; | |
788 width: 1px; | |
789 margin: 0 7px; | |
790 } | |
791 | |
792 /* Submenus should be horizontal separator again */ | |
793 .pure-skin-swi .pure-menu-horizontal li li.pure-menu-separator { | |
794 height: 1px; | |
795 width: auto; | |
796 margin: 7px 2px; | |
797 } | |
798 | |
799 | |
800 /* end from yuicss/menu-core.css *******************************************/ | |
801 /* from yuicss menu-paginator.css */ | |
802 /*csslint box-model:false*/ | |
803 /*TODO: Remove this lint rule override after a refactor of this code.*/ | |
804 | |
805 .pure-skin-swi .pure-paginator { | |
806 | |
807 /* `pure-g` Grid styles */ | |
808 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ | |
809 *letter-spacing: normal; /* reset IE < 8 */ | |
810 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ | |
811 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ | |
812 | |
813 /* `pure-paginator` Specific styles */ | |
814 list-style: none; | |
815 margin: 0; | |
816 padding: 0; | |
817 } | |
818 .opera-only :-o-prefocus, | |
819 .pure-skin-swi .pure-paginator { | |
820 word-spacing: -0.43em; | |
821 } | |
822 | |
823 /* `pure-u` Grid styles */ | |
824 .pure-skin-swi .pure-paginator li { | |
825 display: inline-block; | |
826 *display: inline; /* IE < 8: fake inline-block */ | |
827 zoom: 1; | |
828 letter-spacing: normal; | |
829 word-spacing: normal; | |
830 vertical-align: top; | |
831 text-rendering: auto; | |
832 } | |
833 .pure-skin-swi .pure-paginator .pure-button { | |
834 border-radius: 0; | |
835 padding: 0.8em 1.4em; | |
836 vertical-align: top; | |
837 height: 1.1em; | |
838 } | |
839 .pure-skin-swi .pure-paginator .pure-button:focus, | |
840 .pure-skin-swi .pure-paginator .pure-button:active { | |
841 outline-style: none; | |
842 } | |
843 .pure-skin-swi .pure-paginator .prev, | |
844 .pure-skin-swi .pure-paginator .next { | |
845 /*color: #C0C1C3; allow .pure-button to color text*/ | |
846 } | |
847 .pure-skin-swi .pure-paginator .prev { | |
848 border-radius: 8px 0px 0px 8px; | |
849 } | |
850 .pure-skin-swi .pure-paginator .next { | |
851 border-radius: 0px 8px 8px 0px; | |
852 } | |
853 /* end from PURE menu-paginator.css ******************************/ | |
854 /* from PURE menu.css *******************************************/ | |
855 /* MAIN MENU STYLING */ | |
856 /*csslint adjoining-classes:false*/ | |
857 /*TODO: Remove this lint rule override after a refactor of this code.*/ | |
858 | |
859 .pure-skin-swi .pure-menu.pure-menu-open, | |
860 .pure-skin-swi .pure-menu.pure-menu-horizontal li .pure-menu-children { | |
861 background: #e9eff1; /* Old browsers */ | |
862 border: 1px solid #d7e1e5; | |
863 } | |
864 | |
865 /* remove borders for horizontal menus */ | |
866 .pure-skin-swi .pure-menu.pure-menu-horizontal, | |
867 .pure-skin-swi .pure-menu.pure-menu-horizontal .pure-menu-heading { | |
868 border: none; | |
869 } | |
870 | |
871 | |
872 /* LINK STYLES */ | |
873 | |
874 .pure-skin-swi .pure-menu a { | |
875 border: 1px solid transparent; | |
876 border-left: none; | |
877 border-right: none; | |
878 | |
879 } | |
880 | |
881 .pure-skin-swi .pure-menu a, | |
882 .pure-skin-swi .pure-menu .pure-menu-can-have-children > li:after { | |
883 color: #32474e; | |
884 } | |
885 | |
886 .pure-skin-swi .pure-menu .pure-menu-can-have-children > li:hover:after { | |
887 color: #1e2b2f; | |
888 } | |
889 | |
890 /* Focus style for a dropdown menu-item when the parent has been opened */ | |
891 .pure-skin-swi .pure-menu .pure-menu-open { | |
892 background: #cddbdf; | |
893 } | |
894 | |
895 .pure-skin-swi .pure-menu li a:hover, | |
896 .pure-skin-swi .pure-menu li a:focus { | |
897 background: #cddbdf; | |
898 } | |
899 | |
900 /* DISABLED STATES */ | |
901 .pure-skin-swi .pure-menu li.pure-menu-disabled a:hover, | |
902 .pure-skin-swi .pure-menu li.pure-menu-disabled a:focus { | |
903 background: #e9eff1; | |
904 color: #89a9b3; | |
905 } | |
906 | |
907 .pure-skin-swi .pure-menu .pure-menu-disabled > a { | |
908 background-image: none; | |
909 border-color: transparent; | |
910 cursor: default; | |
911 } | |
912 | |
913 .pure-skin-swi .pure-menu .pure-menu-disabled > a, | |
914 .pure-skin-swi .pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after { | |
915 color: #89a9b3; | |
916 } | |
917 | |
918 /* HEADINGS */ | |
919 .pure-skin-swi .pure-menu .pure-menu-heading { | |
920 color: #12191c; | |
921 text-transform: uppercase; | |
922 font-size: 90%; | |
923 margin-top: 0.5em; | |
924 border-bottom: solid 1px #d7e1e5; | |
925 } | |
926 | |
927 | |
928 /* SELECTED MENU ITEM */ | |
929 .pure-skin-swi .pure-menu li.pure-menu-selected a { | |
930 background-color: #457387; | |
931 color: #fcfdfd; | |
932 } | |
933 | |
934 /* FIXED MENU */ | |
935 .pure-skin-swi .pure-menu.pure-menu-open.pure-menu-fixed { | |
936 border: none; | |
937 border-bottom: 1px solid #d7e1e5; | |
938 } | |
939 /* end from PURE menu.css ***********************************/ | |
940 /* from PURE menu-responsive.css ****************************/ | |
941 /* RESPONSIVE */ | |
942 | |
943 @media (max-width: 480px) { | |
944 | |
945 .pure-skin-swi .pure-menu-horizontal { | |
946 width:100%; | |
947 } | |
948 | |
949 .pure-skin-swi .pure-menu-children li { | |
950 display: block; | |
951 border-bottom:1px solid #d7e1e5; | |
952 } | |
953 | |
954 } | |
955 /* end from menu-responsive.css ******************/ | |
956 | |
957 |