Merge branch 'feature/ie11-support' into develop

Author: erwstout

README.md

@@ -24,8 +24,8 @@ component.
 | Chrome >= 38     | ✅ | |
 | Edge >= 14       | ✅ | |
 | Firefox >= 16    | ✅‍ |  |
-| IE 11-10         | ⚠️ | Card flip back panel does not appear |
-| IE 9.0           | ❌ | Both sides of card appear at once |
+| IE 11-10         | ⚠️ | Animations are disabled for compatibility |
+| IE 9.0           | ❌ | No toggling of cards |
 | Opera >= 30      | ✅ | |
 | Safari >= 6.2.8  | ✅ | |
 | Safari 6.0.5     | ⚠️ | Card flip has no animation |

ReactCardFlipper.css

@@ -37,3 +37,30 @@
 .rcf-active .rcf-flipper {
   transform: rotateY(180deg);
 }
+
+/* IE Support for 11-10 */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rcf-active .rcf-back {
+    transform: rotateY(0deg);
+  }
+
+  .rcf-active .rcf-flipper {
+    transform: rotateY(0deg);
+  }
+
+  .rcf-active .rcf-front {
+    transform: rotateY(180deg);
+  }
+
+  .rcf-active .rcf-back {
+    transform: rotateY(0deg);
+  }
+
+  .rcf-front {
+    transform: rotateY(0deg);
+  }
+
+  .rcf-back {
+    transform: rotateY(-180deg);
+  }
+}

tests/tests.css

@@ -11,4 +11,5 @@
   border: 1px solid black;
   border-radius: 5px;
   box-shadow: 0px 0px 8px rgba(0,0,0, 0.3);
+  background-color: yellow;
 }