diff --git a/style/helpers.scss b/style/helpers.scss index 7b4445b..72693ee 100644 --- a/style/helpers.scss +++ b/style/helpers.scss @@ -48,6 +48,7 @@ @mixin transform($args...) { -webkit-transform: $args; -moz-transform: $args; + -ms-transform: $args; transform: $args; } diff --git a/style/main.css b/style/main.css index 0f2d377..d11ba48 100644 --- a/style/main.css +++ b/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 {