diff options
author | August Skare <post@augustskare.no> | 2018-10-29 16:15:20 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-29 16:15:20 +0800 |
commit | 0e3cd82348570ed4c524d3b4f216001089f49125 (patch) | |
tree | 645aee17a391fb0c70f8db6bdc6c14ea5d04fa82 /packages/dev-tools-pages/ts/components/Button.tsx | |
parent | 3d4041ecd3d9384853514ea0cebc445e630b106e (diff) | |
download | dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.gz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.bz2 dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.lz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.xz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.zst dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.zip |
Fixes/august (#12)
* fix button dimensions
* fix footer hover color
* breakout in trace component
* fix padding on button on small screens
* fix title with content on small screens
* sizing adjustment in intro component
* intro component adjustments
* container size adjustments
* meta og images
* fixed gutter size
* trace component fix + breakout fix
* show copy button if touch device
* responsive hero animation
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Button.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Button.tsx | 15 |
1 files changed, 10 insertions, 5 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index 65f1fce74..97c08ad21 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -13,7 +13,8 @@ const Button = ButtonProps > ` font-family: inherit; - font-size: ${props => (props.large ? '1.125rem' : '.875rem')}; + font-size: ${props => (props.large ? '1rem' : '.875rem')}; + line-height: 1; font-weight: 500; white-space: nowrap; vertical-align: middle; @@ -21,16 +22,20 @@ const Button = color: ${colors.black}; border: 0; border-radius: 5rem; - padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; - display: inline-block; + height: ${props => (props.large ? '3.25rem' : '2rem')}; + padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')}; + display: inline-flex; + justify-content: space-between; + align-items: center; :hover, :focus { background-color: ${props => props.colors.secondary_alt}; } ${props => props.large && media.small` - font-size: 1rem; - padding: .875rem 1.5rem; + font-size: .875rem; + height: 2rem; + padding: 0 1.25rem; `} `; |