@ax-design/reveal-highlight 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +76 -227
- package/build/CustomElements.d.ts +2 -0
- package/build/CustomElements.d.ts.map +1 -1
- package/build/main.js +32 -32
- package/es/CustomElements.d.ts +2 -0
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +99 -77
- package/es/CustomElements.js.map +1 -1
- package/es/SvgConfig.js +70 -70
- package/es/tsconfig.tsbuildinfo +1 -0
- package/package.json +12 -8
- package/src/BaseConfig.ts +310 -310
- package/src/CanvasConfig.ts +415 -415
- package/src/ComputedStyleStorage.ts +89 -89
- package/src/CustomElements.ts +272 -247
- package/src/Profiler.ts +44 -44
- package/src/RevealBoundryStore.ts +291 -291
- package/src/RevealStateManager.ts +78 -78
- package/src/SvgConfig.ts +422 -422
- package/src/config.ts +26 -26
- package/src/cssTypedOM.d.ts +52 -52
- package/src/index.ts +219 -219
- package/src/utils/extractRGBValue.ts +58 -58
- package/src/utils/isValidateBorderDecorationType.ts +8 -8
- package/src/utils/types.ts +105 -105
- package/src/variables.ts +1 -1
- package/.prettierrc +0 -6
- package/.travis.yml +0 -26
- package/docs/demo/index.html +0 -992
- package/docs/demo/ng.html +0 -992
- package/docs/demo/performance-inspector.html +0 -60
- package/docs/demo/shapes-demo.html +0 -93
- package/docs/demo/single-unit.html +0 -39
- package/docs/logo.png +0 -0
- package/docs/logo.svg +0 -1
- package/docs/screen-record.gif +0 -0
- package/docs/src/logo.afdesign +0 -0
- package/rollup.config.js +0 -14
- package/tsconfig.json +0 -18
package/docs/demo/index.html
DELETED
|
@@ -1,992 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
|
|
3
|
-
<head>
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
5
|
-
<title>AxRevealHighlight Demo - Axiom Design System</title>
|
|
6
|
-
|
|
7
|
-
<style>
|
|
8
|
-
.demo-block {
|
|
9
|
-
display: flex;
|
|
10
|
-
border-bottom: #aaa dashed 1px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.demo {
|
|
14
|
-
width: 500px;
|
|
15
|
-
margin: 10px;
|
|
16
|
-
padding-top: 1em;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.code {
|
|
20
|
-
width: 100%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.ax-reveal-container {
|
|
24
|
-
display: flex;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.ax-reveal-container>ax-reveal {
|
|
28
|
-
margin: 5px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ax-reveal-button {
|
|
32
|
-
min-width: 120px;
|
|
33
|
-
padding: 15px 25px;
|
|
34
|
-
border: none;
|
|
35
|
-
background: none;
|
|
36
|
-
user-select: none;
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
39
|
-
</head>
|
|
40
|
-
|
|
41
|
-
<body>
|
|
42
|
-
<ax-reveal-provider>
|
|
43
|
-
<h1>Welcome to project Axiom!</h1>
|
|
44
|
-
<p>Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design
|
|
45
|
-
to a single design language.</p>
|
|
46
|
-
<p>This repo contains code of Reveal Highlight effect of Fluent design System.</p>
|
|
47
|
-
|
|
48
|
-
<section class="demo-block">
|
|
49
|
-
<div class="demo">
|
|
50
|
-
<ax-reveal-bound>
|
|
51
|
-
<div class="ax-reveal-container">
|
|
52
|
-
<ax-reveal>
|
|
53
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
54
|
-
</ax-reveal>
|
|
55
|
-
<ax-reveal>
|
|
56
|
-
<button class="ax-reveal-button">To</button>
|
|
57
|
-
</ax-reveal>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="ax-reveal-container">
|
|
60
|
-
<ax-reveal>
|
|
61
|
-
<button class="ax-reveal-button">Project</button>
|
|
62
|
-
</ax-reveal>
|
|
63
|
-
<ax-reveal>
|
|
64
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
65
|
-
</ax-reveal>
|
|
66
|
-
</div>
|
|
67
|
-
</ax-reveal-bound>
|
|
68
|
-
</div>
|
|
69
|
-
<div class="code">
|
|
70
|
-
<h2>General Button</h2>
|
|
71
|
-
<p>In order to use this component, we need to prepare some HTML:</p>
|
|
72
|
-
<pre><ax-reveal-provider>
|
|
73
|
-
<ax-reveal-bound class="my-reveal-container">
|
|
74
|
-
<ax-reveal>
|
|
75
|
-
<button class="ax-reveal-button">Reveal</button>
|
|
76
|
-
</ax-reveal>
|
|
77
|
-
<ax-reveal>
|
|
78
|
-
<button class="ax-reveal-button">To</button>
|
|
79
|
-
</ax-reveal>
|
|
80
|
-
</div>
|
|
81
|
-
</ax-reveal-bound>
|
|
82
|
-
</ax-reveal-provider></pre>
|
|
83
|
-
</div>
|
|
84
|
-
</section>
|
|
85
|
-
|
|
86
|
-
<section class="demo-block">
|
|
87
|
-
<div class="demo">
|
|
88
|
-
<ax-reveal-bound class="round-corner">
|
|
89
|
-
<div class="ax-reveal-container">
|
|
90
|
-
<ax-reveal>
|
|
91
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
92
|
-
</ax-reveal>
|
|
93
|
-
<ax-reveal>
|
|
94
|
-
<button class="ax-reveal-button">To</button>
|
|
95
|
-
</ax-reveal>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="ax-reveal-container">
|
|
98
|
-
<ax-reveal>
|
|
99
|
-
<button class="ax-reveal-button">Project</button>
|
|
100
|
-
</ax-reveal>
|
|
101
|
-
<ax-reveal>
|
|
102
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
103
|
-
</ax-reveal>
|
|
104
|
-
</div>
|
|
105
|
-
</ax-reveal-bound>
|
|
106
|
-
</div>
|
|
107
|
-
<style>
|
|
108
|
-
.round-corner {
|
|
109
|
-
--reveal-border-decoration-type: round;
|
|
110
|
-
--reveal-border-decoration-size: 8px;
|
|
111
|
-
}
|
|
112
|
-
</style>
|
|
113
|
-
<div class="code">
|
|
114
|
-
<h2>Round Corner</h2>
|
|
115
|
-
<pre>.my-reveal-container{
|
|
116
|
-
--reveal-border-decoration-type: round;
|
|
117
|
-
--reveal-border-decoration-size: 4px;
|
|
118
|
-
}</pre>
|
|
119
|
-
</div>
|
|
120
|
-
</section>
|
|
121
|
-
|
|
122
|
-
<section class="demo-block">
|
|
123
|
-
<div class="demo">
|
|
124
|
-
<ax-reveal-bound class="round-corner custom-radius">
|
|
125
|
-
<div class="ax-reveal-container">
|
|
126
|
-
<ax-reveal>
|
|
127
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
128
|
-
</ax-reveal>
|
|
129
|
-
<ax-reveal>
|
|
130
|
-
<button class="ax-reveal-button">To</button>
|
|
131
|
-
</ax-reveal>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="ax-reveal-container">
|
|
134
|
-
<ax-reveal>
|
|
135
|
-
<button class="ax-reveal-button">Project</button>
|
|
136
|
-
</ax-reveal>
|
|
137
|
-
<ax-reveal>
|
|
138
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
139
|
-
</ax-reveal>
|
|
140
|
-
</div>
|
|
141
|
-
</ax-reveal-bound>
|
|
142
|
-
</div>
|
|
143
|
-
<style>
|
|
144
|
-
.custom-radius ax-reveal {
|
|
145
|
-
--reveal-border-decoration-top-left-radius: 0;
|
|
146
|
-
--reveal-border-decoration-top-right-radius: 10px;
|
|
147
|
-
--reveal-border-decoration-bottom-left-radius: 20px;
|
|
148
|
-
--reveal-border-decoration-bottom-right-radius: 0;
|
|
149
|
-
}
|
|
150
|
-
</style>
|
|
151
|
-
<div class="code">
|
|
152
|
-
<h2>Custom border radius</h2>
|
|
153
|
-
<pre>.my-reveal-container{
|
|
154
|
-
--reveal-border-decoration-type: round;
|
|
155
|
-
--reveal-border-decoration-top-left-radius: 0;
|
|
156
|
-
--reveal-border-decoration-top-right-radius: 10px;
|
|
157
|
-
--reveal-border-decoration-bottom-left-radius: 20px;
|
|
158
|
-
--reveal-border-decoration-bottom-right-radius: 0;
|
|
159
|
-
}</pre>
|
|
160
|
-
</div>
|
|
161
|
-
</section>
|
|
162
|
-
|
|
163
|
-
<section class="demo-block">
|
|
164
|
-
<div class="demo">
|
|
165
|
-
<ax-reveal-bound class="bevel-corner">
|
|
166
|
-
<div class="ax-reveal-container">
|
|
167
|
-
<ax-reveal>
|
|
168
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
169
|
-
</ax-reveal>
|
|
170
|
-
<ax-reveal>
|
|
171
|
-
<button class="ax-reveal-button">To</button>
|
|
172
|
-
</ax-reveal>
|
|
173
|
-
</div>
|
|
174
|
-
<div class="ax-reveal-container">
|
|
175
|
-
<ax-reveal>
|
|
176
|
-
<button class="ax-reveal-button">Project</button>
|
|
177
|
-
</ax-reveal>
|
|
178
|
-
<ax-reveal>
|
|
179
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
180
|
-
</ax-reveal>
|
|
181
|
-
</div>
|
|
182
|
-
</ax-reveal-bound>
|
|
183
|
-
</div>
|
|
184
|
-
<style>
|
|
185
|
-
.bevel-corner {
|
|
186
|
-
--reveal-border-decoration-type: bevel;
|
|
187
|
-
--reveal-border-decoration-size: 16px;
|
|
188
|
-
}
|
|
189
|
-
</style>
|
|
190
|
-
<div class="code">
|
|
191
|
-
<h2>Even more fancy</h2>
|
|
192
|
-
<pre>.my-reveal-container{
|
|
193
|
-
--reveal-border-decoration-type: bevel;
|
|
194
|
-
--reveal-border-decoration-size: 16px;
|
|
195
|
-
}</pre>
|
|
196
|
-
</div>
|
|
197
|
-
</section>
|
|
198
|
-
|
|
199
|
-
<section class="demo-block">
|
|
200
|
-
<div class="demo">
|
|
201
|
-
<ax-reveal-bound class="with-opacity">
|
|
202
|
-
<div class="ax-reveal-container">
|
|
203
|
-
<ax-reveal>
|
|
204
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
205
|
-
</ax-reveal>
|
|
206
|
-
<ax-reveal>
|
|
207
|
-
<button class="ax-reveal-button">To</button>
|
|
208
|
-
</ax-reveal>
|
|
209
|
-
</div>
|
|
210
|
-
<div class="ax-reveal-container">
|
|
211
|
-
<ax-reveal>
|
|
212
|
-
<button class="ax-reveal-button">Project</button>
|
|
213
|
-
</ax-reveal>
|
|
214
|
-
<ax-reveal>
|
|
215
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
216
|
-
</ax-reveal>
|
|
217
|
-
</div>
|
|
218
|
-
</ax-reveal-bound>
|
|
219
|
-
</div>
|
|
220
|
-
<style>
|
|
221
|
-
.with-opacity {
|
|
222
|
-
--reveal-opacity: 1.0;
|
|
223
|
-
}
|
|
224
|
-
</style>
|
|
225
|
-
<div class="code">
|
|
226
|
-
<h2>Opacity</h2>
|
|
227
|
-
<pre>.my-reveal-container{
|
|
228
|
-
--reveal-opacity: 1.0;
|
|
229
|
-
}</pre>
|
|
230
|
-
</div>
|
|
231
|
-
</section>
|
|
232
|
-
|
|
233
|
-
<section class="demo-block">
|
|
234
|
-
<div class="demo">
|
|
235
|
-
<ax-reveal-bound>
|
|
236
|
-
<div class="ax-reveal-container">
|
|
237
|
-
<ax-reveal class="colored-button1">
|
|
238
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
239
|
-
</ax-reveal>
|
|
240
|
-
<ax-reveal class="colored-button2">
|
|
241
|
-
<button class="ax-reveal-button">To</button>
|
|
242
|
-
</ax-reveal>
|
|
243
|
-
</div>
|
|
244
|
-
<div class="ax-reveal-container">
|
|
245
|
-
<ax-reveal class="colored-button3">
|
|
246
|
-
<button class="ax-reveal-button">Project</button>
|
|
247
|
-
</ax-reveal>
|
|
248
|
-
<ax-reveal class="colored-button4">
|
|
249
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
250
|
-
</ax-reveal>
|
|
251
|
-
</div>
|
|
252
|
-
</ax-reveal-bound>
|
|
253
|
-
</div>
|
|
254
|
-
<style>
|
|
255
|
-
.colored-button1 {
|
|
256
|
-
--reveal-color: red;
|
|
257
|
-
}
|
|
258
|
-
.colored-button2 {
|
|
259
|
-
--reveal-color: #7cbb00;
|
|
260
|
-
}
|
|
261
|
-
.colored-button3 {
|
|
262
|
-
--reveal-color: rgb(255, 187, 0);
|
|
263
|
-
}
|
|
264
|
-
.colored-button4 {
|
|
265
|
-
--reveal-color: #00A1F1;
|
|
266
|
-
}
|
|
267
|
-
</style>
|
|
268
|
-
<div class="code">
|
|
269
|
-
<h2>Colored Button</h2>
|
|
270
|
-
<pre>.colored-button1 {
|
|
271
|
-
--reveal-color: red;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
.colored-button2 {
|
|
275
|
-
--reveal-color: #7cbb00;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.colored-button3 {
|
|
279
|
-
--reveal-color: rgb(255, 187, 0);
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.colored-button4 {
|
|
283
|
-
--reveal-color: #00A1F1;
|
|
284
|
-
}</pre>
|
|
285
|
-
</div>
|
|
286
|
-
</section>
|
|
287
|
-
|
|
288
|
-
<section class="demo-block">
|
|
289
|
-
<div class="demo">
|
|
290
|
-
<ax-reveal-bound class="detailed-color-adjustment">
|
|
291
|
-
<div class="ax-reveal-container">
|
|
292
|
-
<ax-reveal>
|
|
293
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
294
|
-
</ax-reveal>
|
|
295
|
-
<ax-reveal>
|
|
296
|
-
<button class="ax-reveal-button">To</button>
|
|
297
|
-
</ax-reveal>
|
|
298
|
-
</div>
|
|
299
|
-
<div class="ax-reveal-container">
|
|
300
|
-
<ax-reveal>
|
|
301
|
-
<button class="ax-reveal-button">Project</button>
|
|
302
|
-
</ax-reveal>
|
|
303
|
-
<ax-reveal>
|
|
304
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
305
|
-
</ax-reveal>
|
|
306
|
-
</div>
|
|
307
|
-
</ax-reveal-bound>
|
|
308
|
-
</div>
|
|
309
|
-
<style>
|
|
310
|
-
.detailed-color-adjustment {
|
|
311
|
-
--reveal-border-color: #FF00C1;
|
|
312
|
-
--reveal-hover-light-color: #00B8FF;
|
|
313
|
-
--reveal-press-animation-color: #FFFFFF;
|
|
314
|
-
--reveal-opacity: 1.0;
|
|
315
|
-
}
|
|
316
|
-
</style>
|
|
317
|
-
<div class="code">
|
|
318
|
-
<h2>Customize Every Parts</h2>
|
|
319
|
-
<pre>.my-reveal-container{
|
|
320
|
-
--reveal-border-color: #FF00C1;
|
|
321
|
-
--reveal-hover-light-color: #00B8FF;
|
|
322
|
-
--reveal-press-animation-color: #FFFFFF;
|
|
323
|
-
--reveal-opacity: 1.0;
|
|
324
|
-
}</pre>
|
|
325
|
-
</div>
|
|
326
|
-
</section>
|
|
327
|
-
|
|
328
|
-
<section class="demo-block">
|
|
329
|
-
<div class="demo">
|
|
330
|
-
<ax-reveal-bound class="border-width">
|
|
331
|
-
<div class="ax-reveal-container">
|
|
332
|
-
<ax-reveal>
|
|
333
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
334
|
-
</ax-reveal>
|
|
335
|
-
<ax-reveal>
|
|
336
|
-
<button class="ax-reveal-button">To</button>
|
|
337
|
-
</ax-reveal>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="ax-reveal-container">
|
|
340
|
-
<ax-reveal>
|
|
341
|
-
<button class="ax-reveal-button">Project</button>
|
|
342
|
-
</ax-reveal>
|
|
343
|
-
<ax-reveal>
|
|
344
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
345
|
-
</ax-reveal>
|
|
346
|
-
</div>
|
|
347
|
-
</ax-reveal-bound>
|
|
348
|
-
</div>
|
|
349
|
-
<style>
|
|
350
|
-
.border-width {
|
|
351
|
-
--reveal-border-width: 3px;
|
|
352
|
-
}
|
|
353
|
-
</style>
|
|
354
|
-
<div class="code">
|
|
355
|
-
<h2>Border Width</h2>
|
|
356
|
-
<pre>.my-reveal-container{
|
|
357
|
-
--reveal-border-width: 3px;
|
|
358
|
-
}</pre>
|
|
359
|
-
</div>
|
|
360
|
-
</section>
|
|
361
|
-
|
|
362
|
-
<section class="demo-block">
|
|
363
|
-
<div class="demo">
|
|
364
|
-
<ax-reveal-bound class="border-fill-radius">
|
|
365
|
-
<div class="ax-reveal-container">
|
|
366
|
-
<ax-reveal>
|
|
367
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
368
|
-
</ax-reveal>
|
|
369
|
-
<ax-reveal>
|
|
370
|
-
<button class="ax-reveal-button">To</button>
|
|
371
|
-
</ax-reveal>
|
|
372
|
-
</div>
|
|
373
|
-
<div class="ax-reveal-container">
|
|
374
|
-
<ax-reveal>
|
|
375
|
-
<button class="ax-reveal-button">Project</button>
|
|
376
|
-
</ax-reveal>
|
|
377
|
-
<ax-reveal>
|
|
378
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
379
|
-
</ax-reveal>
|
|
380
|
-
</div>
|
|
381
|
-
</ax-reveal-bound>
|
|
382
|
-
</div>
|
|
383
|
-
<style>
|
|
384
|
-
.border-fill-radius {
|
|
385
|
-
--reveal-border-fill-radius: 0.2;
|
|
386
|
-
}
|
|
387
|
-
</style>
|
|
388
|
-
<div class="code">
|
|
389
|
-
<h2>Border Fill Radius</h2>
|
|
390
|
-
<pre>.my-reveal-container{
|
|
391
|
-
--reveal-border-fill-radius: 0.2;
|
|
392
|
-
}</pre>
|
|
393
|
-
</div>
|
|
394
|
-
</section>
|
|
395
|
-
|
|
396
|
-
<section class="demo-block">
|
|
397
|
-
<div class="demo">
|
|
398
|
-
<ax-reveal-bound class="no-border">
|
|
399
|
-
<div class="ax-reveal-container">
|
|
400
|
-
<ax-reveal>
|
|
401
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
402
|
-
</ax-reveal>
|
|
403
|
-
<ax-reveal>
|
|
404
|
-
<button class="ax-reveal-button">To</button>
|
|
405
|
-
</ax-reveal>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="ax-reveal-container">
|
|
408
|
-
<ax-reveal>
|
|
409
|
-
<button class="ax-reveal-button">Project</button>
|
|
410
|
-
</ax-reveal>
|
|
411
|
-
<ax-reveal>
|
|
412
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
413
|
-
</ax-reveal>
|
|
414
|
-
</div>
|
|
415
|
-
</ax-reveal-bound>
|
|
416
|
-
</div>
|
|
417
|
-
<style>
|
|
418
|
-
.no-border {
|
|
419
|
-
--reveal-border-width: 0;
|
|
420
|
-
}
|
|
421
|
-
</style>
|
|
422
|
-
<div class="code">
|
|
423
|
-
<h2>No border</h2>
|
|
424
|
-
<pre>.my-reveal-container{
|
|
425
|
-
--reveal-border-width: 0;
|
|
426
|
-
}</pre>
|
|
427
|
-
</div>
|
|
428
|
-
</section>
|
|
429
|
-
|
|
430
|
-
<section class="demo-block">
|
|
431
|
-
<div class="demo">
|
|
432
|
-
<ax-reveal-bound class="different-sides">
|
|
433
|
-
<div>No Single Border</div>
|
|
434
|
-
<div class="ax-reveal-container">
|
|
435
|
-
<ax-reveal class="no-top">
|
|
436
|
-
<button class="ax-reveal-button">No Top</button>
|
|
437
|
-
</ax-reveal>
|
|
438
|
-
<ax-reveal class="no-bottom">
|
|
439
|
-
<button class="ax-reveal-button">No Bottom</button>
|
|
440
|
-
</ax-reveal>
|
|
441
|
-
</div>
|
|
442
|
-
<div class="ax-reveal-container">
|
|
443
|
-
<ax-reveal class="no-left">
|
|
444
|
-
<button class="ax-reveal-button">No Left</button>
|
|
445
|
-
</ax-reveal>
|
|
446
|
-
<ax-reveal class="no-right">
|
|
447
|
-
<button class="ax-reveal-button">No Right</button>
|
|
448
|
-
</ax-reveal>
|
|
449
|
-
</div>
|
|
450
|
-
<div class="ax-reveal-container">
|
|
451
|
-
<ax-reveal class="horizontal">
|
|
452
|
-
<button class="ax-reveal-button">Horizontal</button>
|
|
453
|
-
</ax-reveal>
|
|
454
|
-
<ax-reveal class="vertical">
|
|
455
|
-
<button class="ax-reveal-button">Vertical</button>
|
|
456
|
-
</ax-reveal>
|
|
457
|
-
</div>
|
|
458
|
-
<div class="ax-reveal-container">
|
|
459
|
-
<ax-reveal class="only-top">
|
|
460
|
-
<button class="ax-reveal-button">Only Top</button>
|
|
461
|
-
</ax-reveal>
|
|
462
|
-
<ax-reveal class="only-bottom">
|
|
463
|
-
<button class="ax-reveal-button">Only Bottom</button>
|
|
464
|
-
</ax-reveal>
|
|
465
|
-
</div>
|
|
466
|
-
<div class="ax-reveal-container">
|
|
467
|
-
<ax-reveal class="only-left">
|
|
468
|
-
<button class="ax-reveal-button">Only Left</button>
|
|
469
|
-
</ax-reveal>
|
|
470
|
-
<ax-reveal class="only-right">
|
|
471
|
-
<button class="ax-reveal-button">Only Right</button>
|
|
472
|
-
</ax-reveal>
|
|
473
|
-
</div>
|
|
474
|
-
<div>With Round Border Radius</div>
|
|
475
|
-
<div class="ax-reveal-container round-corner">
|
|
476
|
-
<ax-reveal class="no-top">
|
|
477
|
-
<button class="ax-reveal-button">No Top</button>
|
|
478
|
-
</ax-reveal>
|
|
479
|
-
<ax-reveal class="no-bottom">
|
|
480
|
-
<button class="ax-reveal-button">No Bottom</button>
|
|
481
|
-
</ax-reveal>
|
|
482
|
-
</div>
|
|
483
|
-
<div class="ax-reveal-container round-corner">
|
|
484
|
-
<ax-reveal class="no-left">
|
|
485
|
-
<button class="ax-reveal-button">No Left</button>
|
|
486
|
-
</ax-reveal>
|
|
487
|
-
<ax-reveal class="no-right">
|
|
488
|
-
<button class="ax-reveal-button">No Right</button>
|
|
489
|
-
</ax-reveal>
|
|
490
|
-
</div>
|
|
491
|
-
<div class="ax-reveal-container round-corner">
|
|
492
|
-
<ax-reveal class="horizontal">
|
|
493
|
-
<button class="ax-reveal-button">Horizontal</button>
|
|
494
|
-
</ax-reveal>
|
|
495
|
-
<ax-reveal class="vertical">
|
|
496
|
-
<button class="ax-reveal-button">Vertical</button>
|
|
497
|
-
</ax-reveal>
|
|
498
|
-
</div>
|
|
499
|
-
<div class="ax-reveal-container round-corner">
|
|
500
|
-
<ax-reveal class="only-top">
|
|
501
|
-
<button class="ax-reveal-button">Only Top</button>
|
|
502
|
-
</ax-reveal>
|
|
503
|
-
<ax-reveal class="only-bottom">
|
|
504
|
-
<button class="ax-reveal-button">Only Bottom</button>
|
|
505
|
-
</ax-reveal>
|
|
506
|
-
</div>
|
|
507
|
-
<div class="ax-reveal-container round-corner">
|
|
508
|
-
<ax-reveal class="only-left">
|
|
509
|
-
<button class="ax-reveal-button">Only Left</button>
|
|
510
|
-
</ax-reveal>
|
|
511
|
-
<ax-reveal class="only-right">
|
|
512
|
-
<button class="ax-reveal-button">Only Right</button>
|
|
513
|
-
</ax-reveal>
|
|
514
|
-
</div>
|
|
515
|
-
<div>With Bevel Border Radius</div>
|
|
516
|
-
<div class="ax-reveal-container bevel-corner">
|
|
517
|
-
<ax-reveal class="no-top">
|
|
518
|
-
<button class="ax-reveal-button">No Top</button>
|
|
519
|
-
</ax-reveal>
|
|
520
|
-
<ax-reveal class="no-bottom">
|
|
521
|
-
<button class="ax-reveal-button">No Bottom</button>
|
|
522
|
-
</ax-reveal>
|
|
523
|
-
</div>
|
|
524
|
-
<div class="ax-reveal-container bevel-corner">
|
|
525
|
-
<ax-reveal class="no-left">
|
|
526
|
-
<button class="ax-reveal-button">No Left</button>
|
|
527
|
-
</ax-reveal>
|
|
528
|
-
<ax-reveal class="no-right">
|
|
529
|
-
<button class="ax-reveal-button">No Right</button>
|
|
530
|
-
</ax-reveal>
|
|
531
|
-
</div>
|
|
532
|
-
<div class="ax-reveal-container bevel-corner">
|
|
533
|
-
<ax-reveal class="horizontal">
|
|
534
|
-
<button class="ax-reveal-button">Horizontal</button>
|
|
535
|
-
</ax-reveal>
|
|
536
|
-
<ax-reveal class="vertical">
|
|
537
|
-
<button class="ax-reveal-button">Vertical</button>
|
|
538
|
-
</ax-reveal>
|
|
539
|
-
</div>
|
|
540
|
-
<div class="ax-reveal-container bevel-corner">
|
|
541
|
-
<ax-reveal class="only-top">
|
|
542
|
-
<button class="ax-reveal-button">Only Top</button>
|
|
543
|
-
</ax-reveal>
|
|
544
|
-
<ax-reveal class="only-bottom">
|
|
545
|
-
<button class="ax-reveal-button">Only Bottom</button>
|
|
546
|
-
</ax-reveal>
|
|
547
|
-
</div>
|
|
548
|
-
<div class="ax-reveal-container bevel-corner">
|
|
549
|
-
<ax-reveal class="only-left">
|
|
550
|
-
<button class="ax-reveal-button">Only Left</button>
|
|
551
|
-
</ax-reveal>
|
|
552
|
-
<ax-reveal class="only-right">
|
|
553
|
-
<button class="ax-reveal-button">Only Right</button>
|
|
554
|
-
</ax-reveal>
|
|
555
|
-
</div>
|
|
556
|
-
</ax-reveal-bound>
|
|
557
|
-
</div>
|
|
558
|
-
<style>
|
|
559
|
-
.no-top {
|
|
560
|
-
--reveal-border-top-type: none;
|
|
561
|
-
}
|
|
562
|
-
.no-bottom {
|
|
563
|
-
--reveal-border-bottom-type: none;
|
|
564
|
-
}
|
|
565
|
-
.no-left {
|
|
566
|
-
--reveal-border-left-type: none;
|
|
567
|
-
}
|
|
568
|
-
.no-right {
|
|
569
|
-
--reveal-border-right-type: none;
|
|
570
|
-
}
|
|
571
|
-
.horizontal {
|
|
572
|
-
--reveal-border-left-type: none;
|
|
573
|
-
--reveal-border-right-type: none;
|
|
574
|
-
}
|
|
575
|
-
.vertical {
|
|
576
|
-
--reveal-border-top-type: none;
|
|
577
|
-
--reveal-border-bottom-type: none;
|
|
578
|
-
}
|
|
579
|
-
.only-top {
|
|
580
|
-
--reveal-border-bottom-type: none;
|
|
581
|
-
--reveal-border-left-type: none;
|
|
582
|
-
--reveal-border-right-type: none;
|
|
583
|
-
}
|
|
584
|
-
.only-bottom {
|
|
585
|
-
--reveal-border-top-type: none;
|
|
586
|
-
--reveal-border-left-type: none;
|
|
587
|
-
--reveal-border-right-type: none;
|
|
588
|
-
}
|
|
589
|
-
.only-left {
|
|
590
|
-
--reveal-border-top-type: none;
|
|
591
|
-
--reveal-border-bottom-type: none;
|
|
592
|
-
--reveal-border-right-type: none;
|
|
593
|
-
}
|
|
594
|
-
.only-right {
|
|
595
|
-
--reveal-border-top-type: none;
|
|
596
|
-
--reveal-border-bottom-type: none;
|
|
597
|
-
--reveal-border-left-type: none;
|
|
598
|
-
}
|
|
599
|
-
</style>
|
|
600
|
-
<div class="code">
|
|
601
|
-
<h2>No border</h2>
|
|
602
|
-
<pre>.no-top {
|
|
603
|
-
--reveal-border-top-type: none;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
.no-bottom {
|
|
607
|
-
--reveal-border-bottom-type: none;
|
|
608
|
-
}
|
|
609
|
-
|
|
610
|
-
.no-left {
|
|
611
|
-
--reveal-border-left-type: none;
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
.no-right {
|
|
615
|
-
--reveal-border-right-type: none;
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
.horizontal {
|
|
619
|
-
--reveal-border-left-type: none;
|
|
620
|
-
--reveal-border-right-type: none;
|
|
621
|
-
}
|
|
622
|
-
|
|
623
|
-
.vertical {
|
|
624
|
-
--reveal-border-top-type: none;
|
|
625
|
-
--reveal-border-bottom-type: none;
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.only-top {
|
|
629
|
-
--reveal-border-bottom-type: none;
|
|
630
|
-
--reveal-border-left-type: none;
|
|
631
|
-
--reveal-border-right-type: none;
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
.only-bottom {
|
|
635
|
-
--reveal-border-top-type: none;
|
|
636
|
-
--reveal-border-left-type: none;
|
|
637
|
-
--reveal-border-right-type: none;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
.only-left {
|
|
641
|
-
--reveal-border-top-type: none;
|
|
642
|
-
--reveal-border-bottom-type: none;
|
|
643
|
-
--reveal-border-right-type: none;
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
.only-right {
|
|
647
|
-
--reveal-border-top-type: none;
|
|
648
|
-
--reveal-border-bottom-type: none;
|
|
649
|
-
--reveal-border-right-type: none;
|
|
650
|
-
}</pre>
|
|
651
|
-
</div>
|
|
652
|
-
</section>
|
|
653
|
-
|
|
654
|
-
<section class="demo-block">
|
|
655
|
-
<div class="demo">
|
|
656
|
-
<ax-reveal-bound class="fill-radius">
|
|
657
|
-
<div class="ax-reveal-container">
|
|
658
|
-
<ax-reveal>
|
|
659
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
660
|
-
</ax-reveal>
|
|
661
|
-
<ax-reveal>
|
|
662
|
-
<button class="ax-reveal-button">To</button>
|
|
663
|
-
</ax-reveal>
|
|
664
|
-
</div>
|
|
665
|
-
<div class="ax-reveal-container">
|
|
666
|
-
<ax-reveal>
|
|
667
|
-
<button class="ax-reveal-button">Project</button>
|
|
668
|
-
</ax-reveal>
|
|
669
|
-
<ax-reveal>
|
|
670
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
671
|
-
</ax-reveal>
|
|
672
|
-
</div>
|
|
673
|
-
</ax-reveal-bound>
|
|
674
|
-
</div>
|
|
675
|
-
<style>
|
|
676
|
-
.fill-radius {
|
|
677
|
-
--reveal-hover-light-fill-radius: 0.2;
|
|
678
|
-
}
|
|
679
|
-
</style>
|
|
680
|
-
<div class="code">
|
|
681
|
-
<h2>Fill Radius</h2>
|
|
682
|
-
<pre>.my-reveal-container{
|
|
683
|
-
--reveal-hover-light-fill-radius: 0.2;
|
|
684
|
-
}</pre>
|
|
685
|
-
</div>
|
|
686
|
-
</section>
|
|
687
|
-
|
|
688
|
-
<section class="demo-block">
|
|
689
|
-
<div class="demo">
|
|
690
|
-
<ax-reveal-bound class="no-fill">
|
|
691
|
-
<div class="ax-reveal-container">
|
|
692
|
-
<ax-reveal>
|
|
693
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
694
|
-
</ax-reveal>
|
|
695
|
-
<ax-reveal>
|
|
696
|
-
<button class="ax-reveal-button">To</button>
|
|
697
|
-
</ax-reveal>
|
|
698
|
-
</div>
|
|
699
|
-
<div class="ax-reveal-container">
|
|
700
|
-
<ax-reveal>
|
|
701
|
-
<button class="ax-reveal-button">Project</button>
|
|
702
|
-
</ax-reveal>
|
|
703
|
-
<ax-reveal>
|
|
704
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
705
|
-
</ax-reveal>
|
|
706
|
-
</div>
|
|
707
|
-
</ax-reveal-bound>
|
|
708
|
-
</div>
|
|
709
|
-
<style>
|
|
710
|
-
.no-fill {
|
|
711
|
-
--reveal-hover-light: false;
|
|
712
|
-
}
|
|
713
|
-
</style>
|
|
714
|
-
<div class="code">
|
|
715
|
-
<h2>No Fill</h2>
|
|
716
|
-
<pre>.my-reveal-container{
|
|
717
|
-
--reveal-hover-light: false;
|
|
718
|
-
}</pre>
|
|
719
|
-
</div>
|
|
720
|
-
</section>
|
|
721
|
-
|
|
722
|
-
<section class="demo-block">
|
|
723
|
-
<div class="demo">
|
|
724
|
-
<ax-reveal-bound class="hold-animation">
|
|
725
|
-
<div class="ax-reveal-container">
|
|
726
|
-
<ax-reveal>
|
|
727
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
728
|
-
</ax-reveal>
|
|
729
|
-
<ax-reveal>
|
|
730
|
-
<button class="ax-reveal-button">To</button>
|
|
731
|
-
</ax-reveal>
|
|
732
|
-
</div>
|
|
733
|
-
<div class="ax-reveal-container">
|
|
734
|
-
<ax-reveal>
|
|
735
|
-
<button class="ax-reveal-button">Project</button>
|
|
736
|
-
</ax-reveal>
|
|
737
|
-
<ax-reveal>
|
|
738
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
739
|
-
</ax-reveal>
|
|
740
|
-
</div>
|
|
741
|
-
</ax-reveal-bound>
|
|
742
|
-
</div>
|
|
743
|
-
<style>
|
|
744
|
-
.hold-animation {
|
|
745
|
-
--reveal-press-animation-speed: 8000;
|
|
746
|
-
}
|
|
747
|
-
</style>
|
|
748
|
-
<div class="code">
|
|
749
|
-
<h2>Hold animation</h2>
|
|
750
|
-
<pre>.my-reveal-container{
|
|
751
|
-
--reveal-animate-speed: 8000;
|
|
752
|
-
}</pre>
|
|
753
|
-
</div>
|
|
754
|
-
</section>
|
|
755
|
-
|
|
756
|
-
<section class="demo-block">
|
|
757
|
-
<div class="demo">
|
|
758
|
-
<ax-reveal-bound class="release-animation">
|
|
759
|
-
<div class="ax-reveal-container">
|
|
760
|
-
<ax-reveal>
|
|
761
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
762
|
-
</ax-reveal>
|
|
763
|
-
<ax-reveal>
|
|
764
|
-
<button class="ax-reveal-button">To</button>
|
|
765
|
-
</ax-reveal>
|
|
766
|
-
</div>
|
|
767
|
-
<div class="ax-reveal-container">
|
|
768
|
-
<ax-reveal>
|
|
769
|
-
<button class="ax-reveal-button">Project</button>
|
|
770
|
-
</ax-reveal>
|
|
771
|
-
<ax-reveal>
|
|
772
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
773
|
-
</ax-reveal>
|
|
774
|
-
</div>
|
|
775
|
-
</ax-reveal-bound>
|
|
776
|
-
</div>
|
|
777
|
-
<style>
|
|
778
|
-
.release-animation {
|
|
779
|
-
--reveal-release-animation-accelerate-rate: 20;
|
|
780
|
-
}
|
|
781
|
-
</style>
|
|
782
|
-
<div class="code">
|
|
783
|
-
<h2>Release animation</h2>
|
|
784
|
-
<pre>.my-reveal-container{
|
|
785
|
-
--reveal-released-accelerate-rate: 20;
|
|
786
|
-
}</pre>
|
|
787
|
-
</div>
|
|
788
|
-
</section>
|
|
789
|
-
|
|
790
|
-
<section class="demo-block">
|
|
791
|
-
<div class="demo">
|
|
792
|
-
<ax-reveal-bound class="fill-mode">
|
|
793
|
-
<div class="ax-reveal-container">
|
|
794
|
-
<ax-reveal>
|
|
795
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
796
|
-
</ax-reveal>
|
|
797
|
-
<ax-reveal>
|
|
798
|
-
<button class="ax-reveal-button">To</button>
|
|
799
|
-
</ax-reveal>
|
|
800
|
-
</div>
|
|
801
|
-
<div class="ax-reveal-container">
|
|
802
|
-
<ax-reveal>
|
|
803
|
-
<button class="ax-reveal-button">Project</button>
|
|
804
|
-
</ax-reveal>
|
|
805
|
-
<ax-reveal>
|
|
806
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
807
|
-
</ax-reveal>
|
|
808
|
-
</div>
|
|
809
|
-
</ax-reveal-bound>
|
|
810
|
-
</div>
|
|
811
|
-
<style>
|
|
812
|
-
.fill-mode {
|
|
813
|
-
--reveal-hover-light-fill-radius: 0.1;
|
|
814
|
-
--reveal-press-animation-radius-mode: constrained;
|
|
815
|
-
}
|
|
816
|
-
</style>
|
|
817
|
-
<div class="code">
|
|
818
|
-
<h2>Animation Fill Mode</h2>
|
|
819
|
-
<pre>.my-reveal-container{
|
|
820
|
-
--reveal-hover-light-fill-radius: 0.1;
|
|
821
|
-
--reveal-press-animation-radius-mode: constrained;
|
|
822
|
-
}</pre>
|
|
823
|
-
</div>
|
|
824
|
-
</section>
|
|
825
|
-
|
|
826
|
-
<section class="demo-block">
|
|
827
|
-
<div class="demo">
|
|
828
|
-
<ax-reveal-bound class="no-animation">
|
|
829
|
-
<div class="ax-reveal-container">
|
|
830
|
-
<ax-reveal>
|
|
831
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
832
|
-
</ax-reveal>
|
|
833
|
-
<ax-reveal>
|
|
834
|
-
<button class="ax-reveal-button">To</button>
|
|
835
|
-
</ax-reveal>
|
|
836
|
-
</div>
|
|
837
|
-
<div class="ax-reveal-container">
|
|
838
|
-
<ax-reveal>
|
|
839
|
-
<button class="ax-reveal-button">Project</button>
|
|
840
|
-
</ax-reveal>
|
|
841
|
-
<ax-reveal>
|
|
842
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
843
|
-
</ax-reveal>
|
|
844
|
-
</div>
|
|
845
|
-
</ax-reveal-bound>
|
|
846
|
-
</div>
|
|
847
|
-
<style>
|
|
848
|
-
.no-animation {
|
|
849
|
-
--reveal-press-animation: false;
|
|
850
|
-
}
|
|
851
|
-
</style>
|
|
852
|
-
<div class="code">
|
|
853
|
-
<h2>No animation</h2>
|
|
854
|
-
<pre>.my-reveal-container{
|
|
855
|
-
--reveal-press-animation: false;
|
|
856
|
-
}</pre>
|
|
857
|
-
</div>
|
|
858
|
-
</section>
|
|
859
|
-
|
|
860
|
-
<section class="demo-block">
|
|
861
|
-
<div class="demo">
|
|
862
|
-
<ax-reveal-bound class="dynamic-size">
|
|
863
|
-
<div class="ax-reveal-container">
|
|
864
|
-
<ax-reveal>
|
|
865
|
-
<button class="ax-reveal-button">Welcome</button>
|
|
866
|
-
</ax-reveal>
|
|
867
|
-
<ax-reveal>
|
|
868
|
-
<button class="ax-reveal-button">To</button>
|
|
869
|
-
</ax-reveal>
|
|
870
|
-
</div>
|
|
871
|
-
<div class="ax-reveal-container">
|
|
872
|
-
<ax-reveal>
|
|
873
|
-
<button class="ax-reveal-button">Project</button>
|
|
874
|
-
</ax-reveal>
|
|
875
|
-
<ax-reveal>
|
|
876
|
-
<button class="ax-reveal-button">Axiom!</button>
|
|
877
|
-
</ax-reveal>
|
|
878
|
-
</div>
|
|
879
|
-
</ax-reveal-bound>
|
|
880
|
-
</div>
|
|
881
|
-
<style>
|
|
882
|
-
.dynamic-size.large ax-reveal {
|
|
883
|
-
width: 160px;
|
|
884
|
-
height: 160px;
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
.dynamic-size.large .ax-reveal-button {
|
|
888
|
-
min-width: 160px;
|
|
889
|
-
height: 160px;
|
|
890
|
-
}
|
|
891
|
-
</style>
|
|
892
|
-
<div class="code">
|
|
893
|
-
<h2>Dynamic size</h2>
|
|
894
|
-
<button
|
|
895
|
-
onclick="document.querySelector('.dynamic-size')?.classList.toggle('large')"
|
|
896
|
-
>
|
|
897
|
-
Click here
|
|
898
|
-
</button>
|
|
899
|
-
</div>
|
|
900
|
-
</section>
|
|
901
|
-
|
|
902
|
-
<section class="demo-block">
|
|
903
|
-
<div class="demo">
|
|
904
|
-
<div class="long-list no-diffuse">
|
|
905
|
-
<ax-reveal-bound>
|
|
906
|
-
<div class="ax-reveal-container">
|
|
907
|
-
<ax-reveal>
|
|
908
|
-
<button class="ax-reveal-button">A lovely item</button>
|
|
909
|
-
</ax-reveal>
|
|
910
|
-
<ax-reveal>
|
|
911
|
-
<button class="ax-reveal-button">A lovely item</button>
|
|
912
|
-
</ax-reveal>
|
|
913
|
-
<ax-reveal>
|
|
914
|
-
<button class="ax-reveal-button">A lovely item</button>
|
|
915
|
-
</ax-reveal>
|
|
916
|
-
<ax-reveal>
|
|
917
|
-
<button class="ax-reveal-button">A lovely item</button>
|
|
918
|
-
</ax-reveal>
|
|
919
|
-
<ax-reveal>
|
|
920
|
-
<button class="ax-reveal-button">A lovely item</button>
|
|
921
|
-
</ax-reveal>
|
|
922
|
-
</div>
|
|
923
|
-
</div>
|
|
924
|
-
</ax-reveal-bound>
|
|
925
|
-
</div>
|
|
926
|
-
<style>
|
|
927
|
-
.no-diffuse {
|
|
928
|
-
--reveal-diffuse: false;
|
|
929
|
-
overflow-y: auto;
|
|
930
|
-
height: auto;
|
|
931
|
-
}
|
|
932
|
-
</style>
|
|
933
|
-
<div class="code">
|
|
934
|
-
<h2>No diffuse</h2>
|
|
935
|
-
<pre>.my-reveal-container{
|
|
936
|
-
--reveal-diffuse: false;
|
|
937
|
-
}</pre>
|
|
938
|
-
</div>
|
|
939
|
-
</section>
|
|
940
|
-
<section class="round-corner benchmark">
|
|
941
|
-
<h2>Benchmark (100 Items)</h2>
|
|
942
|
-
<ax-reveal-bound>
|
|
943
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
944
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
945
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
946
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
947
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
948
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
949
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
950
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
951
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
952
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
953
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
954
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
955
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
956
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
957
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
958
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
959
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
960
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
961
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
962
|
-
<ax-reveal>🥩</ax-reveal><ax-reveal>🥚</ax-reveal><ax-reveal>🥛</ax-reveal><ax-reveal>👀</ax-reveal><ax-reveal>📎</ax-reveal>
|
|
963
|
-
</ax-reveal-bound>
|
|
964
|
-
|
|
965
|
-
<style>
|
|
966
|
-
.benchmark {
|
|
967
|
-
font-size: 0;
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
.benchmark ax-reveal {
|
|
971
|
-
width: 40px;
|
|
972
|
-
height: 40px;
|
|
973
|
-
margin: 4px;
|
|
974
|
-
padding: 8px;
|
|
975
|
-
font-size: 24px;
|
|
976
|
-
text-align: center;
|
|
977
|
-
line-height: 40px;
|
|
978
|
-
cursor: default;
|
|
979
|
-
}
|
|
980
|
-
</style>
|
|
981
|
-
</section>
|
|
982
|
-
</ax-reveal-provider>
|
|
983
|
-
<script type="module">
|
|
984
|
-
// For package developer.
|
|
985
|
-
import { register } from '../../../es/index.js';
|
|
986
|
-
// import { register } from 'https://unpkg.com/@ax-design/reveal-highlight/es/index.js';
|
|
987
|
-
register({
|
|
988
|
-
compat: true,
|
|
989
|
-
borderDetectionMode: 'experimentalAutoFit',
|
|
990
|
-
});
|
|
991
|
-
</script>
|
|
992
|
-
</body>
|