@muvehealth/fixins/dist/elements/MSInputWrapper/index.js.flow

Component library for Muvehealth

// @flow
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import { themeGet } from 'styled-system'
import Flex from '../Flex'
import { shouldForwardProp } from '../../utils'

const MSInputWrapper = styled(Flex, { shouldForwardProp })(
  {
    borderRadius: 6,
    cursor: 'pointer',
    outline: 'none',
    '&:focus': {
      border: '1px solid #E6E7E8',
    },
    'fieldset[disabled] &': {
      cursor: 'default',
    },
  },
  props => ({
    backgroundColor: themeGet('colors.inputGray', '#F0F0F0')(props),
    '&:focus': {
      backgroundColor: themeGet('colors.white', '#FFFFFF')(props),
    },
  }),
)

export default withProps({
  alignItems: 'center',
  justifyContent: 'flex-start',
  flexDirection: 'row',
  flexWrap: 'wrap',
  flex: '1 1 auto',
  border: 0,
  width: '100%',
  height: 40,
  py: 2,
  px: 2,
})(MSInputWrapper)