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.tsx52
1 files changed, 52 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
new file mode 100644
index 000000000..ae032eb05
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+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
+ ? `
+ 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;
+ }
+
+ ${media.small`
+ font-size: .875rem;
+ padding: .5625rem 1.25rem;
+ `}
+
+ ${props =>
+ props.large &&
+ media.small`
+ font-size: 1rem;
+ padding: 1rem 1.5rem .75rem;
+ `}
+`;
+
+export { Button };