# All files / src/FileSelect/ThumbnailList ThumbnailList.styles.ts

65% Statements 13/20
63.15% Branches 12/19
0% Functions 0/3
68.42% Lines 13/19

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
    683x
    3x
    3x
    3x
    3x
    3x
    3x

    3x

    3x

    3x

    3x

    3x

    3x
     import { FixedSizeList as List } from 'react-window'
    import styled from 'styled-components'
    import { Button } from '../../Button/Button'
    import { Thumbnail } from '../../Thumbnail/Thumbnail'
    import { getTypographyIntent } from '../../Typography/Typography.styles'
    import { colors } from '../../_styles/colors'
    import { spacing } from '../../_styles/spacing'

    export const StyledThumbnailListContainer = styled.div`
      display: flex;
      flex-direction: column;
      align-items: stretch;
      outline: none;
    `

    export const StyledThumbnailList = styled(List)`
      outline: none;
    `

    export const StyledThumbnail = styled(Thumbnail)`
      flex-grow: 1;
      justify-content: flex-start;
    `

    export const StyledProgress = styled.div`
      width: 146px;
      padding: 0 ${spacing.lg}px 0 ${spacing.xl}px;
      margin-left: auto;
    `

    export const StyledThumbnailListItem = styled.div<{
      focused: boolean
      error: boolean
    }>`
      display: flex;
      flex-grow: 1;
      align-items: center;
      padding: ${spacing.sm}px ${spacing.lg}px ${spacing.sm}px ${spacing.sm}px;
      ${getTypographyIntent('body')}

      ${({ error }) =>
        !error &&
        `
          &:hover {
            background-color: ${colors.gray96};
          }
        `}

      ${({ focused, error }) =>
        focused &&
        !error &&
        `
          background-color: ${colors.gray96};
        `}

      ${({ error }) =>
        error &&
        `
          background-color: ${colors.red98};

          ${StyledProgress} {
            color: ${colors.red50};
          }
        `}
    `

    export const StyledDeleteIcon = styled(Button)``