@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
93 lines • 3.01 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
export const StyledAccordion = styled(Accordion, {
shouldForwardProp: (prop) => prop !== 'bordered' && prop !== 'size',
})(({ theme, bordered, size }) => ({
...(bordered && {
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
'&:not(:last-child)': {
borderBottom: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
'&:not(:first-of-type)': {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
}),
'&:before': {
display: 'none',
},
'&.Mui-expanded': {
margin: 0,
},
boxShadow: 'none',
'&.Mui-disabled': {
backgroundColor: theme.palette.action.disabledBackground,
},
}));
export const StyledAccordionSummary = styled(AccordionSummary, {
shouldForwardProp: (prop) => prop !== 'size',
})(({ theme, size }) => {
const getPadding = () => {
switch (size) {
case 'small':
return theme.spacing(1, 2);
case 'large':
return theme.spacing(3, 3);
default:
return theme.spacing(2, 2.5);
}
};
return {
backgroundColor: theme.palette.background.default,
borderBottom: `1px solid ${theme.palette.divider}`,
minHeight: size === 'small' ? 48 : size === 'large' ? 72 : 56,
padding: getPadding(),
'&.Mui-expanded': {
minHeight: size === 'small' ? 48 : size === 'large' ? 72 : 56,
},
'& .MuiAccordionSummary-content': {
margin: 0,
'&.Mui-expanded': {
margin: 0,
},
},
'& .MuiAccordionSummary-expandIconWrapper': {
color: theme.palette.text.secondary,
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.short,
}),
'&.Mui-expanded': {
transform: 'rotate(180deg)',
},
},
'&:hover': {
backgroundColor: theme.palette.action.hover,
},
'&.Mui-focusVisible': {
backgroundColor: theme.palette.action.focus,
},
};
});
export const StyledAccordionDetails = styled(AccordionDetails, {
shouldForwardProp: (prop) => prop !== 'size',
})(({ theme, size }) => {
const getPadding = () => {
switch (size) {
case 'small':
return theme.spacing(1.5, 2);
case 'large':
return theme.spacing(3, 3);
default:
return theme.spacing(2, 2.5);
}
};
return {
padding: getPadding(),
borderTop: `1px solid ${theme.palette.divider}`,
backgroundColor: theme.palette.background.paper,
};
});
//# sourceMappingURL=Accordion.style.js.map