adaptiv-ui/styled/components/Input.js

a library of styled components with some global style overrides in sass

import styled from "styled-components";
import { sideways, longways, boxSize, textMarg, textPad } from "../maps";
import PropTypes from "prop-types";

const Input = styled.input`
  color: ${props => (props.color ? props.color : "auto")};
  background: ${props => (props.bg ? props.bg : "white")};
  border-radius: ${props => (props.radius ? props.radius : "0.5rem")};
  padding: ${props => (props.p ? props.p : textPad)};
  margin: ${props => (props.m ? props.m : textMarg)};
  width: ${props => (props.w ? props.w : sideways)};
  height: ${props => (props.h ? props.h : longways)};
  box-sizing: ${props => (props.box_size ? props.box_size : boxSize)};
  border: ${props => (props.border ? props.border : `0.5px solid #C4C4C4`)};
`;

export default Input;

Input.propTypes = {
  // CUSTOM PROPTYPES
  radius: PropTypes.string,
  p: PropTypes.string,
  m: PropTypes.string,
  w: PropTypes.string,
  h: PropTypes.string,
  box_size: PropTypes.string,
};