forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat(ui): prettier toggle switch
+43
-14
+43
-14
src/components/UI/ToggleSwitch.vue
+43
-14
src/components/UI/ToggleSwitch.vue
···
29
29
</div>
30
30
</template>
31
31
32
-
<style scoped>
32
+
<style scoped lang="scss">
33
+
@use '@/assets/variables' as *;
34
+
33
35
.toggle-wrapper {
34
36
display: flex;
35
37
align-items: center;
36
38
justify-content: space-between;
37
-
gap: 1rem;
39
+
gap: 0.75rem;
38
40
cursor: pointer;
39
41
}
40
42
···
44
46
}
45
47
46
48
.toggle-track {
47
-
width: 3.25rem;
49
+
display: inline-flex;
50
+
width: 3rem;
48
51
height: 1.75rem;
49
52
background-color: hsl(var(--surface1));
50
-
border-radius: 99px;
53
+
border-radius: 1rem;
51
54
border: none;
52
55
position: relative;
53
56
cursor: pointer;
54
57
flex-shrink: 0;
55
58
56
59
box-sizing: unset;
57
-
border: 1px solid hsl(var(--surface2));
60
+
61
+
transition-timing-function: $ease-spring;
62
+
transition-duration: 0.3s;
63
+
outline-width: 4px;
64
+
outline-offset: -1px;
65
+
66
+
&:active,
67
+
&:focus-visible {
68
+
.toggle-thumb {
69
+
transform: translateX(0.1rem);
70
+
background-color: hsl(var(--base) / 0.8);
71
+
}
72
+
}
73
+
74
+
&:focus-visible {
75
+
outline-color: hsl(var(--accent));
76
+
outline-offset: -1px;
77
+
}
58
78
59
79
&.is-checked {
60
-
background-color: hsl(var(--accent));
80
+
background-color: hsla(var(--accent) / 0.8);
61
81
62
82
.toggle-thumb {
63
-
transform: translateX(1.5rem);
83
+
transform: translateX(1.25rem);
64
84
background-color: hsl(var(--base));
65
85
}
66
-
}
67
86
68
-
&:focus-visible {
87
+
&:active,
88
+
&:focus-visible {
89
+
.toggle-thumb {
90
+
background-color: hsl(var(--base) / 0.8);
91
+
transform: translateX(1.1rem);
92
+
}
93
+
}
69
94
}
70
95
}
71
96
72
97
.toggle-thumb {
73
98
position: absolute;
74
-
top: 0.125rem;
75
-
left: 0.125rem;
76
-
width: 1.5rem;
77
-
height: 1.5rem;
78
-
background-color: hsl(var(--text));
99
+
top: 0.2rem;
100
+
left: 0.2rem;
101
+
width: 1.35rem;
102
+
height: 1.35rem;
103
+
background: hsl(var(--base));
79
104
border-radius: 50%;
105
+
box-shadow: 0 1px 3px hsla(var(--crust) / 0.2);
106
+
107
+
transition-timing-function: $ease-spring;
108
+
transition-duration: 0.3s;
80
109
}
81
110
</style>