# All files / src/DropdownFlyout DropdownFlyout.styles.tsx

100% Statements 10/10
100% Branches 8/8
100% Functions 0/0
100% Lines 10/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
    40
    41
    42
    43
    44
    45
    46
    47
    483x
    3x
    3x
    3x
    3x
    3x

    3x

    3x

    3x

    3x

     import styled from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { arrowRight } from '../_styles/arrows'
    import { colors } from '../_styles/colors'
    import { getEllipsis } from '../_styles/mixins'
    import { spacing } from '../_styles/spacing'

    export const StyledDropdownFlyout = styled.div`
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      width: 100%;
      max-height: 855px;
      padding: ${spacing.sm}px 0;
    `

    export const StyledDropdownFlyoutItem = styled.div`
      display: flex;
      justify-content: space-between;

      cursor: pointer;

      width: 100%;
      padding: ${spacing.xs}px ${spacing.lg}px;
      color: ${colors.gray20};
      ${getTypographyIntent('body')}

      &[data-highlighted='true'],
      &:hover {
        background-color: ${colors.gray96};
      }
    `

    export const StyledDropdownFlyoutLabel = styled.span`
      ${getEllipsis()}
    `

    export const StyledDropdownFlyoutExpandIcon = styled.span`
      position: relative;
      display: inline-flex;
      align-self: center;
      flex-shrink: 0;
      margin-left: ${spacing.lg}px;
      white-space: nowrap;

      ${arrowRight(4, 'black')}
    `