feat(modal, layout): Added default z index to Modal, and responsive f…

…lex values to Box
TaitoUnited · Oct 16, 2017 · 911189c · 911189c
1 parent 5567e8e
commit 911189c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/src/Layout.js b/src/Layout.js
@@ -5,6 +5,10 @@ import media from './media';
 
 const Box = styled.div`
   flex: ${props => props.flex || 'none'};
+  ${props => props.xs && media.phone`flex: ${props.xs};`}
+  ${props => props.sm && media.tablet`flex: ${props.sm};`}
+  ${props => props.md && media.desktop`flex: ${props.md};`}
+  ${props => props.lg && media.giant`flex: ${props.lg};`}
 
   @media print {
     ${props => props.noprint && 'display: none;'}

diff --git a/src/Modal.js b/src/Modal.js
@@ -30,11 +30,13 @@ class Modal extends PureComponent {
     disableBackdropAction: PropTypes.bool,
     contentStyles: PropTypes.object,
     backdropBg: PropTypes.string,
+    elevation: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     children: PropTypes.any,
   };
 
   static defaultProps = {
     contentStyles: {},
+    elevation: 9999,
   };
 
   componentWillReceiveProps(nextProps) {
@@ -58,16 +60,17 @@ class Modal extends PureComponent {
       contentStyles,
       children,
       backdropBg,
+      elevation,
     } = this.props;
 
     return (
       <Transition in={visible} timeout={DURATION} mountOnEnter unmountOnExit>
         {(state) => {
           const show = state === 'entered';
           const dir = animateFromBottom ? 1 : -1;
-          
+
           return (
-            <Wrapper>
+            <Wrapper elevation={elevation}>
               <Main visible={show} dir={dir} style={contentStyles}>
                 {children}
               </Main>
@@ -84,17 +87,6 @@ class Modal extends PureComponent {
   }
 }
 
-const Wrapper = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const Main = styled.div`
   opacity: ${props => props.visible ? 1 : 0};
   transform: translateY(${props => props.visible ? 0 : props.dir * 80}px);
@@ -121,4 +113,24 @@ const Backdrop = styled.div`
   z-index: 100;
 `;
 
+const Wrapper = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: ${props => props.elevation};
+
+  ${Main} {
+    z-index: ${props => props.elevation + 2};
+  }
+
+  ${Backdrop} {
+    z-index: ${props => props.elevation + 1};
+  }
+`;
+
 export default Modal;