aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 17:33:41 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 17:33:41 +0800
commit45a24738b585d568c765b641a94e9bbf941a8fd7 (patch)
tree62a28d4b61efd0e13962777e6e16a911edb500bf /packages/dev-tools-pages
parent585ca203b02e902b3dd5141bcacd0ffc5740e0c1 (diff)
downloaddexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar.gz
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar.bz2
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar.lz
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar.xz
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.tar.zst
dexon-sol-tools-45a24738b585d568c765b641a94e9bbf941a8fd7.zip
Exports media breakpoints
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx35
1 files changed, 27 insertions, 8 deletions
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b1e0271d1..b23bb3e52 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,14 +1,33 @@
import { css } from 'styled-components';
const colors = {
- black: '#000000',
- white: '#FFFFFF',
- lightGray: '#F1F4F5',
- gray: '#F1F2F7',
- darkGray: '#E9ECED',
- blueGray: '#ECEFF9',
- },
+ black: '#000000',
+ white: '#FFFFFF',
+ lightGray: '#F1F4F5',
+ gray: '#F1F2F7',
+ darkGray: '#E9ECED',
+ blueGray: '#ECEFF9',
};
-export default variables;
+interface SizesInterface {
+ [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+ large: 992,
+ medium: 768,
+ small: 376,
+};
+
+const media = Object.keys(sizes).reduce((acc: any, label: string) => {
+ acc[label] = (args: any) => css`
+ @media (max-width: ${sizes[label] / 16}em) {
+ ${css(args)};
+ }
+ `;
+
+ return acc;
+}, {});
+
+export default media;
export { colors, media };