@wulperstudio/cms/organisms/TableAlter/styled.js

Wulper Studio Library Components CMS

import { styled, Table as MUITable, TableRow as MUITableRow, TableCell as MUITableCell } from '@mui/material';
export var Table = styled(MUITable)({
  borderSpacing: '0px 10px',
  background: '#F7F8FD',
  padding: '0px 5px',
  maxHeight: '100%',
  overflow: 'auto',
  position: 'relative'
});
export var TableRow = styled(MUITableRow)(function (_ref) {
  var selected = _ref.selected,
    theme = _ref.theme;
  return {
    borderBottom: 'none',
    borderRadius: '10px',
    cursor: 'pointer',
    position: 'relative',
    boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.10)',
    '&:hover': {
      boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)'
    },
    '& > td': {
      backgroundColor: selected ? theme.palette.primary.light : '#FFF'
    }
  };
});
export var HeaderTableRow = styled(MUITableRow)({
  borderBottom: 'none'
});
export var TableCell = styled(MUITableCell)({
  border: 'none',
  padding: '10px',
  minHeight: '64px',
  backgroundColor: '#FFF',
  position: 'relative',
  transition: 'background-color 600ms',
  '&:first-of-type': {
    borderRadius: '10px 0px 0px 10px'
  },
  '&:last-of-type': {
    borderRadius: '0px 10px 10px 0px'
  }
});
export var HeaderTableCell = styled(MUITableCell)({
  border: 'none',
  padding: '10px',
  background: '#F7F8FD'
});
export var WrapperTable = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'isLoading';
  }
})(function (_ref2) {
  var isLoading = _ref2.isLoading;
  return {
    width: '100%',
    maxWidth: '100%',
    height: '100%',
    maxHeight: '100%',
    overflow: isLoading ? 'hidden' : 'auto',
    paddingRight: isLoading ? '10px' : 0
  };
});