aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/sandbox.tsx5
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx3
-rw-r--r--packages/instant/src/style/media.ts23
3 files changed, 22 insertions, 9 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
index 04e4c7935..b574fd35c 100644
--- a/packages/instant/src/components/sandbox.tsx
+++ b/packages/instant/src/components/sandbox.tsx
@@ -3,11 +3,6 @@ import * as React from 'react';
import { MediaChoice, stylesForMedia } from '../style/media';
import { styled } from '../style/theme';
-// export const Sandbox: React.StatelessComponent<{}> = props => {
-// return <div>Hi</div>;
-// };
-
-// TODO: handle string too
interface SandboxProps {
width: MediaChoice;
}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 8fd4d56c3..c60a9c40e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
public render(): React.ReactNode {
return (
<Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
- <Sandbox width={{ sm: '10px' }}>Test</Sandbox>
+ {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
+ <Sandbox width="100px">Test</Sandbox>
<Container zIndex={zIndex.errorPopup} position="relative">
<LatestError />
</Container>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5a0cba668..84b85a2a8 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -21,12 +21,29 @@ export const media = {
};
/// media helper
-export interface MediaChoice {
- sm: string;
+export interface ScreenSpecifications {
+ default: string;
+ sm?: string;
md?: string;
lg?: string;
}
+export type MediaChoice = string | ScreenSpecifications;
// TODO: handle string too
export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
- return media.small`width: ${choice.sm}`;
+ let res: 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}`}
+ `;
+ }
+
+ console.log(res.toString());
+ return res;
};