All files / components/Form/InlineInput StyledInlineInput.js

100% Statements 4/4
100% Branches 2/2
100% Functions 1/1
100% Lines 4/4

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                13x         13x                                               2x                                 13x      
import { bool } from 'prop-types';
import styled, { css } from 'styled-components';
import {
  getInlineInputCommonStyle,
  getInlineInputStyle,
} from '../formSelectors';
import { rem } from '../../Typography';
 
const propTypes = {
  invalid: bool.isRequired,
  submitting: bool.isRequired,
};
 
const StyledInlineInput = styled.input`
  -webkit-appearance: none;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  transition: 0.2s ease-in-out;
  transition-property: color, background-color, border;
  overflow: visible;
 
  vertical-align: middle;
  display: inline-block;
  border-radius: ${rem(6)};
  height: ${rem(40)};
  padding: 0 ${rem(10)};
  &:focus {
    outline: none;
  }
  &::placeholder {
    color: inherit;
  }
  ${({ theme, invalid, submitting }) => css`
    ${getInlineInputCommonStyle(theme)}
    ${getInlineInputStyle(theme, invalid, 'normal')}
    ${submitting && `padding-right : ${rem(36)};`}
    &:hover {
      ${getInlineInputStyle(theme, invalid, 'hover')}
    }
    &:focus {
      outline: none;
      ${getInlineInputStyle(theme, invalid, 'active')}
    }
    &:disabled {
      ${getInlineInputStyle(theme, invalid, 'disabled')}
    }
  `}
`;
 
StyledInlineInput.propTypes = propTypes;
 
export default StyledInlineInput;