aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-06 09:19:37 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-06 09:19:37 +0800
commitecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0 (patch)
tree38c5a154d0e694565e0bed6142f3b54276482224 /packages/instant/src/components/ui
parente4f9ae6ad5a3d6040e4f8c9c8b7a4a05cf22fb51 (diff)
downloaddexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.gz
dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.tar.zst
dexon-0x-contracts-ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0.zip
wip: full display of mobile hard coded
Diffstat (limited to 'packages/instant/src/components/ui')
-rw-r--r--packages/instant/src/components/ui/container.tsx3
-rw-r--r--packages/instant/src/components/ui/flex.tsx2
-rw-r--r--packages/instant/src/components/ui/overlay.tsx4
3 files changed, 7 insertions, 2 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a0a187e5f..228085f51 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -33,13 +33,16 @@ export interface ContainerProps {
cursor?: string;
overflow?: string;
darkenOnHover?: boolean;
+ flexGrow?: string | number;
}
+// TODO Dont commit flex grow
export const Container =
styled.div <
ContainerProps >
`
box-sizing: border-box;
+ ${props => cssRuleIfExists(props, 'flex-grow')}
${props => cssRuleIfExists(props, 'display')}
${props => cssRuleIfExists(props, 'position')}
${props => cssRuleIfExists(props, 'top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 29c6511bb..57abd8b5b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -10,6 +10,7 @@ export interface FlexProps {
height?: string;
backgroundColor?: ColorOption;
inline?: boolean;
+ flexGrow?: number | string;
}
export const Flex =
@@ -19,6 +20,7 @@ export const Flex =
display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap};
+ ${props => cssRuleIfExists(props, 'flexGrow')}
justify-content: ${props => props.justify};
align-items: ${props => props.align};
${props => cssRuleIfExists(props, 'width')}
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..e930ffacd 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -14,11 +14,11 @@ export interface OverlayProps {
}
const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
- <Flex height="100vh" className={className}>
+ <Flex className={className}>
<Container position="absolute" top="0px" right="0px">
<Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
</Container>
- <div>{children}</div>
+ <Container height="100%">{children}</Container>
</Flex>
);
export const Overlay = styled(PlainOverlay)`