Add fallback IE styles

Author: fritz-c

src/Styles.js

@@ -1,4 +1,5 @@
 const Radium = require('radium');
+const Util = require('./Util');
 const toolbarHeight = '50px';
 
 const closeWindowKeyframes = Radium.keyframes({
@@ -198,4 +199,37 @@ const styles = {
     },
 };
 
+// Use fallback styles for IE users
+if (Util.isIE()) {
+    styles.toolbar = {
+        backgroundColor : 'rgba(0, 0, 0, 0.5)',
+        position        : 'absolute',
+        left            : 0,
+        top             : 0,
+        right           : 0,
+        height          : toolbarHeight,
+    };
+
+    styles.toolbarSide = {
+        lineHeight : toolbarHeight,
+        position   : 'absolute',
+        top        : 0,
+        bottom     : 0,
+        margin     : 0,
+        maxWidth   : '48%',
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft  : '20px',
+        paddingRight : 0,
+        left         : 0,
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft  : 0,
+        paddingRight : '20px',
+        right        : 0,
+    };
+}
+
 module.exports = styles;

src/Util.js

@@ -0,0 +1,13 @@
+/**
+ * Checks if the user is using Internet Explorer
+ *
+ * @return {boolean} isIE - True if the user is on IE
+ */
+function isIE() {
+    var ua = window.navigator.userAgent;
+    return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
+}
+
+module.exports = {
+    isIE: isIE,
+};