diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-11-09 08:29:34 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-09 08:29:34 +0800 |
commit | 3eac119399d3e2729ce65f748d9fb31207ac2540 (patch) | |
tree | 558aa4bb76eae3418cf411fcfba089ef8edf19ef /packages/instant/src/components/ui/overlay.tsx | |
parent | 117e2f583ff44bdb63340a2134edea0f3ecb77b3 (diff) | |
parent | cd44470a29c48275e6a2a4bba42734d8f900d387 (diff) | |
download | dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.gz dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.zst dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.zip |
Merge pull request #1230 from 0xProject/feature/instant/dropdown-ui
[instant] Dropdown Component Skeleton
Diffstat (limited to 'packages/instant/src/components/ui/overlay.tsx')
-rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 31 |
1 files changed, 10 insertions, 21 deletions
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 8c9572615..c5f55f9c0 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -1,29 +1,17 @@ import * as _ from 'lodash'; -import * as React from 'react'; -import { ColorOption, overlayBlack, styled } from '../../style/theme'; - -import { Container } from './container'; -import { Flex } from './flex'; -import { Icon } from './icon'; +import { overlayBlack, styled } from '../../style/theme'; +import { zIndex } from '../../style/z_index'; export interface OverlayProps { - className?: string; - onClose?: () => void; zIndex?: number; + backgroundColor?: string; } -const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( - <Flex height="100vh" className={className}> - <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}> - <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> - </Container> - <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> - {children} - </Container> - </Flex> -); -export const Overlay = styled(PlainOverlay)` +export const Overlay = + styled.div < + OverlayProps > + ` && { position: fixed; top: 0; @@ -31,12 +19,13 @@ export const Overlay = styled(PlainOverlay)` bottom: 0; left: 0; z-index: ${props => props.zIndex} - background-color: ${overlayBlack}; + background-color: ${props => props.backgroundColor}; } `; Overlay.defaultProps = { - zIndex: 100, + zIndex: zIndex.overlayDefault, + backgroundColor: overlayBlack, }; Overlay.displayName = 'Overlay'; |