@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
113 lines • 3.42 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Modal, Paper, Box } from '@mui/material';
export const StyledModal = styled(Modal, {
shouldForwardProp: (prop) => prop !== 'centered',
})(({ theme, centered }) => ({
display: 'flex',
alignItems: centered ? 'center' : 'flex-start',
justifyContent: 'center',
padding: theme.spacing(2),
'& .MuiBackdrop-root': {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
backdropFilter: 'blur(4px)',
},
}));
export const ModalContent = styled(Paper, {
shouldForwardProp: (prop) => prop !== 'size' && prop !== 'maxWidth',
})(({ theme, size, maxWidth }) => {
const getSizeStyles = () => {
switch (size) {
case 'small':
return {
maxWidth: '400px',
width: '100%',
};
case 'medium':
return {
maxWidth: '600px',
width: '100%',
};
case 'large':
return {
maxWidth: '900px',
width: '100%',
};
case 'fullWidth':
return {
maxWidth: '95vw',
width: '100%',
};
default:
return {
maxWidth: '600px',
width: '100%',
};
}
};
return {
position: 'relative',
borderRadius: `calc(${theme.shape.borderRadius}px * 2)`,
outline: 'none',
maxHeight: '90vh',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
...(maxWidth && {
maxWidth: typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`,
}),
...(!maxWidth && getSizeStyles()),
// Animation
transform: 'scale(0.8)',
transition: theme.transitions.create([
'transform',
'opacity',
], {
duration: theme.transitions.duration.short,
}),
'&.MuiModal-root .MuiBackdrop-root': {
opacity: 0,
},
// When modal is open
'.MuiModal-root[aria-hidden="false"] &': {
transform: 'scale(1)',
},
};
});
export const ModalHeader = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(2, 3),
borderBottom: `1px solid ${theme.palette.divider}`,
minHeight: '64px',
'& .MuiTypography-root': {
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.text.primary,
},
'& .MuiIconButton-root': {
color: theme.palette.text.secondary,
'&:hover': {
backgroundColor: theme.palette.action.hover,
},
},
}));
export const ModalBody = styled(Box)(({ theme }) => ({
padding: theme.spacing(3),
overflowY: 'auto',
flex: 1,
'&::-webkit-scrollbar': {
width: '8px',
},
'&::-webkit-scrollbar-track': {
backgroundColor: theme.palette.action.hover,
borderRadius: '4px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.action.selected,
borderRadius: '4px',
'&:hover': {
backgroundColor: theme.palette.action.focus,
},
},
}));
//# sourceMappingURL=Modal.style.js.map