diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/button.tsx')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/button.tsx | 49 |
1 files changed, 23 insertions, 26 deletions
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx index d3b36ebfd..ae032eb05 100644 --- a/packages/dev-tools-pages/ts/components/button.tsx +++ b/packages/dev-tools-pages/ts/components/button.tsx @@ -6,40 +6,37 @@ 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 - ? ` +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; - } + :hover, :focus { + background-color: ${props => props.theme.colors.secondary_alt}; + outline: 0; + } - ${media.small` + ${media.small` font-size: .875rem; padding: .5625rem 1.25rem; `} |