From 7ae38906926dc09bc10670c361af0d2bf0050426 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 19 Jan 2019 18:42:04 +0800 Subject: Update dependency packages --- packages/instant/src/style/media.ts | 51 ------------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 packages/instant/src/style/media.ts (limited to 'packages/instant/src/style/media.ts') 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 { - default: T; - sm?: T; - md?: T; - lg?: T; -} -export type OptionallyScreenSpecific = T | ScreenSpecification; -export type MediaChoice = OptionallyScreenSpecific; -/** - * Given a css property name and a OptionallyScreenSpecific value, - * generates css properties with screen-specific viewport styling - */ -export function stylesForMedia( - cssPropertyName: string, - choice: OptionallyScreenSpecific, -): 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}; - `; - } -} -- cgit v1.2.3