mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-10-29 10:02:09 +08:00
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { styled } from '@mui/material/styles'
|
|
import { default as MuiSwitch, SwitchProps } from '@mui/material/Switch'
|
|
|
|
export const Switch = styled((props: SwitchProps) => (
|
|
<MuiSwitch
|
|
focusVisibleClassName=".Mui-focusVisible"
|
|
disableRipple
|
|
{...props}
|
|
/>
|
|
))(({ theme }) => ({
|
|
width: 42,
|
|
height: 26,
|
|
padding: 0,
|
|
marginRight: 1,
|
|
'& .MuiSwitch-switchBase': {
|
|
padding: 0,
|
|
margin: 2,
|
|
transitionDuration: '300ms',
|
|
'&.Mui-checked': {
|
|
transform: 'translateX(16px)',
|
|
color: '#fff',
|
|
'& + .MuiSwitch-track': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
opacity: 1,
|
|
border: 0,
|
|
},
|
|
'&.Mui-disabled + .MuiSwitch-track': {
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
'&.Mui-focusVisible .MuiSwitch-thumb': {
|
|
color: '#33cf4d',
|
|
border: '6px solid #fff',
|
|
},
|
|
'&.Mui-disabled .MuiSwitch-thumb': {
|
|
color:
|
|
theme.palette.mode === 'light'
|
|
? theme.palette.grey[100]
|
|
: theme.palette.grey[600],
|
|
},
|
|
'&.Mui-disabled + .MuiSwitch-track': {
|
|
opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
|
|
},
|
|
},
|
|
'& .MuiSwitch-thumb': {
|
|
boxSizing: 'border-box',
|
|
width: 22,
|
|
height: 22,
|
|
},
|
|
'& .MuiSwitch-track': {
|
|
borderRadius: 26 / 2,
|
|
backgroundColor: theme.palette.mode === 'light' ? '#BBBBBB' : '#39393D',
|
|
opacity: 1,
|
|
transition: theme.transitions.create(['background-color'], {
|
|
duration: 500,
|
|
}),
|
|
},
|
|
}))
|