diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-09 03:04:16 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-09 03:04:16 +0800 |
commit | c27194a35783d966b27deeb1654a077b8c1ba1c8 (patch) | |
tree | 2b1deb57dcddf1c52bb7155836971be52d0b9fa3 /packages/instant/src/style | |
parent | 6d5f65b77ede962b96ca59f30df1679a8216bd06 (diff) | |
parent | adcfe51190c8ca5cd4d11e49eb7e100c80fbd16c (diff) | |
download | dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar.gz dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar.bz2 dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar.lz dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar.xz dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.tar.zst dexon-0x-contracts-c27194a35783d966b27deeb1654a077b8c1ba1c8.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/prevent-css-leakage
Diffstat (limited to 'packages/instant/src/style')
-rw-r--r-- | packages/instant/src/style/media.ts | 43 |
1 files changed, 43 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..beabbac46 --- /dev/null +++ b/packages/instant/src/style/media.ts @@ -0,0 +1,43 @@ +import { InterpolationValue } from 'styled-components'; + +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)}; + } +`; + +const media = { + small: generateMediaWrapper(ScreenWidths.Sm), + medium: generateMediaWrapper(ScreenWidths.Md), + large: generateMediaWrapper(ScreenWidths.Lg), +}; + +export interface ScreenSpecifications { + default: string; + sm?: string; + md?: string; + lg?: string; +} +export type MediaChoice = string | ScreenSpecifications; +export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { + if (typeof choice === 'string') { + return css` + ${cssPropertyName}: ${choice}; + `; + } + + return css` + ${cssPropertyName}: ${choice.default}; + ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} + ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} + ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} + `; +}; |