diff options
Diffstat (limited to 'packages/website/ts/components/ui/input.tsx')
-rw-r--r-- | packages/website/ts/components/ui/input.tsx | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e5f4f6c70..d21b9fd0e 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -8,6 +8,8 @@ export interface InputProps { width?: string; fontSize?: string; fontColor?: string; + border?: string; + padding?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -21,11 +23,13 @@ const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, pl export const Input = styled(PlainInput)` font-size: ${props => props.fontSize}; width: ${props => props.width}; - padding: 0.8em 1.2em; + padding: ${props => props.padding}; border-radius: 3px; + box-sizing: border-box; font-family: 'Roboto Mono'; color: ${props => props.fontColor}; - border: none; + border: ${props => props.border}; + outline: none; background-color: ${props => props.backgroundColor}; &::placeholder { color: ${props => props.placeholderColor}; @@ -38,6 +42,8 @@ Input.defaultProps = { fontColor: colors.darkestGrey, placeholderColor: colors.darkGrey, fontSize: '12px', + border: 'none', + padding: '0.8em 1.2em', }; Input.displayName = 'Input'; |