From bf7443c985f2b26458586ece6661dd3e13215b79 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 22 Oct 2018 09:02:59 +0200 Subject: button styling on small screens --- packages/dev-tools-pages/ts/components/Button.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'packages/dev-tools-pages/ts/components/Button.tsx') diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index 2d0fbc353..eae6aaf54 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components'; import { colors } from '../variables'; +import { media } from 'ts/variables'; import { withContext, Props } from './withContext'; interface ButtonProps extends Props { @@ -22,6 +23,12 @@ const Button = border-radius: 5rem; padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; display: inline-block; + ${props => + props.large && + media.small` + font-size: 1rem; + padding: .875rem 1.5rem; + `} `; export default withContext(Button); -- cgit v1.2.3