navigation styles combined in one file

src/navigation/ModalsContainerContext/ModalsContainerProvider.js

@@ -1,6 +1,6 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const ModalsContainerContext = require('./ModalsContainerContext');
-const styles = require('./styles');
 
 class ModalsContainerProvider extends React.Component {
     constructor(props) {
@@ -13,6 +13,7 @@ class ModalsContainerProvider extends React.Component {
 
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.modalsContainer !== this.state.modalsContainer ||
+            nextProps.modalsContainerClassName !== this.props.modalsContainerClassName ||
             nextProps.children !== this.props.children;
     }
 
@@ -24,10 +25,18 @@ class ModalsContainerProvider extends React.Component {
         return (
             <ModalsContainerContext.Provider value={this.state.modalsContainer}>
                 {this.state.modalsContainer instanceof HTMLElement ? this.props.children : null}
-                <div ref={this.modalsContainerRef} className={styles['modals-container']} />
+                <div ref={this.modalsContainerRef} className={this.props.modalsContainerClassName} />
             </ModalsContainerContext.Provider>
         );
     }
 }
 
+ModalsContainerProvider.propTypes = {
+    modalsContainerClassName: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
+};
+
 module.exports = ModalsContainerProvider;

src/navigation/ModalsContainerContext/styles.less

@@ -1,13 +0,0 @@
-.modals-container {
-    width: 0;
-    height: 0;
-
-    >* {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-    }
-}

src/navigation/Router/Route.js

@@ -9,7 +9,7 @@ const onModalsContainerDomTreeChange = ({ modalsContainerElement }) => {
 
 const Route = ({ children }) => (
     <div className={styles['route']}>
-        <ModalsContainerProvider>
+        <ModalsContainerProvider modalsContainerClassName={styles['modals-container']}>
             <FocusableProvider onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
                 <div className={styles['route-content']}>
                     {children}

src/navigation/Router/styles.less

@@ -5,12 +5,30 @@
     height: 100%;
     overflow: hidden;
 
-    .route-content {
-        width: 100%;
-        height: 100%;
-    }
-
     &:not(:last-child) {
         display: none;
     }
+
+    .route-content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 0;
+    }
+
+    .modals-container {
+        width: 0;
+        height: 0;
+
+        >* {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+        }
+    }
 }