cssnext/docs/content/playground.html at master · Wordpress-Development/cssnext · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
---
template: Simple
title: cssnext Playground
className: js-cssnext-Playground cssnext-Playground
footer: false
scripts:
  - /playground.js
---
<div class="cssnext-Playground-container">
  <div class="cssnext-Playground-section cssnext-Playground-section--from">
    <textarea class="js-cssnext-Playground-from cssnext-Playground-code cssnext-Playground-code--from" spellcheck="false">
/* custom properties */
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);

/* some var() & calc() */
body {
color: var(--mainColor);

font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
body { font-size: calc(var(--fontSize) * 1.2); }
}

/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { margin-top: 0 }

/* colors stuff */
a {
color: var(--highlightColor);
transition: color 1s; /* autoprefixed ! */
}
a:hover { color: gray(255, 50%) }
a:active { color: rebeccapurple }
a:any-link { color: color(var(--highlightColor) blackness(+20%)) }

/* font stuff */
h2 {
font-variant-caps: small-caps;
}

table {
font-variant-numeric: lining-nums;
}

/* filters */
.blur {
filter: blur(4px);
}
.sepia {
filter: sepia(.8);
}

    </textarea>
  </div>
  <div class="cssnext-Playground-section cssnext-Playground-section--to">
    <textarea class="js-cssnext-Playground-to cssnext-Playground-code cssnext-Playground-code--to" spellcheck="false"></textarea>
  </div>
</div>
<div class="js-cssnext-Playground-messages cssnext-Playground-messages"></div>
<div class="js-cssnext-Playground-console cssnext-Playground-console"></div>