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

100% Statements 21/21
96.77% Branches 30/31
100% Functions 5/5
100% Lines 19/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
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    1215x
    5x
    5x
    5x
    5x

    5x

    5x

    5x

    46x
    46x

    46x
    46x

    46x
    46x

    46x
    46x

    46x

    5x

    5x

     import styled, { css } from 'styled-components'
    import { getTypographyIntent } from '../../Typography/Typography.styles'
    import { colors } from '../../_styles/colors'
    import { getEllipsis, getFocus } from '../../_styles/mixins'
    import { spacing } from '../../_styles/spacing'

    const sourceItemHeight = 48

    const focused = css`
      ${getFocus()}
      // compensate for border shift
      padding: 0 ${spacing.xl - 1}px 0 ${spacing.xxl - 1}px;
    `

    export const StyledSourceItem = styled.div<{
      selected: boolean
      error: boolean
      disabled: boolean
      focused: boolean
    }>`
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 ${spacing.xl}px 0 ${spacing.xxl}px;
      color: ${colors.gray45};
      ${getTypographyIntent('body')}
      cursor: pointer;
      height: ${sourceItemHeight}px;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 4px;
        height: 100%;
        background-color: ${colors.blue45};
        transform: scaleX(0);
        transform-origin: center left;
        transition: transform 200ms ease-out;
        // prevent a one-pixel gap between focused and selected source items due to the box-shadow
        z-index: 1;
      }

      ${({ selected }) =>
        selected &&
        `
        font-weight: 700;
        background-color: ${colors.blue96};
        color: ${colors.blue45};

        ${StyledIcon} {
          color: ${colors.blue50};
        }

        &:before {
          transform: scaleX(1);
        }
      `}

      ${({ error }) =>
        error &&
        css`
          color: ${colors.red50};

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

      ${({ disabled }) =>
        disabled &&
        `
        cursor: not-allowed;
        color: ${colors.gray70};
        ${StyledIcon} {
          color: ${colors.gray85};
        }
      `}

      ${({ selected, disabled, error }) =>
        !selected &&
        css`
          &:hover {
            transition: background-color 150ms ease-out 150ms, color 150ms ease-out;

            ${!disabled &&
            css`
              background-color: ${colors.gray96};
            `}

            ${!disabled &&
            !error &&
            css`
              color: ${colors.gray15};
            `}
          }
        `}

      ${(props) => props.focused && focused}

      &:focus {
        ${focused}
      }
    `

    export const StyledIcon = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 48px;
      height: 48px;
    `

    export const StyledLabel = styled.div`
      ${getEllipsis()}
    `