# All files / Table Table.styled.ts

0% Statements 0/10
0% Branches 0/2
0% Functions 0/1
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74

     import { styled, th, variant, css } from '../styles/styled'
    import { TextAlign } from './Table.type'

    export const StyledTableWrapper = styled.table`
      position: relative;
      overflow: hidden;
      display: table;
      border-spacing: 0;
      border-collapse: collapse;
      box-shadow: ${th.shadow('1')};
    `

    export const StyledTableHeadWrapper = styled.thead`
      display: table-header-group;
    `
    export const StyledTableBodyWrapper = styled.tbody`
      display: table-row-group;
    `
    export const StyledTableFooterWrapper = styled.tfoot`
      display: table-row-group;
    `
    export const StyledTableRowWrapper = styled.tr<{ isBodyRow: boolean }>`
      display: table-row;
      color: inherit;
      outline: none;
      &:hover {
        background-color: ${({ isBodyRow }): string => isBodyRow && th.color('standard.light2')};
      }
    `

    const textAlign = variant({
      prop: 'textAlign',
      default: 'inherit',
      variants: {
        inherit: css`
          text-align: inherit;
        `,
        left: css`
          text-align: left;
        `,
        center: css`
          text-align: center;
        `,
        right: css`
          text-align: right;
        `,
        justify: css`
          text-align: justify;
        `
      }
    })
    export const StyledTableHeadCellWrapper = styled.th<{ textAlign: TextAlign }>`
      display: table-cell;
      padding: 14px 40px 14px 16px;
      vertical-align: middle;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: 0.015em;
      border-bottom: 1px solid ${th.color('standard.default')};
      ${textAlign}
    `
    export const StyledTableCellWrapper = styled.td<{ textAlign: TextAlign }>`
      display: table-cell;
      padding: 14px 40px 14px 16px;
      vertical-align: middle;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.015em;
      border-bottom: 1px solid ${th.color('standard.default')};
      ${textAlign}
    `