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

100% Statements 19/19
95% Branches 19/20
100% Functions 2/2
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
    764x
    4x
    4x
    4x

    4x
    4x
    4x
    4x

    4x

    32x

    4x

    32x

    4x

    4x

    4x

    4x

    4x

    4x

    4x

     import styled, { CSSProperties } from 'styled-components'
    import { Modal } from '../../Modal/Modal'
    import { colors } from '../../_styles/colors'
    import { spacing } from '../../_styles/spacing'

    export const modalBodyHeight = 460
    const contentWidth = 632
    const sidebarWidth = 248
    export const modalWidth = contentWidth + sidebarWidth

    export const StyledModalOverlay = styled(Modal.Overlay)<{ $open: boolean }>`
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s linear;
      visibility: hidden;

      ${(props) =>
        props.$open &&
        `
      opacity: 1;
      pointer-events: all;
      visibility: visible;
      `}
    `

    // fix IE11 modal width
    export const StyledModalContainer = styled(Modal.Container).attrs(
      (props) =>
        ({
          style: { width: `${modalWidth}px` },
        } as CSSProperties)
    )``

    export const StyledModalBody = styled(Modal.Body)`
      height: ${modalBodyHeight}px;
      margin: 0;
      max-width: none;
      padding: 0;
      border-bottom: 1px solid ${colors.gray85};
    `

    export const StyledModalInnerBody = styled.div`
      display: flex;
      flex-direction: row;
      height: 100%;
      overflow: hidden;
    `

    export const StyledModalHeader = styled(Modal.Header)`
      border-bottom: 1px solid ${colors.gray85};
    `

    export const StyledModalContent = styled.div`
      display: flex;
      width: ${contentWidth}px;
      height: 100%;
      overflow-y: auto;
      outline: none;
    `

    export const StyledSource = styled.div`
      width: ${contentWidth}px;
      height: 100%;
    `

    export const StyledAttachButton = styled.div`
      margin-left: ${spacing.md}px;
    `

    export const StyledFileTreeSpinner = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
      height: ${modalBodyHeight}px;
    `