- run with custom config filename', 'Global Workflow - All options must be defined in a json file')
20 | .option('-d, --defaultconfig - run with default config file', 'Local Workflow - All options are defined in a config_css.json')
21 | .option('-v, --verbose - displays internal messages', 'Outputs CSS-PURGE activity')
22 | .parse(process.argv);
23 |
24 | var options = {};
25 |
26 | if (program.cssinput) {
27 |
28 | if (program.output) {
29 |
30 | options = {
31 | css_output: program.output,
32 | verbose : (program.verbose) ? true : false
33 | };
34 |
35 | if (program.customconfig === undefined) {
36 | options.trim = true;
37 | options.shorten = true;
38 | }
39 |
40 | cssPurge.purgeCSS(program.cssinput, options, function(error, result){
41 | if (error)
42 | console.log(error)
43 | else
44 | console.log(result);
45 | });
46 | } else {
47 |
48 | options = {
49 | verbose : (program.verbose) ? true : false
50 | };
51 |
52 | if (program.customconfig === undefined) {
53 | options.trim = true;
54 | options.shorten = true;
55 | }
56 |
57 | cssPurge.purgeCSS(program.cssinput, options, function(error, result){
58 | if (error)
59 | console.log(error)
60 | else
61 | console.log(result);
62 | });
63 | }
64 |
65 | } else if (program.input && program.inputhtml && program.output) {
66 |
67 | options = {
68 | css: program.input,
69 | css_output: program.output,
70 | special_reduce_with_html: true,
71 | html: program.inputhtml,
72 | verbose : (program.verbose) ? true : false
73 | };
74 |
75 | if (program.customconfig === undefined) {
76 | options.trim = true;
77 | options.shorten = true;
78 | }
79 |
80 | cssPurge.purgeCSSFiles(
81 | options,
82 | (program.customconfig !== undefined) ? program.customconfig : 'cmd_default'
83 | );
84 |
85 |
86 | } else if (program.input && program.inputhtml) {
87 |
88 | options = {
89 | css: program.input,
90 | css_output: program.input.substr(0, program.input.lastIndexOf('.')) + '.min.css',
91 | special_reduce_with_html: true,
92 | html: program.inputhtml,
93 | verbose : (program.verbose) ? true : false
94 | };
95 |
96 | if (program.customconfig === undefined) {
97 | options.trim = true;
98 | options.shorten = true;
99 | }
100 |
101 | cssPurge.purgeCSSFiles(
102 | options,
103 | (program.customconfig !== undefined) ? program.customconfig : 'cmd_default'
104 | );
105 |
106 |
107 | } else if (program.input && program.output) {
108 |
109 | options = {
110 | css: program.input,
111 | css_output: program.output,
112 | verbose : (program.verbose) ? true : false
113 | };
114 |
115 | if (program.customconfig === undefined) {
116 | options.trim = true;
117 | options.shorten = true;
118 | }
119 |
120 | cssPurge.purgeCSSFiles(
121 | options,
122 | (program.customconfig !== undefined) ? program.customconfig : 'cmd_default'
123 | );
124 | } else if (program.input) {
125 |
126 | options = {
127 | css: program.input,
128 | css_output: program.input.substr(0, program.input.lastIndexOf('.')) + '.min.css',
129 | verbose : (program.verbose) ? true : false
130 | };
131 |
132 | if (program.customconfig === undefined) {
133 | options.trim = true;
134 | options.shorten = true;
135 | }
136 |
137 | cssPurge.purgeCSSFiles(
138 | options,
139 | (program.customconfig !== undefined) ? program.customconfig : 'cmd_default'
140 | );
141 | } else if (program.customconfig) {
142 | cssPurge.purgeCSSFiles(null, '' + program.customconfig);
143 | } else if (program.defaultconfig) {
144 | cssPurge.purgeCSSFiles();
145 | } else {
146 | program.help();
147 | }
148 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | ./node_modules
--------------------------------------------------------------------------------
/demo/config_css.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 |
4 | "css_output": "purged.min.css",
5 |
6 | "trim": true,
7 | "trim_keep_non_standard_inline_comments": false,
8 | "trim_removed_rules_previous_comment": true,
9 | "trim_comments": false,
10 | "trim_whitespace": false,
11 | "trim_breaklines": false,
12 | "trim_last_semicolon": false,
13 |
14 | "shorten": true,
15 | "shorten_zero": false,
16 | "shorten_hexcolor": false,
17 | "shorten_hexcolor_extended_names": false,
18 | "shorten_hexcolor_UPPERCASE": false,
19 | "shorten_font": false,
20 | "shorten_background": false,
21 | "shorten_background_min": 2,
22 | "shorten_margin": false,
23 | "shorten_padding": false,
24 | "shorten_list_style": false,
25 | "shorten_outline": false,
26 | "shorten_border": false,
27 | "shorten_border_top": false,
28 | "shorten_border_right": false,
29 | "shorten_border_bottom": false,
30 | "shorten_border_left": false,
31 | "shorten_border_radius": false,
32 |
33 | "format": true,
34 | "format_font_family": true,
35 | "format_4095_rules_legacy_limit": false,
36 |
37 | "special_convert_rem": false,
38 | "special_convert_rem_browser_default_px": "16",
39 | "special_convert_rem_desired_html_px": "10",
40 | "special_convert_rem_font_size": true,
41 |
42 | "special_reduce_with_html" : false,
43 | "special_reduce_with_html_ignore_selectors" : [
44 | "@-ms-",
45 | ":-ms-",
46 | "::",
47 | ":valid",
48 | ":invalid",
49 | "+.",
50 | ":-"
51 | ],
52 |
53 | "generate_report": true,
54 | "verbose": true,
55 |
56 | "bypass_media_rules": true,
57 | "bypass_document_rules": false,
58 | "bypass_supports_rules": false,
59 | "bypass_page_rules": false,
60 | "bypass_charset": false,
61 |
62 | "zero_units": "em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax",
63 | "zero_ignore_declaration": [],
64 |
65 | "report_file_location": "purged_css_report_data.json",
66 |
67 | "reduce_declarations_file_location": "config_reduce_declarations.json"
68 | }
69 | }
--------------------------------------------------------------------------------
/demo/css-purge-demo-app.js:
--------------------------------------------------------------------------------
1 | var cssPurge = require('css-purge');
2 |
3 | //purging a CSS file with HTML and options
4 | cssPurge.purgeCSSFiles({
5 | css: 'test1.css',
6 | html: 'html/test1.html',
7 | trim : true,
8 | shorten : true,
9 | verbose : true
10 | }
11 | );
12 |
13 | //purging some CSS
14 | var css = "p { color: blue; color: blue; } ";
15 | cssPurge.purgeCSS(css, {
16 | trim : true,
17 | shorten : true,
18 | verbose : false
19 | }, function(error, result){
20 | if (error)
21 | console.log(error)
22 | else
23 | console.log('Output CSS: ', result);
24 | });
--------------------------------------------------------------------------------
/demo/css_folder/file1.css:
--------------------------------------------------------------------------------
1 |
2 | /*file1 red*/
3 | .file1 {
4 | color: red;
5 | }
6 |
7 | /*file1 green */
8 | .file1 {
9 | color: green;
10 | }
11 |
12 | /*file1 blue */
13 | .file1 {
14 | color: blue;
15 | }
16 |
--------------------------------------------------------------------------------
/demo/css_folder/file2.css:
--------------------------------------------------------------------------------
1 |
2 | /*file2 red*/
3 | .file2 {
4 | color: blue;
5 | background-color: blue;
6 | }
7 |
8 | /*file2 green */
9 | .file2 {
10 | color: green;
11 | background-color: green;
12 | }
13 |
14 | /*file2 blue */
15 | .file2 {
16 | color: red;
17 | background-color: red;
18 | }
19 |
20 | /*file2 last say red*/
21 | .file1 {
22 | color: red;
23 | }
--------------------------------------------------------------------------------
/demo/hacks/browser-specific-hacks.css:
--------------------------------------------------------------------------------
1 | /* https://css-tricks.com/snippets/css/browser-specific-hacks */
2 |
3 | /* IE6 and below */
4 | * html #uno { color: red }
5 |
6 | /* IE7 */
7 | *:first-child+html #dos { color: red }
8 |
9 | /* IE7, FF, Saf, Opera */
10 | html>body #tres { color: red }
11 |
12 | /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
13 | html>/**/body #cuatro { color: red }
14 |
15 | /* Opera 9.27 and below, safari 2 */
16 | html:first-child #cinco { color: red }
17 |
18 | /* Safari 2-3 */
19 | html[xmlns*=""] body:last-child #seis { color: red }
20 |
21 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
22 | body:nth-of-type(1) #siete { color: red }
23 |
24 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
25 | body:first-of-type #ocho { color: red }
26 |
27 | /* saf3+, chrome1+ */
28 | @media screen and (-webkit-min-device-pixel-ratio:0) {
29 | #diez { color: red }
30 | }
31 |
32 | /* iPhone / mobile webkit */
33 | @media screen and (max-device-width: 480px) {
34 | #veintiseis { color: red }
35 | }
36 |
37 | /* Safari 2 - 3.1 */
38 | html[xmlns*=""]:root #trece { color: red }
39 |
40 | /* Safari 2 - 3.1, Opera 9.25 */
41 | *|html[xmlns*=""] #catorce { color: red }
42 |
43 | /* Everything but IE6-8 */
44 | :root *> #quince { color: red }
45 |
46 | /* IE7 */
47 | *+html #dieciocho { color: red }
48 |
49 | /* Firefox only. 1+ */
50 | #veinticuatro, x:-moz-any-link { color: red }
51 |
52 | /* Firefox 3.0+ */
53 | #veinticinco, x:-moz-any-link, x:default { color: red }
54 |
55 |
56 |
57 | /***** Attribute Hacks ******/
58 |
59 | /* IE6 */
60 | #once { _color: blue }
61 |
62 | /* IE6, IE7 */
63 | #doce { *color: blue; /* or #color: blue */ }
64 |
65 | /* Everything but IE6 */
66 | #diecisiete { color/**/: blue }
67 |
68 | /* IE6, IE7, IE8 */
69 | #diecinueve { color: blue\9; }
70 |
71 | /* IE7, IE8 */
72 | #veinte { color/*\**/: blue\9; }
73 |
74 | /* IE6, IE7 -- acts as an !important */
75 | #veintesiete { color: blue !ie; } /* string after ! can be anything */
--------------------------------------------------------------------------------
/demo/hacks/declarations.css:
--------------------------------------------------------------------------------
1 | /***** Declaration Hacks ******/
2 | /* Ref: http://browserhacks.com */
3 | /*
4 | Remember: to remove duplicate
5 | declarations, just add them to
6 | "declaration_names" in
7 | config_reduce_declarations.json
8 |
9 | e.g. "declaration_names" : [
10 | "_color",
11 | "-color",
12 | "!color"
13 | ]
14 |
15 | Only works for hacks we
16 | process/optimize.
17 | */
18 |
19 |
20 | /*Internet Explorer/Edge 6 */
21 | .selector {
22 | _color: skyblue;
23 | _color: red;
24 | }
25 | .selector {
26 | -color: skyblue;
27 | -color: red;
28 | }
29 |
30 | /*Internet Explorer/Edge 6-8 */
31 | .selector { color: skyblue\9; }
32 | .selector { color/*\**/: skyblue\9; }
33 |
34 | /*Acts as an !important; string after ! can be anything */
35 | /*Internet Explorer/Edge ≤ 7 */
36 | .selector { color: skyblue !ie; }
37 |
38 |
39 |
40 |
41 | /*Chrome ≤ 28 Safari ≤ 7 Opera ≥ 14 */
42 | /*We dont currently process/optimize this type of hack */
43 | .selector { (;color: skyblue;); }
44 | .selector { [;color: skyblue;]; }
45 |
46 | .selector { (;border: 1px solid white;); }
47 | .selector { [;border: 1px solid white;]; }
48 |
49 | .selector {
50 | (;
51 | font-weight: bold;
52 | font-family: arial, helvetica, sans-serif;
53 | font-size: 1.5em;
54 | );
55 | }
56 | .selector {
57 | [;
58 | font-weight: bold;
59 | font-family: arial, helvetica, sans-serif;
60 | font-size: 1.5em;
61 | ];
62 | }
63 | /*End - We dont currently process/optimize this type of hack */
64 |
65 |
66 |
67 |
68 |
69 | /*Any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
70 | /*Internet Explorer/Edge ≤ 7 */
71 | /*We dont currently process/optimize this type of hack */
72 | .selector { !color: skyblue; }
73 | .selector { !color: skyblue; }
74 | .selector { $color: skyblue; }
75 | .selector { &color: skyblue; }
76 | .selector { *color: skyblue; }
77 | .selector { )color: skyblue; }
78 | .selector { =color: skyblue; }
79 | .selector { %color: skyblue; }
80 | .selector { +color: skyblue; }
81 | .selector { @color: skyblue; }
82 | .selector { ,color: skyblue; }
83 | .selector { .color: skyblue; }
84 | .selector { /color: skyblue; }
85 | // .selector { `color: skyblue; }
86 | .selector { ]color: skyblue; }
87 | .selector { #color: skyblue; }
88 | .selector { ~color: skyblue; }
89 | .selector { ?color: skyblue; }
90 | .selector { :color: skyblue; }
91 | .selector { |color: skyblue; }
92 | /*End - We dont currently process/optimize this type of hack */
93 |
94 |
--------------------------------------------------------------------------------
/demo/hacks/media_queries.css:
--------------------------------------------------------------------------------
1 | /***** Media Query Hacks ******/
2 | /* Ref: http://browserhacks.com */
3 |
4 | /*Internet Explorer/Edge ≥ 9 Safari 4 Android ≥ 2.3 */
5 | @media screen and (min-width:0\0) {
6 |
7 | body {
8 | background-color: red;
9 | }
10 | }
11 |
12 |
13 |
14 | /*Chrome 22-28 Safari ≥ 7 */
15 | @media \\0 screen {
16 |
17 | body {
18 | background-color: red;
19 | }
20 | }
21 |
22 | /*Chrome ≥ 29 Opera ≥ 16 */
23 | @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
24 |
25 | body {
26 | background-color: red;
27 | }
28 | }
29 |
30 |
31 |
32 | /*Firefox ≤ 3 */
33 | @media \0 all {
34 |
35 | body {
36 | background-color: red;
37 | }
38 | }
39 |
40 | /*Firefox ≥ 3.6 */
41 | @media screen and (-moz-images-in-menus:0) {
42 |
43 | body {
44 | background-color: red;
45 | }
46 | }
47 |
48 | /*Firefox ≥ 4 */
49 | @media screen and (min--moz-device-pixel-ratio:0) {
50 |
51 | body {
52 | background-color: red;
53 | }
54 | }
55 |
56 | /*Firefox ≥ 8 */
57 | @media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
58 |
59 | body {
60 | background-color: red;
61 | }
62 | }
63 | @media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {
64 |
65 | body {
66 | background-color: red;
67 | }
68 | }
69 |
70 | /*Firefox ≥ 11 */
71 | @media all and (min--moz-device-pixel-ratio:0) {
72 | @media (min-width: 0px) {
73 | body {
74 | background-color: red;
75 | }
76 | }
77 | }
78 | @media all and (-moz-images-in-menus:0) {
79 | @media (min-width: 0px) {
80 | body {
81 | background-color: red;
82 | }
83 | }
84 | }
85 |
86 | /*Firefox ≥ 29 */
87 | @media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
88 | body {
89 | background-color: red;
90 | }
91 | }
92 |
93 |
94 |
95 | /*Internet Explorer/Edge ≤ 7 */
96 | @media screen\9 {
97 |
98 | body {
99 | background-color: red;
100 | }
101 | }
102 |
103 | /*Internet Explorer/Edge ≤ 8 */
104 | @media \0screen\,screen\9 {
105 |
106 | body {
107 | background-color: red;
108 | }
109 | }
110 |
111 | /*Internet Explorer/Edge 8 */
112 | @media \0screen {
113 |
114 | body {
115 | background-color: red;
116 | }
117 | }
118 |
119 | /*Internet Explorer/Edge ≥ 10 */
120 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
121 |
122 | body {
123 | background-color: red;
124 | }
125 | }
126 |
127 | /*Everything but Internet Explorer and Safari ≤6 */
128 | /*Internet Explorer/Edge * Safari ≤ 6 */
129 | @media screen {
130 | @media (min-width: 0px) {
131 | body {
132 | background-color: red;
133 | }
134 | }
135 | }
136 |
137 |
138 |
139 | /*Opera ≥ 12 */
140 | @media (min-resolution: .001dpcm) {
141 | _:-o-prefocus,
142 | body {
143 | background-color: red;
144 | }
145 | }
146 |
147 |
--------------------------------------------------------------------------------
/demo/hacks/miscellaneous.css:
--------------------------------------------------------------------------------
1 | /***** Miscellaneous Hacks ******/
2 | /* Ref: http://browserhacks.com */
3 |
4 | @-moz-document url-prefix() {
5 |
6 | body {
7 | background-color: red;
8 | }
9 | }
--------------------------------------------------------------------------------
/demo/hacks/selectors.css:
--------------------------------------------------------------------------------
1 | /***** Selector Hacks ******/
2 | /* Ref: http://browserhacks.com */
3 |
4 | /* Android *, Chrome *, Safari *, Opera ≥ 14 */
5 | .selector:not(*:root) { background-color: red; }
6 |
7 |
8 |
9 |
10 | /* Firefox 1.5/2 */
11 | body:empty .selector { background-color: red; }
12 |
13 | /* Firefox ≥ 2 */
14 | body:last-child .selector, x:-moz-any-link { background-color: red; }
15 |
16 | /* Firefox ≥ 3 */
17 | body:last-child .selector, x:-moz-any-link, x:default { background-color: red; }
18 |
19 | /* Firefox ≥ 3.5 */
20 | body:not(:-moz-handler-blocked) .selector { background-color: red; }
21 |
22 | /* Firefox ≥ 6 */
23 | _::-moz-progress-bar, body:last-child .selector { background-color: red; }
24 |
25 | /* Firefox ≥ 21 */
26 | _::-moz-range-track, body:last-child .selector { background-color: red; }
27 |
28 | /* Firefox * */
29 | _:-moz-tree-row(hover), .selector { background-color: red; }
30 |
31 | /* Everything but Firefox and Internet Explorer ≤8 */
32 | _::selection, .selector:not([attr*='']) { background-color: red; }
33 |
34 |
35 |
36 |
37 | /* Internet Explorer/Edge ≤ 6 */
38 | * html .selector { background-color: red; }
39 | /* .unused-class can be any unused class */
40 | .unused-class.selector { background-color: red; }
41 |
42 | /* Internet Explorer/Edge ≤ 7 */
43 | .selector, { background-color: red; }
44 |
45 | /* Internet Explorer/Edge ≤ 7 */
46 | .selector\ { background-color: red; }
47 |
48 | /* Everything but Internet Explorer 6 */
49 | /* Internet Explorer/Edge 6 */
50 | html > body .selector { background-color: red; }
51 |
52 | /* Internet Explorer/Edge 7 */
53 | *:first-child+html .selector { background-color: red; }
54 | .selector, x:-IE7 { background-color: red; }
55 | *+html .selector { background-color: red; }
56 | body*.selector { background-color: red; }
57 |
58 | /* Everything but Internet Explorer ≤7 */
59 | /* Internet Explorer/Edge ≤ 7 */
60 | html > /**/ body .selector { background-color: red; }
61 | head ~ /**/ body .selector { background-color: red; }
62 |
63 | /* Everything but Internet Explorer ≤8 */
64 | /* Internet Explorer/Edge ≤ 8 */
65 | :root .selector { background-color: red; }
66 | body:last-child .selector { background-color: red; }
67 | body:nth-of-type(1) .selector { background-color: red; }
68 | body:first-of-type .selector { background-color: red; }
69 | .selector:not([attr*='']) { background-color: red; }
70 |
71 | /* Internet Explorer/Edge ≥ 10 */
72 | _:-ms-input-placeholder, :root .selector { background-color: red; }
73 |
74 | /* Internet Explorer/Edge ≥ 11 */
75 | _:-ms-fullscreen, :root .selector { background-color: red; }
76 |
77 |
78 |
79 |
80 | /* Opera ≤ 9.27, Safari 2 */
81 | html:first-child .selector { background-color: red; }
82 |
83 | /* Opera ≥ 9.5 */
84 | _:-o-prefocus, body:last-child .selector { background-color: red; }
85 |
86 | /* Opera ≤ 11 */
87 | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .test { background-color: red; } }
88 |
89 | /* Opera 9.25, Safari 2/3.1 */
90 | *|html[xmlns*=""] .selector { background-color: red; }
91 |
92 |
93 |
94 |
95 | /* Safari 2-3 */
96 | html[xmlns*=""] body:last-child .selector { background-color: red; }
97 | html[xmlns*=""]:root .selector { background-color: red; }
98 |
99 | /* Safari 5.1-6 */
100 | _::-moz-svg-foreign-content, :root .selector { background-color: red; }
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/demo/hacks/supports.css:
--------------------------------------------------------------------------------
1 | /***** Supports Hacks ******/
2 | /* Ref: http://browserhacks.com */
3 |
4 |
5 | /*Chrome ≥ 28 Safari ≥ 9 Internet Explorer/Edge >= 12 Opera ≥ 14 */
6 | @supports (-webkit-appearance:none) {
7 | body {
8 | background-color: red;
9 | }
10 | }
11 |
12 |
13 | /*Firefox ≥ 16 */
14 | @supports (-moz-appearance:meterbar) {
15 | body {
16 | background-color: red;
17 | }
18 | }
19 |
20 | /*Firefox ≥ 22 */
21 | @supports (-moz-appearance:meterbar) and (display:flex) {
22 | body {
23 | background-color: red;
24 | }
25 | }
26 |
27 | /*Firefox ≥ 24 */
28 | @supports (-moz-appearance:meterbar) and (cursor:zoom-in) {
29 | body {
30 | background-color: red;
31 | }
32 | }
33 |
34 | /*Firefox ≥ 25 */
35 | @supports (-moz-appearance:meterbar) and (background-attachment:local) {
36 | body {
37 | background-color: red;
38 | }
39 | }
40 |
41 | /*Firefox ≥ 26 */
42 | @supports (-moz-appearance:meterbar) and (image-orientation:90deg) {
43 | body {
44 | background-color: red;
45 | }
46 | }
47 |
48 | /*Firefox ≥ 27 */
49 | @supports (-moz-appearance:meterbar) and (all:initial) {
50 | body {
51 | background-color: red;
52 | }
53 | }
54 |
55 | /*Firefox ≥ 28 */
56 | @supports (-moz-appearance:meterbar) and (list-style-type:japanese-formal) {
57 | body {
58 | background-color: red;
59 | }
60 | }
61 |
62 | /*Firefox ≥ 30 */
63 | @supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
64 | body {
65 | background-color: red;
66 | }
67 | }
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/demo/html/README.md:
--------------------------------------------------------------------------------
1 | HTML Gotchas
2 | -----
3 |
4 | Current breaking selectors found:
5 |
6 | @-ms-
7 | :-ms-
8 | ::
9 | :valid
10 | :invalid
11 | +.
12 | :-
13 |
14 |
15 | If you have a selector that does not work with the current version of CSS selector detection, then add it to the "special_reduce_with_html_ignore_selectors" option in config_css.json.
16 |
17 | The type of error message will be similar to the following:
18 |
19 |
20 | SyntaxError: Unknown pseudo-class selector ":invalid"
--------------------------------------------------------------------------------
/demo/html/test1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | CSS-Purge HTML Test
7 |
8 |
9 |
10 |
79 |
80 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | Hello
94 | World!
95 |
96 | Hello from the other side
97 |
98 | test-1
99 |
100 | test1
101 |
102 |
110 |
111 |
112 |
113 |
114 |
115 |
Hello
116 |
Goodbye
117 |
Hello, world!
,
5 | document.getElementById('root')
6 | );
7 |
8 |
9 | function formatName(user) {
10 | return user.firstName + ' ' + user.lastName;
11 | }
12 |
13 | const user = {
14 | firstName: 'Harper',
15 | lastName: 'Perez'
16 | };
17 |
18 | const element = (
19 |
20 | Hello, {formatName(user)}!
21 |
22 | );
23 |
24 | ReactDOM.render(
25 | element,
26 | document.getElementById('root')
27 | );
--------------------------------------------------------------------------------
/demo/libs/960.css:
--------------------------------------------------------------------------------
1 | /*
2 | 960 Grid System ~ Core CSS.
3 | Learn more ~ http://960.gs/
4 |
5 | Licensed under GPL and MIT.
6 | */
7 |
8 | /*
9 | Forces backgrounds to span full width,
10 | even if there is horizontal scrolling.
11 | Increase this if your layout is wider.
12 |
13 | Note: IE6 works fine without this fix.
14 | */
15 |
16 | body {
17 | min-width: 960px;
18 | }
19 |
20 | /* `Container
21 | ----------------------------------------------------------------------------------------------------*/
22 |
23 | .container_12,
24 | .container_16 {
25 | margin-left: auto;
26 | margin-right: auto;
27 | width: 960px;
28 | }
29 |
30 | /* `Grid >> Global
31 | ----------------------------------------------------------------------------------------------------*/
32 |
33 | .grid_1,
34 | .grid_2,
35 | .grid_3,
36 | .grid_4,
37 | .grid_5,
38 | .grid_6,
39 | .grid_7,
40 | .grid_8,
41 | .grid_9,
42 | .grid_10,
43 | .grid_11,
44 | .grid_12,
45 | .grid_13,
46 | .grid_14,
47 | .grid_15,
48 | .grid_16 {
49 | display: inline;
50 | float: left;
51 | margin-left: 10px;
52 | margin-right: 10px;
53 | }
54 |
55 | .push_1, .pull_1,
56 | .push_2, .pull_2,
57 | .push_3, .pull_3,
58 | .push_4, .pull_4,
59 | .push_5, .pull_5,
60 | .push_6, .pull_6,
61 | .push_7, .pull_7,
62 | .push_8, .pull_8,
63 | .push_9, .pull_9,
64 | .push_10, .pull_10,
65 | .push_11, .pull_11,
66 | .push_12, .pull_12,
67 | .push_13, .pull_13,
68 | .push_14, .pull_14,
69 | .push_15, .pull_15 {
70 | position: relative;
71 | }
72 |
73 | .container_12 .grid_3,
74 | .container_16 .grid_4 {
75 | width: 220px;
76 | }
77 |
78 | .container_12 .grid_6,
79 | .container_16 .grid_8 {
80 | width: 460px;
81 | }
82 |
83 | .container_12 .grid_9,
84 | .container_16 .grid_12 {
85 | width: 700px;
86 | }
87 |
88 | .container_12 .grid_12,
89 | .container_16 .grid_16 {
90 | width: 940px;
91 | }
92 |
93 | /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
94 | ----------------------------------------------------------------------------------------------------*/
95 |
96 | .alpha {
97 | margin-left: 0;
98 | }
99 |
100 | .omega {
101 | margin-right: 0;
102 | }
103 |
104 | /* `Grid >> 12 Columns
105 | ----------------------------------------------------------------------------------------------------*/
106 |
107 | .container_12 .grid_1 {
108 | width: 60px;
109 | }
110 |
111 | .container_12 .grid_2 {
112 | width: 140px;
113 | }
114 |
115 | .container_12 .grid_4 {
116 | width: 300px;
117 | }
118 |
119 | .container_12 .grid_5 {
120 | width: 380px;
121 | }
122 |
123 | .container_12 .grid_7 {
124 | width: 540px;
125 | }
126 |
127 | .container_12 .grid_8 {
128 | width: 620px;
129 | }
130 |
131 | .container_12 .grid_10 {
132 | width: 780px;
133 | }
134 |
135 | .container_12 .grid_11 {
136 | width: 860px;
137 | }
138 |
139 | /* `Grid >> 16 Columns
140 | ----------------------------------------------------------------------------------------------------*/
141 |
142 | .container_16 .grid_1 {
143 | width: 40px;
144 | }
145 |
146 | .container_16 .grid_2 {
147 | width: 100px;
148 | }
149 |
150 | .container_16 .grid_3 {
151 | width: 160px;
152 | }
153 |
154 | .container_16 .grid_5 {
155 | width: 280px;
156 | }
157 |
158 | .container_16 .grid_6 {
159 | width: 340px;
160 | }
161 |
162 | .container_16 .grid_7 {
163 | width: 400px;
164 | }
165 |
166 | .container_16 .grid_9 {
167 | width: 520px;
168 | }
169 |
170 | .container_16 .grid_10 {
171 | width: 580px;
172 | }
173 |
174 | .container_16 .grid_11 {
175 | width: 640px;
176 | }
177 |
178 | .container_16 .grid_13 {
179 | width: 760px;
180 | }
181 |
182 | .container_16 .grid_14 {
183 | width: 820px;
184 | }
185 |
186 | .container_16 .grid_15 {
187 | width: 880px;
188 | }
189 |
190 | /* `Prefix Extra Space >> Global
191 | ----------------------------------------------------------------------------------------------------*/
192 |
193 | .container_12 .prefix_3,
194 | .container_16 .prefix_4 {
195 | padding-left: 240px;
196 | }
197 |
198 | .container_12 .prefix_6,
199 | .container_16 .prefix_8 {
200 | padding-left: 480px;
201 | }
202 |
203 | .container_12 .prefix_9,
204 | .container_16 .prefix_12 {
205 | padding-left: 720px;
206 | }
207 |
208 | /* `Prefix Extra Space >> 12 Columns
209 | ----------------------------------------------------------------------------------------------------*/
210 |
211 | .container_12 .prefix_1 {
212 | padding-left: 80px;
213 | }
214 |
215 | .container_12 .prefix_2 {
216 | padding-left: 160px;
217 | }
218 |
219 | .container_12 .prefix_4 {
220 | padding-left: 320px;
221 | }
222 |
223 | .container_12 .prefix_5 {
224 | padding-left: 400px;
225 | }
226 |
227 | .container_12 .prefix_7 {
228 | padding-left: 560px;
229 | }
230 |
231 | .container_12 .prefix_8 {
232 | padding-left: 640px;
233 | }
234 |
235 | .container_12 .prefix_10 {
236 | padding-left: 800px;
237 | }
238 |
239 | .container_12 .prefix_11 {
240 | padding-left: 880px;
241 | }
242 |
243 | /* `Prefix Extra Space >> 16 Columns
244 | ----------------------------------------------------------------------------------------------------*/
245 |
246 | .container_16 .prefix_1 {
247 | padding-left: 60px;
248 | }
249 |
250 | .container_16 .prefix_2 {
251 | padding-left: 120px;
252 | }
253 |
254 | .container_16 .prefix_3 {
255 | padding-left: 180px;
256 | }
257 |
258 | .container_16 .prefix_5 {
259 | padding-left: 300px;
260 | }
261 |
262 | .container_16 .prefix_6 {
263 | padding-left: 360px;
264 | }
265 |
266 | .container_16 .prefix_7 {
267 | padding-left: 420px;
268 | }
269 |
270 | .container_16 .prefix_9 {
271 | padding-left: 540px;
272 | }
273 |
274 | .container_16 .prefix_10 {
275 | padding-left: 600px;
276 | }
277 |
278 | .container_16 .prefix_11 {
279 | padding-left: 660px;
280 | }
281 |
282 | .container_16 .prefix_13 {
283 | padding-left: 780px;
284 | }
285 |
286 | .container_16 .prefix_14 {
287 | padding-left: 840px;
288 | }
289 |
290 | .container_16 .prefix_15 {
291 | padding-left: 900px;
292 | }
293 |
294 | /* `Suffix Extra Space >> Global
295 | ----------------------------------------------------------------------------------------------------*/
296 |
297 | .container_12 .suffix_3,
298 | .container_16 .suffix_4 {
299 | padding-right: 240px;
300 | }
301 |
302 | .container_12 .suffix_6,
303 | .container_16 .suffix_8 {
304 | padding-right: 480px;
305 | }
306 |
307 | .container_12 .suffix_9,
308 | .container_16 .suffix_12 {
309 | padding-right: 720px;
310 | }
311 |
312 | /* `Suffix Extra Space >> 12 Columns
313 | ----------------------------------------------------------------------------------------------------*/
314 |
315 | .container_12 .suffix_1 {
316 | padding-right: 80px;
317 | }
318 |
319 | .container_12 .suffix_2 {
320 | padding-right: 160px;
321 | }
322 |
323 | .container_12 .suffix_4 {
324 | padding-right: 320px;
325 | }
326 |
327 | .container_12 .suffix_5 {
328 | padding-right: 400px;
329 | }
330 |
331 | .container_12 .suffix_7 {
332 | padding-right: 560px;
333 | }
334 |
335 | .container_12 .suffix_8 {
336 | padding-right: 640px;
337 | }
338 |
339 | .container_12 .suffix_10 {
340 | padding-right: 800px;
341 | }
342 |
343 | .container_12 .suffix_11 {
344 | padding-right: 880px;
345 | }
346 |
347 | /* `Suffix Extra Space >> 16 Columns
348 | ----------------------------------------------------------------------------------------------------*/
349 |
350 | .container_16 .suffix_1 {
351 | padding-right: 60px;
352 | }
353 |
354 | .container_16 .suffix_2 {
355 | padding-right: 120px;
356 | }
357 |
358 | .container_16 .suffix_3 {
359 | padding-right: 180px;
360 | }
361 |
362 | .container_16 .suffix_5 {
363 | padding-right: 300px;
364 | }
365 |
366 | .container_16 .suffix_6 {
367 | padding-right: 360px;
368 | }
369 |
370 | .container_16 .suffix_7 {
371 | padding-right: 420px;
372 | }
373 |
374 | .container_16 .suffix_9 {
375 | padding-right: 540px;
376 | }
377 |
378 | .container_16 .suffix_10 {
379 | padding-right: 600px;
380 | }
381 |
382 | .container_16 .suffix_11 {
383 | padding-right: 660px;
384 | }
385 |
386 | .container_16 .suffix_13 {
387 | padding-right: 780px;
388 | }
389 |
390 | .container_16 .suffix_14 {
391 | padding-right: 840px;
392 | }
393 |
394 | .container_16 .suffix_15 {
395 | padding-right: 900px;
396 | }
397 |
398 | /* `Push Space >> Global
399 | ----------------------------------------------------------------------------------------------------*/
400 |
401 | .container_12 .push_3,
402 | .container_16 .push_4 {
403 | left: 240px;
404 | }
405 |
406 | .container_12 .push_6,
407 | .container_16 .push_8 {
408 | left: 480px;
409 | }
410 |
411 | .container_12 .push_9,
412 | .container_16 .push_12 {
413 | left: 720px;
414 | }
415 |
416 | /* `Push Space >> 12 Columns
417 | ----------------------------------------------------------------------------------------------------*/
418 |
419 | .container_12 .push_1 {
420 | left: 80px;
421 | }
422 |
423 | .container_12 .push_2 {
424 | left: 160px;
425 | }
426 |
427 | .container_12 .push_4 {
428 | left: 320px;
429 | }
430 |
431 | .container_12 .push_5 {
432 | left: 400px;
433 | }
434 |
435 | .container_12 .push_7 {
436 | left: 560px;
437 | }
438 |
439 | .container_12 .push_8 {
440 | left: 640px;
441 | }
442 |
443 | .container_12 .push_10 {
444 | left: 800px;
445 | }
446 |
447 | .container_12 .push_11 {
448 | left: 880px;
449 | }
450 |
451 | /* `Push Space >> 16 Columns
452 | ----------------------------------------------------------------------------------------------------*/
453 |
454 | .container_16 .push_1 {
455 | left: 60px;
456 | }
457 |
458 | .container_16 .push_2 {
459 | left: 120px;
460 | }
461 |
462 | .container_16 .push_3 {
463 | left: 180px;
464 | }
465 |
466 | .container_16 .push_5 {
467 | left: 300px;
468 | }
469 |
470 | .container_16 .push_6 {
471 | left: 360px;
472 | }
473 |
474 | .container_16 .push_7 {
475 | left: 420px;
476 | }
477 |
478 | .container_16 .push_9 {
479 | left: 540px;
480 | }
481 |
482 | .container_16 .push_10 {
483 | left: 600px;
484 | }
485 |
486 | .container_16 .push_11 {
487 | left: 660px;
488 | }
489 |
490 | .container_16 .push_13 {
491 | left: 780px;
492 | }
493 |
494 | .container_16 .push_14 {
495 | left: 840px;
496 | }
497 |
498 | .container_16 .push_15 {
499 | left: 900px;
500 | }
501 |
502 | /* `Pull Space >> Global
503 | ----------------------------------------------------------------------------------------------------*/
504 |
505 | .container_12 .pull_3,
506 | .container_16 .pull_4 {
507 | left: -240px;
508 | }
509 |
510 | .container_12 .pull_6,
511 | .container_16 .pull_8 {
512 | left: -480px;
513 | }
514 |
515 | .container_12 .pull_9,
516 | .container_16 .pull_12 {
517 | left: -720px;
518 | }
519 |
520 | /* `Pull Space >> 12 Columns
521 | ----------------------------------------------------------------------------------------------------*/
522 |
523 | .container_12 .pull_1 {
524 | left: -80px;
525 | }
526 |
527 | .container_12 .pull_2 {
528 | left: -160px;
529 | }
530 |
531 | .container_12 .pull_4 {
532 | left: -320px;
533 | }
534 |
535 | .container_12 .pull_5 {
536 | left: -400px;
537 | }
538 |
539 | .container_12 .pull_7 {
540 | left: -560px;
541 | }
542 |
543 | .container_12 .pull_8 {
544 | left: -640px;
545 | }
546 |
547 | .container_12 .pull_10 {
548 | left: -800px;
549 | }
550 |
551 | .container_12 .pull_11 {
552 | left: -880px;
553 | }
554 |
555 | /* `Pull Space >> 16 Columns
556 | ----------------------------------------------------------------------------------------------------*/
557 |
558 | .container_16 .pull_1 {
559 | left: -60px;
560 | }
561 |
562 | .container_16 .pull_2 {
563 | left: -120px;
564 | }
565 |
566 | .container_16 .pull_3 {
567 | left: -180px;
568 | }
569 |
570 | .container_16 .pull_5 {
571 | left: -300px;
572 | }
573 |
574 | .container_16 .pull_6 {
575 | left: -360px;
576 | }
577 |
578 | .container_16 .pull_7 {
579 | left: -420px;
580 | }
581 |
582 | .container_16 .pull_9 {
583 | left: -540px;
584 | }
585 |
586 | .container_16 .pull_10 {
587 | left: -600px;
588 | }
589 |
590 | .container_16 .pull_11 {
591 | left: -660px;
592 | }
593 |
594 | .container_16 .pull_13 {
595 | left: -780px;
596 | }
597 |
598 | .container_16 .pull_14 {
599 | left: -840px;
600 | }
601 |
602 | .container_16 .pull_15 {
603 | left: -900px;
604 | }
605 |
606 | /* `Clear Floated Elements
607 | ----------------------------------------------------------------------------------------------------*/
608 |
609 | /* http://sonspring.com/journal/clearing-floats */
610 |
611 | .clear {
612 | clear: both;
613 | display: block;
614 | overflow: hidden;
615 | visibility: hidden;
616 | width: 0;
617 | height: 0;
618 | }
619 |
620 | /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
621 |
622 | .clearfix:before,
623 | .clearfix:after,
624 | .container_12:before,
625 | .container_12:after,
626 | .container_16:before,
627 | .container_16:after {
628 | content: '.';
629 | display: block;
630 | overflow: hidden;
631 | visibility: hidden;
632 | font-size: 0;
633 | line-height: 0;
634 | width: 0;
635 | height: 0;
636 | }
637 |
638 | .clearfix:after,
639 | .container_12:after,
640 | .container_16:after {
641 | clear: both;
642 | }
643 |
644 | /*
645 | The following zoom:1 rule is specifically for IE6 + IE7.
646 | Move to separate stylesheet if invalid CSS is a problem.
647 | */
648 |
649 | .clearfix,
650 | .container_12,
651 | .container_16 {
652 | zoom: 1;
653 | }
--------------------------------------------------------------------------------
/demo/libs/animate.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | /*!
4 | * animate.css -http://daneden.me/animate
5 | * Version - 3.5.2
6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT
7 | *
8 | * Copyright (c) 2017 Daniel Eden
9 | */
10 |
11 | .animated {
12 | animation-duration: 1s;
13 | animation-fill-mode: both;
14 | }
15 |
16 | .animated.infinite {
17 | animation-iteration-count: infinite;
18 | }
19 |
20 | .animated.hinge {
21 | animation-duration: 2s;
22 | }
23 |
24 | .animated.flipOutX,
25 | .animated.flipOutY,
26 | .animated.bounceIn,
27 | .animated.bounceOut {
28 | animation-duration: .75s;
29 | }
30 |
31 | @keyframes bounce {
32 | from, 20%, 53%, 80%, to {
33 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
34 | transform: translate3d(0,0,0);
35 | }
36 |
37 | 40%, 43% {
38 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
39 | transform: translate3d(0, -30px, 0);
40 | }
41 |
42 | 70% {
43 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
44 | transform: translate3d(0, -15px, 0);
45 | }
46 |
47 | 90% {
48 | transform: translate3d(0,-4px,0);
49 | }
50 | }
51 |
52 | .bounce {
53 | animation-name: bounce;
54 | transform-origin: center bottom;
55 | }
56 |
57 | @keyframes flash {
58 | from, 50%, to {
59 | opacity: 1;
60 | }
61 |
62 | 25%, 75% {
63 | opacity: 0;
64 | }
65 | }
66 |
67 | .flash {
68 | animation-name: flash;
69 | }
70 |
71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
72 |
73 | @keyframes pulse {
74 | from {
75 | transform: scale3d(1, 1, 1);
76 | }
77 |
78 | 50% {
79 | transform: scale3d(1.05, 1.05, 1.05);
80 | }
81 |
82 | to {
83 | transform: scale3d(1, 1, 1);
84 | }
85 | }
86 |
87 | .pulse {
88 | animation-name: pulse;
89 | }
90 |
91 | @keyframes rubberBand {
92 | from {
93 | transform: scale3d(1, 1, 1);
94 | }
95 |
96 | 30% {
97 | transform: scale3d(1.25, 0.75, 1);
98 | }
99 |
100 | 40% {
101 | transform: scale3d(0.75, 1.25, 1);
102 | }
103 |
104 | 50% {
105 | transform: scale3d(1.15, 0.85, 1);
106 | }
107 |
108 | 65% {
109 | transform: scale3d(.95, 1.05, 1);
110 | }
111 |
112 | 75% {
113 | transform: scale3d(1.05, .95, 1);
114 | }
115 |
116 | to {
117 | transform: scale3d(1, 1, 1);
118 | }
119 | }
120 |
121 | .rubberBand {
122 | animation-name: rubberBand;
123 | }
124 |
125 | @keyframes shake {
126 | from, to {
127 | transform: translate3d(0, 0, 0);
128 | }
129 |
130 | 10%, 30%, 50%, 70%, 90% {
131 | transform: translate3d(-10px, 0, 0);
132 | }
133 |
134 | 20%, 40%, 60%, 80% {
135 | transform: translate3d(10px, 0, 0);
136 | }
137 | }
138 |
139 | .shake {
140 | animation-name: shake;
141 | }
142 |
143 | @keyframes headShake {
144 | 0% {
145 | transform: translateX(0);
146 | }
147 |
148 | 6.5% {
149 | transform: translateX(-6px) rotateY(-9deg);
150 | }
151 |
152 | 18.5% {
153 | transform: translateX(5px) rotateY(7deg);
154 | }
155 |
156 | 31.5% {
157 | transform: translateX(-3px) rotateY(-5deg);
158 | }
159 |
160 | 43.5% {
161 | transform: translateX(2px) rotateY(3deg);
162 | }
163 |
164 | 50% {
165 | transform: translateX(0);
166 | }
167 | }
168 |
169 | .headShake {
170 | animation-timing-function: ease-in-out;
171 | animation-name: headShake;
172 | }
173 |
174 | @keyframes swing {
175 | 20% {
176 | transform: rotate3d(0, 0, 1, 15deg);
177 | }
178 |
179 | 40% {
180 | transform: rotate3d(0, 0, 1, -10deg);
181 | }
182 |
183 | 60% {
184 | transform: rotate3d(0, 0, 1, 5deg);
185 | }
186 |
187 | 80% {
188 | transform: rotate3d(0, 0, 1, -5deg);
189 | }
190 |
191 | to {
192 | transform: rotate3d(0, 0, 1, 0deg);
193 | }
194 | }
195 |
196 | .swing {
197 | transform-origin: top center;
198 | animation-name: swing;
199 | }
200 |
201 | @keyframes tada {
202 | from {
203 | transform: scale3d(1, 1, 1);
204 | }
205 |
206 | 10%, 20% {
207 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
208 | }
209 |
210 | 30%, 50%, 70%, 90% {
211 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
212 | }
213 |
214 | 40%, 60%, 80% {
215 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
216 | }
217 |
218 | to {
219 | transform: scale3d(1, 1, 1);
220 | }
221 | }
222 |
223 | .tada {
224 | animation-name: tada;
225 | }
226 |
227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
228 |
229 | @keyframes wobble {
230 | from {
231 | transform: none;
232 | }
233 |
234 | 15% {
235 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
236 | }
237 |
238 | 30% {
239 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
240 | }
241 |
242 | 45% {
243 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
244 | }
245 |
246 | 60% {
247 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
248 | }
249 |
250 | 75% {
251 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
252 | }
253 |
254 | to {
255 | transform: none;
256 | }
257 | }
258 |
259 | .wobble {
260 | animation-name: wobble;
261 | }
262 |
263 | @keyframes jello {
264 | from, 11.1%, to {
265 | transform: none;
266 | }
267 |
268 | 22.2% {
269 | transform: skewX(-12.5deg) skewY(-12.5deg);
270 | }
271 |
272 | 33.3% {
273 | transform: skewX(6.25deg) skewY(6.25deg);
274 | }
275 |
276 | 44.4% {
277 | transform: skewX(-3.125deg) skewY(-3.125deg);
278 | }
279 |
280 | 55.5% {
281 | transform: skewX(1.5625deg) skewY(1.5625deg);
282 | }
283 |
284 | 66.6% {
285 | transform: skewX(-0.78125deg) skewY(-0.78125deg);
286 | }
287 |
288 | 77.7% {
289 | transform: skewX(0.390625deg) skewY(0.390625deg);
290 | }
291 |
292 | 88.8% {
293 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
294 | }
295 | }
296 |
297 | .jello {
298 | animation-name: jello;
299 | transform-origin: center;
300 | }
301 |
302 | @keyframes bounceIn {
303 | from, 20%, 40%, 60%, 80%, to {
304 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
305 | }
306 |
307 | 0% {
308 | opacity: 0;
309 | transform: scale3d(.3, .3, .3);
310 | }
311 |
312 | 20% {
313 | transform: scale3d(1.1, 1.1, 1.1);
314 | }
315 |
316 | 40% {
317 | transform: scale3d(.9, .9, .9);
318 | }
319 |
320 | 60% {
321 | opacity: 1;
322 | transform: scale3d(1.03, 1.03, 1.03);
323 | }
324 |
325 | 80% {
326 | transform: scale3d(.97, .97, .97);
327 | }
328 |
329 | to {
330 | opacity: 1;
331 | transform: scale3d(1, 1, 1);
332 | }
333 | }
334 |
335 | .bounceIn {
336 | animation-name: bounceIn;
337 | }
338 |
339 | @keyframes bounceInDown {
340 | from, 60%, 75%, 90%, to {
341 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
342 | }
343 |
344 | 0% {
345 | opacity: 0;
346 | transform: translate3d(0, -3000px, 0);
347 | }
348 |
349 | 60% {
350 | opacity: 1;
351 | transform: translate3d(0, 25px, 0);
352 | }
353 |
354 | 75% {
355 | transform: translate3d(0, -10px, 0);
356 | }
357 |
358 | 90% {
359 | transform: translate3d(0, 5px, 0);
360 | }
361 |
362 | to {
363 | transform: none;
364 | }
365 | }
366 |
367 | .bounceInDown {
368 | animation-name: bounceInDown;
369 | }
370 |
371 | @keyframes bounceInLeft {
372 | from, 60%, 75%, 90%, to {
373 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
374 | }
375 |
376 | 0% {
377 | opacity: 0;
378 | transform: translate3d(-3000px, 0, 0);
379 | }
380 |
381 | 60% {
382 | opacity: 1;
383 | transform: translate3d(25px, 0, 0);
384 | }
385 |
386 | 75% {
387 | transform: translate3d(-10px, 0, 0);
388 | }
389 |
390 | 90% {
391 | transform: translate3d(5px, 0, 0);
392 | }
393 |
394 | to {
395 | transform: none;
396 | }
397 | }
398 |
399 | .bounceInLeft {
400 | animation-name: bounceInLeft;
401 | }
402 |
403 | @keyframes bounceInRight {
404 | from, 60%, 75%, 90%, to {
405 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
406 | }
407 |
408 | from {
409 | opacity: 0;
410 | transform: translate3d(3000px, 0, 0);
411 | }
412 |
413 | 60% {
414 | opacity: 1;
415 | transform: translate3d(-25px, 0, 0);
416 | }
417 |
418 | 75% {
419 | transform: translate3d(10px, 0, 0);
420 | }
421 |
422 | 90% {
423 | transform: translate3d(-5px, 0, 0);
424 | }
425 |
426 | to {
427 | transform: none;
428 | }
429 | }
430 |
431 | .bounceInRight {
432 | animation-name: bounceInRight;
433 | }
434 |
435 | @keyframes bounceInUp {
436 | from, 60%, 75%, 90%, to {
437 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
438 | }
439 |
440 | from {
441 | opacity: 0;
442 | transform: translate3d(0, 3000px, 0);
443 | }
444 |
445 | 60% {
446 | opacity: 1;
447 | transform: translate3d(0, -20px, 0);
448 | }
449 |
450 | 75% {
451 | transform: translate3d(0, 10px, 0);
452 | }
453 |
454 | 90% {
455 | transform: translate3d(0, -5px, 0);
456 | }
457 |
458 | to {
459 | transform: translate3d(0, 0, 0);
460 | }
461 | }
462 |
463 | .bounceInUp {
464 | animation-name: bounceInUp;
465 | }
466 |
467 | @keyframes bounceOut {
468 | 20% {
469 | transform: scale3d(.9, .9, .9);
470 | }
471 |
472 | 50%, 55% {
473 | opacity: 1;
474 | transform: scale3d(1.1, 1.1, 1.1);
475 | }
476 |
477 | to {
478 | opacity: 0;
479 | transform: scale3d(.3, .3, .3);
480 | }
481 | }
482 |
483 | .bounceOut {
484 | animation-name: bounceOut;
485 | }
486 |
487 | @keyframes bounceOutDown {
488 | 20% {
489 | transform: translate3d(0, 10px, 0);
490 | }
491 |
492 | 40%, 45% {
493 | opacity: 1;
494 | transform: translate3d(0, -20px, 0);
495 | }
496 |
497 | to {
498 | opacity: 0;
499 | transform: translate3d(0, 2000px, 0);
500 | }
501 | }
502 |
503 | .bounceOutDown {
504 | animation-name: bounceOutDown;
505 | }
506 |
507 | @keyframes bounceOutLeft {
508 | 20% {
509 | opacity: 1;
510 | transform: translate3d(20px, 0, 0);
511 | }
512 |
513 | to {
514 | opacity: 0;
515 | transform: translate3d(-2000px, 0, 0);
516 | }
517 | }
518 |
519 | .bounceOutLeft {
520 | animation-name: bounceOutLeft;
521 | }
522 |
523 | @keyframes bounceOutRight {
524 | 20% {
525 | opacity: 1;
526 | transform: translate3d(-20px, 0, 0);
527 | }
528 |
529 | to {
530 | opacity: 0;
531 | transform: translate3d(2000px, 0, 0);
532 | }
533 | }
534 |
535 | .bounceOutRight {
536 | animation-name: bounceOutRight;
537 | }
538 |
539 | @keyframes bounceOutUp {
540 | 20% {
541 | transform: translate3d(0, -10px, 0);
542 | }
543 |
544 | 40%, 45% {
545 | opacity: 1;
546 | transform: translate3d(0, 20px, 0);
547 | }
548 |
549 | to {
550 | opacity: 0;
551 | transform: translate3d(0, -2000px, 0);
552 | }
553 | }
554 |
555 | .bounceOutUp {
556 | animation-name: bounceOutUp;
557 | }
558 |
559 | @keyframes fadeIn {
560 | from {
561 | opacity: 0;
562 | }
563 |
564 | to {
565 | opacity: 1;
566 | }
567 | }
568 |
569 | .fadeIn {
570 | animation-name: fadeIn;
571 | }
572 |
573 | @keyframes fadeInDown {
574 | from {
575 | opacity: 0;
576 | transform: translate3d(0, -100%, 0);
577 | }
578 |
579 | to {
580 | opacity: 1;
581 | transform: none;
582 | }
583 | }
584 |
585 | .fadeInDown {
586 | animation-name: fadeInDown;
587 | }
588 |
589 | @keyframes fadeInDownBig {
590 | from {
591 | opacity: 0;
592 | transform: translate3d(0, -2000px, 0);
593 | }
594 |
595 | to {
596 | opacity: 1;
597 | transform: none;
598 | }
599 | }
600 |
601 | .fadeInDownBig {
602 | animation-name: fadeInDownBig;
603 | }
604 |
605 | @keyframes fadeInLeft {
606 | from {
607 | opacity: 0;
608 | transform: translate3d(-100%, 0, 0);
609 | }
610 |
611 | to {
612 | opacity: 1;
613 | transform: none;
614 | }
615 | }
616 |
617 | .fadeInLeft {
618 | animation-name: fadeInLeft;
619 | }
620 |
621 | @keyframes fadeInLeftBig {
622 | from {
623 | opacity: 0;
624 | transform: translate3d(-2000px, 0, 0);
625 | }
626 |
627 | to {
628 | opacity: 1;
629 | transform: none;
630 | }
631 | }
632 |
633 | .fadeInLeftBig {
634 | animation-name: fadeInLeftBig;
635 | }
636 |
637 | @keyframes fadeInRight {
638 | from {
639 | opacity: 0;
640 | transform: translate3d(100%, 0, 0);
641 | }
642 |
643 | to {
644 | opacity: 1;
645 | transform: none;
646 | }
647 | }
648 |
649 | .fadeInRight {
650 | animation-name: fadeInRight;
651 | }
652 |
653 | @keyframes fadeInRightBig {
654 | from {
655 | opacity: 0;
656 | transform: translate3d(2000px, 0, 0);
657 | }
658 |
659 | to {
660 | opacity: 1;
661 | transform: none;
662 | }
663 | }
664 |
665 | .fadeInRightBig {
666 | animation-name: fadeInRightBig;
667 | }
668 |
669 | @keyframes fadeInUp {
670 | from {
671 | opacity: 0;
672 | transform: translate3d(0, 100%, 0);
673 | }
674 |
675 | to {
676 | opacity: 1;
677 | transform: none;
678 | }
679 | }
680 |
681 | .fadeInUp {
682 | animation-name: fadeInUp;
683 | }
684 |
685 | @keyframes fadeInUpBig {
686 | from {
687 | opacity: 0;
688 | transform: translate3d(0, 2000px, 0);
689 | }
690 |
691 | to {
692 | opacity: 1;
693 | transform: none;
694 | }
695 | }
696 |
697 | .fadeInUpBig {
698 | animation-name: fadeInUpBig;
699 | }
700 |
701 | @keyframes fadeOut {
702 | from {
703 | opacity: 1;
704 | }
705 |
706 | to {
707 | opacity: 0;
708 | }
709 | }
710 |
711 | .fadeOut {
712 | animation-name: fadeOut;
713 | }
714 |
715 | @keyframes fadeOutDown {
716 | from {
717 | opacity: 1;
718 | }
719 |
720 | to {
721 | opacity: 0;
722 | transform: translate3d(0, 100%, 0);
723 | }
724 | }
725 |
726 | .fadeOutDown {
727 | animation-name: fadeOutDown;
728 | }
729 |
730 | @keyframes fadeOutDownBig {
731 | from {
732 | opacity: 1;
733 | }
734 |
735 | to {
736 | opacity: 0;
737 | transform: translate3d(0, 2000px, 0);
738 | }
739 | }
740 |
741 | .fadeOutDownBig {
742 | animation-name: fadeOutDownBig;
743 | }
744 |
745 | @keyframes fadeOutLeft {
746 | from {
747 | opacity: 1;
748 | }
749 |
750 | to {
751 | opacity: 0;
752 | transform: translate3d(-100%, 0, 0);
753 | }
754 | }
755 |
756 | .fadeOutLeft {
757 | animation-name: fadeOutLeft;
758 | }
759 |
760 | @keyframes fadeOutLeftBig {
761 | from {
762 | opacity: 1;
763 | }
764 |
765 | to {
766 | opacity: 0;
767 | transform: translate3d(-2000px, 0, 0);
768 | }
769 | }
770 |
771 | .fadeOutLeftBig {
772 | animation-name: fadeOutLeftBig;
773 | }
774 |
775 | @keyframes fadeOutRight {
776 | from {
777 | opacity: 1;
778 | }
779 |
780 | to {
781 | opacity: 0;
782 | transform: translate3d(100%, 0, 0);
783 | }
784 | }
785 |
786 | .fadeOutRight {
787 | animation-name: fadeOutRight;
788 | }
789 |
790 | @keyframes fadeOutRightBig {
791 | from {
792 | opacity: 1;
793 | }
794 |
795 | to {
796 | opacity: 0;
797 | transform: translate3d(2000px, 0, 0);
798 | }
799 | }
800 |
801 | .fadeOutRightBig {
802 | animation-name: fadeOutRightBig;
803 | }
804 |
805 | @keyframes fadeOutUp {
806 | from {
807 | opacity: 1;
808 | }
809 |
810 | to {
811 | opacity: 0;
812 | transform: translate3d(0, -100%, 0);
813 | }
814 | }
815 |
816 | .fadeOutUp {
817 | animation-name: fadeOutUp;
818 | }
819 |
820 | @keyframes fadeOutUpBig {
821 | from {
822 | opacity: 1;
823 | }
824 |
825 | to {
826 | opacity: 0;
827 | transform: translate3d(0, -2000px, 0);
828 | }
829 | }
830 |
831 | .fadeOutUpBig {
832 | animation-name: fadeOutUpBig;
833 | }
834 |
835 | @keyframes flip {
836 | from {
837 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
838 | animation-timing-function: ease-out;
839 | }
840 |
841 | 40% {
842 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
843 | animation-timing-function: ease-out;
844 | }
845 |
846 | 50% {
847 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
848 | animation-timing-function: ease-in;
849 | }
850 |
851 | 80% {
852 | transform: perspective(400px) scale3d(.95, .95, .95);
853 | animation-timing-function: ease-in;
854 | }
855 |
856 | to {
857 | transform: perspective(400px);
858 | animation-timing-function: ease-in;
859 | }
860 | }
861 |
862 | .animated.flip {
863 | -webkit-backface-visibility: visible;
864 | backface-visibility: visible;
865 | animation-name: flip;
866 | }
867 |
868 | @keyframes flipInX {
869 | from {
870 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
871 | animation-timing-function: ease-in;
872 | opacity: 0;
873 | }
874 |
875 | 40% {
876 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
877 | animation-timing-function: ease-in;
878 | }
879 |
880 | 60% {
881 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
882 | opacity: 1;
883 | }
884 |
885 | 80% {
886 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
887 | }
888 |
889 | to {
890 | transform: perspective(400px);
891 | }
892 | }
893 |
894 | .flipInX {
895 | -webkit-backface-visibility: visible !important;
896 | backface-visibility: visible !important;
897 | animation-name: flipInX;
898 | }
899 |
900 | @keyframes flipInY {
901 | from {
902 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
903 | animation-timing-function: ease-in;
904 | opacity: 0;
905 | }
906 |
907 | 40% {
908 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
909 | animation-timing-function: ease-in;
910 | }
911 |
912 | 60% {
913 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
914 | opacity: 1;
915 | }
916 |
917 | 80% {
918 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
919 | }
920 |
921 | to {
922 | transform: perspective(400px);
923 | }
924 | }
925 |
926 | .flipInY {
927 | -webkit-backface-visibility: visible !important;
928 | backface-visibility: visible !important;
929 | animation-name: flipInY;
930 | }
931 |
932 | @keyframes flipOutX {
933 | from {
934 | transform: perspective(400px);
935 | }
936 |
937 | 30% {
938 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
939 | opacity: 1;
940 | }
941 |
942 | to {
943 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
944 | opacity: 0;
945 | }
946 | }
947 |
948 | .flipOutX {
949 | animation-name: flipOutX;
950 | -webkit-backface-visibility: visible !important;
951 | backface-visibility: visible !important;
952 | }
953 |
954 | @keyframes flipOutY {
955 | from {
956 | transform: perspective(400px);
957 | }
958 |
959 | 30% {
960 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
961 | opacity: 1;
962 | }
963 |
964 | to {
965 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
966 | opacity: 0;
967 | }
968 | }
969 |
970 | .flipOutY {
971 | -webkit-backface-visibility: visible !important;
972 | backface-visibility: visible !important;
973 | animation-name: flipOutY;
974 | }
975 |
976 | @keyframes lightSpeedIn {
977 | from {
978 | transform: translate3d(100%, 0, 0) skewX(-30deg);
979 | opacity: 0;
980 | }
981 |
982 | 60% {
983 | transform: skewX(20deg);
984 | opacity: 1;
985 | }
986 |
987 | 80% {
988 | transform: skewX(-5deg);
989 | opacity: 1;
990 | }
991 |
992 | to {
993 | transform: none;
994 | opacity: 1;
995 | }
996 | }
997 |
998 | .lightSpeedIn {
999 | animation-name: lightSpeedIn;
1000 | animation-timing-function: ease-out;
1001 | }
1002 |
1003 | @keyframes lightSpeedOut {
1004 | from {
1005 | opacity: 1;
1006 | }
1007 |
1008 | to {
1009 | transform: translate3d(100%, 0, 0) skewX(30deg);
1010 | opacity: 0;
1011 | }
1012 | }
1013 |
1014 | .lightSpeedOut {
1015 | animation-name: lightSpeedOut;
1016 | animation-timing-function: ease-in;
1017 | }
1018 |
1019 | @keyframes rotateIn {
1020 | from {
1021 | transform-origin: center;
1022 | transform: rotate3d(0, 0, 1, -200deg);
1023 | opacity: 0;
1024 | }
1025 |
1026 | to {
1027 | transform-origin: center;
1028 | transform: none;
1029 | opacity: 1;
1030 | }
1031 | }
1032 |
1033 | .rotateIn {
1034 | animation-name: rotateIn;
1035 | }
1036 |
1037 | @keyframes rotateInDownLeft {
1038 | from {
1039 | transform-origin: left bottom;
1040 | transform: rotate3d(0, 0, 1, -45deg);
1041 | opacity: 0;
1042 | }
1043 |
1044 | to {
1045 | transform-origin: left bottom;
1046 | transform: none;
1047 | opacity: 1;
1048 | }
1049 | }
1050 |
1051 | .rotateInDownLeft {
1052 | animation-name: rotateInDownLeft;
1053 | }
1054 |
1055 | @keyframes rotateInDownRight {
1056 | from {
1057 | transform-origin: right bottom;
1058 | transform: rotate3d(0, 0, 1, 45deg);
1059 | opacity: 0;
1060 | }
1061 |
1062 | to {
1063 | transform-origin: right bottom;
1064 | transform: none;
1065 | opacity: 1;
1066 | }
1067 | }
1068 |
1069 | .rotateInDownRight {
1070 | animation-name: rotateInDownRight;
1071 | }
1072 |
1073 | @keyframes rotateInUpLeft {
1074 | from {
1075 | transform-origin: left bottom;
1076 | transform: rotate3d(0, 0, 1, 45deg);
1077 | opacity: 0;
1078 | }
1079 |
1080 | to {
1081 | transform-origin: left bottom;
1082 | transform: none;
1083 | opacity: 1;
1084 | }
1085 | }
1086 |
1087 | .rotateInUpLeft {
1088 | animation-name: rotateInUpLeft;
1089 | }
1090 |
1091 | @keyframes rotateInUpRight {
1092 | from {
1093 | transform-origin: right bottom;
1094 | transform: rotate3d(0, 0, 1, -90deg);
1095 | opacity: 0;
1096 | }
1097 |
1098 | to {
1099 | transform-origin: right bottom;
1100 | transform: none;
1101 | opacity: 1;
1102 | }
1103 | }
1104 |
1105 | .rotateInUpRight {
1106 | animation-name: rotateInUpRight;
1107 | }
1108 |
1109 | @keyframes rotateOut {
1110 | from {
1111 | transform-origin: center;
1112 | opacity: 1;
1113 | }
1114 |
1115 | to {
1116 | transform-origin: center;
1117 | transform: rotate3d(0, 0, 1, 200deg);
1118 | opacity: 0;
1119 | }
1120 | }
1121 |
1122 | .rotateOut {
1123 | animation-name: rotateOut;
1124 | }
1125 |
1126 | @keyframes rotateOutDownLeft {
1127 | from {
1128 | transform-origin: left bottom;
1129 | opacity: 1;
1130 | }
1131 |
1132 | to {
1133 | transform-origin: left bottom;
1134 | transform: rotate3d(0, 0, 1, 45deg);
1135 | opacity: 0;
1136 | }
1137 | }
1138 |
1139 | .rotateOutDownLeft {
1140 | animation-name: rotateOutDownLeft;
1141 | }
1142 |
1143 | @keyframes rotateOutDownRight {
1144 | from {
1145 | transform-origin: right bottom;
1146 | opacity: 1;
1147 | }
1148 |
1149 | to {
1150 | transform-origin: right bottom;
1151 | transform: rotate3d(0, 0, 1, -45deg);
1152 | opacity: 0;
1153 | }
1154 | }
1155 |
1156 | .rotateOutDownRight {
1157 | animation-name: rotateOutDownRight;
1158 | }
1159 |
1160 | @keyframes rotateOutUpLeft {
1161 | from {
1162 | transform-origin: left bottom;
1163 | opacity: 1;
1164 | }
1165 |
1166 | to {
1167 | transform-origin: left bottom;
1168 | transform: rotate3d(0, 0, 1, -45deg);
1169 | opacity: 0;
1170 | }
1171 | }
1172 |
1173 | .rotateOutUpLeft {
1174 | animation-name: rotateOutUpLeft;
1175 | }
1176 |
1177 | @keyframes rotateOutUpRight {
1178 | from {
1179 | transform-origin: right bottom;
1180 | opacity: 1;
1181 | }
1182 |
1183 | to {
1184 | transform-origin: right bottom;
1185 | transform: rotate3d(0, 0, 1, 90deg);
1186 | opacity: 0;
1187 | }
1188 | }
1189 |
1190 | .rotateOutUpRight {
1191 | animation-name: rotateOutUpRight;
1192 | }
1193 |
1194 | @keyframes hinge {
1195 | 0% {
1196 | transform-origin: top left;
1197 | animation-timing-function: ease-in-out;
1198 | }
1199 |
1200 | 20%, 60% {
1201 | transform: rotate3d(0, 0, 1, 80deg);
1202 | transform-origin: top left;
1203 | animation-timing-function: ease-in-out;
1204 | }
1205 |
1206 | 40%, 80% {
1207 | transform: rotate3d(0, 0, 1, 60deg);
1208 | transform-origin: top left;
1209 | animation-timing-function: ease-in-out;
1210 | opacity: 1;
1211 | }
1212 |
1213 | to {
1214 | transform: translate3d(0, 700px, 0);
1215 | opacity: 0;
1216 | }
1217 | }
1218 |
1219 | .hinge {
1220 | animation-name: hinge;
1221 | }
1222 |
1223 | @keyframes jackInTheBox {
1224 | from {
1225 | opacity: 0;
1226 | transform: scale(0.1) rotate(30deg);
1227 | transform-origin: center bottom;
1228 | }
1229 |
1230 | 50% {
1231 | transform: rotate(-10deg);
1232 | }
1233 |
1234 | 70% {
1235 | transform: rotate(3deg);
1236 | }
1237 |
1238 | to {
1239 | opacity: 1;
1240 | transform: scale(1);
1241 | }
1242 | }
1243 |
1244 | .jackInTheBox {
1245 | animation-name: jackInTheBox;
1246 | }
1247 |
1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1249 |
1250 | @keyframes rollIn {
1251 | from {
1252 | opacity: 0;
1253 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
1254 | }
1255 |
1256 | to {
1257 | opacity: 1;
1258 | transform: none;
1259 | }
1260 | }
1261 |
1262 | .rollIn {
1263 | animation-name: rollIn;
1264 | }
1265 |
1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1267 |
1268 | @keyframes rollOut {
1269 | from {
1270 | opacity: 1;
1271 | }
1272 |
1273 | to {
1274 | opacity: 0;
1275 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
1276 | }
1277 | }
1278 |
1279 | .rollOut {
1280 | animation-name: rollOut;
1281 | }
1282 |
1283 | @keyframes zoomIn {
1284 | from {
1285 | opacity: 0;
1286 | transform: scale3d(.3, .3, .3);
1287 | }
1288 |
1289 | 50% {
1290 | opacity: 1;
1291 | }
1292 | }
1293 |
1294 | .zoomIn {
1295 | animation-name: zoomIn;
1296 | }
1297 |
1298 | @keyframes zoomInDown {
1299 | from {
1300 | opacity: 0;
1301 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1302 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1303 | }
1304 |
1305 | 60% {
1306 | opacity: 1;
1307 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1308 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1309 | }
1310 | }
1311 |
1312 | .zoomInDown {
1313 | animation-name: zoomInDown;
1314 | }
1315 |
1316 | @keyframes zoomInLeft {
1317 | from {
1318 | opacity: 0;
1319 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
1320 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1321 | }
1322 |
1323 | 60% {
1324 | opacity: 1;
1325 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
1326 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1327 | }
1328 | }
1329 |
1330 | .zoomInLeft {
1331 | animation-name: zoomInLeft;
1332 | }
1333 |
1334 | @keyframes zoomInRight {
1335 | from {
1336 | opacity: 0;
1337 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
1338 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1339 | }
1340 |
1341 | 60% {
1342 | opacity: 1;
1343 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
1344 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1345 | }
1346 | }
1347 |
1348 | .zoomInRight {
1349 | animation-name: zoomInRight;
1350 | }
1351 |
1352 | @keyframes zoomInUp {
1353 | from {
1354 | opacity: 0;
1355 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
1356 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1357 | }
1358 |
1359 | 60% {
1360 | opacity: 1;
1361 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1362 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1363 | }
1364 | }
1365 |
1366 | .zoomInUp {
1367 | animation-name: zoomInUp;
1368 | }
1369 |
1370 | @keyframes zoomOut {
1371 | from {
1372 | opacity: 1;
1373 | }
1374 |
1375 | 50% {
1376 | opacity: 0;
1377 | transform: scale3d(.3, .3, .3);
1378 | }
1379 |
1380 | to {
1381 | opacity: 0;
1382 | }
1383 | }
1384 |
1385 | .zoomOut {
1386 | animation-name: zoomOut;
1387 | }
1388 |
1389 | @keyframes zoomOutDown {
1390 | 40% {
1391 | opacity: 1;
1392 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1393 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1394 | }
1395 |
1396 | to {
1397 | opacity: 0;
1398 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
1399 | transform-origin: center bottom;
1400 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1401 | }
1402 | }
1403 |
1404 | .zoomOutDown {
1405 | animation-name: zoomOutDown;
1406 | }
1407 |
1408 | @keyframes zoomOutLeft {
1409 | 40% {
1410 | opacity: 1;
1411 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
1412 | }
1413 |
1414 | to {
1415 | opacity: 0;
1416 | transform: scale(.1) translate3d(-2000px, 0, 0);
1417 | transform-origin: left center;
1418 | }
1419 | }
1420 |
1421 | .zoomOutLeft {
1422 | animation-name: zoomOutLeft;
1423 | }
1424 |
1425 | @keyframes zoomOutRight {
1426 | 40% {
1427 | opacity: 1;
1428 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
1429 | }
1430 |
1431 | to {
1432 | opacity: 0;
1433 | transform: scale(.1) translate3d(2000px, 0, 0);
1434 | transform-origin: right center;
1435 | }
1436 | }
1437 |
1438 | .zoomOutRight {
1439 | animation-name: zoomOutRight;
1440 | }
1441 |
1442 | @keyframes zoomOutUp {
1443 | 40% {
1444 | opacity: 1;
1445 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1446 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1447 | }
1448 |
1449 | to {
1450 | opacity: 0;
1451 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
1452 | transform-origin: center bottom;
1453 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1454 | }
1455 | }
1456 |
1457 | .zoomOutUp {
1458 | animation-name: zoomOutUp;
1459 | }
1460 |
1461 | @keyframes slideInDown {
1462 | from {
1463 | transform: translate3d(0, -100%, 0);
1464 | visibility: visible;
1465 | }
1466 |
1467 | to {
1468 | transform: translate3d(0, 0, 0);
1469 | }
1470 | }
1471 |
1472 | .slideInDown {
1473 | animation-name: slideInDown;
1474 | }
1475 |
1476 | @keyframes slideInLeft {
1477 | from {
1478 | transform: translate3d(-100%, 0, 0);
1479 | visibility: visible;
1480 | }
1481 |
1482 | to {
1483 | transform: translate3d(0, 0, 0);
1484 | }
1485 | }
1486 |
1487 | .slideInLeft {
1488 | animation-name: slideInLeft;
1489 | }
1490 |
1491 | @keyframes slideInRight {
1492 | from {
1493 | transform: translate3d(100%, 0, 0);
1494 | visibility: visible;
1495 | }
1496 |
1497 | to {
1498 | transform: translate3d(0, 0, 0);
1499 | }
1500 | }
1501 |
1502 | .slideInRight {
1503 | animation-name: slideInRight;
1504 | }
1505 |
1506 | @keyframes slideInUp {
1507 | from {
1508 | transform: translate3d(0, 100%, 0);
1509 | visibility: visible;
1510 | }
1511 |
1512 | to {
1513 | transform: translate3d(0, 0, 0);
1514 | }
1515 | }
1516 |
1517 | .slideInUp {
1518 | animation-name: slideInUp;
1519 | }
1520 |
1521 | @keyframes slideOutDown {
1522 | from {
1523 | transform: translate3d(0, 0, 0);
1524 | }
1525 |
1526 | to {
1527 | visibility: hidden;
1528 | transform: translate3d(0, 100%, 0);
1529 | }
1530 | }
1531 |
1532 | .slideOutDown {
1533 | animation-name: slideOutDown;
1534 | }
1535 |
1536 | @keyframes slideOutLeft {
1537 | from {
1538 | transform: translate3d(0, 0, 0);
1539 | }
1540 |
1541 | to {
1542 | visibility: hidden;
1543 | transform: translate3d(-100%, 0, 0);
1544 | }
1545 | }
1546 |
1547 | .slideOutLeft {
1548 | animation-name: slideOutLeft;
1549 | }
1550 |
1551 | @keyframes slideOutRight {
1552 | from {
1553 | transform: translate3d(0, 0, 0);
1554 | }
1555 |
1556 | to {
1557 | visibility: hidden;
1558 | transform: translate3d(100%, 0, 0);
1559 | }
1560 | }
1561 |
1562 | .slideOutRight {
1563 | animation-name: slideOutRight;
1564 | }
1565 |
1566 | @keyframes slideOutUp {
1567 | from {
1568 | transform: translate3d(0, 0, 0);
1569 | }
1570 |
1571 | to {
1572 | visibility: hidden;
1573 | transform: translate3d(0, -100%, 0);
1574 | }
1575 | }
1576 |
1577 | .slideOutUp {
1578 | animation-name: slideOutUp;
1579 | }
1580 |
--------------------------------------------------------------------------------
/demo/libs/blueprint/ie.css:
--------------------------------------------------------------------------------
1 | /* -----------------------------------------------------------------------
2 |
3 |
4 | Blueprint CSS Framework 1.0.1
5 | http://blueprintcss.org
6 |
7 | * Copyright (c) 2007-Present. See LICENSE for more info.
8 | * See README for instructions on how to use Blueprint.
9 | * For credits and origins, see AUTHORS.
10 | * This is a compressed file. See the sources in the 'src' directory.
11 |
12 | ----------------------------------------------------------------------- */
13 |
14 | /* ie.css */
15 | body {text-align:center;}
16 | .container {text-align:left;}
17 | * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {display:inline;overflow-x:hidden;}
18 | * html legend {margin:0px -8px 16px 0;padding:0;}
19 | sup {vertical-align:text-top;}
20 | sub {vertical-align:text-bottom;}
21 | html>body p code {*white-space:normal;}
22 | hr {margin:-8px auto 11px;}
23 | img {-ms-interpolation-mode:bicubic;}
24 | .clearfix, .container {display:inline-block;}
25 | * html .clearfix, * html .container {height:1%;}
26 | fieldset {padding-top:0;}
27 | legend {margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em;}
28 | textarea {overflow:auto;}
29 | label {vertical-align:middle;position:relative;top:-0.25em;}
30 | input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
31 | input.text:focus, input.title:focus {border-color:#666;}
32 | input.text, input.title, textarea, select {margin:0.5em 0;}
33 | input.checkbox, input.radio {position:relative;top:.25em;}
34 | form.inline div, form.inline p {vertical-align:middle;}
35 | form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
36 | button, input.button {position:relative;top:0.25em;}
--------------------------------------------------------------------------------
/demo/libs/blueprint/print.css:
--------------------------------------------------------------------------------
1 | /* -----------------------------------------------------------------------
2 |
3 |
4 | Blueprint CSS Framework 1.0.1
5 | http://blueprintcss.org
6 |
7 | * Copyright (c) 2007-Present. See LICENSE for more info.
8 | * See README for instructions on how to use Blueprint.
9 | * For credits and origins, see AUTHORS.
10 | * This is a compressed file. See the sources in the 'src' directory.
11 |
12 | ----------------------------------------------------------------------- */
13 |
14 | /* print.css */
15 | body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}
16 | .container {background:none;}
17 | hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
18 | hr.space {background:#fff;color:#fff;visibility:hidden;}
19 | h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
20 | code {font:.9em "Courier New", Monaco, Courier, monospace;}
21 | a img {border:none;}
22 | p img.top {margin-top:0;}
23 | blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
24 | .small {font-size:.9em;}
25 | .large {font-size:1.1em;}
26 | .quiet {color:#999;}
27 | .hide {display:none;}
28 | a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
29 | a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}
--------------------------------------------------------------------------------
/demo/libs/blueprint/screen.css:
--------------------------------------------------------------------------------
1 | /* -----------------------------------------------------------------------
2 |
3 |
4 | Blueprint CSS Framework 1.0.1
5 | http://blueprintcss.org
6 |
7 | * Copyright (c) 2007-Present. See LICENSE for more info.
8 | * See README for instructions on how to use Blueprint.
9 | * For credits and origins, see AUTHORS.
10 | * This is a compressed file. See the sources in the 'src' directory.
11 |
12 | ----------------------------------------------------------------------- */
13 |
14 | /* reset.css */
15 | html {margin:0;padding:0;border:0;}
16 | body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
17 | article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
18 | body {line-height:1.5;background:white;}
19 | table {border-collapse:separate;border-spacing:0;}
20 | caption, th, td {text-align:left;font-weight:normal;float:none !important;}
21 | table, th, td {vertical-align:middle;}
22 | blockquote:before, blockquote:after, q:before, q:after {content:'';}
23 | blockquote, q {quotes:"" "";}
24 | a img {border:none;}
25 | :focus {outline:0;}
26 |
27 | /* typography.css */
28 | html {font-size:100.01%;}
29 | body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
30 | h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
31 | h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
32 | h2 {font-size:2em;margin-bottom:0.75em;}
33 | h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
34 | h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
35 | h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
36 | h6 {font-size:1em;font-weight:bold;}
37 | h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
38 | p {margin:0 0 1.5em;}
39 | .left {float:left !important;}
40 | p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
41 | .right {float:right !important;}
42 | p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
43 | a:focus, a:hover {color:#09f;}
44 | a {color:#06c;text-decoration:underline;}
45 | blockquote {margin:1.5em;color:#666;font-style:italic;}
46 | strong, dfn {font-weight:bold;}
47 | em, dfn {font-style:italic;}
48 | sup, sub {line-height:0;}
49 | abbr, acronym {border-bottom:1px dotted #666;}
50 | address {margin:0 0 1.5em;font-style:italic;}
51 | del {color:#666;}
52 | pre {margin:1.5em 0;white-space:pre;}
53 | pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
54 | li ul, li ol {margin:0;}
55 | ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
56 | ul {list-style-type:disc;}
57 | ol {list-style-type:decimal;}
58 | dl {margin:0 0 1.5em 0;}
59 | dl dt {font-weight:bold;}
60 | dd {margin-left:1.5em;}
61 | table {margin-bottom:1.4em;width:100%;}
62 | th {font-weight:bold;}
63 | thead th {background:#c3d9ff;}
64 | th, td, caption {padding:4px 10px 4px 5px;}
65 | tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
66 | tfoot {font-style:italic;}
67 | caption {background:#eee;}
68 | .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
69 | .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
70 | .hide {display:none;}
71 | .quiet {color:#666;}
72 | .loud {color:#000;}
73 | .highlight {background:#ff0;}
74 | .added {background:#060;color:#fff;}
75 | .removed {background:#900;color:#fff;}
76 | .first {margin-left:0;padding-left:0;}
77 | .last {margin-right:0;padding-right:0;}
78 | .top {margin-top:0;padding-top:0;}
79 | .bottom {margin-bottom:0;padding-bottom:0;}
80 |
81 | /* forms.css */
82 | label {font-weight:bold;}
83 | fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
84 | legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
85 | fieldset, #IE8#HACK {padding-top:1.4em;}
86 | legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
87 | input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;color:#000;}
88 | input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
89 | select {background-color:#fff;border-width:1px;border-style:solid;}
90 | input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea, select {margin:0.5em 0;}
91 | input.text, input.title {width:300px;padding:5px;}
92 | input.title {font-size:1.5em;}
93 | textarea {width:390px;height:250px;padding:5px;}
94 | form.inline {line-height:3;}
95 | form.inline p {margin-bottom:0;}
96 | .error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
97 | .error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
98 | .notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
99 | .success {background:#e6efc2;color:#264409;border-color:#c6d880;}
100 | .info {background:#d5edf8;color:#205791;border-color:#92cae4;}
101 | .error a, .alert a {color:#8a1f11;}
102 | .notice a {color:#514721;}
103 | .success a {color:#264409;}
104 | .info a {color:#205791;}
105 |
106 | /* grid.css */
107 | .container {width:950px;margin:0 auto;}
108 | .showgrid {background:url(src/grid.png);}
109 | .column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
110 | .last {margin-right:0;}
111 | .span-1 {width:30px;}
112 | .span-2 {width:70px;}
113 | .span-3 {width:110px;}
114 | .span-4 {width:150px;}
115 | .span-5 {width:190px;}
116 | .span-6 {width:230px;}
117 | .span-7 {width:270px;}
118 | .span-8 {width:310px;}
119 | .span-9 {width:350px;}
120 | .span-10 {width:390px;}
121 | .span-11 {width:430px;}
122 | .span-12 {width:470px;}
123 | .span-13 {width:510px;}
124 | .span-14 {width:550px;}
125 | .span-15 {width:590px;}
126 | .span-16 {width:630px;}
127 | .span-17 {width:670px;}
128 | .span-18 {width:710px;}
129 | .span-19 {width:750px;}
130 | .span-20 {width:790px;}
131 | .span-21 {width:830px;}
132 | .span-22 {width:870px;}
133 | .span-23 {width:910px;}
134 | .span-24 {width:950px;margin-right:0;}
135 | input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
136 | input.span-1, textarea.span-1 {width:18px;}
137 | input.span-2, textarea.span-2 {width:58px;}
138 | input.span-3, textarea.span-3 {width:98px;}
139 | input.span-4, textarea.span-4 {width:138px;}
140 | input.span-5, textarea.span-5 {width:178px;}
141 | input.span-6, textarea.span-6 {width:218px;}
142 | input.span-7, textarea.span-7 {width:258px;}
143 | input.span-8, textarea.span-8 {width:298px;}
144 | input.span-9, textarea.span-9 {width:338px;}
145 | input.span-10, textarea.span-10 {width:378px;}
146 | input.span-11, textarea.span-11 {width:418px;}
147 | input.span-12, textarea.span-12 {width:458px;}
148 | input.span-13, textarea.span-13 {width:498px;}
149 | input.span-14, textarea.span-14 {width:538px;}
150 | input.span-15, textarea.span-15 {width:578px;}
151 | input.span-16, textarea.span-16 {width:618px;}
152 | input.span-17, textarea.span-17 {width:658px;}
153 | input.span-18, textarea.span-18 {width:698px;}
154 | input.span-19, textarea.span-19 {width:738px;}
155 | input.span-20, textarea.span-20 {width:778px;}
156 | input.span-21, textarea.span-21 {width:818px;}
157 | input.span-22, textarea.span-22 {width:858px;}
158 | input.span-23, textarea.span-23 {width:898px;}
159 | input.span-24, textarea.span-24 {width:938px;}
160 | .append-1 {padding-right:40px;}
161 | .append-2 {padding-right:80px;}
162 | .append-3 {padding-right:120px;}
163 | .append-4 {padding-right:160px;}
164 | .append-5 {padding-right:200px;}
165 | .append-6 {padding-right:240px;}
166 | .append-7 {padding-right:280px;}
167 | .append-8 {padding-right:320px;}
168 | .append-9 {padding-right:360px;}
169 | .append-10 {padding-right:400px;}
170 | .append-11 {padding-right:440px;}
171 | .append-12 {padding-right:480px;}
172 | .append-13 {padding-right:520px;}
173 | .append-14 {padding-right:560px;}
174 | .append-15 {padding-right:600px;}
175 | .append-16 {padding-right:640px;}
176 | .append-17 {padding-right:680px;}
177 | .append-18 {padding-right:720px;}
178 | .append-19 {padding-right:760px;}
179 | .append-20 {padding-right:800px;}
180 | .append-21 {padding-right:840px;}
181 | .append-22 {padding-right:880px;}
182 | .append-23 {padding-right:920px;}
183 | .prepend-1 {padding-left:40px;}
184 | .prepend-2 {padding-left:80px;}
185 | .prepend-3 {padding-left:120px;}
186 | .prepend-4 {padding-left:160px;}
187 | .prepend-5 {padding-left:200px;}
188 | .prepend-6 {padding-left:240px;}
189 | .prepend-7 {padding-left:280px;}
190 | .prepend-8 {padding-left:320px;}
191 | .prepend-9 {padding-left:360px;}
192 | .prepend-10 {padding-left:400px;}
193 | .prepend-11 {padding-left:440px;}
194 | .prepend-12 {padding-left:480px;}
195 | .prepend-13 {padding-left:520px;}
196 | .prepend-14 {padding-left:560px;}
197 | .prepend-15 {padding-left:600px;}
198 | .prepend-16 {padding-left:640px;}
199 | .prepend-17 {padding-left:680px;}
200 | .prepend-18 {padding-left:720px;}
201 | .prepend-19 {padding-left:760px;}
202 | .prepend-20 {padding-left:800px;}
203 | .prepend-21 {padding-left:840px;}
204 | .prepend-22 {padding-left:880px;}
205 | .prepend-23 {padding-left:920px;}
206 | .border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
207 | .colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}
208 | .pull-1 {margin-left:-40px;}
209 | .pull-2 {margin-left:-80px;}
210 | .pull-3 {margin-left:-120px;}
211 | .pull-4 {margin-left:-160px;}
212 | .pull-5 {margin-left:-200px;}
213 | .pull-6 {margin-left:-240px;}
214 | .pull-7 {margin-left:-280px;}
215 | .pull-8 {margin-left:-320px;}
216 | .pull-9 {margin-left:-360px;}
217 | .pull-10 {margin-left:-400px;}
218 | .pull-11 {margin-left:-440px;}
219 | .pull-12 {margin-left:-480px;}
220 | .pull-13 {margin-left:-520px;}
221 | .pull-14 {margin-left:-560px;}
222 | .pull-15 {margin-left:-600px;}
223 | .pull-16 {margin-left:-640px;}
224 | .pull-17 {margin-left:-680px;}
225 | .pull-18 {margin-left:-720px;}
226 | .pull-19 {margin-left:-760px;}
227 | .pull-20 {margin-left:-800px;}
228 | .pull-21 {margin-left:-840px;}
229 | .pull-22 {margin-left:-880px;}
230 | .pull-23 {margin-left:-920px;}
231 | .pull-24 {margin-left:-960px;}
232 | .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
233 | .push-1 {margin:0 -40px 1.5em 40px;}
234 | .push-2 {margin:0 -80px 1.5em 80px;}
235 | .push-3 {margin:0 -120px 1.5em 120px;}
236 | .push-4 {margin:0 -160px 1.5em 160px;}
237 | .push-5 {margin:0 -200px 1.5em 200px;}
238 | .push-6 {margin:0 -240px 1.5em 240px;}
239 | .push-7 {margin:0 -280px 1.5em 280px;}
240 | .push-8 {margin:0 -320px 1.5em 320px;}
241 | .push-9 {margin:0 -360px 1.5em 360px;}
242 | .push-10 {margin:0 -400px 1.5em 400px;}
243 | .push-11 {margin:0 -440px 1.5em 440px;}
244 | .push-12 {margin:0 -480px 1.5em 480px;}
245 | .push-13 {margin:0 -520px 1.5em 520px;}
246 | .push-14 {margin:0 -560px 1.5em 560px;}
247 | .push-15 {margin:0 -600px 1.5em 600px;}
248 | .push-16 {margin:0 -640px 1.5em 640px;}
249 | .push-17 {margin:0 -680px 1.5em 680px;}
250 | .push-18 {margin:0 -720px 1.5em 720px;}
251 | .push-19 {margin:0 -760px 1.5em 760px;}
252 | .push-20 {margin:0 -800px 1.5em 800px;}
253 | .push-21 {margin:0 -840px 1.5em 840px;}
254 | .push-22 {margin:0 -880px 1.5em 880px;}
255 | .push-23 {margin:0 -920px 1.5em 920px;}
256 | .push-24 {margin:0 -960px 1.5em 960px;}
257 | .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}
258 | div.prepend-top, .prepend-top {margin-top:1.5em;}
259 | div.append-bottom, .append-bottom {margin-bottom:1.5em;}
260 | .box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
261 | hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;}
262 | hr.space {background:#fff;color:#fff;visibility:hidden;}
263 | .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
264 | .clearfix, .container {display:block;}
265 | .clear {clear:both;}
--------------------------------------------------------------------------------
/demo/libs/milligram.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Milligram v1.3.0
3 | * https://milligram.github.io
4 | *
5 | * Copyright (c) 2017 CJ Patoilo
6 | * Licensed under the MIT license
7 | */
8 |
9 | *,
10 | *:after,
11 | *:before {
12 | box-sizing: inherit;
13 | }
14 |
15 | html {
16 | box-sizing: border-box;
17 | font-size: 62.5%;
18 | }
19 |
20 | body {
21 | color: #606c76;
22 | font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
23 | font-size: 1.6em;
24 | font-weight: 300;
25 | letter-spacing: .01em;
26 | line-height: 1.6;
27 | }
28 |
29 | blockquote {
30 | border-left: 0.3rem solid #d1d1d1;
31 | margin-left: 0;
32 | margin-right: 0;
33 | padding: 1rem 1.5rem;
34 | }
35 |
36 | blockquote *:last-child {
37 | margin-bottom: 0;
38 | }
39 |
40 | .button,
41 | button,
42 | input[type='button'],
43 | input[type='reset'],
44 | input[type='submit'] {
45 | background-color: #9b4dca;
46 | border: 0.1rem solid #9b4dca;
47 | border-radius: .4rem;
48 | color: #fff;
49 | cursor: pointer;
50 | display: inline-block;
51 | font-size: 1.1rem;
52 | font-weight: 700;
53 | height: 3.8rem;
54 | letter-spacing: .1rem;
55 | line-height: 3.8rem;
56 | padding: 0 3.0rem;
57 | text-align: center;
58 | text-decoration: none;
59 | text-transform: uppercase;
60 | white-space: nowrap;
61 | }
62 |
63 | .button:focus, .button:hover,
64 | button:focus,
65 | button:hover,
66 | input[type='button']:focus,
67 | input[type='button']:hover,
68 | input[type='reset']:focus,
69 | input[type='reset']:hover,
70 | input[type='submit']:focus,
71 | input[type='submit']:hover {
72 | background-color: #606c76;
73 | border-color: #606c76;
74 | color: #fff;
75 | outline: 0;
76 | }
77 |
78 | .button[disabled],
79 | button[disabled],
80 | input[type='button'][disabled],
81 | input[type='reset'][disabled],
82 | input[type='submit'][disabled] {
83 | cursor: default;
84 | opacity: .5;
85 | }
86 |
87 | .button[disabled]:focus, .button[disabled]:hover,
88 | button[disabled]:focus,
89 | button[disabled]:hover,
90 | input[type='button'][disabled]:focus,
91 | input[type='button'][disabled]:hover,
92 | input[type='reset'][disabled]:focus,
93 | input[type='reset'][disabled]:hover,
94 | input[type='submit'][disabled]:focus,
95 | input[type='submit'][disabled]:hover {
96 | background-color: #9b4dca;
97 | border-color: #9b4dca;
98 | }
99 |
100 | .button.button-outline,
101 | button.button-outline,
102 | input[type='button'].button-outline,
103 | input[type='reset'].button-outline,
104 | input[type='submit'].button-outline {
105 | background-color: transparent;
106 | color: #9b4dca;
107 | }
108 |
109 | .button.button-outline:focus, .button.button-outline:hover,
110 | button.button-outline:focus,
111 | button.button-outline:hover,
112 | input[type='button'].button-outline:focus,
113 | input[type='button'].button-outline:hover,
114 | input[type='reset'].button-outline:focus,
115 | input[type='reset'].button-outline:hover,
116 | input[type='submit'].button-outline:focus,
117 | input[type='submit'].button-outline:hover {
118 | background-color: transparent;
119 | border-color: #606c76;
120 | color: #606c76;
121 | }
122 |
123 | .button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
124 | button.button-outline[disabled]:focus,
125 | button.button-outline[disabled]:hover,
126 | input[type='button'].button-outline[disabled]:focus,
127 | input[type='button'].button-outline[disabled]:hover,
128 | input[type='reset'].button-outline[disabled]:focus,
129 | input[type='reset'].button-outline[disabled]:hover,
130 | input[type='submit'].button-outline[disabled]:focus,
131 | input[type='submit'].button-outline[disabled]:hover {
132 | border-color: inherit;
133 | color: #9b4dca;
134 | }
135 |
136 | .button.button-clear,
137 | button.button-clear,
138 | input[type='button'].button-clear,
139 | input[type='reset'].button-clear,
140 | input[type='submit'].button-clear {
141 | background-color: transparent;
142 | border-color: transparent;
143 | color: #9b4dca;
144 | }
145 |
146 | .button.button-clear:focus, .button.button-clear:hover,
147 | button.button-clear:focus,
148 | button.button-clear:hover,
149 | input[type='button'].button-clear:focus,
150 | input[type='button'].button-clear:hover,
151 | input[type='reset'].button-clear:focus,
152 | input[type='reset'].button-clear:hover,
153 | input[type='submit'].button-clear:focus,
154 | input[type='submit'].button-clear:hover {
155 | background-color: transparent;
156 | border-color: transparent;
157 | color: #606c76;
158 | }
159 |
160 | .button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
161 | button.button-clear[disabled]:focus,
162 | button.button-clear[disabled]:hover,
163 | input[type='button'].button-clear[disabled]:focus,
164 | input[type='button'].button-clear[disabled]:hover,
165 | input[type='reset'].button-clear[disabled]:focus,
166 | input[type='reset'].button-clear[disabled]:hover,
167 | input[type='submit'].button-clear[disabled]:focus,
168 | input[type='submit'].button-clear[disabled]:hover {
169 | color: #9b4dca;
170 | }
171 |
172 | code {
173 | background: #f4f5f6;
174 | border-radius: .4rem;
175 | font-size: 86%;
176 | margin: 0 .2rem;
177 | padding: .2rem .5rem;
178 | white-space: nowrap;
179 | }
180 |
181 | pre {
182 | background: #f4f5f6;
183 | border-left: 0.3rem solid #9b4dca;
184 | overflow-y: hidden;
185 | }
186 |
187 | pre > code {
188 | border-radius: 0;
189 | display: block;
190 | padding: 1rem 1.5rem;
191 | white-space: pre;
192 | }
193 |
194 | hr {
195 | border: 0;
196 | border-top: 0.1rem solid #f4f5f6;
197 | margin: 3.0rem 0;
198 | }
199 |
200 | input[type='email'],
201 | input[type='number'],
202 | input[type='password'],
203 | input[type='search'],
204 | input[type='tel'],
205 | input[type='text'],
206 | input[type='url'],
207 | textarea,
208 | select {
209 | -webkit-appearance: none;
210 | -moz-appearance: none;
211 | appearance: none;
212 | background-color: transparent;
213 | border: 0.1rem solid #d1d1d1;
214 | border-radius: .4rem;
215 | box-shadow: none;
216 | box-sizing: inherit;
217 | height: 3.8rem;
218 | padding: .6rem 1.0rem;
219 | width: 100%;
220 | }
221 |
222 | input[type='email']:focus,
223 | input[type='number']:focus,
224 | input[type='password']:focus,
225 | input[type='search']:focus,
226 | input[type='tel']:focus,
227 | input[type='text']:focus,
228 | input[type='url']:focus,
229 | textarea:focus,
230 | select:focus {
231 | border-color: #9b4dca;
232 | outline: 0;
233 | }
234 |
235 | select {
236 | background: url('data:image/svg+xml;utf8,') center right no-repeat;
237 | padding-right: 3.0rem;
238 | }
239 |
240 | select:focus {
241 | background-image: url('data:image/svg+xml;utf8,');
242 | }
243 |
244 | textarea {
245 | min-height: 6.5rem;
246 | }
247 |
248 | label,
249 | legend {
250 | display: block;
251 | font-size: 1.6rem;
252 | font-weight: 700;
253 | margin-bottom: .5rem;
254 | }
255 |
256 | fieldset {
257 | border-width: 0;
258 | padding: 0;
259 | }
260 |
261 | input[type='checkbox'],
262 | input[type='radio'] {
263 | display: inline;
264 | }
265 |
266 | .label-inline {
267 | display: inline-block;
268 | font-weight: normal;
269 | margin-left: .5rem;
270 | }
271 |
272 | .container {
273 | margin: 0 auto;
274 | max-width: 112.0rem;
275 | padding: 0 2.0rem;
276 | position: relative;
277 | width: 100%;
278 | }
279 |
280 | .row {
281 | display: flex;
282 | flex-direction: column;
283 | padding: 0;
284 | width: 100%;
285 | }
286 |
287 | .row.row-no-padding {
288 | padding: 0;
289 | }
290 |
291 | .row.row-no-padding > .column {
292 | padding: 0;
293 | }
294 |
295 | .row.row-wrap {
296 | flex-wrap: wrap;
297 | }
298 |
299 | .row.row-top {
300 | align-items: flex-start;
301 | }
302 |
303 | .row.row-bottom {
304 | align-items: flex-end;
305 | }
306 |
307 | .row.row-center {
308 | align-items: center;
309 | }
310 |
311 | .row.row-stretch {
312 | align-items: stretch;
313 | }
314 |
315 | .row.row-baseline {
316 | align-items: baseline;
317 | }
318 |
319 | .row .column {
320 | display: block;
321 | flex: 1 1 auto;
322 | margin-left: 0;
323 | max-width: 100%;
324 | width: 100%;
325 | }
326 |
327 | .row .column.column-offset-10 {
328 | margin-left: 10%;
329 | }
330 |
331 | .row .column.column-offset-20 {
332 | margin-left: 20%;
333 | }
334 |
335 | .row .column.column-offset-25 {
336 | margin-left: 25%;
337 | }
338 |
339 | .row .column.column-offset-33, .row .column.column-offset-34 {
340 | margin-left: 33.3333%;
341 | }
342 |
343 | .row .column.column-offset-50 {
344 | margin-left: 50%;
345 | }
346 |
347 | .row .column.column-offset-66, .row .column.column-offset-67 {
348 | margin-left: 66.6666%;
349 | }
350 |
351 | .row .column.column-offset-75 {
352 | margin-left: 75%;
353 | }
354 |
355 | .row .column.column-offset-80 {
356 | margin-left: 80%;
357 | }
358 |
359 | .row .column.column-offset-90 {
360 | margin-left: 90%;
361 | }
362 |
363 | .row .column.column-10 {
364 | flex: 0 0 10%;
365 | max-width: 10%;
366 | }
367 |
368 | .row .column.column-20 {
369 | flex: 0 0 20%;
370 | max-width: 20%;
371 | }
372 |
373 | .row .column.column-25 {
374 | flex: 0 0 25%;
375 | max-width: 25%;
376 | }
377 |
378 | .row .column.column-33, .row .column.column-34 {
379 | flex: 0 0 33.3333%;
380 | max-width: 33.3333%;
381 | }
382 |
383 | .row .column.column-40 {
384 | flex: 0 0 40%;
385 | max-width: 40%;
386 | }
387 |
388 | .row .column.column-50 {
389 | flex: 0 0 50%;
390 | max-width: 50%;
391 | }
392 |
393 | .row .column.column-60 {
394 | flex: 0 0 60%;
395 | max-width: 60%;
396 | }
397 |
398 | .row .column.column-66, .row .column.column-67 {
399 | flex: 0 0 66.6666%;
400 | max-width: 66.6666%;
401 | }
402 |
403 | .row .column.column-75 {
404 | flex: 0 0 75%;
405 | max-width: 75%;
406 | }
407 |
408 | .row .column.column-80 {
409 | flex: 0 0 80%;
410 | max-width: 80%;
411 | }
412 |
413 | .row .column.column-90 {
414 | flex: 0 0 90%;
415 | max-width: 90%;
416 | }
417 |
418 | .row .column .column-top {
419 | align-self: flex-start;
420 | }
421 |
422 | .row .column .column-bottom {
423 | align-self: flex-end;
424 | }
425 |
426 | .row .column .column-center {
427 | -ms-grid-row-align: center;
428 | align-self: center;
429 | }
430 |
431 | @media (min-width: 40rem) {
432 | .row {
433 | flex-direction: row;
434 | margin-left: -1.0rem;
435 | width: calc(100% + 2.0rem);
436 | }
437 | .row .column {
438 | margin-bottom: inherit;
439 | padding: 0 1.0rem;
440 | }
441 | }
442 |
443 | a {
444 | color: #9b4dca;
445 | text-decoration: none;
446 | }
447 |
448 | a:focus, a:hover {
449 | color: #606c76;
450 | }
451 |
452 | dl,
453 | ol,
454 | ul {
455 | list-style: none;
456 | margin-top: 0;
457 | padding-left: 0;
458 | }
459 |
460 | dl dl,
461 | dl ol,
462 | dl ul,
463 | ol dl,
464 | ol ol,
465 | ol ul,
466 | ul dl,
467 | ul ol,
468 | ul ul {
469 | font-size: 90%;
470 | margin: 1.5rem 0 1.5rem 3.0rem;
471 | }
472 |
473 | ol {
474 | list-style: decimal inside;
475 | }
476 |
477 | ul {
478 | list-style: circle inside;
479 | }
480 |
481 | .button,
482 | button,
483 | dd,
484 | dt,
485 | li {
486 | margin-bottom: 1.0rem;
487 | }
488 |
489 | fieldset,
490 | input,
491 | select,
492 | textarea {
493 | margin-bottom: 1.5rem;
494 | }
495 |
496 | blockquote,
497 | dl,
498 | figure,
499 | form,
500 | ol,
501 | p,
502 | pre,
503 | table,
504 | ul {
505 | margin-bottom: 2.5rem;
506 | }
507 |
508 | table {
509 | border-spacing: 0;
510 | width: 100%;
511 | }
512 |
513 | td,
514 | th {
515 | border-bottom: 0.1rem solid #e1e1e1;
516 | padding: 1.2rem 1.5rem;
517 | text-align: left;
518 | }
519 |
520 | td:first-child,
521 | th:first-child {
522 | padding-left: 0;
523 | }
524 |
525 | td:last-child,
526 | th:last-child {
527 | padding-right: 0;
528 | }
529 |
530 | b,
531 | strong {
532 | font-weight: bold;
533 | }
534 |
535 | p {
536 | margin-top: 0;
537 | }
538 |
539 | h1,
540 | h2,
541 | h3,
542 | h4,
543 | h5,
544 | h6 {
545 | font-weight: 300;
546 | letter-spacing: -.1rem;
547 | margin-bottom: 2.0rem;
548 | margin-top: 0;
549 | }
550 |
551 | h1 {
552 | font-size: 4.6rem;
553 | line-height: 1.2;
554 | }
555 |
556 | h2 {
557 | font-size: 3.6rem;
558 | line-height: 1.25;
559 | }
560 |
561 | h3 {
562 | font-size: 2.8rem;
563 | line-height: 1.3;
564 | }
565 |
566 | h4 {
567 | font-size: 2.2rem;
568 | letter-spacing: -.08rem;
569 | line-height: 1.35;
570 | }
571 |
572 | h5 {
573 | font-size: 1.8rem;
574 | letter-spacing: -.05rem;
575 | line-height: 1.5;
576 | }
577 |
578 | h6 {
579 | font-size: 1.6rem;
580 | letter-spacing: 0;
581 | line-height: 1.4;
582 | }
583 |
584 | img {
585 | max-width: 100%;
586 | }
587 |
588 | .clearfix:after {
589 | clear: both;
590 | content: ' ';
591 | display: table;
592 | }
593 |
594 | .float-left {
595 | float: left;
596 | }
597 |
598 | .float-right {
599 | float: right;
600 | }
601 |
602 | /*# sourceMappingURL=milligram.css.map */
--------------------------------------------------------------------------------
/demo/libs/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in
9 | * IE on Windows Phone and in iOS.
10 | */
11 |
12 | html {
13 | line-height: 1.15; /* 1 */
14 | -ms-text-size-adjust: 100%; /* 2 */
15 | -webkit-text-size-adjust: 100%; /* 2 */
16 | }
17 |
18 | /* Sections
19 | ========================================================================== */
20 |
21 | /**
22 | * Remove the margin in all browsers (opinionated).
23 | */
24 |
25 | body {
26 | margin: 0;
27 | }
28 |
29 | /**
30 | * Add the correct display in IE 9-.
31 | */
32 |
33 | article,
34 | aside,
35 | footer,
36 | header,
37 | nav,
38 | section {
39 | display: block;
40 | }
41 |
42 | /**
43 | * Correct the font size and margin on `h1` elements within `section` and
44 | * `article` contexts in Chrome, Firefox, and Safari.
45 | */
46 |
47 | h1 {
48 | font-size: 2em;
49 | margin: 0.67em 0;
50 | }
51 |
52 | /* Grouping content
53 | ========================================================================== */
54 |
55 | /**
56 | * Add the correct display in IE 9-.
57 | * 1. Add the correct display in IE.
58 | */
59 |
60 | figcaption,
61 | figure,
62 | main { /* 1 */
63 | display: block;
64 | }
65 |
66 | /**
67 | * Add the correct margin in IE 8.
68 | */
69 |
70 | figure {
71 | margin: 1em 40px;
72 | }
73 |
74 | /**
75 | * 1. Add the correct box sizing in Firefox.
76 | * 2. Show the overflow in Edge and IE.
77 | */
78 |
79 | hr {
80 | box-sizing: content-box; /* 1 */
81 | height: 0; /* 1 */
82 | overflow: visible; /* 2 */
83 | }
84 |
85 | /**
86 | * 1. Correct the inheritance and scaling of font size in all browsers.
87 | * 2. Correct the odd `em` font sizing in all browsers.
88 | */
89 |
90 | pre {
91 | font-family: monospace, monospace; /* 1 */
92 | font-size: 1em; /* 2 */
93 | }
94 |
95 | /* Text-level semantics
96 | ========================================================================== */
97 |
98 | /**
99 | * 1. Remove the gray background on active links in IE 10.
100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
101 | */
102 |
103 | a {
104 | background-color: transparent; /* 1 */
105 | -webkit-text-decoration-skip: objects; /* 2 */
106 | }
107 |
108 | /**
109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
111 | */
112 |
113 | abbr[title] {
114 | border-bottom: none; /* 1 */
115 | text-decoration: underline; /* 2 */
116 | text-decoration: underline dotted; /* 2 */
117 | }
118 |
119 | /**
120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
121 | */
122 |
123 | b,
124 | strong {
125 | font-weight: inherit;
126 | }
127 |
128 | /**
129 | * Add the correct font weight in Chrome, Edge, and Safari.
130 | */
131 |
132 | b,
133 | strong {
134 | font-weight: bolder;
135 | }
136 |
137 | /**
138 | * 1. Correct the inheritance and scaling of font size in all browsers.
139 | * 2. Correct the odd `em` font sizing in all browsers.
140 | */
141 |
142 | code,
143 | kbd,
144 | samp {
145 | font-family: monospace, monospace; /* 1 */
146 | font-size: 1em; /* 2 */
147 | }
148 |
149 | /**
150 | * Add the correct font style in Android 4.3-.
151 | */
152 |
153 | dfn {
154 | font-style: italic;
155 | }
156 |
157 | /**
158 | * Add the correct background and color in IE 9-.
159 | */
160 |
161 | mark {
162 | background-color: #ff0;
163 | color: #000;
164 | }
165 |
166 | /**
167 | * Add the correct font size in all browsers.
168 | */
169 |
170 | small {
171 | font-size: 80%;
172 | }
173 |
174 | /**
175 | * Prevent `sub` and `sup` elements from affecting the line height in
176 | * all browsers.
177 | */
178 |
179 | sub,
180 | sup {
181 | font-size: 75%;
182 | line-height: 0;
183 | position: relative;
184 | vertical-align: baseline;
185 | }
186 |
187 | sub {
188 | bottom: -0.25em;
189 | }
190 |
191 | sup {
192 | top: -0.5em;
193 | }
194 |
195 | /* Embedded content
196 | ========================================================================== */
197 |
198 | /**
199 | * Add the correct display in IE 9-.
200 | */
201 |
202 | audio,
203 | video {
204 | display: inline-block;
205 | }
206 |
207 | /**
208 | * Add the correct display in iOS 4-7.
209 | */
210 |
211 | audio:not([controls]) {
212 | display: none;
213 | height: 0;
214 | }
215 |
216 | /**
217 | * Remove the border on images inside links in IE 10-.
218 | */
219 |
220 | img {
221 | border-style: none;
222 | }
223 |
224 | /**
225 | * Hide the overflow in IE.
226 | */
227 |
228 | svg:not(:root) {
229 | overflow: hidden;
230 | }
231 |
232 | /* Forms
233 | ========================================================================== */
234 |
235 | /**
236 | * 1. Change the font styles in all browsers (opinionated).
237 | * 2. Remove the margin in Firefox and Safari.
238 | */
239 |
240 | button,
241 | input,
242 | optgroup,
243 | select,
244 | textarea {
245 | font-family: sans-serif; /* 1 */
246 | font-size: 100%; /* 1 */
247 | line-height: 1.15; /* 1 */
248 | margin: 0; /* 2 */
249 | }
250 |
251 | /**
252 | * Show the overflow in IE.
253 | * 1. Show the overflow in Edge.
254 | */
255 |
256 | button,
257 | input { /* 1 */
258 | overflow: visible;
259 | }
260 |
261 | /**
262 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
263 | * 1. Remove the inheritance of text transform in Firefox.
264 | */
265 |
266 | button,
267 | select { /* 1 */
268 | text-transform: none;
269 | }
270 |
271 | /**
272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
273 | * controls in Android 4.
274 | * 2. Correct the inability to style clickable types in iOS and Safari.
275 | */
276 |
277 | button,
278 | html [type="button"], /* 1 */
279 | [type="reset"],
280 | [type="submit"] {
281 | -webkit-appearance: button; /* 2 */
282 | }
283 |
284 | /**
285 | * Remove the inner border and padding in Firefox.
286 | */
287 |
288 | button::-moz-focus-inner,
289 | [type="button"]::-moz-focus-inner,
290 | [type="reset"]::-moz-focus-inner,
291 | [type="submit"]::-moz-focus-inner {
292 | border-style: none;
293 | padding: 0;
294 | }
295 |
296 | /**
297 | * Restore the focus styles unset by the previous rule.
298 | */
299 |
300 | button:-moz-focusring,
301 | [type="button"]:-moz-focusring,
302 | [type="reset"]:-moz-focusring,
303 | [type="submit"]:-moz-focusring {
304 | outline: 1px dotted ButtonText;
305 | }
306 |
307 | /**
308 | * Correct the padding in Firefox.
309 | */
310 |
311 | fieldset {
312 | padding: 0.35em 0.75em 0.625em;
313 | }
314 |
315 | /**
316 | * 1. Correct the text wrapping in Edge and IE.
317 | * 2. Correct the color inheritance from `fieldset` elements in IE.
318 | * 3. Remove the padding so developers are not caught out when they zero out
319 | * `fieldset` elements in all browsers.
320 | */
321 |
322 | legend {
323 | box-sizing: border-box; /* 1 */
324 | color: inherit; /* 2 */
325 | display: table; /* 1 */
326 | max-width: 100%; /* 1 */
327 | padding: 0; /* 3 */
328 | white-space: normal; /* 1 */
329 | }
330 |
331 | /**
332 | * 1. Add the correct display in IE 9-.
333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
334 | */
335 |
336 | progress {
337 | display: inline-block; /* 1 */
338 | vertical-align: baseline; /* 2 */
339 | }
340 |
341 | /**
342 | * Remove the default vertical scrollbar in IE.
343 | */
344 |
345 | textarea {
346 | overflow: auto;
347 | }
348 |
349 | /**
350 | * 1. Add the correct box sizing in IE 10-.
351 | * 2. Remove the padding in IE 10-.
352 | */
353 |
354 | [type="checkbox"],
355 | [type="radio"] {
356 | box-sizing: border-box; /* 1 */
357 | padding: 0; /* 2 */
358 | }
359 |
360 | /**
361 | * Correct the cursor style of increment and decrement buttons in Chrome.
362 | */
363 |
364 | [type="number"]::-webkit-inner-spin-button,
365 | [type="number"]::-webkit-outer-spin-button {
366 | height: auto;
367 | }
368 |
369 | /**
370 | * 1. Correct the odd appearance in Chrome and Safari.
371 | * 2. Correct the outline style in Safari.
372 | */
373 |
374 | [type="search"] {
375 | -webkit-appearance: textfield; /* 1 */
376 | outline-offset: -2px; /* 2 */
377 | }
378 |
379 | /**
380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
381 | */
382 |
383 | [type="search"]::-webkit-search-cancel-button,
384 | [type="search"]::-webkit-search-decoration {
385 | -webkit-appearance: none;
386 | }
387 |
388 | /**
389 | * 1. Correct the inability to style clickable types in iOS and Safari.
390 | * 2. Change font properties to `inherit` in Safari.
391 | */
392 |
393 | ::-webkit-file-upload-button {
394 | -webkit-appearance: button; /* 1 */
395 | font: inherit; /* 2 */
396 | }
397 |
398 | /* Interactive
399 | ========================================================================== */
400 |
401 | /*
402 | * Add the correct display in IE 9-.
403 | * 1. Add the correct display in Edge, IE, and Firefox.
404 | */
405 |
406 | details, /* 1 */
407 | menu {
408 | display: block;
409 | }
410 |
411 | /*
412 | * Add the correct display in all browsers.
413 | */
414 |
415 | summary {
416 | display: list-item;
417 | }
418 |
419 | /* Scripting
420 | ========================================================================== */
421 |
422 | /**
423 | * Add the correct display in IE 9-.
424 | */
425 |
426 | canvas {
427 | display: inline-block;
428 | }
429 |
430 | /**
431 | * Add the correct display in IE.
432 | */
433 |
434 | template {
435 | display: none;
436 | }
437 |
438 | /* Hidden
439 | ========================================================================== */
440 |
441 | /**
442 | * Add the correct display in IE 10-.
443 | */
444 |
445 | [hidden] {
446 | display: none;
447 | }
448 |
--------------------------------------------------------------------------------
/demo/libs/oocss/content.css:
--------------------------------------------------------------------------------
1 | body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
2 | /* **************** CONTENT OBJECTS ***************** */
3 | /* ====== Default spacing ====== */
4 | h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
5 | h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
6 | pre{margin: 10px;}
7 | table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl,
8 | ul h1,ul h2,ul h3, ul h4, ul h5, ul h6, ul p, ul ul, ul ol, ul dl,
9 | ol h1,ol h2,ol h3, ol h4, ol h5, ol h6, ol p, ol ul, ol ol, ol dl {padding:0;}
10 | /* ====== Elements ====== */
11 | img{display:block;}
12 | em{font-style: italic;}
13 | strong{font-weight:bold;}
14 | hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
15 | code{color:#0B8C8F;}
16 | /* ====== Headings ====== */
17 | /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
18 | h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
19 | h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
20 | h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
21 | h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
22 | h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
23 | h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
24 | /* if additional headings are needed they should be created via additional classes, never via location dependant styling */
25 | .category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
26 | .category a{color: #333;}
27 | .important a{font-weight:bold;}
28 | /* links */
29 | a { color: #036; font-weight:bold;text-decoration: none }
30 | a:focus, a:hover { text-decoration: underline }
31 | a:visited { color:#005a9c; }
32 | /* ====== Lists ======*/
33 | /* numbered list */
34 | ol.simpleList li{list-style-type: decimal; margin-left:40px;}
35 | /* standard list */
36 | ul.simpleList li{list-style-type:disc; margin-left:40px;}
37 | /* ====== Tables ====== */
38 | .data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}
39 | .data table {width:100%;border:1px solid #AE0345;}
40 | th, td{vertical-align:top;border:1px solid #AE0345;}
41 | .txtC, .data .txtC td, .data .txtC th{text-align:center;}
42 | .txtL, .data .txtL td, .data .txtL th{text-align:left;}
43 | .txtR, .data .txtR td, .data .txtR th{text-align:right;}
44 | .txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
45 | .txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
46 | .txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
47 | .data th,.data td{padding:3px 20px}
48 | .data thead tr{background-color: #fff0f8;}
49 | .data th{color: #000; font-weight:bold}
50 | /* specification table - extends data table */
51 | .spec{padding:10px;}
52 | .spec table{border-top: 1px solid #e2e2e2; border-bottom-color:#fff; border-left:none; border-right:none;}
53 | .spec th, .spec td{border:1px solid #e2e2e2; border-width: 1px 0; padding-left:0;}
54 | .spec .odd, .spec .even{background-color: #fff;}
55 | /* ====== blockquote ====== */
56 | cite{display:block; text-align:right; padding-top: 10px;}
57 | /* ====== callout ====== */
58 | .callout{font-size:189%;color:#999999; font-style:italic;}
59 | .callout cite{display:block; text-align:right;padding-top: 30px; font-size:69.25%;}
60 | .callout span.quot{font-size: 500%; vertical-align: sub; color:#e2e2e2; line-height:25px; font-weight:bold;}
61 | .callout span.quotLast{vertical-align:middle;}
62 | /* ====== image treatments (get more from jason santa maria) ====== */
63 | .caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;}
64 | /* will need to either
65 | 1. find a way to capture the width of the caption in the width of the image or flash
66 | 2. Set some default widths, mby use flickr widths?
67 | */
--------------------------------------------------------------------------------
/demo/libs/oocss/grids.css:
--------------------------------------------------------------------------------
1 | /* **************** GRIDS ***************** */
2 | .line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
3 | .unit{float:left;_zoom:1;}
4 | .unitExt{float:right;}
5 | .size1of1{float:none;}
6 | .size1of2{width:50%;}
7 | .size1of3{width:33.33333%;}
8 | .size2of3{width:66.66666%;}
9 | .size1of4{width:25%;}
10 | .size3of4{width:75%;}
11 | .size1of5{width:20%;}
12 | .size2of5{width:40%;}
13 | .size3of5{width:60%;}
14 | .size4of5{width:80%;}
15 | .lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
16 | /* extending grids to allow a unit that takes the width of its content */
17 | .media{width:auto;}
--------------------------------------------------------------------------------
/demo/libs/oocss/grids_debug.css:
--------------------------------------------------------------------------------
1 | /* grids debug */
2 | .line{background-color:#e2e2e2;}
3 | .size1of1{background-color:pink;}
4 | .size1of2{background-color:red;}
5 | .size1of3{background-color:orange;}
6 | .size2of3{background-color: yellow;}
7 | .size1of4{background-color:lime;}
8 | .size3of4{background-color:green;}
9 | .size1of5{background-color:aqua;}
10 | .size2of5{background-color:blue;}
11 | .size3of5{background-color:purple;}
12 | .size4of5{background-color:magenta;}
--------------------------------------------------------------------------------
/demo/libs/oocss/libraries.css:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3 | Code licensed under the BSD License:
4 | http://developer.yahoo.net/yui/license.txt
5 | version: 3.0.0pr2
6 | */
7 |
8 |
9 | /* reset */
10 |
11 | html {
12 | color: #000;
13 | background: #FFF;
14 | }
15 |
16 | body,
17 | div,
18 | dl,
19 | dt,
20 | dd,
21 | ul,
22 | ol,
23 | li,
24 | h1,
25 | h2,
26 | h3,
27 | h4,
28 | h5,
29 | h6,
30 | pre,
31 | code,
32 | form,
33 | fieldset,
34 | legend,
35 | input,
36 | textarea,
37 | p,
38 | blockquote,
39 | th,
40 | td {
41 | margin: 0;
42 | padding: 0;
43 | }
44 |
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
49 |
50 | fieldset,
51 | img {
52 | border: 0;
53 | }
54 |
55 | address,
56 | caption,
57 | cite,
58 | code,
59 | dfn,
60 | em,
61 | strong,
62 | th,
63 | var {
64 | font-style: normal;
65 | font-weight: normal;
66 | }
67 |
68 | li {
69 | list-style: none;
70 | }
71 |
72 | caption,
73 | th {
74 | text-align: left;
75 | }
76 |
77 | h1,
78 | h2,
79 | h3,
80 | h4,
81 | h5,
82 | h6 {
83 | font-size: 100%;
84 | font-weight: normal;
85 | }
86 |
87 | q:before,
88 | q:after {
89 | content: '';
90 | }
91 |
92 | abbr,
93 | acronym {
94 | border: 0;
95 | font-variant: normal;
96 | }
97 |
98 | sup {
99 | vertical-align: text-top;
100 | }
101 |
102 | sub {
103 | vertical-align: text-bottom;
104 | }
105 |
106 | input,
107 | textarea,
108 | select {
109 | font-family: inherit;
110 | font-size: inherit;
111 | font-weight: inherit;
112 | }
113 |
114 | input,
115 | textarea,
116 | select {
117 | *font-size: 100%;
118 | }
119 |
120 | legend {
121 | color: #000;
122 | }
123 |
124 |
125 | /* fonts */
126 |
127 | body {
128 | font: 13px/1.231 arial, helvetica, clean, sans-serif;
129 | *font-size: small;
130 | *font: x-small;
131 | }
132 |
133 | select,
134 | input,
135 | button,
136 | textarea {
137 | font: 99% arial, helvetica, clean, sans-serif;
138 | }
139 |
140 | table {
141 | font-size: inherit;
142 | font: 100%;
143 | font-family: inherit;
144 | }
145 |
146 | pre,
147 | code,
148 | kbd,
149 | samp,
150 | tt {
151 | font-family: monospace;
152 | *font-size: 108%;
153 | line-height: 100%;
154 | }
--------------------------------------------------------------------------------
/demo/libs/oocss/mod.css:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright (c) 2009, Nicole Sullivan. All rights reserved.
3 | Code licensed under the BSD License:
4 | version: 0.2
5 | */
6 | /* **************** BLOCK STRUCTURES ***************** */
7 | /* mod */
8 | .mod{margin:10px;}
9 | .mod .inner{background: url(http://oocss.org/css/skin/transparent.png) repeat left top;}
10 | .hd,.bd,.ft{overflow:hidden;_overflow:visible; _zoom:1;}
11 | .inner{position:relative;}
12 | b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
13 | .tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
14 | .tl{background-position: left top;}
15 | .tr{background-position: right top;}
16 | .bl{background-position: left bottom;}
17 | .br{background-position: right bottom;}
18 | .br,.tr{float:right;}
19 | .tr, .tl{overflow:hidden;margin-bottom:-32000px;}/* margin bottom needs to be < -9px */
20 | .bl,.br{margin-top:-10px;}
21 | .top{background-position:center top;}
22 | .bottom{background-position:center bottom;_zoom:1;}/* this zoom required for IE5.5 only*/
23 | /* complex */
24 | .complex{overflow:hidden;*position:relative;*zoom:1;}/* position/zoom required for IE7, 6, 5.5 */
25 | .complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;}
26 | .complex .bl, .complex .br{/*margin-top:0;*/}
27 | .complex .top{height:5px;}
28 | .complex .bottom{height:5px;/*margin-top:-10px;*/}
29 | /* pop */
30 | .pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top;}
31 | .pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
32 | .pop .tl, .pop .br{display:none;}
33 | .pop .bl{bottom:-10px;}
34 | .pop .tr{right:-10px;}
--------------------------------------------------------------------------------
/demo/libs/oocss/mod_debug.css:
--------------------------------------------------------------------------------
1 | /* debug modules */
2 | .top, .bottom{background-color:#e2e2e2;}
3 | .tl{background-color:red;}
4 | .tr{background-color:orange;}
5 | .bl{background-color:yellow;}
6 | .br{background-color:lime;}
7 | /*.hd{background-color: green;}
8 | .bd{background-color: teal;}
9 | .ft{background-color: blue;}*/
10 | .mod{background-color:purple;}
11 | .inner{background-color:magenta;}
12 |
--------------------------------------------------------------------------------
/demo/libs/oocss/mod_skins.css:
--------------------------------------------------------------------------------
1 | /* **************** BLOCK SKINS ***************** */
2 | /* ====== Contour blocks ====== */
3 | /* remove background-image:" to default to square corners for IE */
4 | /* ----- simple (extends mod) ----- */
5 | .simple .inner {border:1px solid #D7D7D7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
6 | .simple b{background-image:url(http://oocss.org/css/skin/mod/simple_corners.png);}
7 | /* ----- basic (extends mod) ----- */
8 | .basic .inner {/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
9 | .basic b{background-image:url(http://oocss.org/css/skin/mod/round.png);}
10 | /* ----- simpleExt (extends mod) ----- */
11 | .simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/ }
12 | .simpleExt .inner{border-color:#fff; border-width:4px; /*background-color:#e2e2e2;*/}
13 | .simpleExt b{background-image:url(http://oocss.org/css/skin/mod/simple_extended.png);}
14 | .simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
15 | .simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
16 | .simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
17 | .simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
18 | /* ----- me (extends mod) use for my comments ----- */
19 | .me,.me .inner{border:1px solid #909090;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
20 | .me .inner{border-color:#d76a84;}
21 | .me b{background-image:url(http://oocss.org/css/skin/mod/me.png);}
22 | .me .tl{left:-1px;top:-1px;}
23 | .me .tr{right:-1px;top:-1px;}
24 | .me .bl{left:-1px;bottom:-1px;}
25 | .me .br{right:-1px;bottom:-1px;}
26 | /* ----- noted (extends mod) ----- */
27 | .noted,.noted .inner{border:1px solid #c2c2c2;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
28 | .noted .inner{border-color:#eded68;}
29 | .noted b{background-image:url(http://oocss.org/css/skin/mod/noted.png);}
30 | .noted .tl{left:-1px;top:-1px;}
31 | .noted .tr{right:-1px;top:-1px;}
32 | .noted .bl{left:-1px;bottom:-1px;}
33 | .noted .br{right:-1px;bottom:-1px;}
34 | /* ----- grab (extends mod) ----- */
35 | .grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
36 | .grab b{background-image:url(http://oocss.org/css/skin/mod/grab.png);}
37 | .grab .tl, .grab .tr{height:10px; width:10px;}
38 | .grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
39 | /* ----- faq (extends mod) ----- */
40 | .faq .inner{border: 3px solid #b20029; border-bottom-width:10px;}/* can't be done w border radius */
41 | .faq b{background-image:url(http://oocss.org/css/skin/mod/faq.png);}
42 | .faq .tl, .faq .tr{height:10px; width:10px;}
43 | .faq .bl, .faq .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
44 | /* ----- onlinestore (extends mod) ----- */
45 | .onlinestore .inner{border: 3px solid #9a9800; border-bottom-width:10px;}/* can't be done w border radius */
46 | .onlinestore b{background-image:url(http://oocss.org/css/skin/mod/store.png);}
47 | .onlinestore .tl, .onlinestore .tr{height:10px; width:10px;}
48 | .onlinestore .bl, .onlinestore .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
49 | /* ----- about (extends mod) ----- */
50 | .about .inner{border: 3px solid #494949; border-bottom-width:10px;}/* can't be done w border radius */
51 | .about b{background-image:url(http://oocss.org/css/skin/mod/about.png);}
52 | .about .tl, .about .tr{height:10px; width:10px;}
53 | .about .bl, .about .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
54 | /* ----- talk (extends mod) ----- */
55 | .talk,.talk .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
56 | .talk .inner{border-color:#ededed;}
57 | .talk b{background-image:url(http://oocss.org/css/skin/mod/talk.png);}
58 | .talk .tl{left:-1px;top:-1px;}
59 | .talk .tr{right:-1px;top:-1px;}
60 | .talk .bl{left:-1px;bottom:-1px;}
61 | .talk .br{right:-1px;bottom:-1px;}
62 | /* ----- photo (extends complex) ----- */
63 | .photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
64 | .photo b{background-image:url(http://oocss.org/css/skin/mod/photo.png);}
65 | .photo .tr, .photo .tl{width:20px;}
66 | .photo .top, .photo .bottom{height:4px;margin-top:0px;}
67 | .photo .bl, .photo .br{height:16px;margin-top: -12px;}
68 | /* ----- flow (extends complex) ----- */
69 | .flow{margin:6px;}
70 | .flow b{background-image:url(http://oocss.org/css/skin/mod/even.png);}
71 | .flow .inner{padding:0 4px;}
72 | .flow .top{height:4px;}
73 | .flow .bottom{height:4px;margin-top:-4px;}
74 | .flow .br,.flow .bl{height:10px;margin-top:-6px;}/* margin top = bottom height - corner height */
75 | /* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
76 | .boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/border:solid 1px #949494;background:#fff;}
77 | /* ----- .excerpt (extends complex) ----- */
78 | .excerpt b{background-image:url(http://oocss.org/css/skin/mod/excerpt.png);}
79 | .excerpt .top{height:1px;}
80 | .excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */
81 | .excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */
82 | /* ----- sommers (extends pop) ----- */
83 | .sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
84 | .sommers,.sommers .inner,.sommers b{background-image:url(http://oocss.org/css/skin/mod/glow_7px.png);_background-image:none;}
85 | .sommers{margin:3px 20px 20px 3px;}
86 | /* ----- gonzalo ----- */
87 | .gonzalo, .gonzalo .inner, .gonzalo b{background-image:url(http://oocss.org/css/skin/mod/gc.png);}
88 | /* ====== Background blocks ====== */
89 | .sale .inner{background:red none;}
90 | .nicole .inner{background:#c01c41 none; color:#fff;}
91 | .nicole *, .login *{ color:#fff;}
92 | .highlight .inner{background:#e3e36f none;}
93 | .universe .inner{background:url(http://oocss.org/css/skin/mod/universe.png) repeat left top;}
94 | .foo .inner{background: url(http://oocss.org/css/skin/mod/universe_gray.png) repeat left top;}
95 | .login .inner{background: url(http://oocss.org/css/skin/mod/universe_login.png) repeat left top;}
96 | .comment .inner{background:#e2e2e2 none;}
97 | /* ====== Block headers and footers ====== */
98 | .hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}
99 | .section{background: #e9e9e9 url(http://oocss.org/css/skin/mod/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
100 | .section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;padding:0;}
101 | .act{background-color:#e9e9e9;}
102 | .topper{background: #fff url(http://oocss.org/css/skin/mod/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
103 | .topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
104 | .bam{background: #00477a url(http://oocss.org/css/skin/mod/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
105 | .bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
106 | .gonz{background:url(http://oocss.org/css/skin/mod/gc_header.png) no-repeat left top;}/* messed up */
107 | .online{background: #9a9400 url(http://oocss.org/css/skin/mod/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;}
108 | .online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;}
109 | .help{background: #b20029 url(http://oocss.org/css/skin/mod/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
110 | .help h1,.help h2,.help h3,.help h4,.help h5,.help h6{font-size:100%;color:#fff;padding:0;}
111 | .info{background: #636363 url(http://oocss.org/css/skin/mod/info.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
112 | .info h1,.info h2,.info h3,.info h4,.info h5,.info h6{font-size:100%;color:#fff;padding:0;}
--------------------------------------------------------------------------------
/demo/libs/oocss/mod_skins_ex4.css:
--------------------------------------------------------------------------------
1 | /* **************** BLOCK SKINS ***************** */
2 | /* ====== Contour blocks ====== */
3 | /* remove *background-image:" to default to square corners for IE */
4 | /* ----- simple (extends mod) ----- */
5 | .simple .inner {border:1px solid #D7D7D7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
6 | .simple b{*background-image:url(http://oocss.org/css/skin/mod/simple_corners.png);}
7 | /* ----- basic (extends mod) ----- */
8 | .basic .inner {-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
9 | .basic b{*background-image:url(http://oocss.org/css/skin/mod/round.png);}
10 | /* ----- simpleExt (extends mod) ----- */
11 | .simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; }
12 | .simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;}
13 | .simpleExt b{*background-image:url(http://oocss.org/css/skin/mod/simple_extended.png);}
14 | .simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
15 | .simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
16 | .simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
17 | .simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
18 | /* ----- me (extends mod) use for my comments ----- */
19 | .me,.me .inner{border:1px solid #909090;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
20 | .me .inner{border-color:#d76a84;}
21 | .me b{*background-image:url(http://oocss.org/css/skin/mod/me.png);}
22 | .me .tl{left:-1px;top:-1px;}
23 | .me .tr{right:-1px;top:-1px;}
24 | .me .bl{left:-1px;bottom:-1px;}
25 | .me .br{right:-1px;bottom:-1px;}
26 | /* ----- noted (extends mod) ----- */
27 | .noted,.noted .inner{border:1px solid #c2c2c2;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
28 | .noted .inner{border-color:#eded68;}
29 | .noted b{*background-image:url(http://oocss.org/css/skin/mod/noted.png);}
30 | .noted .tl{left:-1px;top:-1px;}
31 | .noted .tr{right:-1px;top:-1px;}
32 | .noted .bl{left:-1px;bottom:-1px;}
33 | .noted .br{right:-1px;bottom:-1px;}
34 | /* ----- grab (extends mod) ----- */
35 | .grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
36 | .grab b{background-image:url(http://oocss.org/css/skin/mod/grab.png);}
37 | .grab .tl, .grab .tr{height:10px; width:10px;}
38 | .grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
39 | /* ----- faq (extends mod) ----- */
40 | .faq .inner{border: 3px solid #b20029; border-bottom-width:10px;}/* can't be done w border radius */
41 | .faq b{background-image:url(http://oocss.org/css/skin/mod/faq.png);}
42 | .faq .tl, .faq .tr{height:10px; width:10px;}
43 | .faq .bl, .faq .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
44 | /* ----- onlinestore (extends mod) ----- */
45 | .onlinestore .inner{border: 3px solid #9a9800; border-bottom-width:10px;}/* can't be done w border radius */
46 | .onlinestore b{background-image:url(http://oocss.org/css/skin/mod/store.png);}
47 | .onlinestore .tl, .onlinestore .tr{height:10px; width:10px;}
48 | .onlinestore .bl, .onlinestore .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
49 | /* ----- about (extends mod) ----- */
50 | .about .inner{border: 3px solid #494949; border-bottom-width:10px;}/* can't be done w border radius */
51 | .about b{background-image:url(http://oocss.org/css/skin/mod/about.png);}
52 | .about .tl, .about .tr{height:10px; width:10px;}
53 | .about .bl, .about .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
54 | /* ----- talk (extends mod) ----- */
55 | .talk,.talk .inner{border:1px solid #c7c7c7;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
56 | .talk .inner{border-color:#ededed;}
57 | .talk b{*background-image:url(http://oocss.org/css/skin/mod/talk.png);}
58 | .talk .tl{left:-1px;top:-1px;}
59 | .talk .tr{right:-1px;top:-1px;}
60 | .talk .bl{left:-1px;bottom:-1px;}
61 | .talk .br{right:-1px;bottom:-1px;}
62 | /* ----- photo (extends complex) ----- */
63 | .photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
64 | .photo b{background-image:url(http://oocss.org/css/skin/mod/photo.png);}
65 | .photo .tr, .photo .tl{width:20px;}
66 | .photo .top, .photo .bottom{height:4px;margin-top:0px;}
67 | .photo .bl, .photo .br{height:16px;margin-top: -12px;}
68 | /* ----- flow (extends complex) ----- */
69 | .flow{margin:6px;}
70 | .flow b{background-image:url(http://oocss.org/css/skin/mod/even.png);}
71 | .flow .inner{padding:0 4px;}
72 | .flow .top{height:4px;}
73 | .flow .bottom{height:4px;margin-top:-4px;}
74 | .flow .br,.flow .bl{height:10px;margin-top:-6px;}/* margin top = bottom height - corner height */
75 | /* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
76 | .boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border:solid 1px #949494;background:#fff;}
77 | /* ----- .excerpt (extends complex) ----- */
78 | .excerpt b{background-image:url(http://oocss.org/css/skin/mod/excerpt.png);}
79 | .excerpt .top{height:1px;}
80 | .excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */
81 | .excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */
82 | /* ----- sommers (extends pop) ----- */
83 | .sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
84 | .sommers,.sommers .inner,.sommers b{background-image:url(http://oocss.org/css/skin/mod/glow_7px.png);_background-image:none;}
85 | .sommers{/*margin:3px 10px 10px 3px;*/}
86 | /* ----- gblock (extends pop) ----- */
87 | .gblock,.gblock .inner,.gblock b{background-image:url(http://oocss.org/css/skin/mod/gc.png);_background-image:none;}
88 | /* ====== Background blocks ====== */
89 | .sale .inner{background-color:red;}
90 | .nicole .inner{background-color:#c01c41; color:#fff;}
91 | .nicole *, .login *{ color:#fff;}
92 | .highlight .inner{background-color:#e3e36f;}
93 | .universe .inner{background:url(http://oocss.org/css/skin/mod/universe.png) repeat left top;}
94 | .foo .inner{background: url(http://oocss.org/css/skin/mod/universe_gray.png) repeat left top;}
95 | .login .inner{background: url(http://oocss.org/css/skin/mod/universe_login.png) repeat left top;}
96 | .comment .inner{background-color:#e2e2e2;}
97 | /* ====== Block headers and footers ====== */
98 | .section{background: #e9e9e9 url(http://oocss.org/css/skin/mod/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
99 | .section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;padding:0;}
100 | .act{background-color:#e9e9e9;}
101 | .topper{background: #fff url(http://oocss.org/css/skin/mod/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
102 | .topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
103 | .bam{background: #00477a url(http://oocss.org/css/skin/mod/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
104 | .bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
105 | .online{background: #9a9400 url(http://oocss.org/css/skin/mod/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;}
106 | .online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;}
107 | .help{background: #b20029 url(http://oocss.org/css/skin/mod/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
108 | .help h1,.help h2,.help h3,.help h4,.help h5,.help h6{font-size:100%;color:#fff;padding:0;}
109 | .info{background: #636363 url(http://oocss.org/css/skin/mod/info.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
110 | .info h1,.info h2,.info h3,.info h4,.info h5,.info h6{font-size:100%;color:#fff;padding:0;}
111 |
--------------------------------------------------------------------------------
/demo/libs/oocss/readme.md:
--------------------------------------------------------------------------------
1 | libraries.css - found a missing font-family on line 143
2 | mod_skins.css - found a missing "*" on line 12, so comment was incomplete
3 |
--------------------------------------------------------------------------------
/demo/libs/oocss/template.css:
--------------------------------------------------------------------------------
1 | /* **************** TEMPLATE ***************** */
2 | /* ====== Page Head, Body, and Foot ====== */
3 | body{_text-align:center;}/* IE5.5 */
4 | .body{overflow:hidden; _overflow:visible; _zoom:1;}
5 | .page{margin: 0 auto; width: 950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */
6 | /* "old school" and "liquid" extend page to allow for different page widths */
7 | .oldSchool{width:750px;}
8 | .gs960{width:960px;}
9 | .liquid{extends:.page; width: auto;margin:0;}
10 | /* ====== Columns ====== */
11 | .main{overflow: hidden;_overflow:visible;_zoom:1;}
12 | .leftCol{float:left; width:250px;_margin-right:-3px;}
13 | .rightCol{float:right; width: 300px;_margin-left:-3px;}
14 | /* extend columns to allow for common column widths */
15 | .gMail{width:160px;}
16 | .gCal{width:180px;}
17 | .yahoo{width:240px;}
18 | .myYahoo{width:300px;}
--------------------------------------------------------------------------------
/demo/libs/oocss/template_debug.css:
--------------------------------------------------------------------------------
1 | /* **************** TEMPLATE DEBUG ***************** */
2 | .body{background-color:red;}
3 | .page{background-color:orange;}
4 | .main{background-color:yellow;}
5 | .leftCol{background-color:lime;}
6 | .rightCol{background-color:aqua;}
--------------------------------------------------------------------------------
/demo/libs/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-purge-demo-app",
3 | "version": "1.0.0",
4 | "description": "Demo usage",
5 | "keywords": "css-purge demo app",
6 | "main": "css-purge-demo-app.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "author": "Red Blueprint Technologies",
11 | "license": "MIT",
12 | "dependencies": {
13 | "css-purge": "^3.1.6"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/readme.md:
--------------------------------------------------------------------------------
1 |
2 | CSS-PURGE Demo App
3 | ==================
4 |
5 | Requires [Node JS](https://nodejs.org)
6 |
7 | 1. ```npm install```
8 |
9 | 2. ```node css-purge-demo-app.js```
10 |
11 |
12 |
13 | License
14 | -----
15 |
16 | (The MIT License)
17 |
18 | Copyright (c) 2017 [Red Blueprint Technologies](http://redblueprint.com)
19 |
20 | Permission is hereby granted, free of charge, to any person obtaining
21 | a copy of this software and associated documentation files (the
22 | 'Software'), to deal in the Software without restriction, including
23 | without limitation the rights to use, copy, modify, merge, publish,
24 | distribute, sublicense, and/or sell copies of the Software, and to
25 | permit persons to whom the Software is furnished to do so, subject to
26 | the following conditions:
27 |
28 | The above copyright notice and this permission notice shall be
29 | included in all copies or substantial portions of the Software.
30 |
31 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
32 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
33 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
34 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
35 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
36 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
37 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/demo/test1.css:
--------------------------------------------------------------------------------
1 | .colour {
2 | color: #aaaaaa;
3 | background-color: #ffeedd;
4 | outline-color: yellow;
5 | border-color: blanchedalmond!important;
6 | border-right-color: red;
7 | }
8 |
9 | .borderRadius5 {
10 |
11 | border-top-left-radius: 5px;
12 | border-top-right-radius: 5px;
13 | border-bottom-left-radius: 10px;
14 | border-bottom-right-radius: 10px;
15 | }
16 |
17 | .borderRadius4 {
18 |
19 | border-top-left-radius: 5px;
20 | border-top-right-radius: 20px;
21 | border-bottom-left-radius: 10px;
22 | border-bottom-right-radius: 20px;
23 | }
24 |
25 | .borderRadius3 {
26 |
27 | border-top-left-radius: 20px;
28 | border-top-right-radius: 40px;
29 | border-bottom-left-radius: 20px;
30 | border-bottom-right-radius: 40px;
31 | }
32 |
33 | .borderRadius2 {
34 |
35 | border-top-left-radius: 2em;
36 | border-top-right-radius: 2em;
37 | border-bottom-left-radius: 2em;
38 | border-bottom-right-radius: 2em;
39 | }
40 |
41 | .borderRadius1 {
42 | border-top-left-radius: 2em;
43 | border-top-right-radius: 2em;
44 | border-bottom-left-radius: 2em;
45 | border-bottom-right-radius: 2em;
46 | border-radius: 5px!important;
47 | }
48 |
49 | .border4 {
50 |
51 | border-top-width: 1px;
52 | border-top-style: solid;
53 | border-top-color: aquamarine;
54 | border-right-width: 1px;
55 | border-right-style: solid;
56 | border-right-color: aquamarine;
57 | border-bottom-width: 1px;
58 | border-bottom-style: solid;
59 | border-bottom-color: aquamarine;
60 | border-left-width: 1px;
61 | border-left-style: solid;
62 | border-left-color: aquamarine;
63 | border-width: 2px;
64 | border-style: dotted;
65 | border-color: red;
66 | }
67 |
68 | .border3 {
69 |
70 | border-top-width: 1px;
71 | border-top-style: solid;
72 | border-top-color: aquamarine;
73 | border-right-width: 1px;
74 | border-right-style: solid;
75 | border-right-color: aquamarine;
76 | border-bottom-width: 1px;
77 | border-bottom-style: solid;
78 | border-bottom-color: aquamarine;
79 | border-left-width: 1px;
80 | border-left-style: solid;
81 | border-left-color: aquamarine;
82 | }
83 |
84 | .border2 {
85 | border-width: 1px!important;
86 | border-style: solid;
87 | border-color: #ffaaff;
88 | }
89 |
90 | .border1 {
91 | border: 1px solid #7fffd4;
92 | }
93 |
94 | .borderLeft2 {
95 | border-left-width: 1px;
96 | border-left-style: solid;
97 | border-left-color: aquamarine!important;
98 | }
99 |
100 | .borderLeft1 {
101 | border-left: 1px solid #7fffd4;
102 | }
103 |
104 | .borderBottom2 {
105 | border-bottom-width: 1px;
106 | border-bottom-style: solid;
107 | border-bottom-color: aquamarine;
108 | }
109 |
110 | .borderBottom1 {
111 | border-bottom: 1px solid #7fffd4;
112 | }
113 |
114 | .borderRight2 {
115 | border-right-width: 1px;
116 | border-right-style: solid!important;
117 | border-right-color: aquamarine;
118 | }
119 |
120 | .borderRight1 {
121 | border-right: 1px solid #7fffd4;
122 | }
123 |
124 | .borderTop2 {
125 | border-top-width: 1px;
126 | border-top-style: solid!important;
127 | border-top-color: aquamarine;
128 | }
129 |
130 | .borderTop1 {
131 | border-top: 1px solid #7fffd4;
132 | }
133 |
134 |
135 | .outline3 {
136 | outline-width: thin;
137 | outline-style: dotted;
138 | outline: lightblue solid thick;
139 | outline-color: aquamarine;
140 | }
141 |
142 | .outline2 {
143 | outline-width: thin;
144 | outline-style: dotted;
145 | outline-color: aquamarine;
146 | outline: #00FF00 dotted thick;
147 | }
148 |
149 | .outline1 {
150 | outline: #00FF00 dotted thick!important;
151 | }
152 |
153 | ul.liststyle4 {
154 | list-style-image: url('sqpurple.gif');
155 | list-style-position: inside;
156 | list-style: square outside url("sqpurple2.gif");
157 | list-style-type: circle;
158 | }
159 |
160 | ul.liststyle3 {
161 | list-style: square url("sqpurple.gif");
162 | }
163 |
164 | ul.liststyle2 {
165 | list-style-image: url('sqpurple.gif');
166 | list-style-position: inside;
167 | list-style-type: circle!important;
168 | }
169 |
170 | ul.liststyle1 {
171 |
172 | list-style: none;
173 | list-style-type: circle;
174 | }
175 |
176 | .font4 {
177 | font-style: inherit; //inherit prevents shorten
178 | font-family: helvetica, arial, sans-serif;
179 | font-variant: small-caps;
180 | font-weight: bold!important;
181 | font-size: 16px;
182 | line-height: 1;
183 | }
184 |
185 | .font3 {
186 | font-family: helvetica, arial, sans-serif;
187 | font-style: italic;
188 | font-variant: small-caps;
189 | font: oblique 500 3em Times New Roman, Georgia, Serif;
190 | font-weight: bold;
191 | font-size: 16px;
192 | font: oblique 900 6em Verdana, sans-serif;
193 | font-stretch: extra-condensed;
194 | }
195 |
196 | .font2 {
197 | font-family: helvetica, arial, sans-serif;
198 | font-style: italic;
199 | font-variant: small-caps;
200 | font-weight: bold!important;
201 | font-size: 16px;
202 | line-height: 1;
203 | }
204 |
205 | .font1 {
206 |
207 | font: 0/0 a;
208 | }
209 |
210 | .padding6 {
211 | padding-top: 60em;
212 | padding-right: 60em;
213 | padding-bottom: 60em;
214 | padding-left: 60em;
215 | color: red;
216 | }
217 |
218 | .padding5 {
219 |
220 | padding: 10px;
221 | padding-top: 60em;
222 | padding-bottom: 60em;
223 | color: lime;
224 | }
225 |
226 | .padding4 {
227 |
228 | padding: 10px;
229 | padding-right: 60em;
230 | padding-left: 60em;
231 | color: crimson;
232 | }
233 |
234 | .padding3 {
235 |
236 | padding-right: 30em;
237 | padding-left: 30em;
238 | padding-top: 10em;
239 | padding-bottom: 20em;
240 | color: slateblue;
241 | }
242 |
243 | .padding2 {
244 |
245 | padding-top: 30em;
246 | padding: 10px;
247 | padding-right: 40em;
248 | padding: 20px;
249 | padding-bottom: 50em;
250 | padding-left: 60em;
251 | color: green;
252 | }
253 |
254 | .padding1 {
255 |
256 | color: green;
257 |
258 | padding: 10px 20px 30px;
259 | padding-top: 30em;
260 | padding-right: 40em!important;
261 | padding-bottom: 50em;
262 | padding-left: 60em;
263 |
264 | color: lightgreen;
265 | }
266 |
267 | .margin6 {
268 | margin-top: 60em;
269 | margin-right: 60em;
270 | margin-bottom: 60em;
271 | margin-left: 60em;
272 | color: red;
273 | }
274 |
275 | .margin5 {
276 |
277 | margin: 10px;
278 | margin-top: 60em;
279 | margin-bottom: 60em;
280 | color: lime;
281 | }
282 |
283 | .margin4 {
284 |
285 | margin: 10px;
286 | margin-right: 60em;
287 | margin-left: 60em;
288 | color: crimson;
289 | }
290 |
291 | .margin3 {
292 |
293 | margin-right: 30em;
294 | margin-left: 30em;
295 | margin-top: 10em;
296 | margin-bottom: 20em;
297 | color: slateblue;
298 | }
299 |
300 | .margin2 {
301 |
302 | margin-top: 30em;
303 | margin: 10px;
304 | margin-right: 40em;
305 | margin: 20px;
306 | margin-bottom: 50em;
307 | margin-left: 60em;
308 | color: green;
309 | }
310 |
311 | .margin1 {
312 |
313 | color: green;
314 |
315 | margin: 10px 20px 30px;
316 | margin-top: 30em;
317 | margin-right: 40em!important;
318 | // margin-bottom: 50em; //inline comments get removed cos they're not standard css comments
319 | margin-left: 60em;
320 |
321 | color: lightgreen;
322 | }
323 |
324 |
325 | #multiplebackgrounds {
326 | background-image: url(img_blue_flower.gif), url(paper.gif);
327 | background-position: right bottom, left top;
328 | background-repeat: no-repeat, repeat;
329 | background-color: blue, slateblue;
330 | background-attachment: fixed, scroll;
331 | }
332 |
333 | .rgba {
334 | background-color: #BABDC2;
335 | background-color: rgba(0, 0, 0, 0.1);
336 | color: white;
337 | margin: 0px 0px 0px 15px;
338 | padding: 0.2rem 1rem;
339 | border: 1px solid #D9DCDD;
340 | }
341 |
342 |
343 | .background0 {
344 |
345 | min-height: 1080px;
346 | background-color: aquamarine;
347 | color: white;
348 | background: url("aquamarine.jpg") no-repeat;
349 | background-attachment: fixed;
350 | background-repeat: no-repeat;
351 | background-size: cover;
352 | overflow: hidden;
353 | }
354 |
355 |
356 | .background1 {
357 |
358 | border-top-width: 1px;
359 | border-top-style: solid;
360 | border-top-color: aquamarine;
361 | border-right-width: 1px;
362 | border-right-style: solid;
363 | border-right-color: aquamarine;
364 | border-bottom-width: 1px;
365 | border-bottom-style: solid;
366 | border-bottom-color: aquamarine;
367 | border-left-width: 1px;
368 | border-left-style: solid;
369 | border-left-color: aquamarine;
370 | border-width: 2px;
371 | border-style: dotted;
372 | border-color: aquamarine;
373 |
374 |
375 | background: red url("image1.jpg");
376 | background-image: url('image1-2.png');
377 | background-color: blue;
378 | background: green repeat-x;
379 | background-color: white;
380 | background: blue url("image1-3.jpg");
381 | background-attachment: fixed;
382 | background-position: inherit;
383 | background-repeat: no-repeat;
384 | background-size: cover;
385 | }
386 |
387 | .background2_extended {
388 | background: lightgreen url("image2.jpg");
389 |
390 | background-attachment: fixed;
391 | background-position: inherit;
392 | background-repeat: no-repeat;
393 | background-size: cover;
394 | }
395 |
396 | p {
397 |
398 | border-top-width: 1px;
399 | border-top-style: solid;
400 | border-top-color: aquamarine;
401 | border-right-width: 1px;
402 | border-right-style: solid;
403 | border-right-color: aquamarine;
404 | border-bottom-width: 1px;
405 | border-bottom-style: solid;
406 | border-bottom-color: aquamarine;
407 | border-left-width: 1px;
408 | border-left-style: solid;
409 | border-left-color: aquamarine;
410 | border-width: 2px;
411 | border-style: dotted;
412 | border-color: aquamarine;
413 |
414 | margin-right: 40em;
415 | margin: 10px 20px 30px 40px;
416 | margin-left: 60em;
417 | margin-top: 30em;
418 | margin-bottom: 50em;
419 |
420 | color: blue;
421 |
422 | font-style: italic;
423 | font-variant: small-caps;
424 | font-weight: bold;
425 | font-size: 16px;
426 | font-stretch: extra-condensed;
427 |
428 |
429 | border-top-left-radius: 5px;
430 | border-top-right-radius: 5px;
431 | border-bottom-left-radius: 5px;
432 | border-bottom-right-radius: 5px;
433 |
434 | padding-left: 60em;
435 | padding-right: 40em;
436 | padding: 10px;
437 | padding-top: 30em;
438 | padding-bottom: 50em;
439 |
440 | background-color: white;
441 | background: red;
442 | background-image: url('deepskyblueimage.jpg');
443 | background-position: center center;
444 | background-repeat: repeat-x;
445 | background-attachment: fixed;
446 |
447 | outline-width: thin;
448 | outline-style: dotted;
449 | outline-color: deepskyblue;
450 |
451 | list-style-type: disc;
452 | list-style-position: inside;
453 | list-style-image: url('dot.jpg');
454 |
455 |
456 |
457 | }
--------------------------------------------------------------------------------
/demo/test10.css:
--------------------------------------------------------------------------------
1 | .panel1 {
2 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA2CAMAAAC/bkrSAAAAV1BMVEVHcEy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLRI2JfcAAAAHHRSTlMAZTRs/gNpEOmq9i1AEsp5jUjfVAgml+4qHtKcDjTlBwAAAR1JREFUSMfl1tuOgjAUheGFMm1FAFXAOfzv/5xzoUABQsvEi4muKxPzAaE7myVJtiozopKVlZUk6ezYEHeWpDxlU9Jcsg6cKRSVwjhwVhW4RtFpHFQqIdGGJFAqg2ILsnAToE0BXhytj9N9fGYoMILueei6/njXtzmn/45qu5J6GbWrayltl9AutLt2z0I6re7m7PT+E/E3VOfXpE8cKmZnEUafl9mZ+YvF+/eS9/eZGw81o3n97tAJcPvdIz8AhwHli1uuzsB9dVcwKXD48Gfv5pnu65gD+6kJvYhkGO/BhJABjvef+97EI89EI9/EopGJRGMThyYmVD4McJyaUM0xQDs1oUJlAICReVQ3G0BjE1cSpyamjs5NuPjOzC/J/mac5mZAkwAAAABJRU5ErkJggg==");
3 | }
4 |
5 | .panel2 {
6 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACuUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7B471YAAAA5dFJOUwDwl07+9voB/Qa9quveduKFn0INwvsUowlbjtFuAikbL81lfpOcH3tJN9muYFNpWDyL5xC3ybDVIhk4hiwAAAFsSURBVBgZtcDpcppQAIbhDxE4oCiuuOGuUc2qSdv3/m+sM+k0CB7H/MmjH9UZtsZ14526yWug27YVjy/xJJRd9uAB/kdaqRxjgMOrbM4R0H0Z6NN2dYLeRNfOY2julBskBhKVhV2I+ipoO7BUSQJRqJK5gz9XwbRHfNYVt0pXBSm0ZZFCWxf6Pu+ymfm868IzuLKq4XeUq+GFshrCTrnfdGX3BxrKObRklxnWykFFNzhslHPY6AbDWrkDkexm8KDcESeT1RO4yk2gLasW5qzczFCTTd8j0qUjZi6LEbi6NDcsQl3Z91gEKhhBGqhk28TfqyhcQBqqYBpDQ2X9AyzmymVLD6jvVBL0P6CX7vXPYDjmk++qJAjfesCpljQao8gDmisA/0lXpjXDl/qqoxaAedG12eRX04A3rrihpKwFYIay6wz0X7YBMI+6K6gAmKXuCtYA1WfdFYwAqo+67w2grm9IgFjf0XDitn7AX5YQNKt9rKhYAAAAAElFTkSuQmCC");
7 | }
--------------------------------------------------------------------------------
/demo/test11.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
4 |
5 | h1, h2 {
6 | color: purple;
7 | }
8 |
9 | h1 {
10 | color: black;
11 | }
--------------------------------------------------------------------------------
/demo/test12.css:
--------------------------------------------------------------------------------
1 | .panel {
2 | border-width: 1px 0px 2px;
3 | border-style: solid;
4 | border-color: black
5 | }
6 |
--------------------------------------------------------------------------------
/demo/test13.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | }
4 |
5 | div {
6 | background: yellow;
7 | }
8 |
9 | @media (orientation: landscape) {
10 | body {
11 | flex-direction: row;
12 | }
13 | }
14 |
15 | @media (orientation: portrait) {
16 | body {
17 | flex-direction: column;
18 | }
19 | }
--------------------------------------------------------------------------------
/demo/test14.css:
--------------------------------------------------------------------------------
1 | @-moz-keyframes blinker,@-webkit-keyframes blinker,@keyframes blinker{
2 | 0%{opacity:1;}
3 | 50%{opacity:0;}
4 | 100%{opacity:1;}
5 | }
--------------------------------------------------------------------------------
/demo/test16.css:
--------------------------------------------------------------------------------
1 | .class-1 {
2 | color: purple;
3 | }
4 |
5 | .class-1 .class-1-1 {
6 | padding-top: 10px;
7 | padding-bottom: 10px;
8 | padding-right: 10px;
9 | }
10 |
11 | .class-1 .class-1-2 {
12 | padding-top: 10px;
13 | padding-bottom: 10px;
14 | }
15 |
16 | .class-1 .class-1-2 {
17 | padding-top: 10px;
18 | padding-bottom: 10px;
19 | padding-left: 10px;
20 | padding-right: 10px;
21 | }
22 |
23 | .class-1 .class-1-3 {
24 | padding-top: 10px;
25 | padding-bottom: 10px;
26 | padding-right: 10px;
27 | }
28 |
29 | .class-1 .class-1-1 .class-2-1 .class-3-1 {
30 | color: red;
31 | background-color: red;
32 | }
33 |
34 | .class-1 .class-1-1 .class-2-1 .class-3-2 {
35 | color: red;
36 | background-color: green;
37 | }
38 |
39 | .class-1 .class-1-1 .class-2-1 .class-3-3 {
40 | color: red;
41 | background-color: blue;
42 | }
43 |
--------------------------------------------------------------------------------
/demo/test2.css:
--------------------------------------------------------------------------------
1 | /* first line - step aside comment for the charset */
2 | @charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
3 | @charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
4 | @charset "UTF-8"; /* Invalid, more than one space */
5 | @charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
6 |
7 | @charset UTF-8;
8 |
9 | @import url("fineprint.css") print;
10 | @import url("bluish.css") projection, tv;
11 | @import 'custom.css';
12 | @import url("chrome://communicator/skin/");
13 | @import "common.css" screen, projection;
14 | @import url('landscape.css') screen and (orientation:landscape);
15 |
16 | body { filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF2F2F2', endColorstr='#FFFFFFFF'); }
17 |
18 | // test
19 | #grad {
20 | background: red; /* For browsers that do not support gradients */
21 | background: -webkit-linear-gradient(blue, yellow); /* For Safari 5.1 to 6.0 */
22 | background: -o-linear-gradient(aliceblue, yellow); /* For Opera 11.1 to 12.0 */
23 | background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
24 | background: linear-gradient(aliceblue, aliceblue); /* Standard syntax */
25 | background: linear-gradient(yellow, yellow); /* Standard syntax */
26 | }
27 |
28 | /* comment above a rule to be removed */
29 | @supports (--foo: red) {
30 |
31 | }
32 |
33 | @supports (--foo: green) {
34 | body {
35 | color: var(--varName);
36 | }
37 | body {
38 | color: red;
39 | }
40 | }
41 | /*shweet*/
42 | @supports (--foo: green) {
43 | body {
44 | color: var(--varName);
45 | }
46 | body {
47 | color: red;
48 | color: green;
49 | color: blue;
50 | }
51 | }
52 |
53 | .panelcolors {
54 |
55 | padding: 0rem;
56 | color: #aaaaaa;
57 | }
58 | .panel {
59 | color: red;
60 | background-color: blue;
61 | }
62 | .panel {
63 | color: green;
64 | background-color: green;
65 | }
66 | .panel {
67 | color: blue;
68 | background-color: red;
69 | }
70 |
71 | @document url(http://www.w3.org/),
72 | url-prefix(http://www.w3.org/Style/),
73 | domain(mozilla.org),
74 | regexp("https:.*") {
75 |
76 | body {
77 | color: purple;
78 | background-color: yellow;
79 | }
80 | body {
81 | color: red;
82 | background-color: green;
83 | background-color: blue;
84 | }
85 | }
86 |
87 | @media screen (max-width: 900px) {
88 |
89 | }
90 | @media screen (max-width: 700px) {
91 |
92 | .panel {
93 | color: red;
94 | }
95 | .panel {
96 | color: red;
97 | }
98 | }
99 |
100 | @media screen (max-width: 700px) {
101 |
102 | .panel {
103 | color: red;
104 | }
105 | .panel {
106 | color: red;
107 | }
108 | }
109 | @page {
110 | margin: 1cm;
111 | }
112 | @page {
113 | margin: 2cm;
114 | }
--------------------------------------------------------------------------------
/demo/test3.css:
--------------------------------------------------------------------------------
1 | .lists {
2 |
3 | list-style-type: disc;
4 | list-style-position: inside!important;
5 | list-style-image: url('dot.jpg');
6 | }
7 |
8 | a:focus {
9 | outline: -webkit-focus-ring-color auto!important;
10 | outline-offset: -2px
11 | }
12 |
13 | .welcome .header .header-background.background-p-1 {
14 | background: url(https://storage.googleapis.com/sale_spot_pub_usc/ui/images/backgrounds/shopping/bk_1.jpg) center center no-repeat;
15 | -webkit-background-size: cover;
16 | -moz-background-size: cover;
17 | -o-background-size: cover;
18 | background-size: cover
19 | }
20 |
21 | .sale-item .sale-item-name,
22 | .sale-item h1.sale-item-name {
23 | color: #000;
24 | font-size: 1.2em!important;
25 | margin: 0!important;
26 | font-family: ubuntu!important;
27 | font-weight: lighter!important;
28 | text-align: left;
29 | display: block
30 | }
31 |
32 | .clock.clock-dark .hours,
33 | .clock.clock-dark .minutes,
34 | .clock.clock-dark .seconds {
35 | background: #000
36 | }
37 |
38 | .base .left-panel {
39 | position: fixed;
40 | top: 0;
41 | left: -276px;
42 | width: 276px;
43 | height: 100%;
44 | padding: 10px;
45 | overflow-x: hidden;
46 | overflow-y: auto;
47 | z-index: 3;
48 | background-color: #333!important;
49 | -webkit-transition: background-image .3s cubic-bezier(.55, 0, .1, 1);
50 | -o-transition: background-image .3s cubic-bezier(.55, 0, .1, 1);
51 | transition: background-image .3s cubic-bezier(.55, 0, .1, 1);
52 | background-repeat: repeat
53 | }
54 |
55 | input[type=checkbox]:focus,
56 | input[type=file]:focus,
57 | input[type=radio]:focus {
58 | outline: -webkit-focus-ring-color auto;
59 | outline-offset: -2px
60 | }
61 |
62 | .btn.active.focus,
63 | .btn.active:focus,
64 | .btn.focus,
65 | .btn:active.focus,
66 | .btn:active:focus,
67 | .btn:focus {
68 | outline: -webkit-focus-ring-color auto;
69 | outline-offset: -2px
70 | }
71 |
72 |
73 | button.close {
74 | padding: 0;
75 | cursor: pointer;
76 | background: 0 0;
77 | border: 0;
78 | -webkit-appearance: none
79 | }
80 |
81 | .modal {
82 | display: none;
83 | overflow: hidden;
84 | position: fixed;
85 | top: 0;
86 | right: 0;
87 | bottom: 0;
88 | left: 0;
89 | z-index: 1050;
90 | -webkit-overflow-scrolling: touch;
91 | outline: 0
92 | }
93 |
94 | .modal-content {
95 | position: relative;
96 | background-color: #fff;
97 | border: 1px solid #999;
98 | border: 1px solid rgba(0, 0, 0, .2);
99 | border-radius: 6px;
100 | -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
101 | box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
102 | background-clip: padding-box;
103 | outline: 0
104 | }
105 |
--------------------------------------------------------------------------------
/demo/test4.css:
--------------------------------------------------------------------------------
1 |
2 | .loading-red,
3 | .loading-white {
4 | background-image: url(https://storage.googleapis.com/sale_spot_pub_usc/ui/images/loading.gif)
5 | }
6 |
--------------------------------------------------------------------------------
/demo/test5.css:
--------------------------------------------------------------------------------
1 | .panel {
2 | background-color: blue;
3 | }
4 |
5 | .panel {
6 | background-color: red;
7 | }
8 |
9 |
10 | @media (max-width: 400) {
11 |
12 | .panel {
13 | background-color: green;
14 | }
15 |
16 | .panel {
17 | background-color: red;
18 | }
19 | }
20 |
21 | @media (max-width: 400) {
22 |
23 | .panel {
24 | background-color: green;
25 | }
26 |
27 | .panel {
28 | background-color: red;
29 | }
30 | }
--------------------------------------------------------------------------------
/demo/test6.css:
--------------------------------------------------------------------------------
1 | .footer {
2 | padding: 50px 0;
3 | background: #d6d6d6;
4 | }
5 |
6 | .footer__navigation ul {
7 | list-style-type: none;
8 | padding: 0;
9 | margin: 0;
10 | display: -webkit-box;
11 | display: -ms-flexbox;
12 | display: flex;
13 | -ms-flex-wrap: wrap;
14 | flex-wrap: wrap;
15 | margin: 0 -15px;
16 | }
17 |
18 | .footer__navigation li {
19 | padding: 0 15px;
20 | }
21 |
22 | .navigation__main>nav {
23 | display: -webkit-box;
24 | display: -ms-flexbox;
25 | display: flex;
26 | margin: 10px -15px 0;
27 | }
28 |
29 | .footer {
30 | padding: 50px 0;
31 | background: #d6d6d6;
32 | }
33 |
34 | .footer__navigation ul {
35 | list-style-type: none;
36 | padding: 0;
37 | margin: 0;
38 | display: -webkit-box;
39 | display: -ms-flexbox;
40 | display: flex;
41 | -ms-flex-wrap: wrap;
42 | flex-wrap: wrap;
43 | margin: 0 -15px;
44 | }
45 |
46 | .footer__navigation li {
47 | padding: 0 15px;
48 | }
49 |
50 | .navigation__main>nav {
51 | display: -webkit-box;
52 | display: -ms-flexbox;
53 | display: flex;
54 | margin: 10px -15px 0;
55 | }
--------------------------------------------------------------------------------
/demo/test7.css:
--------------------------------------------------------------------------------
1 |
2 | .panel {
3 | background-color: #FFF;
4 | border-top-left-radius: 5px;
5 | border-top-right-radius: 5px;
6 | border-bottom-left-radius: 5px;
7 | border-bottom-right-radius: 5px;
8 | border-bottom-right-radius: 5px;
9 | border-top-right-radius: 5px;
10 | border-bottom-left-radius: 5px;
11 | border-top-left-radius: 5px;
12 | margin-bottom: 20px;
13 | padding: 20px;
14 | clear: both; /*crossed*/
15 | background-color: #04003F;
16 | position: relative;
17 | text-decoration: none;
18 | position: relative;
19 | padding-bottom: 60px;
20 | overflow: hidden;
21 | clear: none;
22 | overflow: hidden; /*crossed*/
23 | }
--------------------------------------------------------------------------------
/demo/test8.css:
--------------------------------------------------------------------------------
1 |
2 | .class-1 .class-1-1 {
3 | padding-top: 10px;
4 | padding-left: 10px;
5 | }
6 |
7 | .class-1 .class-1-2 .class-1-2-3 {
8 | padding-top: 10px;
9 | padding-right: 10px;
10 | }
11 |
12 | .class-1 .class-1-3, .class-1 .class-1-4 {
13 | padding-top: 10px;
14 | padding-right: 20px;
15 | }
16 |
17 | .class-1 .class-1-5 {
18 | padding-top: 10px;
19 | padding-right: 10px;
20 | }
21 |
22 | .class-1 .class-1-6, .class-1 .class-1-2 {
23 | padding-top: 10px;
24 | padding-right: 10px;
25 | padding-left: 10px;
26 | }
27 |
28 | div {
29 | padding-top: 10px;
30 | padding-right: 10px;
31 | }
32 |
33 |
34 | div.class-1 .class-1-5 {
35 | padding-top: 10px;
36 | padding-left: 10px;
37 | }
38 |
39 | div.class-1 .class-1-6 {
40 | padding-top: 10px;
41 | padding-right: 10px;
42 | }
43 |
44 | .class-1 .class-1-2 .class-1-2-3 .class-1-2-3-4 {
45 | padding-top: 10px;
46 | padding-right: 10px;
47 | }
--------------------------------------------------------------------------------
/demo/test9.css:
--------------------------------------------------------------------------------
1 | div:before {
2 | content: " ";
3 | width: 0;
4 | height: 0;
5 | position: absolute;
6 | border-style: solid;
7 | border-width: 0 10px 10px 0;
8 | border-color: #494949 ;
9 | left: 0px;
10 | bottom: -10px;
11 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/css-purge');
--------------------------------------------------------------------------------
/lib/css-purge-stream.js:
--------------------------------------------------------------------------------
1 | var through2 = require('through2');
2 | var cssPurge = require('./css-purge');
3 |
4 |
5 | //for streams
6 | function write(buffer, encoding, next) {
7 |
8 | cssPurge.purgeCSS(buffer.toString(), {
9 | trim : true,
10 | shorten : true,
11 | verbose : false,
12 | }, function(error, result){
13 |
14 | this.push(result);
15 |
16 | next();
17 | });
18 | }
19 | function end(done) {
20 |
21 | done();
22 | }
23 |
24 | process.stdin.pipe(through2(write, end)).pipe(process.stdout);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-purge",
3 | "version": "3.1.8",
4 | "description": "A CSS tool written in Node JS as a command line app or library for the purging, burning, reducing, shortening, compressing, cleaning, trimming and formatting of duplicate, extra, excess or bloated CSS.",
5 | "homepage": "http://rbtech.github.io/css-purge",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/rbtech/css-purge.git"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/rbtech/css-purge/issues"
12 | },
13 | "readmeFilename": "README.md",
14 | "main": "./lib/css-purge.js",
15 | "scripts": {
16 | "start": "node css-purge.js",
17 | "test": "echo \"Error: no test specified\" && exit 1"
18 | },
19 | "bin": {
20 | "css-purge": "./css-purge.js"
21 | },
22 | "requires": true,
23 | "author": "Andrew Quan (http://redblueprint.com)",
24 | "license": "MIT",
25 | "lockfileVersion": 1,
26 | "keywords": [
27 | "css",
28 | "css minifier",
29 | "minifier",
30 | "purge",
31 | "stylesheet",
32 | "duplicate",
33 | "deduplicate",
34 | "merge",
35 | "group",
36 | "duplicate css",
37 | "duplicate rules",
38 | "duplicate properties",
39 | "clean css",
40 | "purging css",
41 | "burning css",
42 | "reducing css",
43 | "shortening css",
44 | "compressing css",
45 | "cleaning css",
46 | "trimming css",
47 | "formatting css",
48 | "unused css",
49 | "not used css"
50 | ],
51 | "dependencies": {
52 | "cli-color": "^1.4.0",
53 | "commander": "^2.19.0",
54 | "css": "^2.2.4",
55 | "htmlparser2": "^3.10.0",
56 | "jsdom": "^16.5.0",
57 | "parse-css-font": "^2.0.2",
58 | "request": "^2.88.0",
59 | "through2": "^2.0.5",
60 | "valid-url": "^1.0.9"
61 | },
62 | "devDependencies": {}
63 | }
64 |
--------------------------------------------------------------------------------
