diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-04 06:48:15 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-04 06:48:15 +0800 |
commit | 7086bd32ee23f0931be26194eb28af8178f858eb (patch) | |
tree | 53764373a8228b00d88939fdecc6f6a1ae633c9e /packages/instant/src/components/ui/container.tsx | |
parent | 50bfbda79a312651581f03614c1b4f4cbbe49cf1 (diff) | |
parent | 50df67e7511460f051f91785bb4384485077ef60 (diff) | |
download | dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar.gz dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar.bz2 dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar.lz dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar.xz dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.tar.zst dexon-sol-tools-7086bd32ee23f0931be26194eb28af8178f858eb.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/website/instant-configurator
Diffstat (limited to 'packages/instant/src/components/ui/container.tsx')
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 4dafe1386..636eb8fc9 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -27,7 +27,9 @@ export interface ContainerProps { borderBottom?: string; className?: string; backgroundColor?: ColorOption; + rawBackgroundColor?: string; hasBoxShadow?: boolean; + isHidden?: boolean; zIndex?: number; whiteSpace?: string; opacity?: number; @@ -38,6 +40,16 @@ export interface ContainerProps { flexGrow?: string | number; } +const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgroundColor?: string): string => { + if (backgroundColor) { + return theme[backgroundColor] as string; + } + if (rawBackgroundColor) { + return rawBackgroundColor; + } + return 'none'; +}; + export const Container = styled.div < ContainerProps > @@ -65,12 +77,14 @@ export const Container = ${props => cssRuleIfExists(props, 'opacity')} ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} + ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')}; ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; ${props => props.display && stylesForMedia<string>('display', props.display)} ${props => props.width && stylesForMedia<string>('width', props.width)} ${props => props.height && stylesForMedia<string>('height', props.height)} ${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)} - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + ${props => (props.isHidden ? 'visibility: hidden;' : '')} + background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; &:hover { ${props => |