All files / src/components/common/Accordion Accordion.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// mui
import { palette } from "@palette";
import { styled } from "@mui/material/styles";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordionSummary, {
  AccordionSummaryProps,
} from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
 
export const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(() => ({
  backgroundColor: "inherit",
  "&.MuiAccordion-root:before": {
    display: "none",
  },
}));
 
export const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    expandIcon={
      <ArrowForwardIosSharpIcon
        sx={{ fontSize: "0.9rem", color: palette.neutral[800] }}
      />
    }
    {...props}
  />
))(() => ({
  padding: 0,
  backgroundColor: "inherit",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiButton-root.CustomIconButton": {
    padding: 0,
    border: "none",
    boxShadow: "none",
    backgroundColor: "inherit",
 
    "&:active": {
      boxShadow:
        "inset -4px -4px 9px rgba(255, 255, 255, 0.88), inset 4px 4px 14px #C1D5EE",
    },
  },
  "& .CustomIconButton.MuiButton-sizeSmall": {
    width: "auto",
    height: "auto",
  },
}));
 
export const AccordionDetails = styled(MuiAccordionDetails)(() => ({
  padding: "8px 0 16px",
  backgroundColor: "inherit",
}));