do correct import for IE CSS fixes

jessepollak · Nov 8, 2014 · a273ef8 · a273ef8
1 parent bf8dc21
commit a273ef8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/lib/css/card.css b/lib/css/card.css
@@ -4,34 +4,34 @@
   background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(115deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
   background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); }
 
-.card.ie-10.flipped {
+.card.ie-10.flipped, .card.ie-11.flipped {
   -webkit-transform: 0deg;
   -ms-transform: 0deg;
   transform: 0deg; }
-  .card.ie-10.flipped .front {
+  .card.ie-10.flipped .front, .card.ie-11.flipped .front {
     -webkit-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg);
     transform: rotateY(0deg); }
-  .card.ie-10.flipped .back {
+  .card.ie-10.flipped .back, .card.ie-11.flipped .back {
     -webkit-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg);
     transform: rotateY(0deg); }
-    .card.ie-10.flipped .back:after {
+    .card.ie-10.flipped .back:after, .card.ie-11.flipped .back:after {
       left: 18%; }
-    .card.ie-10.flipped .back .cvc {
+    .card.ie-10.flipped .back .cvc, .card.ie-11.flipped .back .cvc {
       -webkit-transform: rotateY(180deg);
       -ms-transform: rotateY(180deg);
       transform: rotateY(180deg);
       left: 5%; }
-    .card.ie-10.flipped .back .shiny {
+    .card.ie-10.flipped .back .shiny, .card.ie-11.flipped .back .shiny {
       left: 84%; }
-      .card.ie-10.flipped .back .shiny:after {
+      .card.ie-10.flipped .back .shiny:after, .card.ie-11.flipped .back .shiny:after {
         left: -480%;
         -webkit-transform: rotateY(180deg);
         -ms-transform: rotateY(180deg);
         transform: rotateY(180deg); }
 
-.card.ie-10.amex .back {
+.card.ie-10.amex .back, .card.ie-11.amex .back {
   display: none; }
 
 .card-logo {

diff --git a/lib/js/card.js b/lib/js/card.js
@@ -676,7 +676,10 @@ Card = (function() {
       }
     }
     if (new Function("/*@cc_on return @_jscript_version; @*/")()) {
-      return this.$card.addClass('ie-10');
+      this.$card.addClass('ie-10');
+    }
+    if (/rv:11.0/i.test(navigator.userAgent)) {
+      return this.$card.addClass('ie-11');
     }
   };
 

diff --git a/src/scss/card.scss b/src/scss/card.scss
@@ -3,7 +3,7 @@
 
 // browser specific hacks
 @import "browsers/safari";
-@import "browsers/ie-10";
+@import "browsers/ie";
 
 @import "cards/amex";
 @import "cards/discover";