aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-30 15:39:24 +0800
committerAugust Skare <post@augustskare.no>2018-10-30 15:39:24 +0800
commit4616d6f59d19c108b9f50c6fd07401475992dfa2 (patch)
treed18961ffd5d97548039ac0f46ee3cb68f3785eb8 /packages/dev-tools-pages/ts/components
parent5cb944fe1b92c1d9f886faa247297115abbfd463 (diff)
downloaddexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar.gz
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar.bz2
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar.lz
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar.xz
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.tar.zst
dexon-sol-tools-4616d6f59d19c108b9f50c6fd07401475992dfa2.zip
button tweaks
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-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;
`}
`;