frontPanel/src/ui_kit/CustomSwitch.tsx
2023-12-31 05:53:25 +03:00

38 lines
868 B
TypeScript

import { Switch, SwitchProps } from "@mui/material";
import { styled } from "@mui/material/styles";
export default styled((props: SwitchProps) => (
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(() => ({
width: 52,
height: 31,
padding: 0,
"& .MuiSwitch-switchBase": {
padding: 0,
margin: 2,
transitionDuration: "300ms",
"&.Mui-checked": {
transform: "translateX(21px)",
color: "#fff",
"& + .MuiSwitch-track": {
backgroundColor: "#7E2AEA",
opacity: 1,
border: 0,
},
},
"&.Mui-disabled .MuiSwitch-thumb": {
color: "#9A9AAF",
boxShadow: "none",
},
},
"& .MuiSwitch-thumb": {
boxSizing: "border-box",
width: 27,
height: 27,
},
"& .MuiSwitch-track": {
borderRadius: 40 / 2,
backgroundColor: "#9A9AAF",
},
}));