aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/style/media.ts
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 05:56:29 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-07 05:56:29 +0800
commit88c7d907fa97f7918b82df8c1759b43c28c7273b (patch)
tree069e7a34f22ca084b3ea85011d2bc144cf7c7ea0 /packages/instant/src/style/media.ts
parente8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 (diff)
downloaddexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.gz
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.bz2
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.lz
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.xz
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.zst
dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.zip
better function definiton
Diffstat (limited to 'packages/instant/src/style/media.ts')
-rw-r--r--packages/instant/src/style/media.ts23
1 files changed, 9 insertions, 14 deletions
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 84b85a2a8..4bcbd608f 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -28,22 +28,17 @@ export interface ScreenSpecifications {
lg?: string;
}
export type MediaChoice = string | ScreenSpecifications;
-// TODO: handle string too
-export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
- let res: InterpolationValue[];
+export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
if (typeof choice === 'string') {
- res = css`
- width: ${choice};
- `;
- } else {
- res = css`
- width: ${choice.default};
- ${choice.lg && media.large`width: ${choice.lg}`}
- ${choice.md && media.medium`width: ${choice.md}`}
- ${choice.sm && media.small`width: ${choice.sm}`}
+ return css`
+ ${cssPropertyName}: ${choice};
`;
}
- console.log(res.toString());
- return res;
+ 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}`}
+ `;
};