Merge pull request #233 from sigod/ie9-styles

fix styles for IE9: add -ms-transform

style/helpers.scss

@@ -48,6 +48,7 @@
 @mixin transform($args...) {
   -webkit-transform: $args;
   -moz-transform: $args;
+  -ms-transform: $args;
   transform: $args;
 }
 

style/main.css

@@ -235,66 +235,82 @@ hr {
 .tile.tile-position-1-1 {
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
+  -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px); }
 .tile.tile-position-1-2 {
   -webkit-transform: translate(0px, 121px);
   -moz-transform: translate(0px, 121px);
+  -ms-transform: translate(0px, 121px);
   transform: translate(0px, 121px); }
 .tile.tile-position-1-3 {
   -webkit-transform: translate(0px, 242px);
   -moz-transform: translate(0px, 242px);
+  -ms-transform: translate(0px, 242px);
   transform: translate(0px, 242px); }
 .tile.tile-position-1-4 {
   -webkit-transform: translate(0px, 363px);
   -moz-transform: translate(0px, 363px);
+  -ms-transform: translate(0px, 363px);
   transform: translate(0px, 363px); }
 .tile.tile-position-2-1 {
   -webkit-transform: translate(121px, 0px);
   -moz-transform: translate(121px, 0px);
+  -ms-transform: translate(121px, 0px);
   transform: translate(121px, 0px); }
 .tile.tile-position-2-2 {
   -webkit-transform: translate(121px, 121px);
   -moz-transform: translate(121px, 121px);
+  -ms-transform: translate(121px, 121px);
   transform: translate(121px, 121px); }
 .tile.tile-position-2-3 {
   -webkit-transform: translate(121px, 242px);
   -moz-transform: translate(121px, 242px);
+  -ms-transform: translate(121px, 242px);
   transform: translate(121px, 242px); }
 .tile.tile-position-2-4 {
   -webkit-transform: translate(121px, 363px);
   -moz-transform: translate(121px, 363px);
+  -ms-transform: translate(121px, 363px);
   transform: translate(121px, 363px); }
 .tile.tile-position-3-1 {
   -webkit-transform: translate(242px, 0px);
   -moz-transform: translate(242px, 0px);
+  -ms-transform: translate(242px, 0px);
   transform: translate(242px, 0px); }
 .tile.tile-position-3-2 {
   -webkit-transform: translate(242px, 121px);
   -moz-transform: translate(242px, 121px);
+  -ms-transform: translate(242px, 121px);
   transform: translate(242px, 121px); }
 .tile.tile-position-3-3 {
   -webkit-transform: translate(242px, 242px);
   -moz-transform: translate(242px, 242px);
+  -ms-transform: translate(242px, 242px);
   transform: translate(242px, 242px); }
 .tile.tile-position-3-4 {
   -webkit-transform: translate(242px, 363px);
   -moz-transform: translate(242px, 363px);
+  -ms-transform: translate(242px, 363px);
   transform: translate(242px, 363px); }
 .tile.tile-position-4-1 {
   -webkit-transform: translate(363px, 0px);
   -moz-transform: translate(363px, 0px);
+  -ms-transform: translate(363px, 0px);
   transform: translate(363px, 0px); }
 .tile.tile-position-4-2 {
   -webkit-transform: translate(363px, 121px);
   -moz-transform: translate(363px, 121px);
+  -ms-transform: translate(363px, 121px);
   transform: translate(363px, 121px); }
 .tile.tile-position-4-3 {
   -webkit-transform: translate(363px, 242px);
   -moz-transform: translate(363px, 242px);
+  -ms-transform: translate(363px, 242px);
   transform: translate(363px, 242px); }
 .tile.tile-position-4-4 {
   -webkit-transform: translate(363px, 363px);
   -moz-transform: translate(363px, 363px);
+  -ms-transform: translate(363px, 363px);
   transform: translate(363px, 363px); }
 
 .tile {
@@ -383,36 +399,42 @@ hr {
     opacity: 0;
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 @-moz-keyframes appear {
   0% {
     opacity: 0;
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 @keyframes appear {
   0% {
     opacity: 0;
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 .tile-new .tile-inner {
   -webkit-animation: appear 200ms ease 100ms;
@@ -426,46 +448,55 @@ hr {
   0% {
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
     transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 @-moz-keyframes pop {
   0% {
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
     transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 @keyframes pop {
   0% {
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
+    -ms-transform: scale(0);
     transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
     transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
+    -ms-transform: scale(1);
     transform: scale(1); } }
 .tile-merged .tile-inner {
   z-index: 20;
@@ -637,66 +668,82 @@ hr {
   .tile.tile-position-1-1 {
     -webkit-transform: translate(0px, 0px);
     -moz-transform: translate(0px, 0px);
+    -ms-transform: translate(0px, 0px);
     transform: translate(0px, 0px); }
   .tile.tile-position-1-2 {
     -webkit-transform: translate(0px, 67px);
     -moz-transform: translate(0px, 67px);
+    -ms-transform: translate(0px, 67px);
     transform: translate(0px, 67px); }
   .tile.tile-position-1-3 {
     -webkit-transform: translate(0px, 135px);
     -moz-transform: translate(0px, 135px);
+    -ms-transform: translate(0px, 135px);
     transform: translate(0px, 135px); }
   .tile.tile-position-1-4 {
     -webkit-transform: translate(0px, 202px);
     -moz-transform: translate(0px, 202px);
+    -ms-transform: translate(0px, 202px);
     transform: translate(0px, 202px); }
   .tile.tile-position-2-1 {
     -webkit-transform: translate(67px, 0px);
     -moz-transform: translate(67px, 0px);
+    -ms-transform: translate(67px, 0px);
     transform: translate(67px, 0px); }
   .tile.tile-position-2-2 {
     -webkit-transform: translate(67px, 67px);
     -moz-transform: translate(67px, 67px);
+    -ms-transform: translate(67px, 67px);
     transform: translate(67px, 67px); }
   .tile.tile-position-2-3 {
     -webkit-transform: translate(67px, 135px);
     -moz-transform: translate(67px, 135px);
+    -ms-transform: translate(67px, 135px);
     transform: translate(67px, 135px); }
   .tile.tile-position-2-4 {
     -webkit-transform: translate(67px, 202px);
     -moz-transform: translate(67px, 202px);
+    -ms-transform: translate(67px, 202px);
     transform: translate(67px, 202px); }
   .tile.tile-position-3-1 {
     -webkit-transform: translate(135px, 0px);
     -moz-transform: translate(135px, 0px);
+    -ms-transform: translate(135px, 0px);
     transform: translate(135px, 0px); }
   .tile.tile-position-3-2 {
     -webkit-transform: translate(135px, 67px);
     -moz-transform: translate(135px, 67px);
+    -ms-transform: translate(135px, 67px);
     transform: translate(135px, 67px); }
   .tile.tile-position-3-3 {
     -webkit-transform: translate(135px, 135px);
     -moz-transform: translate(135px, 135px);
+    -ms-transform: translate(135px, 135px);
     transform: translate(135px, 135px); }
   .tile.tile-position-3-4 {
     -webkit-transform: translate(135px, 202px);
     -moz-transform: translate(135px, 202px);
+    -ms-transform: translate(135px, 202px);
     transform: translate(135px, 202px); }
   .tile.tile-position-4-1 {
     -webkit-transform: translate(202px, 0px);
     -moz-transform: translate(202px, 0px);
+    -ms-transform: translate(202px, 0px);
     transform: translate(202px, 0px); }
   .tile.tile-position-4-2 {
     -webkit-transform: translate(202px, 67px);
     -moz-transform: translate(202px, 67px);
+    -ms-transform: translate(202px, 67px);
     transform: translate(202px, 67px); }
   .tile.tile-position-4-3 {
     -webkit-transform: translate(202px, 135px);
     -moz-transform: translate(202px, 135px);
+    -ms-transform: translate(202px, 135px);
     transform: translate(202px, 135px); }
   .tile.tile-position-4-4 {
     -webkit-transform: translate(202px, 202px);
     -moz-transform: translate(202px, 202px);
+    -ms-transform: translate(202px, 202px);
     transform: translate(202px, 202px); }
 
   .tile .tile-inner {