diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-08 13:38:54 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-08 13:38:54 +0800 |
commit | ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18 (patch) | |
tree | b2abb75073906c511854e6ab95be2e8ed5a035b2 /packages/instant/src/components/ui/button.tsx | |
parent | f7642c06f0d5662c955ec36e1549d63445a74056 (diff) | |
download | dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar.gz dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar.bz2 dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar.lz dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar.xz dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.tar.zst dexon-sol-tools-ecb92a44bc5a4b433f2a673fc77199c7b8a6dc18.zip |
feat: create PaymentMethodDropdown
Diffstat (limited to 'packages/instant/src/components/ui/button.tsx')
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 62 |
1 files changed, 38 insertions, 24 deletions
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 5274d835b..61a0f23a8 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -6,6 +6,8 @@ import { ColorOption, styled } from '../../style/theme'; export interface ButtonProps { backgroundColor?: ColorOption; borderColor?: ColorOption; + fontColor?: ColorOption; + fontSize?: string; width?: string; padding?: string; type?: string; @@ -24,38 +26,50 @@ const darkenOnHoverAmount = 0.1; const darkenOnActiveAmount = 0.2; const saturateOnFocusAmount = 0.2; export const Button = styled(PlainButton)` - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: 3px; - outline: none; - width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; - &:hover { - background-color: ${props => - !props.isDisabled - ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) - : ''} !important; - } - &:active { - background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + && { + all: initial; + box-sizing: border-box; + font-size: ${props => props.fontSize}; + font-family: 'Inter UI', sans-serif; + font-weight: 600; + color: ${props => props.fontColor && props.theme[props.fontColor]}; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; + transition: background-color, opacity 0.5s ease; + padding: ${props => props.padding}; + border-radius: 3px; + text-align: center; + outline: none; + width: ${props => props.width}; + background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled + ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) + : ''} !important; + } + &:active { + background-color: ${props => + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => + saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + } } `; Button.defaultProps = { backgroundColor: ColorOption.primaryColor, borderColor: ColorOption.primaryColor, + fontColor: ColorOption.white, width: 'auto', isDisabled: false, - padding: '1em 2.2em', + padding: '.6em 1.2em', + fontSize: '15px', }; Button.displayName = 'Button'; |