jobiqo-cl/lib/src/components/02-atoms/01-forms/03-input/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);

const Input = styled__default.input `
  box-sizing: border-box;
  background: ${props => props.theme.input.background};
  font-size: ${props => props.theme.input.fontSize};
  line-height: ${props => props.theme.input.lineHeight};
  margin: ${props => props.theme.input.margin};
  padding: ${props => props.theme.input.padding};
  border-radius: ${props => props.theme.input.borderRadius};
  border-width: ${props => props.theme.input.borderWidth};
  border-top-width: ${props => props.theme.input.borderTopWidth};
  border-left-width: ${props => props.theme.input.borderLeftWidth};
  border-right-width: ${props => props.theme.input.borderRightWidth};
  border-bottom-width: ${props => props.theme.input.borderBottomWidth};
  border-style: ${props => props.theme.input.borderStyle};
  border-color: ${props => props.error ? props.theme.colors.danger : props.theme.input.borderColor};
  max-width: ${props => props.theme.input.width};
  opacity: ${props => (props.disabled ? 0.5 : 1)};
  &:focus,
  &:active {
    outline: 0;
    border-color: ${props => props.theme.colors.focusRingColor};
    box-shadow: ${props => props.theme.input.focus.boxShadowType},
      ${props => `${props.theme.input.focus.boxShadowVals} ${props.theme.colors.focusRingColor}`};
  }
`;

exports.Input = Input;