diff options
author | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
commit | 31d07fdac80a2a546646b1eb232fa7dd6319ce83 (patch) | |
tree | cd2bbb781ea499f599c6b06d54270067c437c020 /packages/dev-tools-pages/ts/components/button.tsx | |
parent | 881655bb57e93fa1cf344585cda1653c995f1411 (diff) | |
download | dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.gz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.bz2 dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.lz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.xz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.zst dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.zip |
rename all files and directories to lowercase
Diffstat (limited to 'packages/dev-tools-pages/ts/components/button.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/button.tsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx new file mode 100644 index 000000000..d3b36ebfd --- /dev/null +++ b/packages/dev-tools-pages/ts/components/button.tsx @@ -0,0 +1,55 @@ +import styled from 'styled-components'; + +import { colors, media } from 'ts/variables'; + +interface ButtonProps { + large?: boolean; +} + +const Button = + styled.button < + ButtonProps > + ` + font-family: inherit; + line-height: 1; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + background-color: ${props => props.theme.colors.secondary}; + color: ${colors.black}; + border: 0; + border-radius: 5rem; + display: inline-flex; + justify-content: space-between; + align-items: center; + + ${props => + props.large + ? ` + font-size: 1rem; + padding: 1.1875rem 2.375rem 1.0625rem; + ` + : ` + font-size: .875rem; + padding: .5625rem 1.25rem; + `} + + :hover, :focus { + background-color: ${props => props.theme.colors.secondary_alt}; + outline: 0; + } + + ${media.small` + font-size: .875rem; + padding: .5625rem 1.25rem; + `} + + ${props => + props.large && + media.small` + font-size: 1rem; + padding: 1rem 1.5rem .75rem; + `} +`; + +export { Button }; |