# All files / Toast Toast.styled.ts

0% Statements 0/7
100% Branches 0/0
100% Functions 0/0
0% Lines 0/7

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 Box from '../Box'
    import { Placement } from './Toast.type'

    const baseSpace = 24
    const placement = variant({
      prop: 'placement',
      default: 'top',
      variants: {
        'top-start': css`
          top: ${baseSpace}px;
          left: ${baseSpace}px;
          right: auto;
        `,
        top: css`
          top: ${baseSpace}px;
          left: 50%;
          right: auto;
          transform: translateX(-50%);
        `,
        'top-end': css`
          top: ${baseSpace}px;
          left: auto;
          right: ${baseSpace}px;
        `,
        'bottom-start': css`
          bottom: ${baseSpace}px;
          left: ${baseSpace}px;
          right: auto;
        `,
        bottom: css`
          bottom: ${baseSpace}px;
          left: 50%;
          right: auto;
          transform: translateX(-50%);
        `,
        'bottom-end': css`
          bottom: ${baseSpace}px;
          left: auto;
          right: ${baseSpace}px;
        `,
        center: css`
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        `
      }
    })

    export const StyledToast = styled(Box)<{ placement: Placement }>`
      background-color: white;
      box-shadow: 0px 6.4px 14.4px 0px rgba(0, 0, 0, 0.132), 0px 1.2px 3.6px 0px rgba(0, 0, 0, 0.108);

      position: fixed;
      z-index: 1001;
      background-color: ${th.color('white.default')};
      box-shadow: ${th.shadow('3')};
      border-radius: 2px;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      ${placement}
    `

    export const StyledToastContainer = styled.div`
      padding: 8px 0;
      line-height: 1.5;
      flex: 1;
    `

    export const StyledToastActions = styled.div``