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

100% Statements 13/13
100% Branches 13/13
100% Functions 1/1
100% Lines 13/13

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
    10250x
    50x
    50x
    50x
    50x
    50x

    50x

    50x

    50x
    258x
    258x

    258x

    50x

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

    export const dataQa = {
      focused: 'core-input-focused',
      hovered: 'core-input-hovered',
    }

    const inputHeight = 36

    export function getInputStyles({
      error,
      variant,
    }: {
      error?: boolean
      variant?: 'error' | ''
    }) {
      return css`
        ${getTypographyIntent('body')}

        background-color: ${colors.white};
        border-color: ${colors.gray70};
        border-radius: ${borderRadius.md}px;
        border-style: solid;
        border-width: 1px;
        color: ${colors.gray15};
        display: block;
        font-family: inherit;
        height: ${inputHeight}px;
        width: 100%;

        &::placeholder {
          color: ${colors.gray45};
        }

        /* Firefox 19+ */
        &::-moz-placeholder {
          color: ${colors.gray45};
          opacity: 1;
        }

        ${!error &&
        css`
          &:hover,
          &[data-qa=${dataQa.hovered}] {
            border-color: ${colors.gray45};
          }
        `}

        &:focus,
        &[data-qa=${dataQa.focused}] {
          ${getFocus()}
        }

        &:disabled {
          background-color: ${colors.gray94};
          border-color: ${colors.gray70};
          color: ${colors.gray45};
          // Safari: fixes lighter color of disabled input text
          -webkit-text-fill-color: ${colors.gray45};
          opacity: 1;
        }

        ${(error || variant === 'error') &&
        css`
          border-color: ${colors.red50};
          background-color: ${colors.white};

          // TODO we can clean up these css vars when we convert Form to JSS
          border-color: var(--core-input-error-border-color, ${colors.red50});
          background-color: var(
            --core-input-error-background-color,
            ${colors.white}
          );
        `}
      `
    }

    export const StyledInput = styled.input`
      ${getInputStyles}

      padding: 0 ${spacing.md}px;

      &::-ms-clear {
        display: none;
      }

      &[type='number'] {
        -moz-appearance: textfield;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
    `