@fluent-windows/core/es/Table/Table.styled.js

React components that inspired by Microsoft's Fluent Design System.

const root = theme => ({
  position: 'relative',
  overflow: 'hidden',
  display: 'table',
  borderSpacing: 0,
  borderCollapse: 'collapse',
  boxShadow: theme.shadows[1]
});

const headRoot = {
  display: 'table-header-group'
};
const bodyRoot = {
  display: 'table-row-group'
};
const footRoot = {
  display: 'table-row-group'
};
const rowRoot = {
  display: 'table-row',
  color: 'inherit',
  outline: 'none',
  textAlign: 'inherit'
};

const rowBody = theme => ({
  '&:hover': {
    backgroundColor: theme.colors.standard.light2
  }
});

const cellRoot = theme => ({
  display: 'table-cell',
  padding: '14px 40px 14px 16px',
  verticalAlign: 'middle',
  fontSize: '0.875rem',
  fontWeight: 400,
  lineHeight: 1.5,
  letterSpacing: '0.015em',
  borderBottom: `1px solid ${theme.colors.standard.default}`
});

const headCellRoot = theme => ({
  display: 'table-cell',
  padding: '14px 40px 14px 16px',
  verticalAlign: 'middle',
  fontSize: '0.75rem',
  fontWeight: 500,
  lineHeight: 1.3,
  letterSpacing: '0.015em',
  borderBottom: `1px solid ${theme.colors.standard.default}`
});

const cellTextAlignLeft = {
  textAlign: 'left'
};
const cellTextAlignRight = {
  textAlign: 'right'
};
const cellTextAlignCenter = {
  textAlign: 'center'
};
const cellTextAlignJustify = {
  textAlign: 'justify'
};
export const styles = theme => ({
  root: root(theme),
  headRoot,
  bodyRoot,
  footRoot,
  rowRoot,
  rowBody: rowBody(theme),
  cellRoot: cellRoot(theme),
  headCellRoot: headCellRoot(theme),
  cellTextAlignLeft,
  cellTextAlignRight,
  cellTextAlignCenter,
  cellTextAlignJustify
});