diff --git a/src/custom/StyledAccordion/StyledAccordion.tsx b/src/custom/StyledAccordion/StyledAccordion.tsx new file mode 100644 index 00000000..e2e057a2 --- /dev/null +++ b/src/custom/StyledAccordion/StyledAccordion.tsx @@ -0,0 +1,28 @@ +import { styled } from '@mui/material/styles'; +import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; +import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary'; + +export const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({ + border: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, + '&:not(:last-child)': { + borderBottom: 0, + }, + '&:before': { + display: 'none', + }, + '&.Mui-expanded': { + margin: 'auto', + }, +})); + +export const StyledAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)', + borderBottom: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, + marginBottom: -1, + minHeight: 56, + '& .MuiAccordionSummary-content': { + '&.Mui-expanded': { + margin: '12px 0', + }, + }, +})); diff --git a/src/custom/StyledAccordion/index.ts b/src/custom/StyledAccordion/index.ts new file mode 100644 index 00000000..2dd6d088 --- /dev/null +++ b/src/custom/StyledAccordion/index.ts @@ -0,0 +1 @@ +export * from './StyledAccordion'; \ No newline at end of file diff --git a/src/custom/index.ts b/src/custom/index.ts index 3f1fda87..cc11f7ac 100644 --- a/src/custom/index.ts +++ b/src/custom/index.ts @@ -3,3 +3,4 @@ export * from './CustomTooltip'; export * from './HelperTextPopover'; export * from './Markdown'; export * from './Modal'; +export * from './StyledAccordion'; \ No newline at end of file