aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/variables.tsx
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 17:33:41 +0800
committerAugust Skare <post@augustskare.no>2018-10-22 19:27:35 +0800
commite9232bf0707fb120d2c8d9cbd842702ffc8cb19e (patch)
tree23428cc70eaf116332f4fb561e28683d4308864b /packages/dev-tools-pages/ts/variables.tsx
parentee3538262d2d736168324a3f60a49cd87d65abb1 (diff)
downloaddexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar.gz
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar.bz2
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar.lz
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar.xz
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.tar.zst
dexon-sol-tools-e9232bf0707fb120d2c8d9cbd842702ffc8cb19e.zip
Exports media breakpoints
Diffstat (limited to 'packages/dev-tools-pages/ts/variables.tsx')
-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 };