aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Button.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx23
1 files changed, 15 insertions, 8 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 97c08ad21..94466d75d 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,6 @@ const Button =
ButtonProps >
`
font-family: inherit;
- font-size: ${props => (props.large ? '1rem' : '.875rem')};
line-height: 1;
font-weight: 500;
white-space: nowrap;
@@ -22,20 +21,28 @@ const Button =
color: ${colors.black};
border: 0;
border-radius: 5rem;
- 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;
+
+ ${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.colors.secondary_alt};
}
- ${props =>
- props.large &&
- media.small`
+
+ ${media.small`
font-size: .875rem;
- height: 2rem;
- padding: 0 1.25rem;
+ padding: .5625rem 1.25rem;
`}
`;