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

86.66% Statements 13/15
75% Branches 12/16
100% Functions 1/1
86.66% Lines 13/15

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
    692x
    2x
    2x
    2x
    2x

    2x

    1x
    1x

    2x

    2x

    2x

    2x

    2x

     import styled, { css } from 'styled-components'
    import { H1 } from '../Semantic/Semantic'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'
    import { ToolHeaderBadgeVariant } from './ToolHeader.types'

    export const StyledHeaderBadge = styled.div<{
      $variant: ToolHeaderBadgeVariant
    }>`
      ${getTypographyIntent('small')}
      border-radius: 10px;
      border-style: solid;
      border-width: 1px;
      display: inline-block;
      margin-bottom: ${spacing.sm}px;
      padding: 1px ${spacing.sm}px;

      ${({ $variant }) => {
        Iif ($variant) {
          Iif ($variant === 'trial') {
            return css`
              background-color: ${colors.purple50};
              border-color: ${colors.purple50};
              color: ${colors.white};
            `
          }
        }
      }}
    `

    // TODO in v12 remove cursor: pointer;
    export const StyledToolHeaderIconContainer = styled.div`
      color: ${colors.orange50};
      cursor: pointer;
      display: inline-flex;
      flex: 0 0 auto;
    `

    export const StyledHeaderTabs = styled.div`
      align-self: flex-end;
      flex: 1 1 auto;
      min-width: 100px;
      overflow: hidden;
    `

    export const StyledHeaderActions = styled.div`
      flex: 0 0 auto;
      margin-left: auto;
      padding-left: ${spacing.lg}px;
    `

    export const StyledToolHeaderTitle = styled(H1)`
      margin-right: ${spacing.xl}px;
      white-space: nowrap;
    `

    export const StyledToolHeader = styled.div`
      align-items: center;
      display: flex;
      min-height: 36px;
      width: 100%;

      ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},
      a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {
        margin-left: ${spacing.lg}px;
      }
    `