arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Added button styles

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-23 14:01:30 +02:00
parent 3fb4699172
commit 8b6cd23c26
1 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/js/components/Button/index.js
View File

@ -13,26 +13,71 @@ const Wrapper = styled.button`
background: ${colors.GREEN_PRIMARY}; background: ${colors.GREEN_PRIMARY};
color: ${colors.WHITE}; color: ${colors.WHITE};
border: 0; border: 0;
&:hover { &:hover {
background: ${colors.GREEN_SECONDARY}; background: ${colors.GREEN_SECONDARY};
} }
&:active { &:active {
background: ${colors.GREEN_TERTIARY}; background: ${colors.GREEN_TERTIARY};
} }
${props => props.disabled && css` ${props => props.disabled && css`
pointer-events: none; pointer-events: none;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};
`} `}
${props => props.blue && css`
background: transparent;
border: 1px solid ${colors.INFO_PRIMARY};
color: ${colors.INFO_PRIMARY};
padding: 12px 58px;
&:hover {
color: ${colors.WHITE};
background: ${colors.INFO_PRIMARY};
}
`}
${props => props.white && css`
background: @color_white;
color: ${colors.TEXT_SECONDARY};
border: 1px solid ${colors.DIVIDER};
&:hover {
color: ${colors.TEXT_PRIMARY};
border-color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};
}
&:active {
color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};
}
`}
${props => props.transparent && css`
background: transparent;
border: 0px;
color: ${colors.TEXT_SECONDARY};
&:hover,
&:active {
color: ${colors.TEXT_PRIMARY};
background: transparent;
}
`}
`; `;
const Button = ({ const Button = ({
text, onClick, disabled, blue, white, text, onClick, disabled, blue, white, transparent,
}) => ( }) => (
<Wrapper <Wrapper
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled}
blue={blue} blue={blue}
transparent={transparent}
white={white} white={white}
>{text} >{text}
</Wrapper> </Wrapper>
@ -42,6 +87,7 @@ Button.propTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
disabled: PropTypes.bool, disabled: PropTypes.bool,
blue: PropTypes.bool, blue: PropTypes.bool,
transparent: PropTypes.bool,
white: PropTypes.bool, white: PropTypes.bool,
text: PropTypes.string.isRequired, text: PropTypes.string.isRequired,
}; };