diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 06:26:15 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 06:26:15 +0800 |
| commit | d941901e3281fdb2fd0f9a9b3b23947f05b1c56e (patch) | |
| tree | 01ca19c520ca2bc6de7eef6efde7f98d5df7eebd /packages/instant | |
| parent | eb3fda059a2d72ee9bfeb1bae39a3c4f6a724e99 (diff) | |
| download | dexon-sol-tools-d941901e3281fdb2fd0f9a9b3b23947f05b1c56e.tar.gz dexon-sol-tools-d941901e3281fdb2fd0f9a9b3b23947f05b1c56e.tar.zst dexon-sol-tools-d941901e3281fdb2fd0f9a9b3b23947f05b1c56e.zip | |
Hide X when small
Diffstat (limited to 'packages/instant')
| -rw-r--r-- | packages/instant/src/components/ui/container.tsx | 4 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 2 |
2 files changed, 3 insertions, 3 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index d276e0603..9ec875cf3 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -6,7 +6,7 @@ import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; export interface ContainerProps { - display?: string; + display?: MediaChoice; position?: string; top?: string; right?: string; @@ -45,7 +45,6 @@ export const Container = ` box-sizing: border-box; ${props => cssRuleIfExists(props, 'flex-grow')} - ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'top')} ${props => cssRuleIfExists(props, 'right')} @@ -68,6 +67,7 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => stylesForMedia('display', props.display || 'initial')} ${props => stylesForMedia('width', props.width || 'auto')} ${props => stylesForMedia('height', props.height || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 0fde995e0..7110ee70f 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -15,7 +15,7 @@ export interface OverlayProps { const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( <Flex height="100vh" className={className}> - <Container position="absolute" top="0px" right="0px"> + <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%' }}> |