@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
103 lines • 3.68 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Switch, FormControl } from '@mui/material';
export const StyledFormControl = styled(FormControl)(({ theme }) => ({
'& .MuiFormControlLabel-root': {
marginLeft: 0,
marginRight: 0,
'& .MuiFormControlLabel-label': {
color: theme.palette.text.primary,
fontSize: theme.typography.body1.fontSize,
'&.Mui-disabled': {
color: theme.palette.text.disabled,
},
},
},
'& .MuiFormHelperText-root': {
marginTop: theme.spacing(0.5),
marginLeft: 0,
fontSize: theme.typography.caption.fontSize,
'&.Mui-error': {
color: theme.palette.error.main,
},
},
}));
export const StyledSwitch = styled(Switch)(({ theme }) => ({
width: 58,
height: 38,
padding: 7,
'& .MuiSwitch-switchBase': {
margin: 1,
padding: 0,
transform: 'translateX(6px)',
'&.Mui-checked': {
color: '#fff',
transform: 'translateX(22px)',
'& .MuiSwitch-thumb:before': {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent('#fff')}" d="m8.229 14.062-3.521-3.541L5.75 9.479l2.479 2.459 6.021-6L15.292 7Z"/></svg>')`,
},
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.main,
},
},
},
'& .MuiSwitch-thumb': {
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[300] : '#fff',
width: 32,
height: 32,
'&:before': {
content: "''",
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(theme.palette.text.disabled)}" d="M6.5 10.5 8 12l6-6-1.5-1.5L8 9l-1.5-1.5Z"/></svg>')`,
},
},
'& .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400],
borderRadius: 20 / 2,
},
// Size variants
'&.MuiSwitch-sizeSmall': {
width: 48,
height: 28,
padding: 4,
'& .MuiSwitch-switchBase': {
transform: 'translateX(4px)',
'&.Mui-checked': {
transform: 'translateX(16px)',
},
},
'& .MuiSwitch-thumb': {
width: 20,
height: 20,
},
},
// Color variants
'&.MuiSwitch-colorSuccess': {
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: theme.palette.success.main,
},
},
'&.MuiSwitch-colorWarning': {
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: theme.palette.warning.main,
},
},
'&.MuiSwitch-colorError': {
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: theme.palette.error.main,
},
},
'&.MuiSwitch-colorInfo': {
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: theme.palette.info.main,
},
},
}));
//# sourceMappingURL=Switch.style.js.map