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

100% Statements 16/16
100% Branches 20/20
100% Functions 4/4
100% Lines 14/14

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
    6613x
    13x

    13x
    13x

    13x

    13x

    13x

    13x

    131x
    131x

    131x
    131x

    131x
    131x

     import styled, { css } from 'styled-components'
    import {
      getTypographyIntent,
      typographyWeights,
    } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'
    import { BreadcrumbCrumbProps } from './Breadcrumbs.types'

    export const StyledContainer = styled.nav`
      color: ${colors.gray50};
      display: flex;
      align-items: center;

      a,
      a:hover {
        display: inline-flex;
        text-decoration: none;
      }
    `

    export const StyledList = styled.ol`
      display: flex;
      margin: 0;
      padding-left: 0;
    `

    export const StyledSeparator = styled.div`
      align-items: center;
      display: inline-flex;
      justify-content: center;
      margin: 0px ${spacing.xs}px;
    `

    export const StyledCrumb = styled.li<BreadcrumbCrumbProps>`
      ${getTypographyIntent('body')}

      align-items:center;
      color: ${colors.gray45};
      display: inline-flex;
      min-height: 24px;
      text-decoration: none;

      &:hover {
        cursor: ${({ active }) => (active ? 'default' : 'pointer')};
        text-decoration: ${({ active }) => (active ? 'none' : 'underline')};
      }

      > a {
        color: ${colors.gray45};
        ${({ active }) =>
          active &&
          css`
            color: ${colors.gray15};
            font-weight: ${typographyWeights.semibold};
          `}
      }

      ${({ active }) =>
        active &&
        css`
          color: ${colors.gray15};
          font-weight: ${typographyWeights.semibold};
        `}
    `