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() {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
@ -16,4 +17,4 @@
.absolute-center{
@include absolute-center();
}
}

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

@ -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);
}

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

@ -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);
}
}

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

@ -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;

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

@ -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);
}
}

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;
&.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;
}

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

@ -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;
}

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

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

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

@ -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%);
}
}