-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (56 loc) · 2.75 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>toggle-switch Element</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&family=Source+Code+Pro:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="demo.css" />
<script type="module" src="lib/define.js"></script>
<script type="module" src="demo.js"></script>
</head>
<body>
<main>
<h1><toggle-switch> Demo</h1>
<section id="main-demo" class="demo">
<figure>
<p class="switch-container"><label for="default-switch">Default Switch</label><toggle-switch id="default-switch"></toggle-switch></p>
<p class="result">Off</p>
</figure>
<pre><code><mark><label for="default-switch"></mark>Default Switch<mark></label></mark>
<mark><strong><toggle-switch id="default-switch"></strong><strong></toggle-switch></strong></mark></code></pre>
</section>
<section id="style-demo" class="demo">
<figure>
<p class="switch-container"><label for="fancy-switch">Fancy Switch</label><toggle-switch id="fancy-switch" class="fancy"></toggle-switch></p>
<p class="result">Styleish!</p>
</figure>
<pre><code><mark><label for="fancy-switch"></mark>Fancy Switch<mark></label></mark>
<mark><strong><toggle-switch id="fancy-switch" class="fancy"></strong><strong></toggle-switch></strong></mark>
<mark><strong><style></strong></mark>
<mark>.fancy</mark> {
<mark class="attr">height</mark>: 1.125em;
}
<mark>.fancy::part(track)</mark> {
<mark class="attr">padding</mark>: 0.125em;
<mark class="attr">border-radius</mark>: 1em;
<mark class="attr">background-color</mark>: hsl(0, 0%, 67%);
}
<mark>.fancy::part(slider)</mark> {
<mark class="attr">border-radius</mark>: 1em;
<mark class="attr">background-color</mark>: hsl(0, 0%, 100%);
<mark class="attr">box-shadow</mark>: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
}
<mark>.fancy[checked]::part(track)</mark> {
<mark class="attr">background-color</mark>: hsl(211, 69%, 57%);
}
<mark><strong></style></strong></mark>
</code></pre>
</section>
</main>
<footer>
<p>Made by <a href="https://auroratide.com">Timothy Foster</a></p>
</footer>
</body>
</html>