/
Input.js
44 lines (37 loc) · 836 Bytes
/
Input.js
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
import styled from 'styled-components'
import {borderColor, color, space, fontSize, width, propTypes} from 'styled-system'
import {colors} from './theme'
/** @component */
export const Input = styled.input`
appearance: none;
border: thin solid;
outline: none;
border-radius: 6px;
&:hover {
border-color: ${colors.grays[3]};
}
&:focus {
border-color: ${colors.grays[7]};
}
${borderColor}
${color}
${fontSize}
${space}
${width}
`
Input.displayName = 'gatsby-ui.Input'
Input.defaultProps = {
bg: 'transparent',
borderColor: 'grays.1',
p: 2,
fontSize: 2
}
Input.propTypes = {
as: propTypes.numberOrString,
bg: propTypes.responsive,
borderColor: propTypes.responsive,
color: propTypes.responsive,
fontSize: propTypes.responsive,
width: propTypes.responsive,
...space.propTypes
}