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

100% Statements 25/25
95.45% Branches 21/22
100% Functions 3/3
100% Lines 24/24

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
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    1118x
    8x
    8x
    8x
    8x

    8x
    8x
    8x
    8x

    8x
    8x
    8x

    8x

    12x

    8x

    8x

    3x
    3x

    8x

    8x

    8x

    8x

    61x
    61x

     import styled, { css } from 'styled-components'
    import { Input } from '../Input/Input'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const addonRootFontSize = '14px'
    export const addonRootFontFamily = 'inherit'
    export const addonRootPadding = spacing.sm
    export const inputDefaultXPadding = spacing.md

    const incrementerWidth = 24
    const inputBgColor = colors.white
    const inputBorder = `${colors.gray70} solid 1px`

    const StyledRootAddon = styled.span<{ disabled: boolean }>`
      display: inline-flex;
      align-items: center;
      height: 100%;
      position: absolute;
      top: 0;
      color: ${({ disabled }) => (disabled ? colors.gray70 : colors.gray45)};
      ${getTypographyIntent('body')};
    `

    export const StyledPrefix = styled(StyledRootAddon)`
      left: ${spacing.md}px;
    `

    export const StyledSuffix = styled(StyledRootAddon)<{
      withIncrementer: boolean
    }>`
      right: ${({ withIncrementer }) =>
        withIncrementer ? spacing.md + incrementerWidth : spacing.md}px;
    `

    export const StyledIncrementerWrapper = styled.div`
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 1px;
      right: 1px;
      height: 100%;
    `

    export const StyledIncrementerButton = styled.button`
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: ${incrementerWidth}px;
      height: calc(50% - 1px);
      border: none;
      border-radius: 0px;
      outline: none;
      background-color: ${inputBgColor};
      padding: 0;
      cursor: pointer;

      &:first-child,
      &:last-child {
        border-left: ${inputBorder};

        &:disabled {
          border-color: ${colors.gray70};
          background-color: ${colors.gray94};
        }
      }

      &:first-child {
        border-top-right-radius: 2px;
      }

      &:last-child {
        border-top: ${inputBorder};
        border-bottom-right-radius: 2px;
      }

      svg {
        fill: ${colors.gray45};
      }

      &:hover {
        svg {
          fill: ${colors.gray10};
        }
      }

      &:disabled {
        cursor: default;

        svg {
          fill: ${colors.gray70};
        }
      }
    `

    export const StyledInput = styled(Input)``

    export const StyledWrapper = styled.div<{
      hasIncrementer: boolean
    }>`
      position: relative;
      ${({ hasIncrementer }) =>
        hasIncrementer &&
        css`
          ${StyledInput} {
            padding-right: ${spacing.md + incrementerWidth}px;
          }
        `}
    `