mirror of
https://github.com/danog/2048.git
synced 2024-11-26 19:34:44 +01:00
fix styles for IE9: add -ms-transform
This commit is contained in:
Mikhail Novikov
parent
538546423f
commit
cbd3055a5f
@ -48,6 +48,7 @@
|
||||
@mixin transform($args...) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user