Add styles for IE<10 (no flexbox)

Author: fritz-c

src/react-image-lightbox.js

@@ -11,6 +11,7 @@ import {
     getWindowWidth,
     getWindowHeight,
     isInIframe,
+    getIEVersion,
 } from './util';
 import {
     KEYS,
@@ -21,7 +22,18 @@ import {
     WHEEL_MOVE_Y_THRESHOLD,
     ZOOM_BUTTON_INCREMENT_SIZE,
 } from './constant';
-import styles from './style.scss';
+import baseStyles from './style.scss';
+
+// Add fallback classes for browsers without flexbox support
+let styles = baseStyles;
+if (getIEVersion() < 10) {
+    styles = {
+        ...styles,
+        toolbarSide:      `${styles.toolbarSide} ${styles.toolbarSideNoFlex}`,
+        toolbarLeftSide:  `${styles.toolbarLeftSide} ${styles.toolbarLeftSideNoFlex}`,
+        toolbarRightSide: `${styles.toolbarRightSide} ${styles.toolbarRightSideNoFlex}`,
+    };
+}
 
 class ReactImageLightbox extends Component {
     constructor(props) {

src/style.scss

@@ -111,6 +111,15 @@ $toolbarHeight: 50px;
     margin: 0;
 }
 
+.toolbarSideNoFlex {
+    height: auto;
+    line-height: $toolbarHeight;
+    max-width: 48%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+
 .toolbarLeftSide {
     padding-left: 20px;
     padding-right: 0;
@@ -119,12 +128,21 @@ $toolbarHeight: 50px;
     text-overflow: ellipsis;
 }
 
+.toolbarLeftSideNoFlex {
+    left: 0;
+    overflow: visible;
+}
+
 .toolbarRightSide {
     padding-left: 0;
     padding-right: 20px;
     flex: 0 0 auto;
 }
 
+.toolbarRightSideNoFlex {
+    right: 0;
+}
+
 .toolbarItem {
     display: inline-block;
     line-height: $toolbarHeight;
@@ -181,36 +199,3 @@ $toolbarHeight: 50px;
 .outerAnimating {
     animation-name: closeWindow;
 }
-
-// // Use fallback styles for browsers without flexbox support
-// if (Util.getIEVersion() < 10) {
-//     styles.toolbar = {
-//         background-color: rgba(0, 0, 0, 0.5);
-//         position       : absolute;
-//         left           : 0;
-//         top            : 0;
-//         right          : 0;
-//         height         : $toolbarHeight;
-//     };
-
-//     styles.toolbarSide = {
-//         line-height: $toolbarHeight;
-//         position  : absolute;
-//         top       : 0;
-//         bottom    : 0;
-//         margin    : 0;
-//         max-width  : 48%;
-//     };
-
-//     styles.toolbarLeftSide = {
-//         padding-left: 20px;
-//         padding-right: 0;
-//         left: 0;
-//     };
-
-//     styles.toolbarRightSide = {
-//         padding-left: 0;
-//         padding-right: 20px;
-//         right: 0;
-//     };
-// }