Merge pull request #327 from msalcala11/slideToPayComponent
Implement Slide to Pay
This commit is contained in:
Matias Alejo Garcia
GitHub
commit
8607867d71
30 changed files with 842 additions and 164 deletions
|
|
@ -385,6 +385,10 @@ input[type=number] {
|
|||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
|
|
|||
40
src/sass/views/includes/clickToAccept.scss
Normal file
40
src/sass/views/includes/clickToAccept.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
click-to-accept {
|
||||
|
||||
.click-to-accept {
|
||||
&__status-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
text-transform: capitalize;
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
|
||||
&.enter {
|
||||
transition: transform 250ms ease, opacity 250ms ease;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> img {
|
||||
margin-right: 10px;
|
||||
animation-name: spin;
|
||||
animation-duration: 500ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
126
src/sass/views/includes/slideToAccept.scss
Normal file
126
src/sass/views/includes/slideToAccept.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
slide-to-accept {
|
||||
$slide-bg-color: #647CE8;
|
||||
$slider-bg-color: #5063B9;
|
||||
$slide-text-color: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 92px;
|
||||
width: 100%;
|
||||
background: $slide-bg-color;
|
||||
|
||||
@mixin center-vertically {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slide {
|
||||
&__listener {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
&__slider {
|
||||
@include center-vertically;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $slider-bg-color;
|
||||
transform: translateX(0);
|
||||
margin-left: -100%;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
@include center-vertically;
|
||||
content: '';
|
||||
width: 10000px;
|
||||
left: -10000px + 1;
|
||||
background: $slider-bg-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include center-vertically;
|
||||
content: '';
|
||||
width: 15px;
|
||||
right: -10px;
|
||||
background: $slider-bg-color;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
@include center-vertically;
|
||||
width: 124px;
|
||||
height: 116px;
|
||||
background: $slider-bg-color;
|
||||
right: -71px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-47%);
|
||||
}
|
||||
|
||||
}
|
||||
&__bitcoin {
|
||||
@include center-vertically;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
|
||||
> img {
|
||||
transform: rotateZ(-5deg);
|
||||
}
|
||||
}
|
||||
&__button-text {
|
||||
@include center-vertically;
|
||||
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: $slide-text-color;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .03rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__status-text {
|
||||
@include center-vertically;
|
||||
justify-content: center;
|
||||
color: $slide-text-color;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
font-size: 17px;
|
||||
letter-spacing: 0.02rem;
|
||||
text-transform: capitalize;
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
|
||||
&.enter {
|
||||
transition: transform 250ms ease, opacity 250ms ease;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> img {
|
||||
margin-right: 10px;
|
||||
animation-name: spin;
|
||||
animation-duration: 500ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
@include center-vertically;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
96
src/sass/views/includes/slideToAcceptSuccess.scss
Normal file
96
src/sass/views/includes/slideToAcceptSuccess.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
slide-to-accept-success {
|
||||
$slider-bg-color: #5063B9;
|
||||
$success-bg-color: #11D1A6;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.slide-success {
|
||||
$duration: 400ms;
|
||||
&__background {
|
||||
$start-radius: 5;
|
||||
$scale-factor: 20;
|
||||
height: 10vmax;
|
||||
width: 10vmax;
|
||||
background: $slider-bg-color;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: calc(50% - 5vmax);
|
||||
border-radius: 50%;
|
||||
transition: transform $duration*1.5 ease, background $duration*1.5 ease;
|
||||
|
||||
&.fill-screen {
|
||||
transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
|
||||
background: $success-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -20vh;
|
||||
|
||||
> img {
|
||||
margin-bottom: 1.8rem;
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
transition: transform $duration ease, opacity $duration ease;
|
||||
transition-delay: 200ms;
|
||||
|
||||
&.reveal {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
color: #FFFFFF;
|
||||
font-size: 26px;
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
transition: transform $duration ease, opacity $duration ease;
|
||||
transition-delay: 250ms;
|
||||
|
||||
&.reveal {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0 1.75rem;
|
||||
width: 100%;
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
transition: transform $duration ease, opacity $duration ease;
|
||||
transition-delay: 250ms;
|
||||
|
||||
&.reveal {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: block;
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2.86px;
|
||||
padding: 1rem 0 1.1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, .45);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +1,4 @@
|
|||
#tx-status {
|
||||
.address {
|
||||
display: flex;
|
||||
padding: 5px 15px;
|
||||
background-color: #f5f5f5;
|
||||
margin-top: 10px;
|
||||
i {
|
||||
color: grey;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid;
|
||||
border-color: grey;
|
||||
font-size: 20px;
|
||||
}
|
||||
contact {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.collect-address {
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
color: #6c6c6c;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.popup-txsent {
|
||||
font-size: 5rem;
|
||||
color: #4A90E2;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
@import "includes/walletActivity";
|
||||
@import "includes/wallets";
|
||||
@import "includes/modals/modals";
|
||||
@import "includes/clickToAccept";
|
||||
@import "includes/slideToAccept";
|
||||
@import "includes/slideToAcceptSuccess";
|
||||
@import "includes/tx-details";
|
||||
@import "includes/txp-details";
|
||||
@import "includes/tx-status";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue