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

90% Statements 9/10
57.14% Branches 4/7
100% Functions 1/1
90% Lines 9/10

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
    407x
    7x
    7x
    7x

    7x

    7x

    30x
    30x

    7x

     import styled, { css } from 'styled-components'
    import { borderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { getShadow } from '../_styles/shadows'
    import { Placement } from '../_utils/placement'

    export const popoverArrowSize = 6

    interface StyledPopoverProps {
      $fluid: boolean
      $placement: Placement
    }

    export const StyledPopoverContent = styled.span<Required<StyledPopoverProps>>`
      background-color: ${colors.white};
      border-radius: ${borderRadius.md}px;

      color: ${colors.gray15};
      display: inline-block;
      max-width: 250px;
      position: relative;

      ${({ $fluid }) => {
        Iif ($fluid) {
          return css`
            max-width: none;
          `
        }
      }}
    `

    export const StyledPopover = styled.div`
      display: inline-block;
      ${getShadow(3)}

      & + [data-overlay-arrow] {
        background: ${colors.white};
      }
    `