-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
264 lines (252 loc) · 13.8 KB
/
Copy pathdemo.html
File metadata and controls
264 lines (252 loc) · 13.8 KB
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo</title>
<script>
/**
* Optional configuration for ACSS-Live. This exists to show how
* to perform many different operations. Comments are spread
* liberally to assist with understanding.
*
* This configuration object must be created before ACSS-Live is
* loaded.
*
* If you want to enable debugging or timings, you must not use
* the minified version. This uses the non-minified build in order
* to report the timings back to the timings example page.
*/
acssLiveConfig = {
settings: {
// Changing this to true will enable debug so you can see
// rule processing logs in the console. This will only
// work with the non-minified version.
debug: false,
// Enable timings in order to report them back to the
// window's parent. This only works with the non-minified
// version.
timing: true
}
};
</script>
<style>
@keyframes spinner {
0% {
transform: rotate(0deg);
stroke-dashoffset: 25; /* 0.66; */
}
50% {
transform: rotate(720deg);
stroke-dashoffset: 240; /* 3.14; */
}
100% {
transform: rotate(1080deg);
stroke-dashoffset: 25; /* 0.66; */
}
}
</style>
<!--
Use the full version to enable timings and to send the timings
back to the parent. This is used by the example page, which wraps
the demo page in an iframe.
-->
<script src="../acss-live.js"></script>
<script>
customElements.define(
"open-shadow-root",
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
<div id="open-shadow-root" class="M(1em) Bdw(5px) Bdc(blue) Bds(s) P(1em) Bgc(yellow)">
<slot></slot>
</div>
`;
}
}
);
customElements.define(
"closed-shadow-root",
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({
mode: "closed"
});
shadowRoot.innerHTML = `
<div id="closed-shadow-root" class="M(1em) Bdw(5px) Bdc(blue) Bds(s) P(1em) Bgc(yellow)">
<slot></slot>
</div>
`;
}
}
);
</script>
</head>
<body>
<h1 class="D(f) Jc(c) Ai(c)">Demo</h1>
<p>
Below you will find many examples of how to accomplish various
layout and CSS-related tasks using ACSS. Take a look to see how
flexible and useful this library is.
</p>
<p>
We are using ACSS-Live with timings
<span class="Fw(b) Tt(u)">enabled</span> in order to see how long
various operations take. These metrics are also sent back to a
parent window (if one exists, like with the timings example) in
order to better report on statistics.
</p>
<p
class="C(black) C(red):h Bgc(white) Bgc(blue):h Fw(n) Fw(b):h Trsp(a) Ols(dt) Cur(p) Trsdu(1s) Trstf(eio)"
>
Hover and change colors
</p>
<div class="Colmc(5)--d Colmc(4)--l Colmc(3)--m Colmc(2)--s">
<div class="Bgc(black) C(white)">A responsive columnar layout</div>
<div class="Bgc(#faa)">Item 1</div>
<div class="Bgc(#ffa)">Item 2</div>
<div class="Bgc(#afa)">Item 3</div>
<div class="Bgc(#aff)">Item 4</div>
<div class="Bgc(#aaf)">Item 5</div>
<div class="Bgc(#faf)">Item 6</div>
<div class="Bgc(#faa)">Item 7</div>
<div class="Bgc(#ffa)">Item 8</div>
<div class="Bgc(#afa)">Item 9</div>
<div class="Bgc(#aff)">Item 10</div>
<div class="Bgc(#aaf)">Item 11</div>
<div class="Bgc(#faf)">Item 12</div>
</div>
<p class="Px(0.3em) Py(1em) Bgc(#114) Fw(b)">
<span class="C(#bf00bf)">A</span> <span class="C(#cb00b2)">w</span
><span class="C(#d001ab)">h</span><span class="C(#d603a4)">o</span
><span class="C(#db059d)">l</span><span class="C(#e00796)">e</span>
<span class="C(#e90c88)">l</span><span class="C(#ed1081)">o</span
><span class="C(#f0137a)">t</span> <span class="C(#f61c6b)">o</span
><span class="C(#f82064)">f</span> <span class="C(#fc2b56)">t</span
><span class="C(#fd304f)">e</span><span class="C(#fe3649)">x</span
><span class="C(#fe3c42)">t</span> <span class="C(#fe4936)">t</span
><span class="C(#fd4f30)">h</span><span class="C(#fc562b)">a</span
><span class="C(#fa5d25)">t</span> <span class="C(#f66b1c)">i</span
><span class="C(#f37217)">s</span> <span class="C(#ed8110)">d</span
><span class="C(#e9880c)">i</span><span class="C(#e48f09)">s</span
><span class="C(#e09607)">p</span><span class="C(#db9d05)">l</span
><span class="C(#d6a403)">a</span><span class="C(#d0ab01)">y</span
><span class="C(#cbb200)">e</span><span class="C(#c5b800)">d</span>
<span class="C(#b8c500)">a</span><span class="C(#b2cb00)">s</span>
<span class="C(#a4d603)">a</span> <span class="C(#96e007)">r</span
><span class="C(#8fe409)">a</span><span class="C(#88e90c)">i</span
><span class="C(#81ed10)">n</span><span class="C(#7af013)">b</span
><span class="C(#72f317)">o</span><span class="C(#6bf61c)">w</span
><span class="C(#64f820)">,</span> <span class="C(#56fc2b)">j</span
><span class="C(#4ffd30)">u</span><span class="C(#49fe36)">s</span
><span class="C(#42fe3c)">t</span> <span class="C(#36fe49)">t</span
><span class="C(#30fd4f)">o</span> <span class="C(#25fa5d)">c</span
><span class="C(#20f864)">r</span><span class="C(#1cf66b)">e</span
><span class="C(#17f372)">a</span><span class="C(#13f07a)">t</span
><span class="C(#10ed81)">e</span>
<span class="C(#09e48f)">a</span> <span class="C(#05db9d)">m</span
><span class="C(#03d6a4)">a</span><span class="C(#01d0ab)">s</span
><span class="C(#00cbb2)">s</span><span class="C(#00c5b8)">i</span
><span class="C(#00bfbf)">v</span><span class="C(#00b8c5)">e</span>
<span class="C(#01abd0)">a</span><span class="C(#03a4d6)">m</span
><span class="C(#059ddb)">o</span><span class="C(#0796e0)">u</span
><span class="C(#098fe4)">n</span><span class="C(#0c88e9)">t</span>
<span class="C(#137af0)">o</span><span class="C(#1772f3)">f</span>
<span class="C(#2064f8)">e</span><span class="C(#255dfa)">l</span
><span class="C(#2b56fc)">e</span><span class="C(#304ffd)">m</span
><span class="C(#3649fe)">e</span><span class="C(#3c42fe)">n</span
><span class="C(#423cfe)">t</span><span class="C(#4936fe)">s</span>
<span class="C(#562bfc)">a</span><span class="C(#5d25fa)">n</span
><span class="C(#6420f8)">d</span> <span class="C(#7217f3)">C</span
><span class="C(#7a13f0)">S</span><span class="C(#8110ed)">S</span>
<span class="C(#8f09e4)">s</span><span class="C(#9607e0)">t</span
><span class="C(#9d05db)">y</span><span class="C(#a403d6)">l</span
><span class="C(#ab01d0)">e</span><span class="C(#b200cb)">s</span
><span class="C(#b800c5)">.</span>
</p>
<div class="My(1em) Bgc(darkgray) D(f) Jc(se)">
<div class="Bgc(white) Bgc(red):h P(1em) M(1em)">
<span class="C(red) C(white):h"
>Bad Hover - Hover without parent selector will only change
text color when hovering over the text. Try hovering just
above or below this text.</span
>
</div>
<div class="Bgc(white) Bgc(red):h P(1em) M(1em) hoverParent">
<span class="C(red) hoverParent:h>C(white)"
>Good Hover - Hover using a parent selector will change the
text color when hovering over the parent. Try hovering
anywhere over the white, including over the text.</span
>
</div>
</div>
<div class="D(f) Jc(spe) Ai(c)">
<div class="Maw(30%) Bgc(#dddddd)">
<div
class="M(1em) Bdw(5px) Bds(s) Bdc(blue) P(1em) Bgc(yellow)"
>
<span class="Bgc(cyan)">
This does not use a shadow root. Light gray outer
element. Inner element has a margin to show the light
gray from the parent, blue border, yellow background.
The message has a teal background.
</span>
</div>
</div>
<open-shadow-root class="D(b) Maw(30%) Bgc(#dddddd)">
<span class="Bgc(cyan)">
This is an open shadow root. It should look the same as the
one on the left. The teal background and light gray come
from the light DOM's styles.
</span>
</open-shadow-root>
<div class="Maw(30%) Bgc(#dddddd)">
<closed-shadow-root>
<span class="Bgc(cyan)">
This is a closed shadow root. This should look the same
as the first.
</span>
</closed-shadow-root>
</div>
</div>
<div class="D(f) Fxd(c) Ai(e) Pos(a) B(0) End(0)">
<div
class="Mend(0.3em) Bdrs(2em) P(1em) Bdw(2px) Bds(s) Bgc(white) D(f) Ai(t) G(10px) W(200px)"
>
<!-- https://medium.com/@clg/animated-svg-spinner-8dff32d310fc -->
<svg class="W(40px) H(40px)" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="45"
class="Fill(tr) Stk(#212121) Stkw(10) Stklc(r) Trfo(50%,50%) Animn(spinner) Animdur(2s) Animtf(li) Animic(i)"
style="stroke-dasharray: 280"
></circle>
</svg>
It looks like you want to use ACSS-Live ...
</div>
<div class="Mend(3em) Pos(r) T(-2px)">
<div
class="W(0) H(0) Bds(s) Bdbc(tr) Bdendc(black) Bdbw(30px) Bdendw(20px) Bdstartw(0) Bdtw(0)"
></div>
<div
class="Pos(a) T(-6px) End(2px) W(0) H(0) Bds(s) Bdbc(tr) Bdendc(white) Bdbw(30px) Bdendw(20px) Bdstartw(0) Bdtw(0)"
></div>
</div>
<svg
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
class="Fill(black) W(5em)"
>
<path
d="M640 661.333333a106.666667 106.666667 0 0 1-106.666667 106.666667 106.666667 106.666667 0 0 1-106.666666-106.666667v-74.666666a32 32 0 0 1 32-32 32 32 0 0 1 32 32v74.666666a42.666667 42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0 42.666667-42.666667v-154.026666c-37.12-11.946667-64-43.52-64-80.64 0-46.933333 42.666667-85.333333 96-85.333334s96 38.4 96 85.333334c0 37.12-26.88 68.693333-64 80.64v154.026666M352 341.333333c53.333333 0 96 38.4 96 85.333334 0 37.12-26.88 68.693333-64 80.64v228.693333a138.666667 138.666667 0 0 0 138.666667 138.666667 138.666667 138.666667 0 0 0 138.666666-138.666667v-149.333333a32 32 0 0 1 32-32 32 32 0 0 1 32 32v149.333333A202.666667 202.666667 0 0 1 522.666667 938.666667a202.666667 202.666667 0 0 1-202.666667-202.666667v-228.693333C282.88 495.36 256 463.786667 256 426.666667c0-46.933333 42.666667-85.333333 96-85.333334m77.226667-79.786666l-18.346667 62.293333c-17.493333-9.386667-37.546667-14.506667-58.88-14.506667-38.826667 0-73.386667 17.066667-94.72 43.52l-51.2-38.4C232.96 280.32 273.493333 256 320 247.893333v-2.56A160 160 0 0 1 480 85.333333 160 160 0 0 1 640 245.333333v2.56c46.506667 8.106667 87.04 32.426667 113.92 66.56l-51.2 38.4c-21.333333-26.453333-55.893333-43.52-94.72-43.52-21.333333 0-41.386667 5.12-58.88 14.506667l-18.346667-62.293333c14.08-5.546667 29.44-11.093333 45.226667-13.653334v-2.56c0-53.333333-42.666667-96-96-96S384 192 384 245.333333v2.56c15.786667 2.56 31.146667 8.106667 45.226667 13.653334m178.773333 133.12c-23.466667 0-42.666667 14.506667-42.666667 32s19.2 32 42.666667 32 42.666667-14.506667 42.666667-32-19.2-32-42.666667-32m-256 0c-23.466667 0-42.666667 14.506667-42.666667 32s19.2 32 42.666667 32 42.666667-14.506667 42.666667-32-19.2-32-42.666667-32z"
/>
</svg>
</div>
</body>
</html>