diff options
author | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
---|---|---|
committer | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
commit | 7ae38906926dc09bc10670c361af0d2bf0050426 (patch) | |
tree | 5fb10ae366b987db09e4ddb4bc3ba0f75404ad08 /packages/instant/src/style/media.ts | |
parent | b5fd3c72a08aaa6957917d74c333387a16edf66b (diff) | |
download | dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.gz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.bz2 dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.lz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.xz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.zst dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.zip |
Update dependency packages
Diffstat (limited to 'packages/instant/src/style/media.ts')
-rw-r--r-- | packages/instant/src/style/media.ts | 51 |
1 files changed, 0 insertions, 51 deletions
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts deleted file mode 100644 index bbf376694..000000000 --- a/packages/instant/src/style/media.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { InterpolationValue } from 'styled-components'; - -import { css } from './theme'; - -export enum ScreenWidths { - Sm = 40, - Md = 52, - Lg = 64, -} - -export 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), -}; - -export interface ScreenSpecification<T> { - default: T; - sm?: T; - md?: T; - lg?: T; -} -export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>; -export type MediaChoice = OptionallyScreenSpecific<string>; -/** - * Given a css property name and a OptionallyScreenSpecific value, - * generates css properties with screen-specific viewport styling - */ -export function stylesForMedia<T extends string | number>( - cssPropertyName: string, - choice: OptionallyScreenSpecific<T>, -): InterpolationValue[] { - if (typeof choice === 'object') { - 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}`} - `; - } else { - return css` - ${cssPropertyName}: ${choice}; - `; - } -} |