generated from mirisuzanne/web-component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
switch-control.css
126 lines (113 loc) · 2.96 KB
/
switch-control.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
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
button[is-switch] {
/* custom properties, and their fallback values
… sizes
--switch-block, 1em
--switch-gap, 0.6ch
--switch-border-width, 2px
--switch-padding, --switch-border-width
… colors
--switch-color, unset
--switch-track, transparent
--switch-border, currentColor
--switch-thumb, currentColor
--switch-color-pressed, --switch-color
--switch-track-pressed, --switch-track
--switch-border-pressed, --switch-border
--switch-thumb-pressed, --switch-thumb
… transition
--switch-transition-time, 150ms
--switch-transition-function, ease-out
*/
/* sizes */
---switch-block: var(--switch-block, 1em);
---switch-gap: var(--switch-gap, 0.6ch);
---switch-border-width: var(
--switch-border-width,
2px
);
---switch-padding: var(
--switch-padding,
var(--switch-border-width, 2px)
);
/* colors */
---switch-color: var(--switch-color, inherit);
---switch-track: var(--switch-track, transparent);
---switch-border: var(--switch-border, currentColor);
---switch-thumb: var(--switch-thumb, currentColor);
/* auto */
---switch-thumb-size: calc(
var(---switch-block) - (var(---switch-padding) * 2)
);
---switch-start: 0px;
---switch-end: calc(var(---switch-thumb-size) * 2);
background: transparent;
border: transparent;
color: unset;
display: inline-grid;
gap: 0;
grid-template-columns:
[track-start] var(---switch-border-width)
var(---switch-padding)
var(---switch-start)
[toggle-start] var(---switch-end)
var(---switch-padding)
var(---switch-border-width)
[track-end] var(---switch-gap)
[toggle-end] auto
;
padding: unset;
transition:
grid-template-columns
var(--switch-transition-time, 150ms)
var(--switch-transition-function, ease-out);
&::before,
&::after {
align-self: safe center;
box-sizing: content-box;
content: '';
color: var(---switch-color, unset);
display: block;
grid-row: 1;
}
/* track */
&::before {
background: var(---switch-track, transparent);
block-size: var(---switch-block);
border:
var(---switch-border-width, 2px)
solid
var(---switch-border, currentColor);
border-radius: 1lh;
grid-column: track;
}
/* thumb */
&::after {
align-self: center;
aspect-ratio: 1;
background: var(---switch-thumb, currentColor);
block-size: var(---switch-thumb-size);
border-radius: 100%;
justify-self: start;
grid-column: toggle;
}
&[aria-pressed=true] {
---switch-end: var(---switch-thumb-size);
---switch-start: var(---switch-thumb-size);
---switch-color: var(
--switch-color-pressed,
var(--switch-color, inherit)
);
---switch-track: var(
--switch-track-pressed,
var(--switch-track, transparent)
);
---switch-border: var(
--switch-border-pressed,
var(--switch-border, currentColor)
);
---switch-thumb: var(
--switch-thumb-pressed,
var(--switch-thumb, currentColor)
);
}
}