# All files / src/Tree Tree.styles.ts

100% Statements 25/25
96.66% Branches 29/30
100% Functions 5/5
100% Lines 21/21

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
    1065x
    5x
    5x
    5x
    5x

    5x

    5x

    5x

    34x

    34x
    34x

    34x
    34x

    5x

    5x

    5x

    5x

    5x

    34x

    5x

    16x

     import { ChevronRight } from '@procore/core-icons/dist'
    import styled from 'styled-components'
    import { Box } from '../Box/Box'
    import { Typography } from '../Typography/Typography'
    import { colors } from '../_styles/colors'

    export const StyledFilenameCaption = styled(Typography)`
      display: flex;
      width: 100%;
    `

    export const StyledTree = styled.div`
      width: 100%;
      height: 100%;
      min-height: 36px;
      outline: none;
      overflow: auto;
    `

    export const StyledTreeRowContainer = styled(Typography)<{
      isHighlighted: boolean
      isSelectable: boolean
      isSelected: boolean
    }>`
      display: flex;
      align-items: center;
      height: 36px;
      background: transparent;
      box-shadow: inset 4px 0px 0px transparent;
      cursor: default;
      outline: none;

      ${({ isSelectable }) => (isSelectable ? 'cursor: pointer;' : '')}

      &:hover {
        background: ${colors.gray98};
      }

      ${({ isHighlighted }) =>
        isHighlighted ? `background: ${colors.gray98};` : ''}

      ${({ isSelected, isHighlighted }) =>
        isSelected &&
        `
          background: ${colors.blue96};
          box-shadow: inset 4px 0px 0px ${colors.blue50};

          ${StyledFilenameCaption} {
            color: ${colors.blue40};
            font-weight: 600;
          }

          &:hover {
            background-color: ${colors.blue94};
            ${StyledFilenameCaption} {
              color: ${colors.blue45};
            }
          }

          ${
            isHighlighted &&
            `
              background-color: ${colors.blue94};
              ${StyledFilenameCaption} {
                color: ${colors.blue45};
              }
            `
          }
        `}
    `

    export const StyledTreeRowContent = styled.div`
      display: flex;
      align-items: center;
    `

    export const StyledTreeRowWrapper = styled.div`
      outline: none;
    `

    const StyledIconBase = styled(Box)`
      display: flex;
      justify-content: center;
      align-items: center;

      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
    `

    export const StyledChevronContainer = styled(StyledIconBase)``

    export const StyledIconContainer = styled(StyledIconBase)<{
      $isSelected?: boolean
    }>`
      color: ${({ $isSelected }) => ($isSelected ? colors.blue45 : colors.gray40)};
    `

    export const StyledChevron = styled(ChevronRight)<{
      $isExpanded?: boolean
    }>`
      transform: rotate(${({ $isExpanded }) => ($isExpanded ? 90 : 0)}deg);
      transition: transform 150ms ease-out;
    `