anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4959 from homeopatchy/webkit-prefix

Browse source 
Add webkit prefixed transforms (android 4)
This commit is contained in:
Jason Dreyzehner 2016-11-01 14:02:49 -07:00 • committed by GitHub
commit b1b38306cb
9 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/sass/mixins/layout.scss
View file

@ -5,6 +5,7 @@
@mixin absolute-center() { @mixin absolute-center() {
position: absolute; position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -16,4 +17,4 @@
.absolute-center{ .absolute-center{
@include absolute-center(); @include absolute-center();
} }

2
src/sass/views/includes/actionSheet.scss
View file

@ -8,6 +8,7 @@ action-sheet {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
-webkit-transform: translateY(100%) translateX(-50%);
transform: translateY(100%) translateX(-50%); transform: translateY(100%) translateX(-50%);
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 100; z-index: 100;
@ -21,6 +22,7 @@ action-sheet {
overflow: scroll; overflow: scroll;
&.slide-up { &.slide-up {
-webkit-transform: translateY(0) translateX(-50%);
transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%);
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3); box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
} }

4
src/sass/views/includes/clickToAccept.scss
View file

@ -14,12 +14,14 @@ click-to-accept {
width: 100%; width: 100%;
z-index: 4; z-index: 4;
text-transform: capitalize; text-transform: capitalize;
-webkit-transform: translateY(2rem);
transform: translateY(2rem); transform: translateY(2rem);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
&.enter { &.enter {
transition: transform 250ms ease, opacity 250ms ease; transition: transform 250ms ease, opacity 250ms ease;
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
@ -37,9 +39,11 @@ click-to-accept {
@keyframes spin { @keyframes spin {
from { from {
-webkit-transform:rotate(0deg);
transform:rotate(0deg); transform:rotate(0deg);
} }
to { to {
-webkit-transform:rotate(360deg);
transform:rotate(360deg); transform:rotate(360deg);
} }
} }

1
src/sass/views/includes/modals/modals.scss
View file

@ -6,6 +6,7 @@
z-index: 10; z-index: 10;
width: 90%; width: 90%;
max-width: 350px; max-width: 350px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: $unmistakable-radius; border-radius: $unmistakable-radius;
text-align: center; text-align: center;

7
src/sass/views/includes/slideToAccept.scss
View file

@ -27,6 +27,7 @@ slide-to-accept {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: $slider-bg-color; background: $slider-bg-color;
-webkit-transform: translateX(0);
transform: translateX(0); transform: translateX(0);
margin-left: -100%; margin-left: -100%;
z-index: 2; z-index: 2;
@ -55,6 +56,7 @@ slide-to-accept {
right: -71px; right: -71px;
border-radius: 50%; border-radius: 50%;
top: 50%; top: 50%;
-webkit-transform: translateY(-47%);
transform: translateY(-47%); transform: translateY(-47%);
} }
@ -65,6 +67,7 @@ slide-to-accept {
z-index: 3; z-index: 3;
> img { > img {
-webkit-transform: rotateZ(-5deg);
transform: rotateZ(-5deg); transform: rotateZ(-5deg);
} }
} }
@ -91,11 +94,13 @@ slide-to-accept {
font-size: 17px; font-size: 17px;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
text-transform: capitalize; text-transform: capitalize;
-webkit-transform: translateY(2rem);
transform: translateY(2rem); transform: translateY(2rem);
opacity: 0; opacity: 0;
&.enter { &.enter {
transition: transform 250ms ease, opacity 250ms ease; transition: transform 250ms ease, opacity 250ms ease;
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
@ -117,9 +122,11 @@ slide-to-accept {
@keyframes spin { @keyframes spin {
from { from {
-webkit-transform:rotate(0deg);
transform:rotate(0deg); transform:rotate(0deg);
} }
to { to {
-webkit-transform:rotate(360deg);
transform:rotate(360deg); transform:rotate(360deg);
} }
} }

7
src/sass/views/includes/slideToAcceptSuccess.scss
View file

@ -27,6 +27,7 @@ slide-to-accept-success {
transition: transform $duration*1.5 ease, background $duration*1.5 ease; transition: transform $duration*1.5 ease, background $duration*1.5 ease;
&.fill-screen { &.fill-screen {
-webkit-transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%); transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
background: $success-bg-color; background: $success-bg-color;
} }
@ -39,12 +40,14 @@ slide-to-accept-success {
> img { > img {
margin-bottom: 1.8rem; margin-bottom: 1.8rem;
-webkit-transform: translateY(5rem);
transform: translateY(5rem); transform: translateY(5rem);
opacity: 0; opacity: 0;
transition: transform $duration ease, opacity $duration ease; transition: transform $duration ease, opacity $duration ease;
transition-delay: 200ms; transition-delay: 200ms;
&.reveal { &.reveal {
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
@ -53,12 +56,14 @@ slide-to-accept-success {
&__header { &__header {
color: #FFFFFF; color: #FFFFFF;
font-size: 26px; font-size: 26px;
-webkit-transform: translateY(5rem);
transform: translateY(5rem); transform: translateY(5rem);
opacity: 0; opacity: 0;
transition: transform $duration ease, opacity $duration ease; transition: transform $duration ease, opacity $duration ease;
transition-delay: 250ms; transition-delay: 250ms;
&.reveal { &.reveal {
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
@ -71,12 +76,14 @@ slide-to-accept-success {
bottom: 0; bottom: 0;
padding: 0 1.75rem; padding: 0 1.75rem;
width: 100%; width: 100%;
-webkit-transform: translateY(5rem);
transform: translateY(5rem); transform: translateY(5rem);
opacity: 0; opacity: 0;
transition: transform $duration ease, opacity $duration ease; transition: transform $duration ease, opacity $duration ease;
transition-delay: 250ms; transition-delay: 250ms;
&.reveal { &.reveal {
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }

2
src/sass/views/includes/txp-details.scss
View file

@ -179,6 +179,7 @@
width: 1px; width: 1px;
position: absolute; position: absolute;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%); transform: translateX(-50%) translateY(-100%);
top: 0; top: 0;
} }
@ -190,6 +191,7 @@
width: 1px; width: 1px;
position: absolute; position: absolute;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(100%);
transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%);
bottom: 0; bottom: 0;
} }

1
src/sass/views/includes/wallets.scss
View file

@ -60,6 +60,7 @@
&.swiper-slide-prev, &.swiper-slide-prev,
&.swiper-slide-next { &.swiper-slide-next {
opacity: .3; opacity: .3;
-webkit-transform: scale(.8);
transform: scale(.8); transform: scale(.8);
} }
&.swiper-slide-prev { &.swiper-slide-prev {

4
src/sass/views/tab-receive.scss
View file

@ -99,6 +99,7 @@
.qr{ .qr{
padding:6vh 0 0; padding:6vh 0 0;
div{ div{
-webkit-transform: scale(.7);
transform: scale(.7); transform: scale(.7);
} }
} }
@ -119,6 +120,7 @@
top: -9px; top: -9px;
position: absolute; position: absolute;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; z-index: 2;
} }
@ -171,9 +173,11 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@media (max-height: 600px){ @media (max-height: 600px){
&{ &{
-webkit-transform: translate(-50%, -58%);
transform: translate(-50%, -58%); transform: translate(-50%, -58%);
} }
} }