|
|
pure.css - cl-yag - Common Lisp Yet Another website Generator |
|
|
 |
git clone git://bitreich.org/cl-yag/ git://enlrupgkhuxnvlhsf6lc3fziv5h2hhfrinws65d7roiv6bfj7d652fid.onion/cl-yag/ (git://bitreich.org) |
|
|
 |
Log |
|
|
 |
Files |
|
|
 |
Refs |
|
|
 |
Tags |
|
|
 |
README |
|
|
 |
LICENSE |
|
|
|
--- |
|
|
|
pure.css (31931B) |
|
|
|
--- |
|
|
|
1 /*! |
|
|
|
2 Pure v1.0.0 |
|
|
|
3 Copyright 2013 Yahoo! |
|
|
|
4 Licensed under the BSD License. |
|
|
|
5 https://github.com/yahoo/pure/blob/master/LICENSE.md |
|
|
|
6 */ |
|
|
|
7 /*! |
|
|
|
8 normalize.css v^3.0 | MIT License | git.io/normalize |
|
|
|
9 Copyright (c) Nicolas Gallagher and Jonathan Neal |
|
|
|
10 */ |
|
|
|
11 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ |
|
|
|
12 |
|
|
|
13 /** |
|
|
|
14 * 1. Set default font family to sans-serif. |
|
|
|
15 * 2. Prevent iOS and IE text size adjust after device orientation change, |
|
|
|
16 * without disabling user zoom. |
|
|
|
17 */ |
|
|
|
18 |
|
|
|
19 html { |
|
|
|
20 font-family: sans-serif; /* 1 */ |
|
|
|
21 -ms-text-size-adjust: 100%; /* 2 */ |
|
|
|
22 -webkit-text-size-adjust: 100%; /* 2 */ |
|
|
|
23 } |
|
|
|
24 |
|
|
|
25 /** |
|
|
|
26 * Remove default margin. |
|
|
|
27 */ |
|
|
|
28 |
|
|
|
29 body { |
|
|
|
30 margin: 0; |
|
|
|
31 } |
|
|
|
32 |
|
|
|
33 /* HTML5 display definitions |
|
|
|
34 ========================================================================== */ |
|
|
|
35 |
|
|
|
36 /** |
|
|
|
37 * Correct `block` display not defined for any HTML5 element in IE 8/9. |
|
|
|
38 * Correct `block` display not defined for `details` or `summary` in IE 10/11 |
|
|
|
39 * and Firefox. |
|
|
|
40 * Correct `block` display not defined for `main` in IE 11. |
|
|
|
41 */ |
|
|
|
42 |
|
|
|
43 article, |
|
|
|
44 aside, |
|
|
|
45 details, |
|
|
|
46 figcaption, |
|
|
|
47 figure, |
|
|
|
48 footer, |
|
|
|
49 header, |
|
|
|
50 hgroup, |
|
|
|
51 main, |
|
|
|
52 menu, |
|
|
|
53 nav, |
|
|
|
54 section, |
|
|
|
55 summary { |
|
|
|
56 display: block; |
|
|
|
57 } |
|
|
|
58 |
|
|
|
59 /** |
|
|
|
60 * 1. Correct `inline-block` display not defined in IE 8/9. |
|
|
|
61 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
|
|
|
62 */ |
|
|
|
63 |
|
|
|
64 audio, |
|
|
|
65 canvas, |
|
|
|
66 progress, |
|
|
|
67 video { |
|
|
|
68 display: inline-block; /* 1 */ |
|
|
|
69 vertical-align: baseline; /* 2 */ |
|
|
|
70 } |
|
|
|
71 |
|
|
|
72 /** |
|
|
|
73 * Prevent modern browsers from displaying `audio` without controls. |
|
|
|
74 * Remove excess height in iOS 5 devices. |
|
|
|
75 */ |
|
|
|
76 |
|
|
|
77 audio:not([controls]) { |
|
|
|
78 display: none; |
|
|
|
79 height: 0; |
|
|
|
80 } |
|
|
|
81 |
|
|
|
82 /** |
|
|
|
83 * Address `[hidden]` styling not present in IE 8/9/10. |
|
|
|
84 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. |
|
|
|
85 */ |
|
|
|
86 |
|
|
|
87 [hidden], |
|
|
|
88 template { |
|
|
|
89 display: none; |
|
|
|
90 } |
|
|
|
91 |
|
|
|
92 /* Links |
|
|
|
93 ========================================================================== */ |
|
|
|
94 |
|
|
|
95 /** |
|
|
|
96 * Remove the gray background color from active links in IE 10. |
|
|
|
97 */ |
|
|
|
98 |
|
|
|
99 a { |
|
|
|
100 background-color: transparent; |
|
|
|
101 } |
|
|
|
102 |
|
|
|
103 /** |
|
|
|
104 * Improve readability of focused elements when they are also in an |
|
|
|
105 * active/hover state. |
|
|
|
106 */ |
|
|
|
107 |
|
|
|
108 a:active, |
|
|
|
109 a:hover { |
|
|
|
110 outline: 0; |
|
|
|
111 } |
|
|
|
112 |
|
|
|
113 /* Text-level semantics |
|
|
|
114 ========================================================================== */ |
|
|
|
115 |
|
|
|
116 /** |
|
|
|
117 * Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
|
|
|
118 */ |
|
|
|
119 |
|
|
|
120 abbr[title] { |
|
|
|
121 border-bottom: 1px dotted; |
|
|
|
122 } |
|
|
|
123 |
|
|
|
124 /** |
|
|
|
125 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
|
|
|
126 */ |
|
|
|
127 |
|
|
|
128 b, |
|
|
|
129 strong { |
|
|
|
130 font-weight: bold; |
|
|
|
131 } |
|
|
|
132 |
|
|
|
133 /** |
|
|
|
134 * Address styling not present in Safari and Chrome. |
|
|
|
135 */ |
|
|
|
136 |
|
|
|
137 dfn { |
|
|
|
138 font-style: italic; |
|
|
|
139 } |
|
|
|
140 |
|
|
|
141 /** |
|
|
|
142 * Address variable `h1` font-size and margin within `section` and `article` |
|
|
|
143 * contexts in Firefox 4+, Safari, and Chrome. |
|
|
|
144 */ |
|
|
|
145 |
|
|
|
146 h1 { |
|
|
|
147 font-size: 2em; |
|
|
|
148 margin: 0.67em 0; |
|
|
|
149 } |
|
|
|
150 |
|
|
|
151 /** |
|
|
|
152 * Address styling not present in IE 8/9. |
|
|
|
153 */ |
|
|
|
154 |
|
|
|
155 mark { |
|
|
|
156 background: #ff0; |
|
|
|
157 color: #000; |
|
|
|
158 } |
|
|
|
159 |
|
|
|
160 /** |
|
|
|
161 * Address inconsistent and variable font size in all browsers. |
|
|
|
162 */ |
|
|
|
163 |
|
|
|
164 small { |
|
|
|
165 font-size: 80%; |
|
|
|
166 } |
|
|
|
167 |
|
|
|
168 /** |
|
|
|
169 * Prevent `sub` and `sup` affecting `line-height` in all browsers. |
|
|
|
170 */ |
|
|
|
171 |
|
|
|
172 sub, |
|
|
|
173 sup { |
|
|
|
174 font-size: 75%; |
|
|
|
175 line-height: 0; |
|
|
|
176 position: relative; |
|
|
|
177 vertical-align: baseline; |
|
|
|
178 } |
|
|
|
179 |
|
|
|
180 sup { |
|
|
|
181 top: -0.5em; |
|
|
|
182 } |
|
|
|
183 |
|
|
|
184 sub { |
|
|
|
185 bottom: -0.25em; |
|
|
|
186 } |
|
|
|
187 |
|
|
|
188 /* Embedded content |
|
|
|
189 ========================================================================== */ |
|
|
|
190 |
|
|
|
191 /** |
|
|
|
192 * Remove border when inside `a` element in IE 8/9/10. |
|
|
|
193 */ |
|
|
|
194 |
|
|
|
195 img { |
|
|
|
196 border: 0; |
|
|
|
197 } |
|
|
|
198 |
|
|
|
199 /** |
|
|
|
200 * Correct overflow not hidden in IE 9/10/11. |
|
|
|
201 */ |
|
|
|
202 |
|
|
|
203 svg:not(:root) { |
|
|
|
204 overflow: hidden; |
|
|
|
205 } |
|
|
|
206 |
|
|
|
207 /* Grouping content |
|
|
|
208 ========================================================================== */ |
|
|
|
209 |
|
|
|
210 /** |
|
|
|
211 * Address margin not present in IE 8/9 and Safari. |
|
|
|
212 */ |
|
|
|
213 |
|
|
|
214 figure { |
|
|
|
215 margin: 1em 40px; |
|
|
|
216 } |
|
|
|
217 |
|
|
|
218 /** |
|
|
|
219 * Address differences between Firefox and other browsers. |
|
|
|
220 */ |
|
|
|
221 |
|
|
|
222 hr { |
|
|
|
223 box-sizing: content-box; |
|
|
|
224 height: 0; |
|
|
|
225 } |
|
|
|
226 |
|
|
|
227 /** |
|
|
|
228 * Contain overflow in all browsers. |
|
|
|
229 */ |
|
|
|
230 |
|
|
|
231 pre { |
|
|
|
232 overflow: auto; |
|
|
|
233 } |
|
|
|
234 |
|
|
|
235 /** |
|
|
|
236 * Address odd `em`-unit font size rendering in all browsers. |
|
|
|
237 */ |
|
|
|
238 |
|
|
|
239 code, |
|
|
|
240 kbd, |
|
|
|
241 pre, |
|
|
|
242 samp { |
|
|
|
243 font-family: monospace, monospace; |
|
|
|
244 font-size: 1em; |
|
|
|
245 } |
|
|
|
246 |
|
|
|
247 /* Forms |
|
|
|
248 ========================================================================== */ |
|
|
|
249 |
|
|
|
250 /** |
|
|
|
251 * Known limitation: by default, Chrome and Safari on OS X allow very limited |
|
|
|
252 * styling of `select`, unless a `border` property is set. |
|
|
|
253 */ |
|
|
|
254 |
|
|
|
255 /** |
|
|
|
256 * 1. Correct color not being inherited. |
|
|
|
257 * Known issue: affects color of disabled elements. |
|
|
|
258 * 2. Correct font properties not being inherited. |
|
|
|
259 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
|
|
|
260 */ |
|
|
|
261 |
|
|
|
262 button, |
|
|
|
263 input, |
|
|
|
264 optgroup, |
|
|
|
265 select, |
|
|
|
266 textarea { |
|
|
|
267 color: inherit; /* 1 */ |
|
|
|
268 font: inherit; /* 2 */ |
|
|
|
269 margin: 0; /* 3 */ |
|
|
|
270 } |
|
|
|
271 |
|
|
|
272 /** |
|
|
|
273 * Address `overflow` set to `hidden` in IE 8/9/10/11. |
|
|
|
274 */ |
|
|
|
275 |
|
|
|
276 button { |
|
|
|
277 overflow: visible; |
|
|
|
278 } |
|
|
|
279 |
|
|
|
280 /** |
|
|
|
281 * Address inconsistent `text-transform` inheritance for `button` and `select`. |
|
|
|
282 * All other form control elements do not inherit `text-transform` values. |
|
|
|
283 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
|
|
|
284 * Correct `select` style inheritance in Firefox. |
|
|
|
285 */ |
|
|
|
286 |
|
|
|
287 button, |
|
|
|
288 select { |
|
|
|
289 text-transform: none; |
|
|
|
290 } |
|
|
|
291 |
|
|
|
292 /** |
|
|
|
293 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
|
|
|
294 * and `video` controls. |
|
|
|
295 * 2. Correct inability to style clickable `input` types in iOS. |
|
|
|
296 * 3. Improve usability and consistency of cursor style between image-type |
|
|
|
297 * `input` and others. |
|
|
|
298 */ |
|
|
|
299 |
|
|
|
300 button, |
|
|
|
301 html input[type="button"], /* 1 */ |
|
|
|
302 input[type="reset"], |
|
|
|
303 input[type="submit"] { |
|
|
|
304 -webkit-appearance: button; /* 2 */ |
|
|
|
305 cursor: pointer; /* 3 */ |
|
|
|
306 } |
|
|
|
307 |
|
|
|
308 /** |
|
|
|
309 * Re-set default cursor for disabled elements. |
|
|
|
310 */ |
|
|
|
311 |
|
|
|
312 button[disabled], |
|
|
|
313 html input[disabled] { |
|
|
|
314 cursor: default; |
|
|
|
315 } |
|
|
|
316 |
|
|
|
317 /** |
|
|
|
318 * Remove inner padding and border in Firefox 4+. |
|
|
|
319 */ |
|
|
|
320 |
|
|
|
321 button::-moz-focus-inner, |
|
|
|
322 input::-moz-focus-inner { |
|
|
|
323 border: 0; |
|
|
|
324 padding: 0; |
|
|
|
325 } |
|
|
|
326 |
|
|
|
327 /** |
|
|
|
328 * Address Firefox 4+ setting `line-height` on `input` using `!important` in |
|
|
|
329 * the UA stylesheet. |
|
|
|
330 */ |
|
|
|
331 |
|
|
|
332 input { |
|
|
|
333 line-height: normal; |
|
|
|
334 } |
|
|
|
335 |
|
|
|
336 /** |
|
|
|
337 * It's recommended that you don't attempt to style these elements. |
|
|
|
338 * Firefox's implementation doesn't respect box-sizing, padding, or width. |
|
|
|
339 * |
|
|
|
340 * 1. Address box sizing set to `content-box` in IE 8/9/10. |
|
|
|
341 * 2. Remove excess padding in IE 8/9/10. |
|
|
|
342 */ |
|
|
|
343 |
|
|
|
344 input[type="checkbox"], |
|
|
|
345 input[type="radio"] { |
|
|
|
346 box-sizing: border-box; /* 1 */ |
|
|
|
347 padding: 0; /* 2 */ |
|
|
|
348 } |
|
|
|
349 |
|
|
|
350 /** |
|
|
|
351 * Fix the cursor style for Chrome's increment/decrement buttons. For certain |
|
|
|
352 * `font-size` values of the `input`, it causes the cursor style of the |
|
|
|
353 * decrement button to change from `default` to `text`. |
|
|
|
354 */ |
|
|
|
355 |
|
|
|
356 input[type="number"]::-webkit-inner-spin-button, |
|
|
|
357 input[type="number"]::-webkit-outer-spin-button { |
|
|
|
358 height: auto; |
|
|
|
359 } |
|
|
|
360 |
|
|
|
361 /** |
|
|
|
362 * 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
|
|
|
363 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. |
|
|
|
364 */ |
|
|
|
365 |
|
|
|
366 input[type="search"] { |
|
|
|
367 -webkit-appearance: textfield; /* 1 */ |
|
|
|
368 box-sizing: content-box; /* 2 */ |
|
|
|
369 } |
|
|
|
370 |
|
|
|
371 /** |
|
|
|
372 * Remove inner padding and search cancel button in Safari and Chrome on OS X. |
|
|
|
373 * Safari (but not Chrome) clips the cancel button when the search input has |
|
|
|
374 * padding (and `textfield` appearance). |
|
|
|
375 */ |
|
|
|
376 |
|
|
|
377 input[type="search"]::-webkit-search-cancel-button, |
|
|
|
378 input[type="search"]::-webkit-search-decoration { |
|
|
|
379 -webkit-appearance: none; |
|
|
|
380 } |
|
|
|
381 |
|
|
|
382 /** |
|
|
|
383 * Define consistent border, margin, and padding. |
|
|
|
384 */ |
|
|
|
385 |
|
|
|
386 fieldset { |
|
|
|
387 border: 1px solid #c0c0c0; |
|
|
|
388 margin: 0 2px; |
|
|
|
389 padding: 0.35em 0.625em 0.75em; |
|
|
|
390 } |
|
|
|
391 |
|
|
|
392 /** |
|
|
|
393 * 1. Correct `color` not being inherited in IE 8/9/10/11. |
|
|
|
394 * 2. Remove padding so people aren't caught out if they zero out fieldsets. |
|
|
|
395 */ |
|
|
|
396 |
|
|
|
397 legend { |
|
|
|
398 border: 0; /* 1 */ |
|
|
|
399 padding: 0; /* 2 */ |
|
|
|
400 } |
|
|
|
401 |
|
|
|
402 /** |
|
|
|
403 * Remove default vertical scrollbar in IE 8/9/10/11. |
|
|
|
404 */ |
|
|
|
405 |
|
|
|
406 textarea { |
|
|
|
407 overflow: auto; |
|
|
|
408 } |
|
|
|
409 |
|
|
|
410 /** |
|
|
|
411 * Don't inherit the `font-weight` (applied by a rule above). |
|
|
|
412 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
|
|
|
413 */ |
|
|
|
414 |
|
|
|
415 optgroup { |
|
|
|
416 font-weight: bold; |
|
|
|
417 } |
|
|
|
418 |
|
|
|
419 /* Tables |
|
|
|
420 ========================================================================== */ |
|
|
|
421 |
|
|
|
422 /** |
|
|
|
423 * Remove most spacing between table cells. |
|
|
|
424 */ |
|
|
|
425 |
|
|
|
426 table { |
|
|
|
427 border-collapse: collapse; |
|
|
|
428 border-spacing: 0; |
|
|
|
429 } |
|
|
|
430 |
|
|
|
431 td, |
|
|
|
432 th { |
|
|
|
433 padding: 0; |
|
|
|
434 } |
|
|
|
435 |
|
|
|
436 /*csslint important:false*/ |
|
|
|
437 |
|
|
|
438 /* ========================================================================== |
|
|
|
439 Pure Base Extras |
|
|
|
440 ========================================================================== */ |
|
|
|
441 |
|
|
|
442 /** |
|
|
|
443 * Extra rules that Pure adds on top of Normalize.css |
|
|
|
444 */ |
|
|
|
445 |
|
|
|
446 /** |
|
|
|
447 * Always hide an element when it has the `hidden` HTML attribute. |
|
|
|
448 */ |
|
|
|
449 |
|
|
|
450 .hidden, |
|
|
|
451 [hidden] { |
|
|
|
452 display: none !important; |
|
|
|
453 } |
|
|
|
454 |
|
|
|
455 /** |
|
|
|
456 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining |
|
|
|
457 * aspect ratio. |
|
|
|
458 */ |
|
|
|
459 .pure-img { |
|
|
|
460 max-width: 100%; |
|
|
|
461 height: auto; |
|
|
|
462 display: block; |
|
|
|
463 } |
|
|
|
464 |
|
|
|
465 /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ |
|
|
|
466 |
|
|
|
467 .pure-g { |
|
|
|
468 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ |
|
|
|
469 *letter-spacing: normal; /* reset IE < 8 */ |
|
|
|
470 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ |
|
|
|
471 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ |
|
|
|
472 |
|
|
|
473 /* |
|
|
|
474 Sets the font stack to fonts known to work properly with the above letter |
|
|
|
475 and word spacings. See: https://github.com/yahoo/pure/issues/41/ |
|
|
|
476 |
|
|
|
477 The following font stack makes Pure Grids work on all known environments. |
|
|
|
478 |
|
|
|
479 * FreeSans: Ships with many Linux distros, including Ubuntu |
|
|
|
480 |
|
|
|
481 * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and |
|
|
|
482 Arial to get picked up by the browser, even though neither is available |
|
|
|
483 in Chrome OS. |
|
|
|
484 |
|
|
|
485 * Droid Sans: Ships with all versions of Android. |
|
|
|
486 |
|
|
|
487 * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. |
|
|
|
488 */ |
|
|
|
489 font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; |
|
|
|
490 |
|
|
|
491 /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ |
|
|
|
492 display: -webkit-box; |
|
|
|
493 display: -webkit-flex; |
|
|
|
494 display: -ms-flexbox; |
|
|
|
495 display: flex; |
|
|
|
496 -webkit-flex-flow: row wrap; |
|
|
|
497 -ms-flex-flow: row wrap; |
|
|
|
498 flex-flow: row wrap; |
|
|
|
499 |
|
|
|
500 /* Prevents distributing space between rows */ |
|
|
|
501 -webkit-align-content: flex-start; |
|
|
|
502 -ms-flex-line-pack: start; |
|
|
|
503 align-content: flex-start; |
|
|
|
504 } |
|
|
|
505 |
|
|
|
506 /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ |
|
|
|
507 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { |
|
|
|
508 table .pure-g { |
|
|
|
509 display: block; |
|
|
|
510 } |
|
|
|
511 } |
|
|
|
512 |
|
|
|
513 /* Opera as of 12 on Windows needs word-spacing. |
|
|
|
514 The ".opera-only" selector is used to prevent actual prefocus styling |
|
|
|
515 and is not required in markup. |
|
|
|
516 */ |
|
|
|
517 .opera-only :-o-prefocus, |
|
|
|
518 .pure-g { |
|
|
|
519 word-spacing: -0.43em; |
|
|
|
520 } |
|
|
|
521 |
|
|
|
522 .pure-u { |
|
|
|
523 display: inline-block; |
|
|
|
524 *display: inline; /* IE < 8: fake inline-block */ |
|
|
|
525 zoom: 1; |
|
|
|
526 letter-spacing: normal; |
|
|
|
527 word-spacing: normal; |
|
|
|
528 vertical-align: top; |
|
|
|
529 text-rendering: auto; |
|
|
|
530 } |
|
|
|
531 |
|
|
|
532 /* |
|
|
|
533 Resets the font family back to the OS/browser's default sans-serif font, |
|
|
|
534 this the same font stack that Normalize.css sets for the `body`. |
|
|
|
535 */ |
|
|
|
536 .pure-g [class *= "pure-u"] { |
|
|
|
537 font-family: sans-serif; |
|
|
|
538 } |
|
|
|
539 |
|
|
|
540 .pure-u-1, |
|
|
|
541 .pure-u-1-1, |
|
|
|
542 .pure-u-1-2, |
|
|
|
543 .pure-u-1-3, |
|
|
|
544 .pure-u-2-3, |
|
|
|
545 .pure-u-1-4, |
|
|
|
546 .pure-u-3-4, |
|
|
|
547 .pure-u-1-5, |
|
|
|
548 .pure-u-2-5, |
|
|
|
549 .pure-u-3-5, |
|
|
|
550 .pure-u-4-5, |
|
|
|
551 .pure-u-5-5, |
|
|
|
552 .pure-u-1-6, |
|
|
|
553 .pure-u-5-6, |
|
|
|
554 .pure-u-1-8, |
|
|
|
555 .pure-u-3-8, |
|
|
|
556 .pure-u-5-8, |
|
|
|
557 .pure-u-7-8, |
|
|
|
558 .pure-u-1-12, |
|
|
|
559 .pure-u-5-12, |
|
|
|
560 .pure-u-7-12, |
|
|
|
561 .pure-u-11-12, |
|
|
|
562 .pure-u-1-24, |
|
|
|
563 .pure-u-2-24, |
|
|
|
564 .pure-u-3-24, |
|
|
|
565 .pure-u-4-24, |
|
|
|
566 .pure-u-5-24, |
|
|
|
567 .pure-u-6-24, |
|
|
|
568 .pure-u-7-24, |
|
|
|
569 .pure-u-8-24, |
|
|
|
570 .pure-u-9-24, |
|
|
|
571 .pure-u-10-24, |
|
|
|
572 .pure-u-11-24, |
|
|
|
573 .pure-u-12-24, |
|
|
|
574 .pure-u-13-24, |
|
|
|
575 .pure-u-14-24, |
|
|
|
576 .pure-u-15-24, |
|
|
|
577 .pure-u-16-24, |
|
|
|
578 .pure-u-17-24, |
|
|
|
579 .pure-u-18-24, |
|
|
|
580 .pure-u-19-24, |
|
|
|
581 .pure-u-20-24, |
|
|
|
582 .pure-u-21-24, |
|
|
|
583 .pure-u-22-24, |
|
|
|
584 .pure-u-23-24, |
|
|
|
585 .pure-u-24-24 { |
|
|
|
586 display: inline-block; |
|
|
|
587 *display: inline; |
|
|
|
588 zoom: 1; |
|
|
|
589 letter-spacing: normal; |
|
|
|
590 word-spacing: normal; |
|
|
|
591 vertical-align: top; |
|
|
|
592 text-rendering: auto; |
|
|
|
593 } |
|
|
|
594 |
|
|
|
595 .pure-u-1-24 { |
|
|
|
596 width: 4.1667%; |
|
|
|
597 *width: 4.1357%; |
|
|
|
598 } |
|
|
|
599 |
|
|
|
600 .pure-u-1-12, |
|
|
|
601 .pure-u-2-24 { |
|
|
|
602 width: 8.3333%; |
|
|
|
603 *width: 8.3023%; |
|
|
|
604 } |
|
|
|
605 |
|
|
|
606 .pure-u-1-8, |
|
|
|
607 .pure-u-3-24 { |
|
|
|
608 width: 12.5000%; |
|
|
|
609 *width: 12.4690%; |
|
|
|
610 } |
|
|
|
611 |
|
|
|
612 .pure-u-1-6, |
|
|
|
613 .pure-u-4-24 { |
|
|
|
614 width: 16.6667%; |
|
|
|
615 *width: 16.6357%; |
|
|
|
616 } |
|
|
|
617 |
|
|
|
618 .pure-u-1-5 { |
|
|
|
619 width: 20%; |
|
|
|
620 *width: 19.9690%; |
|
|
|
621 } |
|
|
|
622 |
|
|
|
623 .pure-u-5-24 { |
|
|
|
624 width: 20.8333%; |
|
|
|
625 *width: 20.8023%; |
|
|
|
626 } |
|
|
|
627 |
|
|
|
628 .pure-u-1-4, |
|
|
|
629 .pure-u-6-24 { |
|
|
|
630 width: 25%; |
|
|
|
631 *width: 24.9690%; |
|
|
|
632 } |
|
|
|
633 |
|
|
|
634 .pure-u-7-24 { |
|
|
|
635 width: 29.1667%; |
|
|
|
636 *width: 29.1357%; |
|
|
|
637 } |
|
|
|
638 |
|
|
|
639 .pure-u-1-3, |
|
|
|
640 .pure-u-8-24 { |
|
|
|
641 width: 33.3333%; |
|
|
|
642 *width: 33.3023%; |
|
|
|
643 } |
|
|
|
644 |
|
|
|
645 .pure-u-3-8, |
|
|
|
646 .pure-u-9-24 { |
|
|
|
647 width: 37.5000%; |
|
|
|
648 *width: 37.4690%; |
|
|
|
649 } |
|
|
|
650 |
|
|
|
651 .pure-u-2-5 { |
|
|
|
652 width: 40%; |
|
|
|
653 *width: 39.9690%; |
|
|
|
654 } |
|
|
|
655 |
|
|
|
656 .pure-u-5-12, |
|
|
|
657 .pure-u-10-24 { |
|
|
|
658 width: 41.6667%; |
|
|
|
659 *width: 41.6357%; |
|
|
|
660 } |
|
|
|
661 |
|
|
|
662 .pure-u-11-24 { |
|
|
|
663 width: 45.8333%; |
|
|
|
664 *width: 45.8023%; |
|
|
|
665 } |
|
|
|
666 |
|
|
|
667 .pure-u-1-2, |
|
|
|
668 .pure-u-12-24 { |
|
|
|
669 width: 50%; |
|
|
|
670 *width: 49.9690%; |
|
|
|
671 } |
|
|
|
672 |
|
|
|
673 .pure-u-13-24 { |
|
|
|
674 width: 54.1667%; |
|
|
|
675 *width: 54.1357%; |
|
|
|
676 } |
|
|
|
677 |
|
|
|
678 .pure-u-7-12, |
|
|
|
679 .pure-u-14-24 { |
|
|
|
680 width: 58.3333%; |
|
|
|
681 *width: 58.3023%; |
|
|
|
682 } |
|
|
|
683 |
|
|
|
684 .pure-u-3-5 { |
|
|
|
685 width: 60%; |
|
|
|
686 *width: 59.9690%; |
|
|
|
687 } |
|
|
|
688 |
|
|
|
689 .pure-u-5-8, |
|
|
|
690 .pure-u-15-24 { |
|
|
|
691 width: 62.5000%; |
|
|
|
692 *width: 62.4690%; |
|
|
|
693 } |
|
|
|
694 |
|
|
|
695 .pure-u-2-3, |
|
|
|
696 .pure-u-16-24 { |
|
|
|
697 width: 66.6667%; |
|
|
|
698 *width: 66.6357%; |
|
|
|
699 } |
|
|
|
700 |
|
|
|
701 .pure-u-17-24 { |
|
|
|
702 width: 70.8333%; |
|
|
|
703 *width: 70.8023%; |
|
|
|
704 } |
|
|
|
705 |
|
|
|
706 .pure-u-3-4, |
|
|
|
707 .pure-u-18-24 { |
|
|
|
708 width: 75%; |
|
|
|
709 *width: 74.9690%; |
|
|
|
710 } |
|
|
|
711 |
|
|
|
712 .pure-u-19-24 { |
|
|
|
713 width: 79.1667%; |
|
|
|
714 *width: 79.1357%; |
|
|
|
715 } |
|
|
|
716 |
|
|
|
717 .pure-u-4-5 { |
|
|
|
718 width: 80%; |
|
|
|
719 *width: 79.9690%; |
|
|
|
720 } |
|
|
|
721 |
|
|
|
722 .pure-u-5-6, |
|
|
|
723 .pure-u-20-24 { |
|
|
|
724 width: 83.3333%; |
|
|
|
725 *width: 83.3023%; |
|
|
|
726 } |
|
|
|
727 |
|
|
|
728 .pure-u-7-8, |
|
|
|
729 .pure-u-21-24 { |
|
|
|
730 width: 87.5000%; |
|
|
|
731 *width: 87.4690%; |
|
|
|
732 } |
|
|
|
733 |
|
|
|
734 .pure-u-11-12, |
|
|
|
735 .pure-u-22-24 { |
|
|
|
736 width: 91.6667%; |
|
|
|
737 *width: 91.6357%; |
|
|
|
738 } |
|
|
|
739 |
|
|
|
740 .pure-u-23-24 { |
|
|
|
741 width: 95.8333%; |
|
|
|
742 *width: 95.8023%; |
|
|
|
743 } |
|
|
|
744 |
|
|
|
745 .pure-u-1, |
|
|
|
746 .pure-u-1-1, |
|
|
|
747 .pure-u-5-5, |
|
|
|
748 .pure-u-24-24 { |
|
|
|
749 width: 100%; |
|
|
|
750 } |
|
|
|
751 .pure-button { |
|
|
|
752 /* Structure */ |
|
|
|
753 display: inline-block; |
|
|
|
754 zoom: 1; |
|
|
|
755 line-height: normal; |
|
|
|
756 white-space: nowrap; |
|
|
|
757 vertical-align: middle; |
|
|
|
758 text-align: center; |
|
|
|
759 cursor: pointer; |
|
|
|
760 -webkit-user-drag: none; |
|
|
|
761 -webkit-user-select: none; |
|
|
|
762 -moz-user-select: none; |
|
|
|
763 -ms-user-select: none; |
|
|
|
764 user-select: none; |
|
|
|
765 box-sizing: border-box; |
|
|
|
766 } |
|
|
|
767 |
|
|
|
768 /* Firefox: Get rid of the inner focus border */ |
|
|
|
769 .pure-button::-moz-focus-inner { |
|
|
|
770 padding: 0; |
|
|
|
771 border: 0; |
|
|
|
772 } |
|
|
|
773 |
|
|
|
774 /* Inherit .pure-g styles */ |
|
|
|
775 .pure-button-group { |
|
|
|
776 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ |
|
|
|
777 *letter-spacing: normal; /* reset IE < 8 */ |
|
|
|
778 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ |
|
|
|
779 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ |
|
|
|
780 } |
|
|
|
781 |
|
|
|
782 .opera-only :-o-prefocus, |
|
|
|
783 .pure-button-group { |
|
|
|
784 word-spacing: -0.43em; |
|
|
|
785 } |
|
|
|
786 |
|
|
|
787 .pure-button-group .pure-button { |
|
|
|
788 letter-spacing: normal; |
|
|
|
789 word-spacing: normal; |
|
|
|
790 vertical-align: top; |
|
|
|
791 text-rendering: auto; |
|
|
|
792 } |
|
|
|
793 |
|
|
|
794 /*csslint outline-none:false*/ |
|
|
|
795 |
|
|
|
796 .pure-button { |
|
|
|
797 font-family: inherit; |
|
|
|
798 font-size: 100%; |
|
|
|
799 padding: 0.5em 1em; |
|
|
|
800 color: #444; /* rgba not supported (IE 8) */ |
|
|
|
801 color: rgba(0, 0, 0, 0.80); /* rgba supported */ |
|
|
|
802 border: 1px solid #999; /*IE 6/7/8*/ |
|
|
|
803 border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ |
|
|
|
804 background-color: #E6E6E6; |
|
|
|
805 text-decoration: none; |
|
|
|
806 border-radius: 2px; |
|
|
|
807 } |
|
|
|
808 |
|
|
|
809 .pure-button-hover, |
|
|
|
810 .pure-button:hover, |
|
|
|
811 .pure-button:focus { |
|
|
|
812 /* csslint ignore:start */ |
|
|
|
813 filter: alpha(opacity=90); |
|
|
|
814 /* csslint ignore:end */ |
|
|
|
815 background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); |
|
|
|
816 background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); |
|
|
|
817 } |
|
|
|
818 .pure-button:focus { |
|
|
|
819 outline: 0; |
|
|
|
820 } |
|
|
|
821 .pure-button-active, |
|
|
|
822 .pure-button:active { |
|
|
|
823 box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; |
|
|
|
824 border-color: #000\9; |
|
|
|
825 } |
|
|
|
826 |
|
|
|
827 .pure-button[disabled], |
|
|
|
828 .pure-button-disabled, |
|
|
|
829 .pure-button-disabled:hover, |
|
|
|
830 .pure-button-disabled:focus, |
|
|
|
831 .pure-button-disabled:active { |
|
|
|
832 border: none; |
|
|
|
833 background-image: none; |
|
|
|
834 /* csslint ignore:start */ |
|
|
|
835 filter: alpha(opacity=40); |
|
|
|
836 /* csslint ignore:end */ |
|
|
|
837 opacity: 0.40; |
|
|
|
838 cursor: not-allowed; |
|
|
|
839 box-shadow: none; |
|
|
|
840 pointer-events: none; |
|
|
|
841 } |
|
|
|
842 |
|
|
|
843 .pure-button-hidden { |
|
|
|
844 display: none; |
|
|
|
845 } |
|
|
|
846 |
|
|
|
847 .pure-button-primary, |
|
|
|
848 .pure-button-selected, |
|
|
|
849 a.pure-button-primary, |
|
|
|
850 a.pure-button-selected { |
|
|
|
851 background-color: rgb(0, 120, 231); |
|
|
|
852 color: #fff; |
|
|
|
853 } |
|
|
|
854 |
|
|
|
855 /* Button Groups */ |
|
|
|
856 .pure-button-group .pure-button { |
|
|
|
857 margin: 0; |
|
|
|
858 border-radius: 0; |
|
|
|
859 border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */ |
|
|
|
860 border-right: 1px solid rgba(0, 0, 0, 0.2); |
|
|
|
861 |
|
|
|
862 } |
|
|
|
863 |
|
|
|
864 .pure-button-group .pure-button:first-child { |
|
|
|
865 border-top-left-radius: 2px; |
|
|
|
866 border-bottom-left-radius: 2px; |
|
|
|
867 } |
|
|
|
868 .pure-button-group .pure-button:last-child { |
|
|
|
869 border-top-right-radius: 2px; |
|
|
|
870 border-bottom-right-radius: 2px; |
|
|
|
871 border-right: none; |
|
|
|
872 } |
|
|
|
873 |
|
|
|
874 /*csslint box-model:false*/ |
|
|
|
875 /* |
|
|
|
876 Box-model set to false because we're setting a height on select elements, which |
|
|
|
877 also have border and padding. This is done because some browsers don't render |
|
|
|
878 the padding. We explicitly set the box-model for select elements to border-box, |
|
|
|
879 so we can ignore the csslint warning. |
|
|
|
880 */ |
|
|
|
881 |
|
|
|
882 .pure-form input[type="text"], |
|
|
|
883 .pure-form input[type="password"], |
|
|
|
884 .pure-form input[type="email"], |
|
|
|
885 .pure-form input[type="url"], |
|
|
|
886 .pure-form input[type="date"], |
|
|
|
887 .pure-form input[type="month"], |
|
|
|
888 .pure-form input[type="time"], |
|
|
|
889 .pure-form input[type="datetime"], |
|
|
|
890 .pure-form input[type="datetime-local"], |
|
|
|
891 .pure-form input[type="week"], |
|
|
|
892 .pure-form input[type="number"], |
|
|
|
893 .pure-form input[type="search"], |
|
|
|
894 .pure-form input[type="tel"], |
|
|
|
895 .pure-form input[type="color"], |
|
|
|
896 .pure-form select, |
|
|
|
897 .pure-form textarea { |
|
|
|
898 padding: 0.5em 0.6em; |
|
|
|
899 display: inline-block; |
|
|
|
900 border: 1px solid #ccc; |
|
|
|
901 box-shadow: inset 0 1px 3px #ddd; |
|
|
|
902 border-radius: 4px; |
|
|
|
903 vertical-align: middle; |
|
|
|
904 box-sizing: border-box; |
|
|
|
905 } |
|
|
|
906 |
|
|
|
907 /* |
|
|
|
908 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
|
|
|
909 since IE8 won't execute CSS that contains a CSS3 selector. |
|
|
|
910 */ |
|
|
|
911 .pure-form input:not([type]) { |
|
|
|
912 padding: 0.5em 0.6em; |
|
|
|
913 display: inline-block; |
|
|
|
914 border: 1px solid #ccc; |
|
|
|
915 box-shadow: inset 0 1px 3px #ddd; |
|
|
|
916 border-radius: 4px; |
|
|
|
917 box-sizing: border-box; |
|
|
|
918 } |
|
|
|
919 |
|
|
|
920 |
|
|
|
921 /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ |
|
|
|
922 /* May be able to remove this tweak as color inputs become more standardized across browsers. */ |
|
|
|
923 .pure-form input[type="color"] { |
|
|
|
924 padding: 0.2em 0.5em; |
|
|
|
925 } |
|
|
|
926 |
|
|
|
927 |
|
|
|
928 .pure-form input[type="text"]:focus, |
|
|
|
929 .pure-form input[type="password"]:focus, |
|
|
|
930 .pure-form input[type="email"]:focus, |
|
|
|
931 .pure-form input[type="url"]:focus, |
|
|
|
932 .pure-form input[type="date"]:focus, |
|
|
|
933 .pure-form input[type="month"]:focus, |
|
|
|
934 .pure-form input[type="time"]:focus, |
|
|
|
935 .pure-form input[type="datetime"]:focus, |
|
|
|
936 .pure-form input[type="datetime-local"]:focus, |
|
|
|
937 .pure-form input[type="week"]:focus, |
|
|
|
938 .pure-form input[type="number"]:focus, |
|
|
|
939 .pure-form input[type="search"]:focus, |
|
|
|
940 .pure-form input[type="tel"]:focus, |
|
|
|
941 .pure-form input[type="color"]:focus, |
|
|
|
942 .pure-form select:focus, |
|
|
|
943 .pure-form textarea:focus { |
|
|
|
944 outline: 0; |
|
|
|
945 border-color: #129FEA; |
|
|
|
946 } |
|
|
|
947 |
|
|
|
948 /* |
|
|
|
949 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
|
|
|
950 since IE8 won't execute CSS that contains a CSS3 selector. |
|
|
|
951 */ |
|
|
|
952 .pure-form input:not([type]):focus { |
|
|
|
953 outline: 0; |
|
|
|
954 border-color: #129FEA; |
|
|
|
955 } |
|
|
|
956 |
|
|
|
957 .pure-form input[type="file"]:focus, |
|
|
|
958 .pure-form input[type="radio"]:focus, |
|
|
|
959 .pure-form input[type="checkbox"]:focus { |
|
|
|
960 outline: thin solid #129FEA; |
|
|
|
961 outline: 1px auto #129FEA; |
|
|
|
962 } |
|
|
|
963 .pure-form .pure-checkbox, |
|
|
|
964 .pure-form .pure-radio { |
|
|
|
965 margin: 0.5em 0; |
|
|
|
966 display: block; |
|
|
|
967 } |
|
|
|
968 |
|
|
|
969 .pure-form input[type="text"][disabled], |
|
|
|
970 .pure-form input[type="password"][disabled], |
|
|
|
971 .pure-form input[type="email"][disabled], |
|
|
|
972 .pure-form input[type="url"][disabled], |
|
|
|
973 .pure-form input[type="date"][disabled], |
|
|
|
974 .pure-form input[type="month"][disabled], |
|
|
|
975 .pure-form input[type="time"][disabled], |
|
|
|
976 .pure-form input[type="datetime"][disabled], |
|
|
|
977 .pure-form input[type="datetime-local"][disabled], |
|
|
|
978 .pure-form input[type="week"][disabled], |
|
|
|
979 .pure-form input[type="number"][disabled], |
|
|
|
980 .pure-form input[type="search"][disabled], |
|
|
|
981 .pure-form input[type="tel"][disabled], |
|
|
|
982 .pure-form input[type="color"][disabled], |
|
|
|
983 .pure-form select[disabled], |
|
|
|
984 .pure-form textarea[disabled] { |
|
|
|
985 cursor: not-allowed; |
|
|
|
986 background-color: #eaeded; |
|
|
|
987 color: #cad2d3; |
|
|
|
988 } |
|
|
|
989 |
|
|
|
990 /* |
|
|
|
991 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
|
|
|
992 since IE8 won't execute CSS that contains a CSS3 selector. |
|
|
|
993 */ |
|
|
|
994 .pure-form input:not([type])[disabled] { |
|
|
|
995 cursor: not-allowed; |
|
|
|
996 background-color: #eaeded; |
|
|
|
997 color: #cad2d3; |
|
|
|
998 } |
|
|
|
999 .pure-form input[readonly], |
|
|
|
1000 .pure-form select[readonly], |
|
|
|
1001 .pure-form textarea[readonly] { |
|
|
|
1002 background-color: #eee; /* menu hover bg color */ |
|
|
|
1003 color: #777; /* menu text color */ |
|
|
|
1004 border-color: #ccc; |
|
|
|
1005 } |
|
|
|
1006 |
|
|
|
1007 .pure-form input:focus:invalid, |
|
|
|
1008 .pure-form textarea:focus:invalid, |
|
|
|
1009 .pure-form select:focus:invalid { |
|
|
|
1010 color: #b94a48; |
|
|
|
1011 border-color: #e9322d; |
|
|
|
1012 } |
|
|
|
1013 .pure-form input[type="file"]:focus:invalid:focus, |
|
|
|
1014 .pure-form input[type="radio"]:focus:invalid:focus, |
|
|
|
1015 .pure-form input[type="checkbox"]:focus:invalid:focus { |
|
|
|
1016 outline-color: #e9322d; |
|
|
|
1017 } |
|
|
|
1018 .pure-form select { |
|
|
|
1019 /* Normalizes the height; padding is not sufficient. */ |
|
|
|
1020 height: 2.25em; |
|
|
|
1021 border: 1px solid #ccc; |
|
|
|
1022 background-color: white; |
|
|
|
1023 } |
|
|
|
1024 .pure-form select[multiple] { |
|
|
|
1025 height: auto; |
|
|
|
1026 } |
|
|
|
1027 .pure-form label { |
|
|
|
1028 margin: 0.5em 0 0.2em; |
|
|
|
1029 } |
|
|
|
1030 .pure-form fieldset { |
|
|
|
1031 margin: 0; |
|
|
|
1032 padding: 0.35em 0 0.75em; |
|
|
|
1033 border: 0; |
|
|
|
1034 } |
|
|
|
1035 .pure-form legend { |
|
|
|
1036 display: block; |
|
|
|
1037 width: 100%; |
|
|
|
1038 padding: 0.3em 0; |
|
|
|
1039 margin-bottom: 0.3em; |
|
|
|
1040 color: #333; |
|
|
|
1041 border-bottom: 1px solid #e5e5e5; |
|
|
|
1042 } |
|
|
|
1043 |
|
|
|
1044 .pure-form-stacked input[type="text"], |
|
|
|
1045 .pure-form-stacked input[type="password"], |
|
|
|
1046 .pure-form-stacked input[type="email"], |
|
|
|
1047 .pure-form-stacked input[type="url"], |
|
|
|
1048 .pure-form-stacked input[type="date"], |
|
|
|
1049 .pure-form-stacked input[type="month"], |
|
|
|
1050 .pure-form-stacked input[type="time"], |
|
|
|
1051 .pure-form-stacked input[type="datetime"], |
|
|
|
1052 .pure-form-stacked input[type="datetime-local"], |
|
|
|
1053 .pure-form-stacked input[type="week"], |
|
|
|
1054 .pure-form-stacked input[type="number"], |
|
|
|
1055 .pure-form-stacked input[type="search"], |
|
|
|
1056 .pure-form-stacked input[type="tel"], |
|
|
|
1057 .pure-form-stacked input[type="color"], |
|
|
|
1058 .pure-form-stacked input[type="file"], |
|
|
|
1059 .pure-form-stacked select, |
|
|
|
1060 .pure-form-stacked label, |
|
|
|
1061 .pure-form-stacked textarea { |
|
|
|
1062 display: block; |
|
|
|
1063 margin: 0.25em 0; |
|
|
|
1064 } |
|
|
|
1065 |
|
|
|
1066 /* |
|
|
|
1067 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
|
|
|
1068 since IE8 won't execute CSS that contains a CSS3 selector. |
|
|
|
1069 */ |
|
|
|
1070 .pure-form-stacked input:not([type]) { |
|
|
|
1071 display: block; |
|
|
|
1072 margin: 0.25em 0; |
|
|
|
1073 } |
|
|
|
1074 .pure-form-aligned input, |
|
|
|
1075 .pure-form-aligned textarea, |
|
|
|
1076 .pure-form-aligned select, |
|
|
|
1077 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ |
|
|
|
1078 .pure-form-aligned .pure-help-inline, |
|
|
|
1079 .pure-form-message-inline { |
|
|
|
1080 display: inline-block; |
|
|
|
1081 *display: inline; |
|
|
|
1082 *zoom: 1; |
|
|
|
1083 vertical-align: middle; |
|
|
|
1084 } |
|
|
|
1085 .pure-form-aligned textarea { |
|
|
|
1086 vertical-align: top; |
|
|
|
1087 } |
|
|
|
1088 |
|
|
|
1089 /* Aligned Forms */ |
|
|
|
1090 .pure-form-aligned .pure-control-group { |
|
|
|
1091 margin-bottom: 0.5em; |
|
|
|
1092 } |
|
|
|
1093 .pure-form-aligned .pure-control-group label { |
|
|
|
1094 text-align: right; |
|
|
|
1095 display: inline-block; |
|
|
|
1096 vertical-align: middle; |
|
|
|
1097 width: 10em; |
|
|
|
1098 margin: 0 1em 0 0; |
|
|
|
1099 } |
|
|
|
1100 .pure-form-aligned .pure-controls { |
|
|
|
1101 margin: 1.5em 0 0 11em; |
|
|
|
1102 } |
|
|
|
1103 |
|
|
|
1104 /* Rounded Inputs */ |
|
|
|
1105 .pure-form input.pure-input-rounded, |
|
|
|
1106 .pure-form .pure-input-rounded { |
|
|
|
1107 border-radius: 2em; |
|
|
|
1108 padding: 0.5em 1em; |
|
|
|
1109 } |
|
|
|
1110 |
|
|
|
1111 /* Grouped Inputs */ |
|
|
|
1112 .pure-form .pure-group fieldset { |
|
|
|
1113 margin-bottom: 10px; |
|
|
|
1114 } |
|
|
|
1115 .pure-form .pure-group input, |
|
|
|
1116 .pure-form .pure-group textarea { |
|
|
|
1117 display: block; |
|
|
|
1118 padding: 10px; |
|
|
|
1119 margin: 0 0 -1px; |
|
|
|
1120 border-radius: 0; |
|
|
|
1121 position: relative; |
|
|
|
1122 top: -1px; |
|
|
|
1123 } |
|
|
|
1124 .pure-form .pure-group input:focus, |
|
|
|
1125 .pure-form .pure-group textarea:focus { |
|
|
|
1126 z-index: 3; |
|
|
|
1127 } |
|
|
|
1128 .pure-form .pure-group input:first-child, |
|
|
|
1129 .pure-form .pure-group textarea:first-child { |
|
|
|
1130 top: 1px; |
|
|
|
1131 border-radius: 4px 4px 0 0; |
|
|
|
1132 margin: 0; |
|
|
|
1133 } |
|
|
|
1134 .pure-form .pure-group input:first-child:last-child, |
|
|
|
1135 .pure-form .pure-group textarea:first-child:last-child { |
|
|
|
1136 top: 1px; |
|
|
|
1137 border-radius: 4px; |
|
|
|
1138 margin: 0; |
|
|
|
1139 } |
|
|
|
1140 .pure-form .pure-group input:last-child, |
|
|
|
1141 .pure-form .pure-group textarea:last-child { |
|
|
|
1142 top: -2px; |
|
|
|
1143 border-radius: 0 0 4px 4px; |
|
|
|
1144 margin: 0; |
|
|
|
1145 } |
|
|
|
1146 .pure-form .pure-group button { |
|
|
|
1147 margin: 0.35em 0; |
|
|
|
1148 } |
|
|
|
1149 |
|
|
|
1150 .pure-form .pure-input-1 { |
|
|
|
1151 width: 100%; |
|
|
|
1152 } |
|
|
|
1153 .pure-form .pure-input-3-4 { |
|
|
|
1154 width: 75%; |
|
|
|
1155 } |
|
|
|
1156 .pure-form .pure-input-2-3 { |
|
|
|
1157 width: 66%; |
|
|
|
1158 } |
|
|
|
1159 .pure-form .pure-input-1-2 { |
|
|
|
1160 width: 50%; |
|
|
|
1161 } |
|
|
|
1162 .pure-form .pure-input-1-3 { |
|
|
|
1163 width: 33%; |
|
|
|
1164 } |
|
|
|
1165 .pure-form .pure-input-1-4 { |
|
|
|
1166 width: 25%; |
|
|
|
1167 } |
|
|
|
1168 |
|
|
|
1169 /* Inline help for forms */ |
|
|
|
1170 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ |
|
|
|
1171 .pure-form .pure-help-inline, |
|
|
|
1172 .pure-form-message-inline { |
|
|
|
1173 display: inline-block; |
|
|
|
1174 padding-left: 0.3em; |
|
|
|
1175 color: #666; |
|
|
|
1176 vertical-align: middle; |
|
|
|
1177 font-size: 0.875em; |
|
|
|
1178 } |
|
|
|
1179 |
|
|
|
1180 /* Block help for forms */ |
|
|
|
1181 .pure-form-message { |
|
|
|
1182 display: block; |
|
|
|
1183 color: #666; |
|
|
|
1184 font-size: 0.875em; |
|
|
|
1185 } |
|
|
|
1186 |
|
|
|
1187 @media only screen and (max-width : 480px) { |
|
|
|
1188 .pure-form button[type="submit"] { |
|
|
|
1189 margin: 0.7em 0 0; |
|
|
|
1190 } |
|
|
|
1191 |
|
|
|
1192 .pure-form input:not([type]), |
|
|
|
1193 .pure-form input[type="text"], |
|
|
|
1194 .pure-form input[type="password"], |
|
|
|
1195 .pure-form input[type="email"], |
|
|
|
1196 .pure-form input[type="url"], |
|
|
|
1197 .pure-form input[type="date"], |
|
|
|
1198 .pure-form input[type="month"], |
|
|
|
1199 .pure-form input[type="time"], |
|
|
|
1200 .pure-form input[type="datetime"], |
|
|
|
1201 .pure-form input[type="datetime-local"], |
|
|
|
1202 .pure-form input[type="week"], |
|
|
|
1203 .pure-form input[type="number"], |
|
|
|
1204 .pure-form input[type="search"], |
|
|
|
1205 .pure-form input[type="tel"], |
|
|
|
1206 .pure-form input[type="color"], |
|
|
|
1207 .pure-form label { |
|
|
|
1208 margin-bottom: 0.3em; |
|
|
|
1209 display: block; |
|
|
|
1210 } |
|
|
|
1211 |
|
|
|
1212 .pure-group input:not([type]), |
|
|
|
1213 .pure-group input[type="text"], |
|
|
|
1214 .pure-group input[type="password"], |
|
|
|
1215 .pure-group input[type="email"], |
|
|
|
1216 .pure-group input[type="url"], |
|
|
|
1217 .pure-group input[type="date"], |
|
|
|
1218 .pure-group input[type="month"], |
|
|
|
1219 .pure-group input[type="time"], |
|
|
|
1220 .pure-group input[type="datetime"], |
|
|
|
1221 .pure-group input[type="datetime-local"], |
|
|
|
1222 .pure-group input[type="week"], |
|
|
|
1223 .pure-group input[type="number"], |
|
|
|
1224 .pure-group input[type="search"], |
|
|
|
1225 .pure-group input[type="tel"], |
|
|
|
1226 .pure-group input[type="color"] { |
|
|
|
1227 margin-bottom: 0; |
|
|
|
1228 } |
|
|
|
1229 |
|
|
|
1230 .pure-form-aligned .pure-control-group label { |
|
|
|
1231 margin-bottom: 0.3em; |
|
|
|
1232 text-align: left; |
|
|
|
1233 display: block; |
|
|
|
1234 width: 100%; |
|
|
|
1235 } |
|
|
|
1236 |
|
|
|
1237 .pure-form-aligned .pure-controls { |
|
|
|
1238 margin: 1.5em 0 0 0; |
|
|
|
1239 } |
|
|
|
1240 |
|
|
|
1241 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ |
|
|
|
1242 .pure-form .pure-help-inline, |
|
|
|
1243 .pure-form-message-inline, |
|
|
|
1244 .pure-form-message { |
|
|
|
1245 display: block; |
|
|
|
1246 font-size: 0.75em; |
|
|
|
1247 /* Increased bottom padding to make it group with its related input element. */ |
|
|
|
1248 padding: 0.2em 0 0.8em; |
|
|
|
1249 } |
|
|
|
1250 } |
|
|
|
1251 |
|
|
|
1252 /*csslint adjoining-classes: false, box-model:false*/ |
|
|
|
1253 .pure-menu { |
|
|
|
1254 box-sizing: border-box; |
|
|
|
1255 } |
|
|
|
1256 |
|
|
|
1257 .pure-menu-fixed { |
|
|
|
1258 position: fixed; |
|
|
|
1259 left: 0; |
|
|
|
1260 top: 0; |
|
|
|
1261 z-index: 3; |
|
|
|
1262 } |
|
|
|
1263 |
|
|
|
1264 .pure-menu-list, |
|
|
|
1265 .pure-menu-item { |
|
|
|
1266 position: relative; |
|
|
|
1267 } |
|
|
|
1268 |
|
|
|
1269 .pure-menu-list { |
|
|
|
1270 list-style: none; |
|
|
|
1271 margin: 0; |
|
|
|
1272 padding: 0; |
|
|
|
1273 } |
|
|
|
1274 |
|
|
|
1275 .pure-menu-item { |
|
|
|
1276 padding: 0; |
|
|
|
1277 margin: 0; |
|
|
|
1278 height: 100%; |
|
|
|
1279 } |
|
|
|
1280 |
|
|
|
1281 .pure-menu-link, |
|
|
|
1282 .pure-menu-heading { |
|
|
|
1283 display: block; |
|
|
|
1284 text-decoration: none; |
|
|
|
1285 white-space: nowrap; |
|
|
|
1286 } |
|
|
|
1287 |
|
|
|
1288 /* HORIZONTAL MENU */ |
|
|
|
1289 .pure-menu-horizontal { |
|
|
|
1290 width: 100%; |
|
|
|
1291 white-space: nowrap; |
|
|
|
1292 } |
|
|
|
1293 |
|
|
|
1294 .pure-menu-horizontal .pure-menu-list { |
|
|
|
1295 display: inline-block; |
|
|
|
1296 } |
|
|
|
1297 |
|
|
|
1298 /* Initial menus should be inline-block so that they are horizontal */ |
|
|
|
1299 .pure-menu-horizontal .pure-menu-item, |
|
|
|
1300 .pure-menu-horizontal .pure-menu-heading, |
|
|
|
1301 .pure-menu-horizontal .pure-menu-separator { |
|
|
|
1302 display: inline-block; |
|
|
|
1303 *display: inline; |
|
|
|
1304 zoom: 1; |
|
|
|
1305 vertical-align: middle; |
|
|
|
1306 } |
|
|
|
1307 |
|
|
|
1308 /* Submenus should still be display: block; */ |
|
|
|
1309 .pure-menu-item .pure-menu-item { |
|
|
|
1310 display: block; |
|
|
|
1311 } |
|
|
|
1312 |
|
|
|
1313 .pure-menu-children { |
|
|
|
1314 display: none; |
|
|
|
1315 position: absolute; |
|
|
|
1316 left: 100%; |
|
|
|
1317 top: 0; |
|
|
|
1318 margin: 0; |
|
|
|
1319 padding: 0; |
|
|
|
1320 z-index: 3; |
|
|
|
1321 } |
|
|
|
1322 |
|
|
|
1323 .pure-menu-horizontal .pure-menu-children { |
|
|
|
1324 left: 0; |
|
|
|
1325 top: auto; |
|
|
|
1326 width: inherit; |
|
|
|
1327 } |
|
|
|
1328 |
|
|
|
1329 .pure-menu-allow-hover:hover > .pure-menu-children, |
|
|
|
1330 .pure-menu-active > .pure-menu-children { |
|
|
|
1331 display: block; |
|
|
|
1332 position: absolute; |
|
|
|
1333 } |
|
|
|
1334 |
|
|
|
1335 /* Vertical Menus - show the dropdown arrow */ |
|
|
|
1336 .pure-menu-has-children > .pure-menu-link:after { |
|
|
|
1337 padding-left: 0.5em; |
|
|
|
1338 content: "\25B8"; |
|
|
|
1339 font-size: small; |
|
|
|
1340 } |
|
|
|
1341 |
|
|
|
1342 /* Horizontal Menus - show the dropdown arrow */ |
|
|
|
1343 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { |
|
|
|
1344 content: "\25BE"; |
|
|
|
1345 } |
|
|
|
1346 |
|
|
|
1347 /* scrollable menus */ |
|
|
|
1348 .pure-menu-scrollable { |
|
|
|
1349 overflow-y: scroll; |
|
|
|
1350 overflow-x: hidden; |
|
|
|
1351 } |
|
|
|
1352 |
|
|
|
1353 .pure-menu-scrollable .pure-menu-list { |
|
|
|
1354 display: block; |
|
|
|
1355 } |
|
|
|
1356 |
|
|
|
1357 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { |
|
|
|
1358 display: inline-block; |
|
|
|
1359 } |
|
|
|
1360 |
|
|
|
1361 .pure-menu-horizontal.pure-menu-scrollable { |
|
|
|
1362 white-space: nowrap; |
|
|
|
1363 overflow-y: hidden; |
|
|
|
1364 overflow-x: auto; |
|
|
|
1365 -ms-overflow-style: none; |
|
|
|
1366 -webkit-overflow-scrolling: touch; |
|
|
|
1367 /* a little extra padding for this style to allow for scrollbars */ |
|
|
|
1368 padding: .5em 0; |
|
|
|
1369 } |
|
|
|
1370 |
|
|
|
1371 .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { |
|
|
|
1372 display: none; |
|
|
|
1373 } |
|
|
|
1374 |
|
|
|
1375 /* misc default styling */ |
|
|
|
1376 |
|
|
|
1377 .pure-menu-separator, |
|
|
|
1378 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { |
|
|
|
1379 background-color: #ccc; |
|
|
|
1380 height: 1px; |
|
|
|
1381 margin: .3em 0; |
|
|
|
1382 } |
|
|
|
1383 |
|
|
|
1384 .pure-menu-horizontal .pure-menu-separator { |
|
|
|
1385 width: 1px; |
|
|
|
1386 height: 1.3em; |
|
|
|
1387 margin: 0 .3em ; |
|
|
|
1388 } |
|
|
|
1389 |
|
|
|
1390 /* Need to reset the separator since submenu is vertical */ |
|
|
|
1391 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { |
|
|
|
1392 display: block; |
|
|
|
1393 width: auto; |
|
|
|
1394 } |
|
|
|
1395 |
|
|
|
1396 .pure-menu-heading { |
|
|
|
1397 text-transform: uppercase; |
|
|
|
1398 color: #565d64; |
|
|
|
1399 } |
|
|
|
1400 |
|
|
|
1401 .pure-menu-link { |
|
|
|
1402 color: #777; |
|
|
|
1403 } |
|
|
|
1404 |
|
|
|
1405 .pure-menu-children { |
|
|
|
1406 background-color: #fff; |
|
|
|
1407 } |
|
|
|
1408 |
|
|
|
1409 .pure-menu-link, |
|
|
|
1410 .pure-menu-disabled, |
|
|
|
1411 .pure-menu-heading { |
|
|
|
1412 padding: .5em 1em; |
|
|
|
1413 } |
|
|
|
1414 |
|
|
|
1415 .pure-menu-disabled { |
|
|
|
1416 opacity: .5; |
|
|
|
1417 } |
|
|
|
1418 |
|
|
|
1419 .pure-menu-disabled .pure-menu-link:hover { |
|
|
|
1420 background-color: transparent; |
|
|
|
1421 } |
|
|
|
1422 |
|
|
|
1423 .pure-menu-active > .pure-menu-link, |
|
|
|
1424 .pure-menu-link:hover, |
|
|
|
1425 .pure-menu-link:focus { |
|
|
|
1426 background-color: #eee; |
|
|
|
1427 } |
|
|
|
1428 |
|
|
|
1429 .pure-menu-selected .pure-menu-link, |
|
|
|
1430 .pure-menu-selected .pure-menu-link:visited { |
|
|
|
1431 color: #000; |
|
|
|
1432 } |
|
|
|
1433 |
|
|
|
1434 .pure-table { |
|
|
|
1435 /* Remove spacing between table cells (from Normalize.css) */ |
|
|
|
1436 border-collapse: collapse; |
|
|
|
1437 border-spacing: 0; |
|
|
|
1438 empty-cells: show; |
|
|
|
1439 border: 1px solid #cbcbcb; |
|
|
|
1440 } |
|
|
|
1441 |
|
|
|
1442 .pure-table caption { |
|
|
|
1443 color: #000; |
|
|
|
1444 font: italic 85%/1 arial, sans-serif; |
|
|
|
1445 padding: 1em 0; |
|
|
|
1446 text-align: center; |
|
|
|
1447 } |
|
|
|
1448 |
|
|
|
1449 .pure-table td, |
|
|
|
1450 .pure-table th { |
|
|
|
1451 border-left: 1px solid #cbcbcb;/* inner column border */ |
|
|
|
1452 border-width: 0 0 0 1px; |
|
|
|
1453 font-size: inherit; |
|
|
|
1454 margin: 0; |
|
|
|
1455 overflow: visible; /*to make ths where the title is really long work*/ |
|
|
|
1456 padding: 0.5em 1em; /* cell padding */ |
|
|
|
1457 } |
|
|
|
1458 |
|
|
|
1459 /* Consider removing this next declaration block, as it causes problems when |
|
|
|
1460 there's a rowspan on the first cell. Case added to the tests. issue#432 */ |
|
|
|
1461 .pure-table td:first-child, |
|
|
|
1462 .pure-table th:first-child { |
|
|
|
1463 border-left-width: 0; |
|
|
|
1464 } |
|
|
|
1465 |
|
|
|
1466 .pure-table thead { |
|
|
|
1467 background-color: #e0e0e0; |
|
|
|
1468 color: #000; |
|
|
|
1469 text-align: left; |
|
|
|
1470 vertical-align: bottom; |
|
|
|
1471 } |
|
|
|
1472 |
|
|
|
1473 /* |
|
|
|
1474 striping: |
|
|
|
1475 even - #fff (white) |
|
|
|
1476 odd - #f2f2f2 (light gray) |
|
|
|
1477 */ |
|
|
|
1478 .pure-table td { |
|
|
|
1479 background-color: transparent; |
|
|
|
1480 } |
|
|
|
1481 .pure-table-odd td { |
|
|
|
1482 background-color: #f2f2f2; |
|
|
|
1483 } |
|
|
|
1484 |
|
|
|
1485 /* nth-child selector for modern browsers */ |
|
|
|
1486 .pure-table-striped tr:nth-child(2n-1) td { |
|
|
|
1487 background-color: #f2f2f2; |
|
|
|
1488 } |
|
|
|
1489 |
|
|
|
1490 /* BORDERED TABLES */ |
|
|
|
1491 .pure-table-bordered td { |
|
|
|
1492 border-bottom: 1px solid #cbcbcb; |
|
|
|
1493 } |
|
|
|
1494 .pure-table-bordered tbody > tr:last-child > td { |
|
|
|
1495 border-bottom-width: 0; |
|
|
|
1496 } |
|
|
|
1497 |
|
|
|
1498 |
|
|
|
1499 /* HORIZONTAL BORDERED TABLES */ |
|
|
|
1500 |
|
|
|
1501 .pure-table-horizontal td, |
|
|
|
1502 .pure-table-horizontal th { |
|
|
|
1503 border-width: 0 0 1px 0; |
|
|
|
1504 border-bottom: 1px solid #cbcbcb; |
|
|
|
1505 } |
|
|
|
1506 .pure-table-horizontal tbody > tr:last-child > td { |
|
|
|
1507 border-bottom-width: 0; |
|
|
|
1508 } |
|