aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/style
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 02:26:39 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 02:26:39 +0800
commita2bc62b17a773625220817c79265c017cb61979f (patch)
tree3c91f602b0d9e11c887920f498093490ced4903f /packages/instant/src/style
parentf6487122d1ed3dea731adcb6a08165b44c887282 (diff)
downloaddexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.gz
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.tar.zst
dexon-sol-tools-a2bc62b17a773625220817c79265c017cb61979f.zip
feat(instant): when on mobile, show mobile specific styling that takes up whole screen
Diffstat (limited to 'packages/instant/src/style')
-rw-r--r--packages/instant/src/style/media.ts19
1 files changed, 19 insertions, 0 deletions
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
new file mode 100644
index 000000000..fa7571077
--- /dev/null
+++ b/packages/instant/src/style/media.ts
@@ -0,0 +1,19 @@
+import { css } from './theme';
+
+export enum ScreenWidths {
+ Sm = 40,
+ Md = 52,
+ Lg = 64,
+}
+
+const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+ @media (max-width: ${screenWidth}em) {
+ ${css.apply(css, args)};
+ }
+`;
+
+export const media = {
+ small: generateMediaWrapper(ScreenWidths.Sm),
+ medium: generateMediaWrapper(ScreenWidths.Md),
+ large: generateMediaWrapper(ScreenWidths.Lg),
+};