rez-table-listing-mui/src/components/table-settings/tabs/styles.ts

A rez table listing component built on TanStack Table

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

interface VerticalTabStyleProps {
  mainTabsContainer: SxProps<Theme>;
  mainTabContainer: SxProps<Theme>;
  mainTabLabel: SxProps<Theme>;
}

export const verticalTabStyles: VerticalTabStyleProps = {
  mainTabsContainer: {
    backgroundColor: "#FAFAF9",
    height: "100%",
    minWidth: "6.75rem",
    position: "sticky",
    top: "0",
    left: "0",

    "& .MuiTabs-indicator": {
      display: "none",
    },
  },

  mainTabContainer: {
    borderRadius: "0.375rem",
    padding: "0.5rem 1.25rem",
    alignItems: "flex-start",
    color: "rgba(14, 12, 11, 0.9)",
    textTransform: "initial",
    minHeight: "38px",

    "&.Mui-selected": {
      backgroundColor: "rgba(122, 90, 248, 0.16)",
      color: "#7A5AF8",
      borderRadius: "0.375rem",
    },
  },

  mainTabLabel: {},
};

interface HorizontalTabStyleProps {
  mainTabsContainer: SxProps<Theme>;
  mainTabContainer: SxProps<Theme>;
  mainTabLabel: SxProps<Theme>;
}

export const horizontalTabStyles: HorizontalTabStyleProps = {
  mainTabsContainer: {
    mb: 2,
    "& .MuiTab-root": {
      color: "#0E0C0BE5",
      textTransform: "none",
      fontWeight: 500,
    },
    "& .Mui-selected": {
      color: "#7A5AF8",
    },
    "& .MuiTabs-indicator": {
      backgroundColor: "#7A5AF8",
      height: 3,
    },
  },

  mainTabContainer: {},

  mainTabLabel: {},
};