@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
95 lines (94 loc) • 3.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const styles_1 = require("@mui/material/styles");
const foundation_1 = tslib_1.__importDefault(require("./foundation"));
const utility_1 = require("./utility");
const muiSwitch = {
defaultProps: {
disableRipple: true,
focusVisibleClassName: '.Mui-focusVisible',
},
styleOverrides: {
root: {
width: 42,
height: 26,
padding: 0,
overflow: 'visible',
},
switchBase: {
padding: 0,
top: (0, utility_1.pxToRem)(9),
left: (0, utility_1.pxToRem)(9),
margin: 2,
transitionDuration: '300ms',
transform: 'translate(-9px, -9px)',
':hover': {
boxShadow: `0 0 0 8px ${foundation_1.default.palette.action.hover}`,
},
'&.Mui-checked': {
transform: 'translate(7px, -9px)',
color: '#fff',
':hover': {
boxShadow: `0 0 0 10px ${foundation_1.default.palette.primaryAction.hover}`,
},
'& + .MuiSwitch-track': {
backgroundColor: foundation_1.default.palette.primary,
opacity: 1,
border: 0,
},
'&.Mui-disabled + .MuiSwitch-track': {
opacity: 0.5,
},
},
'&.Mui-focusVisible': {
borderRadius: '100% ',
boxShadow: 'none',
},
'&.Mui-focusVisible .MuiSwitch-thumb': {
color: foundation_1.default.palette.mode === 'light'
? foundation_1.default.palette.grey[700]
: foundation_1.default.palette.primary,
border: `6px solid #fff`,
},
'&.Mui-focusVisible.Mui-checked .MuiSwitch-thumb': {
color: foundation_1.default.palette.primary.main,
border: `6px solid #fff`,
},
'&.MuiSwitch-colorError + .MuiSwitch-track': {
backgroundColor: foundation_1.default.palette.error.dark,
},
'&.MuiSwitch-colorError.Mui-focusVisible .MuiSwitch-thumb': {
color: foundation_1.default.palette.error.dark,
border: `6px solid #fff`,
},
'&.MuiSwitch-colorError:hover': {
boxShadow: `0 0 0 10px ${(0, styles_1.alpha)(foundation_1.default.palette.error.dark, 0.08)}`,
},
'&.Mui-disabled .MuiSwitch-thumb': {
color: foundation_1.default.palette.mode === 'light'
? foundation_1.default.palette.grey[100]
: foundation_1.default.palette.grey[600],
},
'&.Mui-disabled + .MuiSwitch-track': {
opacity: 0.2,
},
},
thumb: {
boxSizing: 'border-box',
width: 22,
height: 22,
},
track: {
borderRadius: 26 / 2,
backgroundColor: foundation_1.default.palette.mode === 'light'
? foundation_1.default.palette.grey[700]
: foundation_1.default.palette.primary,
opacity: 1,
transition: foundation_1.default.transitions.create(['background-color'], {
duration: 500,
}),
},
},
};
exports.default = muiSwitch;