diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-27 02:41:09 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-27 02:41:09 +0800 |
commit | a414dc9b83c14b277af90ce8397db3736a51a4d3 (patch) | |
tree | e9814de850892932b539c88e1798d44b00db563a /packages/instant/src/components/ui/container.tsx | |
parent | 951a5271e15cebb010281de3b8cbfb3972ecec83 (diff) | |
parent | 0f6307169604f36b0316f236eb96d6001b788f50 (diff) | |
download | dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.gz dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.bz2 dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.lz dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.xz dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.zst dexon-0x-contracts-a414dc9b83c14b277af90ce8397db3736a51a4d3.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/fixed-orders-in-render-method
Diffstat (limited to 'packages/instant/src/components/ui/container.tsx')
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 15 |
1 files changed, 8 insertions, 7 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 5e2218c68..76b570de7 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; - import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -11,6 +9,7 @@ export interface ContainerProps { bottom?: string; left?: string; width?: string; + height?: string; maxWidth?: string; margin?: string; marginTop?: string; @@ -27,14 +26,14 @@ export interface ContainerProps { backgroundColor?: ColorOption; hasBoxShadow?: boolean; zIndex?: number; + whiteSpace?: string; opacity?: number; } -const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => ( - <div className={className}>{children}</div> -); - -export const Container = styled(PlainContainer)` +export const Container = + styled.div < + ContainerProps > + ` box-sizing: border-box; ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} @@ -43,6 +42,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'bottom')} ${props => cssRuleIfExists(props, 'left')} ${props => cssRuleIfExists(props, 'width')} + ${props => cssRuleIfExists(props, 'height')} ${props => cssRuleIfExists(props, 'max-width')} ${props => cssRuleIfExists(props, 'margin')} ${props => cssRuleIfExists(props, 'margin-top')} @@ -55,6 +55,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'border-top')} ${props => cssRuleIfExists(props, 'border-bottom')} ${props => cssRuleIfExists(props, 'z-index')} + ${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'opacity')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; |