Impaczus/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix styles for IE9: add -ms-transform

Browse Source
This commit is contained in:
Mikhail Novikov
2014-06-15 15:36:11 +03:00
parent 538546423f
commit cbd3055a5f
2 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/helpers.scss
+1
View File
@@ -48,6 +48,7 @@
@mixin transform($args...) { @mixin transform($args...) {
-webkit-transform: $args; -webkit-transform: $args;
-moz-transform: $args; -moz-transform: $args;
-ms-transform: $args;
transform: $args; transform: $args;
} }
style/main.css
+47
View File
@@ -235,66 +235,82 @@ hr {
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px); } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px); -webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px); -moz-transform: translate(0px, 121px);
-ms-transform: translate(0px, 121px);
transform: translate(0px, 121px); } transform: translate(0px, 121px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px); -webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px); -moz-transform: translate(0px, 242px);
-ms-transform: translate(0px, 242px);
transform: translate(0px, 242px); } transform: translate(0px, 242px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px); -webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px); -moz-transform: translate(0px, 363px);
-ms-transform: translate(0px, 363px);
transform: translate(0px, 363px); } transform: translate(0px, 363px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px); -webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px); -moz-transform: translate(121px, 0px);
-ms-transform: translate(121px, 0px);
transform: translate(121px, 0px); } transform: translate(121px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px); -webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px); -moz-transform: translate(121px, 121px);
-ms-transform: translate(121px, 121px);
transform: translate(121px, 121px); } transform: translate(121px, 121px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px); -webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px); -moz-transform: translate(121px, 242px);
-ms-transform: translate(121px, 242px);
transform: translate(121px, 242px); } transform: translate(121px, 242px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px); -webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px); -moz-transform: translate(121px, 363px);
-ms-transform: translate(121px, 363px);
transform: translate(121px, 363px); } transform: translate(121px, 363px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px); -webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px); -moz-transform: translate(242px, 0px);
-ms-transform: translate(242px, 0px);
transform: translate(242px, 0px); } transform: translate(242px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px); -webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px); -moz-transform: translate(242px, 121px);
-ms-transform: translate(242px, 121px);
transform: translate(242px, 121px); } transform: translate(242px, 121px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px); -webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px); -moz-transform: translate(242px, 242px);
-ms-transform: translate(242px, 242px);
transform: translate(242px, 242px); } transform: translate(242px, 242px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px); -webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px); -moz-transform: translate(242px, 363px);
-ms-transform: translate(242px, 363px);
transform: translate(242px, 363px); } transform: translate(242px, 363px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px); -webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px); -moz-transform: translate(363px, 0px);
-ms-transform: translate(363px, 0px);
transform: translate(363px, 0px); } transform: translate(363px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px); -webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px); -moz-transform: translate(363px, 121px);
-ms-transform: translate(363px, 121px);
transform: translate(363px, 121px); } transform: translate(363px, 121px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px); -webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px); -moz-transform: translate(363px, 242px);
-ms-transform: translate(363px, 242px);
transform: translate(363px, 242px); } transform: translate(363px, 242px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px); -webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px); -moz-transform: translate(363px, 363px);
-ms-transform: translate(363px, 363px);
transform: translate(363px, 363px); } transform: translate(363px, 363px); }
.tile { .tile {
@@ -383,36 +399,42 @@ hr {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
.tile-new .tile-inner { .tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
@@ -426,46 +448,55 @@ hr {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
.tile-merged .tile-inner { .tile-merged .tile-inner {
z-index: 20; z-index: 20;
@@ -637,66 +668,82 @@ hr {
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px); } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px); -webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px); -moz-transform: translate(0px, 67px);
-ms-transform: translate(0px, 67px);
transform: translate(0px, 67px); } transform: translate(0px, 67px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px); -webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px); -moz-transform: translate(0px, 135px);
-ms-transform: translate(0px, 135px);
transform: translate(0px, 135px); } transform: translate(0px, 135px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px); -webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px); -moz-transform: translate(0px, 202px);
-ms-transform: translate(0px, 202px);
transform: translate(0px, 202px); } transform: translate(0px, 202px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px); -webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px); -moz-transform: translate(67px, 0px);
-ms-transform: translate(67px, 0px);
transform: translate(67px, 0px); } transform: translate(67px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
-webkit-transform: translate(67px, 67px); -webkit-transform: translate(67px, 67px);
-moz-transform: translate(67px, 67px); -moz-transform: translate(67px, 67px);
-ms-transform: translate(67px, 67px);
transform: translate(67px, 67px); } transform: translate(67px, 67px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
-webkit-transform: translate(67px, 135px); -webkit-transform: translate(67px, 135px);
-moz-transform: translate(67px, 135px); -moz-transform: translate(67px, 135px);
-ms-transform: translate(67px, 135px);
transform: translate(67px, 135px); } transform: translate(67px, 135px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
-webkit-transform: translate(67px, 202px); -webkit-transform: translate(67px, 202px);
-moz-transform: translate(67px, 202px); -moz-transform: translate(67px, 202px);
-ms-transform: translate(67px, 202px);
transform: translate(67px, 202px); } transform: translate(67px, 202px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
-webkit-transform: translate(135px, 0px); -webkit-transform: translate(135px, 0px);
-moz-transform: translate(135px, 0px); -moz-transform: translate(135px, 0px);
-ms-transform: translate(135px, 0px);
transform: translate(135px, 0px); } transform: translate(135px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
-webkit-transform: translate(135px, 67px); -webkit-transform: translate(135px, 67px);
-moz-transform: translate(135px, 67px); -moz-transform: translate(135px, 67px);
-ms-transform: translate(135px, 67px);
transform: translate(135px, 67px); } transform: translate(135px, 67px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
-webkit-transform: translate(135px, 135px); -webkit-transform: translate(135px, 135px);
-moz-transform: translate(135px, 135px); -moz-transform: translate(135px, 135px);
-ms-transform: translate(135px, 135px);
transform: translate(135px, 135px); } transform: translate(135px, 135px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
-webkit-transform: translate(135px, 202px); -webkit-transform: translate(135px, 202px);
-moz-transform: translate(135px, 202px); -moz-transform: translate(135px, 202px);
-ms-transform: translate(135px, 202px);
transform: translate(135px, 202px); } transform: translate(135px, 202px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
-webkit-transform: translate(202px, 0px); -webkit-transform: translate(202px, 0px);
-moz-transform: translate(202px, 0px); -moz-transform: translate(202px, 0px);
-ms-transform: translate(202px, 0px);
transform: translate(202px, 0px); } transform: translate(202px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
-webkit-transform: translate(202px, 67px); -webkit-transform: translate(202px, 67px);
-moz-transform: translate(202px, 67px); -moz-transform: translate(202px, 67px);
-ms-transform: translate(202px, 67px);
transform: translate(202px, 67px); } transform: translate(202px, 67px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
-webkit-transform: translate(202px, 135px); -webkit-transform: translate(202px, 135px);
-moz-transform: translate(202px, 135px); -moz-transform: translate(202px, 135px);
-ms-transform: translate(202px, 135px);
transform: translate(202px, 135px); } transform: translate(202px, 135px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
-webkit-transform: translate(202px, 202px); -webkit-transform: translate(202px, 202px);
-moz-transform: translate(202px, 202px); -moz-transform: translate(202px, 202px);
-ms-transform: translate(202px, 202px);
transform: translate(202px, 202px); } transform: translate(202px, 202px); }
.tile .tile-inner { .tile .tile-inner {