jobiqo-cl/lib/es/src/components/02-atoms/10-table/table-cell/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

const th = styled.th `
  background: ${props => props.theme.dataTable.head.backgroundColor};
  padding: ${props => props.theme.dataTable.head.th.padding};
  text-align: ${props => props.textAlign
    ? props.textAlign
    : props.theme.dataTable.body.td.textAlign};
  vertical-align: ${props => props.verticalAlign};
  text-transform: ${props => props.theme.dataTable.head.th.textTransform};
  font-size: ${props => props.theme.dataTable.head.th.fontSize};
  ${props => props.sticky
    ? `
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom-width: ${props.theme.dataTable.head.th.stickyBorderWidth};
    border-bottom-style: ${props.theme.dataTable.head.th.stickyBorderStyle};
    border-bottom-color: ${props.theme.dataTable.head.th.stickyBorderColor};
  `
    : null}
  ${props => props.stickyCol
    ? `
        left: 0;
        border-right-width: ${props.theme.dataTable.head.th.stickyBorderWidth};
        border-right-style: ${props.theme.dataTable.head.th.stickyBorderStyle};
        border-right-color: ${props.theme.dataTable.head.th.stickyBorderColor};
      `
    : null}

  ${props => props.theme.mediaQueries.smallRevert} {
    ${props => props.hideSm
    ? `
        display: none;
      `
    : null}
  }
`;
const td = styled.td `
  background: ${props => props.theme.dataTable.body.backgroundColor};
  padding: ${props => props.theme.dataTable.body.td.padding};
  text-align: ${props => props.textAlign
    ? props.textAlign
    : props.theme.dataTable.body.td.textAlign};
  vertical-align: ${props => props.verticalAlign};
  text-transform: ${props => props.theme.dataTable.body.td.textTransform};
  font-size: ${props => props.theme.dataTable.body.td.fontSize};
  ${props => props.sticky
    ? `
    position: sticky;
    left: 0;
    z-index: 10;
    border-right-width: ${props.theme.dataTable.head.th.stickyBorderWidth};
    border-right-style: ${props.theme.dataTable.head.th.stickyBorderStyle};
    border-right-color: ${props.theme.dataTable.head.th.stickyBorderColor};
  `
    : null}
  ${props => props.theme.mediaQueries.smallRevert} {
    ${props => props.hideSm
    ? `
        display: none;
      `
    : null}
  }
`;

export { td, th };