/
toggle.css
63 lines (59 loc) · 1.21 KB
/
toggle.css
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
/*
Yet another <toggle> implementation.
Based on ::marker
*/
@set std-toggle {
:root {
display: inline-block;
behavior: check;
flow: stack;
border: none;
background: none;
width: max-content;
height: 1.4em;
padding: 0 0 0 38dip;
cursor: pointer;
}
:root[type="radio"] {
behavior: radio;
}
:root::marker {
width: 32dip;
height: 15dip;
background: #9B9B9B;
border-radius: 7dip;
margin: * * * 3dip;
foreground-image: url(stock:disk);
foreground-repeat: no-repeat;
foreground-position: 1dip 50%;
foreground-size: 2dip;
fill: white;
stroke: #F1F1F1;
stroke-width: 13dip;
transition: foreground-position circ-in-out 100ms, background-color linear 100ms;
}
:root:checked::marker {
foreground-position: 28dip 50%;
background: #84C7C1;
fill: #26A69A;
stroke: #26A69A;
}
:root>option {
text-align: start;
}
:root>option:first-child {
visibility: visible;
}
:root>option:last-child {
visibility: hidden;
}
:root:checked>option:first-child {
visibility: hidden;
}
:root:checked>option:last-child {
visibility: visible;
}
}
toggle, button[type="toggle"] {
style-set: std-toggle;
}