rez-table-listing-mui/src/listing/components/pagination/default/pagination.styles.ts

A rez table listing component built on TanStack Table

import { styled } from "@mui/material/styles";
import { Box, IconButton, Select, InputBase } from "@mui/material";

/* Root container */
export const PaginationContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(0.5),
  display: "flex",
  justifyContent: "flex-end",
  alignItems: "center",
  gap: theme.spacing(2),
  fontSize: theme.typography.pxToRem(14),
  backgroundColor: theme.palette.common.white,

  [theme.breakpoints.down("md")]: {
    justifyContent: "center",
    fontSize: theme.typography.pxToRem(12),
  },
}));

/* Hide go-to-page on <= 991px */
export const GoToPageContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",

  [theme.breakpoints.down("md")]: {
    display: "none",
  },
}));

/* Rows per page */
export const RowsPerPageContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",

  [theme.breakpoints.down("sm")]: {
    display: "none",
  },
}));

/* Records range */
export const RecordsRangeContainer = styled(Box)(({ theme }) => ({
  whiteSpace: "nowrap",
  fontSize: theme.typography.pxToRem(14),

  [theme.breakpoints.down("sm")]: {
    display: "none",
  },
}));

/* Page range */
export const PageRangeContainer = styled(Box)(({ theme }) => ({
  whiteSpace: "nowrap",
  fontSize: theme.typography.pxToRem(14),
}));

/* Buttons wrapper */
export const PaginationButtons = styled(Box)(({ theme }) => ({
  display: "flex",
  gap: theme.spacing(1),
}));

/* Pagination button */
export const PaginationButton = styled(IconButton)(({ theme }) => ({
  borderRadius: "50%",
  height: 24,
  width: 24,
  padding: 2,
  transition: "0.4s",

  "&:hover": {
    backgroundColor: theme.palette.grey[300],
    boxShadow: "0 1px 2px 0 rgba(60,64,67,.6), 0 1px 3px 1px rgba(60,64,67,.3)",
  },

  "&.Mui-disabled": {
    color: theme.palette.action.disabled,
  },

  [theme.breakpoints.down("sm")]: {
    height: 24,
    width: 24,
    padding: 0,

    "& svg": {
      width: 20,
      height: 20,
    },
  },
}));

/* Select (rows per page) */
export const RowsPerPageSelect = styled(Select)(({ theme }) => ({
  borderRadius: theme.shape.borderRadius,
  padding: theme.spacing(0),
  fontSize: theme.typography.pxToRem(12),

  "& .MuiSelect-select": {
    fontSize: theme.typography.pxToRem(12),
    padding: theme.spacing(0.5, 0.75),
  },
}));

/* Input for go-to-page */
export const GoToPageInput = styled(InputBase)(({ theme }) => ({
  width: 60,
  textAlign: "center",
  borderRadius: theme.shape.borderRadius,
  border: `1px solid ${theme.palette.divider}`,
  fontSize: theme.typography.pxToRem(12),

  "& .MuiInputBase-input": {
    fontSize: theme.typography.pxToRem(12),
    padding: theme.spacing(0.25, 0.75),
  },
}));