added animation to receive tab
This commit is contained in:
Jamal Jackson
parent
e6d4782f94
commit
1ee7ee4f76
4 changed files with 260 additions and 49 deletions
|
|
@ -9,6 +9,7 @@
|
|||
box-shadow:$subtle-box-shadow;
|
||||
padding:0;
|
||||
border-radius: 6px;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 500px) {
|
||||
& {
|
||||
width: 350px;
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
&.visible{
|
||||
visibility: visible !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
.big-icon-svg{
|
||||
|
|
@ -64,10 +65,10 @@
|
|||
transform: scale(.8);
|
||||
}
|
||||
&.swiper-slide-prev {
|
||||
left: 10vw;
|
||||
left: 5vw;
|
||||
}
|
||||
&.swiper-slide-next {
|
||||
left: -10vw;
|
||||
left: -5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.scroll{height:100%;}
|
||||
#address {
|
||||
background: #fff;
|
||||
height: calc(100vh - 33vh);
|
||||
height: calc(100vh - 34vh);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -22,14 +22,26 @@
|
|||
@media(max-height: 600px){
|
||||
height: calc(100vh - 36vh);
|
||||
}
|
||||
&-info{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
article{
|
||||
flex:1;
|
||||
width: 100%;
|
||||
}
|
||||
#bit-address{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
align-self: flex-end;
|
||||
margin-top: auto;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
#next-address{
|
||||
color:$light-gray;
|
||||
}
|
||||
|
|
@ -58,6 +70,31 @@
|
|||
}
|
||||
.bit-address {
|
||||
font-size: .8rem;
|
||||
// left:10%;
|
||||
position: absolute;
|
||||
transition: all .4s ease;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
&, &.next{
|
||||
left:100%;
|
||||
transform: translate(100%, -40%);
|
||||
}
|
||||
&.next, &.prev{
|
||||
z-index:2;
|
||||
}
|
||||
&.current, &.prev{
|
||||
left:50%;
|
||||
}
|
||||
&.current{
|
||||
transform: translate(-50%, -40%);
|
||||
z-index: 3;
|
||||
}
|
||||
&.prev{
|
||||
transform: translate(-150%, -40%);
|
||||
}
|
||||
.item {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -67,6 +104,32 @@
|
|||
}
|
||||
.qr {
|
||||
padding: calc(100vh - 85vh) 0 calc(100vh - 96vh);
|
||||
align-self: center;
|
||||
margin-top: auto;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
div{
|
||||
transition: all .4s ease;
|
||||
&.current, &.prev, &.next{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
}
|
||||
&.current, &.prev{
|
||||
left:50%;
|
||||
}
|
||||
&.current{
|
||||
transform: translate(-50%, -40%);
|
||||
}
|
||||
&.prev{
|
||||
transform: translate(-150%, -40%);
|
||||
}
|
||||
&.next{
|
||||
left:100%;
|
||||
transform: translate(100%, -40%);
|
||||
}
|
||||
}
|
||||
@media(max-height: 700px){
|
||||
padding: calc(100vh - 90vh) 0 calc(100vh - 96vh);
|
||||
}
|
||||
|
|
@ -74,13 +137,13 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
#qr-options{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-self: flex-end;
|
||||
.item{
|
||||
i{left:25px;}
|
||||
}
|
||||
|
|
@ -90,6 +153,8 @@
|
|||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
z-index: 2;
|
||||
i {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -122,7 +187,7 @@
|
|||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
#first-time-tip {
|
||||
|
|
@ -165,6 +230,9 @@
|
|||
border-right: 1px solid rgb(228, 228, 228);
|
||||
padding-right: 10px;
|
||||
}
|
||||
#wallets{
|
||||
#sidebar-wallet{display: none;}
|
||||
}
|
||||
.wallets{
|
||||
position: relative;
|
||||
height: calc(100vh - 83vh);
|
||||
|
|
@ -175,6 +243,17 @@
|
|||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 450px;
|
||||
.swiper-slide{
|
||||
text-align: center;
|
||||
.card{
|
||||
margin-top:2vh;
|
||||
display: inline-block;
|
||||
width:80%;
|
||||
}
|
||||
&-next{left:-25%;}
|
||||
&-prev{left:25%;}
|
||||
}
|
||||
@media (max-height: 600px){
|
||||
&{
|
||||
-webkit-transform: translate(-50%, -58%);
|
||||
|
|
@ -184,23 +263,107 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// @media(min-width: 700px) and (min-height: 700px){
|
||||
// .wallets{display: none;}
|
||||
// #address{
|
||||
// height:90vh;
|
||||
// width:75%;
|
||||
// .qr{
|
||||
// height: 70%;
|
||||
// div{
|
||||
// transform: scale(1.5);
|
||||
// }
|
||||
// }
|
||||
// #bit-address{
|
||||
// height: 10%;
|
||||
// padding: calc(100vh - 99vh);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@media(min-width: 700px) and (min-height: 700px){
|
||||
.wallets{display: none;}
|
||||
#address{
|
||||
float:left;
|
||||
height:90vh;
|
||||
width:65%;
|
||||
&-info{
|
||||
height: 100%;
|
||||
}
|
||||
.qr{
|
||||
height: 70%;
|
||||
div{
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
&.current{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bit-address{
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
&.current{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.backup, #bit-address{left:0;}
|
||||
#bit-address{
|
||||
height: 10%;
|
||||
padding: calc(100vh - 99vh);
|
||||
}
|
||||
}
|
||||
#wallets{
|
||||
float:left;
|
||||
width:35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
#sidebar-wallet{display: block;}
|
||||
.list{height: 100%;overflow: visible;}
|
||||
#wallet-list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
left: -6%;
|
||||
}
|
||||
.wallet{
|
||||
position: relative;
|
||||
&.current{
|
||||
&:before {
|
||||
right: 93%;
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-right-color: #f2f2f2;
|
||||
border-width: 20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card {
|
||||
max-width: 350px;
|
||||
box-shadow:$subtle-box-shadow;
|
||||
padding:0;
|
||||
border-radius: 6px;
|
||||
padding:2px;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
margin: 1.5rem auto 0;
|
||||
.item{
|
||||
padding: 6% 10% 6% 8%;
|
||||
i{left:auto;}
|
||||
span{
|
||||
clear:both;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
&.wallet-name{
|
||||
margin-top:10px;
|
||||
margin-bottom:5px;
|
||||
font-size:13px;
|
||||
}
|
||||
&.wallet-number{
|
||||
visibility: hidden;
|
||||
}
|
||||
&.visible{
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
.big-icon-svg{
|
||||
& > .bg{padding:.3rem;width: 40px;height:40px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue