userscripts/src/ext/shared/Components/Toggle.svelte at main · Dirtylowdown/userscripts · GitHub

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
uninstall
void
delete
close
stop


	export let checked = false;
	export let disabled = false;
	export let title = undefined;
	export let ariaAttributes = {};
</script>

<!-- prevent toggle button clicks from triggering parent element on:click -->
<button
	on:click|stopPropagation
	{...ariaAttributes}
	aria-pressed={checked}
	{disabled}
	{title}
	aria-label="toggle"
>
	<span aria-hidden="true"></span>
</button>

<style>
	button {
		--switch-timing: 150ms 75ms;

		background-color: transparent;
		font-size: var(--toggle-font-size, 1rem);
		height: 1em;
		min-width: 1.75em;
		position: relative;
		width: 1.75em;
	}

	/* ios */
	@supports (-webkit-touch-callout: none) {
		button {
			font-size: var(--toggle-font-size, 2rem);
		}
	}

	span {
		background-color: var(--color-black);
		border-radius: 0.625em;
		display: block;
		height: 100%;
		pointer-events: none;
		transition: background-color 100ms 75ms;
		width: 100%;
	}

	span::before {
		background-color: white;
		border-radius: 50%;
		content: "";
		height: 0.75em;
		left: 0.125em;
		position: absolute;
		top: 0.125em;
		transition: left 175ms ease-in;
		width: 0.75em;
	}

	button[aria-pressed="true"] > span {
		background-color: var(--color-blue);
	}

	button[aria-pressed="true"] > span::before {
		left: calc(100% - (0.75em + 0.125em)); /* minus el width + left */
	}
</style>