Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3)

Side by Side Diff: packages/csslib/test/examples/pure.css

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

Powered by Google App Engine
This is Rietveld 408576698