From 2de90013f7f543e59f9bba63e53de85c82ef02c5 Mon Sep 17 00:00:00 2001 From: homeopatchy Date: Mon, 31 Oct 2016 20:29:48 +0100 Subject: [PATCH] Add webkit prefixed transforms (android 4) --- src/sass/mixins/layout.scss | 3 ++- src/sass/views/includes/actionSheet.scss | 2 ++ src/sass/views/includes/clickToAccept.scss | 4 ++++ src/sass/views/includes/modals/modals.scss | 1 + src/sass/views/includes/slideToAccept.scss | 7 +++++++ src/sass/views/includes/slideToAcceptSuccess.scss | 7 +++++++ src/sass/views/includes/txp-details.scss | 2 ++ src/sass/views/includes/wallets.scss | 1 + src/sass/views/tab-receive.scss | 4 ++++ 9 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss index 4d1934eae..b03d53800 100644 --- a/src/sass/mixins/layout.scss +++ b/src/sass/mixins/layout.scss @@ -5,6 +5,7 @@ @mixin absolute-center() { position: absolute; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; @@ -16,4 +17,4 @@ .absolute-center{ @include absolute-center(); -} \ No newline at end of file +} diff --git a/src/sass/views/includes/actionSheet.scss b/src/sass/views/includes/actionSheet.scss index 5e9fb7fd4..75319e2b1 100644 --- a/src/sass/views/includes/actionSheet.scss +++ b/src/sass/views/includes/actionSheet.scss @@ -8,6 +8,7 @@ action-sheet { position: fixed; bottom: 0; left: 50%; + -webkit-transform: translateY(100%) translateX(-50%); transform: translateY(100%) translateX(-50%); transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1); z-index: 100; @@ -21,6 +22,7 @@ action-sheet { overflow: scroll; &.slide-up { + -webkit-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3); } diff --git a/src/sass/views/includes/clickToAccept.scss b/src/sass/views/includes/clickToAccept.scss index f5822b0fe..9eb8098e0 100644 --- a/src/sass/views/includes/clickToAccept.scss +++ b/src/sass/views/includes/clickToAccept.scss @@ -14,12 +14,14 @@ click-to-accept { width: 100%; z-index: 4; text-transform: capitalize; + -webkit-transform: translateY(2rem); transform: translateY(2rem); opacity: 0; pointer-events: none; &.enter { transition: transform 250ms ease, opacity 250ms ease; + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } @@ -37,9 +39,11 @@ click-to-accept { @keyframes spin { from { + -webkit-transform:rotate(0deg); transform:rotate(0deg); } to { + -webkit-transform:rotate(360deg); transform:rotate(360deg); } } diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index 742148e01..af025f0c5 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -6,6 +6,7 @@ z-index: 10; width: 90%; max-width: 350px; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: $unmistakable-radius; text-align: center; diff --git a/src/sass/views/includes/slideToAccept.scss b/src/sass/views/includes/slideToAccept.scss index 55ef91f06..3a2062b31 100644 --- a/src/sass/views/includes/slideToAccept.scss +++ b/src/sass/views/includes/slideToAccept.scss @@ -27,6 +27,7 @@ slide-to-accept { height: 100%; width: 100%; background: $slider-bg-color; + -webkit-transform: translateX(0); transform: translateX(0); margin-left: -100%; z-index: 2; @@ -55,6 +56,7 @@ slide-to-accept { right: -71px; border-radius: 50%; top: 50%; + -webkit-transform: translateY(-47%); transform: translateY(-47%); } @@ -65,6 +67,7 @@ slide-to-accept { z-index: 3; > img { + -webkit-transform: rotateZ(-5deg); transform: rotateZ(-5deg); } } @@ -91,11 +94,13 @@ slide-to-accept { font-size: 17px; letter-spacing: 0.02rem; text-transform: capitalize; + -webkit-transform: translateY(2rem); transform: translateY(2rem); opacity: 0; &.enter { transition: transform 250ms ease, opacity 250ms ease; + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } @@ -117,9 +122,11 @@ slide-to-accept { @keyframes spin { from { + -webkit-transform:rotate(0deg); transform:rotate(0deg); } to { + -webkit-transform:rotate(360deg); transform:rotate(360deg); } } diff --git a/src/sass/views/includes/slideToAcceptSuccess.scss b/src/sass/views/includes/slideToAcceptSuccess.scss index fe9b75969..cd825766a 100644 --- a/src/sass/views/includes/slideToAcceptSuccess.scss +++ b/src/sass/views/includes/slideToAcceptSuccess.scss @@ -27,6 +27,7 @@ slide-to-accept-success { transition: transform $duration*1.5 ease, background $duration*1.5 ease; &.fill-screen { + -webkit-transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%); transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%); background: $success-bg-color; } @@ -39,12 +40,14 @@ slide-to-accept-success { > img { margin-bottom: 1.8rem; + -webkit-transform: translateY(5rem); transform: translateY(5rem); opacity: 0; transition: transform $duration ease, opacity $duration ease; transition-delay: 200ms; &.reveal { + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } @@ -53,12 +56,14 @@ slide-to-accept-success { &__header { color: #FFFFFF; font-size: 26px; + -webkit-transform: translateY(5rem); transform: translateY(5rem); opacity: 0; transition: transform $duration ease, opacity $duration ease; transition-delay: 250ms; &.reveal { + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } @@ -71,12 +76,14 @@ slide-to-accept-success { bottom: 0; padding: 0 1.75rem; width: 100%; + -webkit-transform: translateY(5rem); transform: translateY(5rem); opacity: 0; transition: transform $duration ease, opacity $duration ease; transition-delay: 250ms; &.reveal { + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 5bb8fd467..8c5e7c723 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -179,6 +179,7 @@ width: 1px; position: absolute; left: 50%; + -webkit-transform: translateX(-50%) translateY(-100%); transform: translateX(-50%) translateY(-100%); top: 0; } @@ -190,6 +191,7 @@ width: 1px; position: absolute; left: 50%; + -webkit-transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%); bottom: 0; } diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index 677486c6b..a3e1a4320 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -60,6 +60,7 @@ &.swiper-slide-prev, &.swiper-slide-next { opacity: .3; + -webkit-transform: scale(.8); transform: scale(.8); } &.swiper-slide-prev { diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index d63300fa0..1b18083c0 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -99,6 +99,7 @@ .qr{ padding:6vh 0 0; div{ + -webkit-transform: scale(.7); transform: scale(.7); } } @@ -119,6 +120,7 @@ top: -9px; position: absolute; left: 50%; + -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } @@ -171,9 +173,11 @@ position: absolute; left: 50%; top: 50%; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); @media (max-height: 600px){ &{ + -webkit-transform: translate(-50%, -58%); transform: translate(-50%, -58%); } }