arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-13 01:20:59 +00:00
Code Issues Releases Wiki Activity

Adjust input color and height

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-26 16:53:40 +02:00
parent 62a73b6404
commit 65cb289ebf
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/inputs/Input/index.js
View File

@ -7,6 +7,7 @@ import Icon from 'components/Icon';
import { import {
FONT_SIZE, FONT_SIZE,
FONT_WEIGHT, FONT_WEIGHT,
FONT_FAMILY,
TRANSITION, TRANSITION,
} from 'config/variables'; } from 'config/variables';
@ -28,18 +29,19 @@ const InputIconWrapper = styled.div`
`; `;
const TopLabel = styled.span` const TopLabel = styled.span`
padding-bottom: 4px; padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
const StyledInput = styled.input` const StyledInput = styled.input`
width: 100%; width: 100%;
height: 40px;
padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
line-height: 1.42857143; line-height: 1.42857143;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
font-weight: ${FONT_WEIGHT.BASE}; font-weight: ${FONT_WEIGHT.BASE};
color: ${colors.TEXT_PRIMARY}; color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
border-radius: 2px; border-radius: 2px;
${props => props.hasAddon && css` ${props => props.hasAddon && css`
@ -61,6 +63,7 @@ const StyledInput = styled.input`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: absolute; position: absolute;
left: auto; left: auto;
top: 3px;
right: 10px; right: 10px;
`; `;
@ -116,6 +119,7 @@ class Input extends Component {
innerRef={this.props.innerRef} innerRef={this.props.innerRef}
hasAddon={!!this.props.sideAddons} hasAddon={!!this.props.sideAddons}
type={this.props.type} type={this.props.type}
color={this.getColor(this.props.state)}
placeholder={this.props.placeholder} placeholder={this.props.placeholder}
autoComplete={this.props.autoComplete} autoComplete={this.props.autoComplete}
autoCorrect={this.props.autoCorrect} autoCorrect={this.props.autoCorrect}