diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 02:26:39 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 02:26:39 +0800 |
commit | a2bc62b17a773625220817c79265c017cb61979f (patch) | |
tree | 3c91f602b0d9e11c887920f498093490ced4903f /packages/instant/src/style | |
parent | f6487122d1ed3dea731adcb6a08165b44c887282 (diff) | |
download | dexon-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.ts | 19 |
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), +}; |