@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.25 kB
JavaScript
import{jsx as i}from"react/jsx-runtime";import{styled as t,Switch as o}from"@mui/material";const e=t(t=>i(o,{disableRipple:!0,...t}))(({theme:i,sizing:t})=>({width:"lg"===t?54:36,height:"lg"===t?30:20,padding:0,"& .MuiSwitch-switchBase":{padding:0,margin:"lg"===t?3:2,transitionDuration:"300ms","&.Mui-checked":{transform:`translateX(${"lg"===t?24:16}px)`,color:i.custom.palette.icon.lockedWhite,"& + .MuiSwitch-track":{backgroundColor:i.custom.palette.green[500],opacity:1,border:0},"&.Mui-disabled + .MuiSwitch-track":{opacity:.5,color:i.custom.palette.input.disabled}},"&:focus-visible .MuiSwitch-thumb":{color:"#33cf4d",border:"6px solid #fff"},"&.Mui-disabled .MuiSwitch-thumb":{color:i.custom.palette.neutral[100]},"&.Mui-disabled + .MuiSwitch-track":{opacity:"light"===i.palette.mode?.7:.3}},"& .MuiSwitch-thumb":{width:"lg"===t?24:16,height:"lg"===t?24:16,boxSizing:"border-box",boxShadow:"none",backdropFilter:"blur(0)",filter:"drop-shadow(0 0 0 rgba(255, 255, 255, 0.52))",outline:("lg"===t?2:1)+"px solid rgba(255, 255, 255, 0.12)"},"& .MuiSwitch-track":{borderRadius:("lg"===t?30:20)/2,backgroundColor:i.custom.palette.icon.disabled,opacity:1,transition:i.transitions.create(["background-color"],{duration:500})}}));export{e as default};