rez-table-listing-mui/src/components/filter/style.ts

A rez table listing component built on TanStack Table

import { SxProps, Theme } from "@mui/material";

interface StyleProps {
  filterContainer: SxProps<Theme>;
  filterMainHeader: SxProps<Theme>;
  filterMainComponentWrapper: SxProps<Theme>;
  filterAttributeMainSelect: SxProps<Theme>;
  scrollbarCustom: SxProps<Theme>;
}

interface filterFormStyleType {
  formEditModeStyle: SxProps<Theme>;
  formFlexContainer: SxProps<Theme>;
  formListItem: SxProps<Theme>;
  formListItemHeader: SxProps<Theme>;
  formListItemHeaderName: SxProps<Theme>;
  formListItemHeaderDropdown: SxProps<Theme>;
}

export const filterStyles: StyleProps = {
  scrollbarCustom: {
    overflowY: "auto",
    pr: 1,

    "&::-webkit-scrollbar": {
      width: "4px",
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: "#999",
      borderRadius: "4px",
    },
    "&::-webkit-scrollbar-track": {
      backgroundColor: "#f0f0f0",
    },
  },

  filterContainer: {
    backgroundColor: "#fff",
    height: "100%",
    overflowY: "hidden",
    boxShadow: "0px 3px 8px 0px rgba(34, 48, 62, 0.10)",
    borderRadius: "0.5rem",
  },

  filterMainHeader: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    bgcolor: "#EEEEEE",
    height: "50px",
    px: 2,
    borderBottom: "1px solid #ccc",
    mx: "auto",
  },

  filterMainComponentWrapper: {
    height: "calc(100% - 90px)",
    overflowY: "auto",
  },

  filterAttributeMainSelect: {
    "& .MuiOutlinedInput-root": {
      borderRadius: "6px",
      fontSize: "14px",
      bgcolor: "#fafafa",
      "& fieldset": {
        borderColor: "#7a5af8 !important",
      },
      "&:hover fieldset": {
        borderColor: "#7a5af8 !important",
      },
      "&.Mui-focused fieldset": {
        borderColor: "#7a5af8 !important",
        boxShadow: "none",
      },
    },
    "& .MuiSelect-select": {
      padding: "8px 14px",
    },
  },
};

export const filterFormStyles: filterFormStyleType = {
  formEditModeStyle: {
    border: "1px solid #c5c5c5",
    borderRadius: "6px",
    padding: "5px 10px 10px 10px",
  },

  formFlexContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem",
  },

  formListItem: {
    p: 1,
    borderRadius: 2,
    backgroundColor: "#FAFAFA",
    display: "flex",
    flexDirection: "column",
    gap: 0.5,
  },

  formListItemHeader: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    gap: 2,
  },

  formListItemHeaderName: {
    fontWeight: 500,
    fontSize: "13px",
    color: "#797877",
  },

  formListItemHeaderDropdown: {
    fontSize: "13px",
    minWidth: 50,
    border: "none",
    boxShadow: "none",
  },
};