blob: 26edc6c4bce4b139f6c705e19bb12652b0e5549c (
plain)
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
|
// 尺寸与迁移前的 react-switch 保持一致：轨道 44x28，滑块 24
.root {
--switch-w: 44px;
--switch-h: 28px;
--switch-thumb: 24px;
position: relative;
flex-shrink: 0;
width: var(--switch-w);
height: var(--switch-h);
padding: 0;
border: none;
border-radius: calc(var(--switch-h) / 2);
background-color: var(--color-toggle-bg);
cursor: pointer;
transition: background-color 0.2s ease;
-webkit-tap-highlight-color: transparent;
&[data-state='checked'] {
background-color: var(--color-focus-blue);
}
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft-bg);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.mini {
--switch-w: 34px;
--switch-h: 20px;
--switch-thumb: 16px;
}
.thumb {
display: block;
width: var(--switch-thumb);
height: var(--switch-thumb);
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease;
transform: translateX(calc((var(--switch-h) - var(--switch-thumb)) / 2));
will-change: transform;
&[data-state='checked'] {
transform: translateX(
calc(var(--switch-w) - var(--switch-thumb) - (var(--switch-h) - var(--switch-thumb)) / 2)
);
}
}
|
