diff options
Diffstat (limited to 'packages/website/ts/@next/components/modals/input.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/modals/input.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index eee2d4102..351df105b 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -22,11 +22,12 @@ interface LabelProps { export const Input = React.forwardRef((props: InputProps, ref) => { const { name, label, type } = props; const id = `input-${name}`; + const componentType = type === 'textarea' ? 'textarea' : 'input'; return ( <InputWrapper {...props}> <Label htmlFor={id}>{label}</Label> - <StyledInput ref={ref} id={id} placeholder={label} {...props} /> + <StyledInput as={componentType} ref={ref} id={id} placeholder={label} {...props} /> </InputWrapper> ); }); @@ -41,12 +42,13 @@ const StyledInput = styled.input` border: 1px solid #D5D5D5; color: #000; font-size: 1.294117647rem; - padding: 16px 15px; + padding: 16px 15px 14px; outline: none; width: 100%; + min-height: ${props => props.type === 'textarea' && `120px`}; &::placeholder { - color: #9D9D9D; + color: #C3C3C3; } `; @@ -54,6 +56,11 @@ const InputWrapper = styled.div<InputProps>` position: relative; flex-grow: ${props => props.width === InputWidth.Full && 1}; width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`}; + + @media (max-width: 768px) { + width: 100%; + margin-bottom: 30px; + } `; const Label = styled.label` |