@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
132 lines • 3.9 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Checkbox, 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 StyledCheckbox = styled(Checkbox)(({ theme }) => ({
padding: theme.spacing(1),
borderRadius: theme.shape.borderRadius,
'&:hover': {
backgroundColor: 'transparent',
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.action.hover}`,
borderRadius: '50%',
},
},
'& .MuiSvgIcon-root': {
fontSize: '1.5rem',
transition: theme.transitions.create([
'color',
'box-shadow',
], {
duration: theme.transitions.duration.short,
}),
},
'&.MuiCheckbox-indeterminate': {
'& .MuiSvgIcon-root': {
color: theme.palette.primary.main,
},
},
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.primary.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
},
},
},
'&.Mui-disabled': {
'& .MuiSvgIcon-root': {
color: theme.palette.action.disabled,
},
},
// Size variants
'&.MuiCheckbox-sizeSmall': {
padding: theme.spacing(0.5),
'& .MuiSvgIcon-root': {
fontSize: '1.25rem',
},
},
// Color variants
'&.MuiCheckbox-colorSecondary': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.secondary.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.secondary.main}20`,
},
},
},
},
'&.MuiCheckbox-colorSuccess': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.success.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.success.main}20`,
},
},
},
},
'&.MuiCheckbox-colorWarning': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.warning.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.warning.main}20`,
},
},
},
},
'&.MuiCheckbox-colorError': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.error.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.error.main}20`,
},
},
},
},
'&.MuiCheckbox-colorInfo': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.info.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.info.main}20`,
},
},
},
},
}));
//# sourceMappingURL=Checkbox.style.js.map