Merge pull request #5038 from jamal-jackson/feature/recieve_tab_animations
receive tab visual issue fixes
This commit is contained in:
Jason Dreyzehner
GitHub
commit
61e8ad6454
2 changed files with 94 additions and 24 deletions
|
|
@ -18,16 +18,18 @@
|
|||
}
|
||||
}
|
||||
.item{
|
||||
padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw);
|
||||
i{left:auto;}
|
||||
padding: 3vh 3vw 3vh 3vw;
|
||||
span{
|
||||
clear:both;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
&.wallet-name{
|
||||
margin-top:10px;
|
||||
margin-bottom:5px;
|
||||
font-size:13px;
|
||||
font-size:16px;
|
||||
width: 70%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
&.wallet-number{
|
||||
visibility: hidden;
|
||||
|
|
|
|||
|
|
@ -13,14 +13,17 @@
|
|||
.scroll{height:100%;}
|
||||
#address {
|
||||
background: #fff;
|
||||
height: calc(100vh - 34vh);
|
||||
height: 66vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
@media(max-height: 600px){
|
||||
height: calc(100vh - 36vh);
|
||||
height: 68vh;
|
||||
}
|
||||
@media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){
|
||||
height: 64vh;
|
||||
}
|
||||
&-info{
|
||||
height: 100%;
|
||||
|
|
@ -64,15 +67,27 @@
|
|||
.item {
|
||||
border: none;
|
||||
font-size: .8rem;
|
||||
z-index: 0;
|
||||
i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
#qr-options{
|
||||
.item{
|
||||
font-size:.7rem;
|
||||
@media(min-width:350px){
|
||||
font-size:.9rem;
|
||||
}
|
||||
@media(min-width:450px){
|
||||
font-size:1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bit-address {
|
||||
font-size: .8rem;
|
||||
// left:10%;
|
||||
position: absolute;
|
||||
transition: all .4s ease;
|
||||
transition: all .15s ease;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
|
|
@ -100,16 +115,24 @@
|
|||
padding-bottom: 5px;
|
||||
display: inline-block;
|
||||
font-size: .7rem;
|
||||
@media(min-width:350px){
|
||||
font-size:.9rem;
|
||||
}
|
||||
@media(min-width:450px){
|
||||
font-size:1rem;
|
||||
}
|
||||
color:$light-gray;
|
||||
}
|
||||
}
|
||||
.qr {
|
||||
padding: calc(100vh - 85vh) 0 calc(100vh - 96vh);
|
||||
padding: 15vh 0 4vh;
|
||||
align-self: center;
|
||||
margin-top: auto;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
div{
|
||||
transition: all .4s ease;
|
||||
&.current, &.prev, &.next{
|
||||
|
|
@ -131,7 +154,7 @@
|
|||
}
|
||||
}
|
||||
@media(max-height: 700px){
|
||||
padding: calc(100vh - 90vh) 0 calc(100vh - 96vh);
|
||||
padding: 10vh 0 4vh;
|
||||
}
|
||||
div{
|
||||
display: flex;
|
||||
|
|
@ -235,7 +258,8 @@
|
|||
}
|
||||
.wallets{
|
||||
position: relative;
|
||||
height: calc(100vh - 83vh);
|
||||
height: calc(27vh - 62px);
|
||||
z-index: 5;
|
||||
.slides {
|
||||
.swiper-container{
|
||||
position: absolute;
|
||||
|
|
@ -244,15 +268,29 @@
|
|||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 450px;
|
||||
.swiper-wrapper{
|
||||
height: auto;
|
||||
top: 10%;
|
||||
position:relative;
|
||||
@media(max-height: 600px){padding-top:.2rem}
|
||||
@media(min-height: 900px){top:30%;}
|
||||
}
|
||||
.swiper-slide{
|
||||
text-align: center;
|
||||
.card{
|
||||
margin-top:2vh;
|
||||
display: inline-block;
|
||||
width:80%;
|
||||
@media(min-height: 1000px) and (max-width: 699px){
|
||||
.item{
|
||||
padding: 2vh 3vw 2vh 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
&-next{left:-25%;}
|
||||
&-prev{left:25%;}
|
||||
}
|
||||
&-next{left:-25%;}
|
||||
&-prev{left:25%;}
|
||||
}
|
||||
@media (max-height: 600px){
|
||||
&{
|
||||
|
|
@ -267,11 +305,17 @@
|
|||
.wallets{display: none;}
|
||||
#address{
|
||||
float:left;
|
||||
height:90vh;
|
||||
width:65%;
|
||||
height:100%;
|
||||
width:calc(100% - 410px);
|
||||
@media(max-width: 1000px){
|
||||
width:65%;
|
||||
}
|
||||
&-info{
|
||||
height: 100%;
|
||||
}
|
||||
#qr-options{
|
||||
.item{font-size:1rem;}
|
||||
}
|
||||
.qr{
|
||||
height: 70%;
|
||||
div{
|
||||
|
|
@ -292,7 +336,14 @@
|
|||
.backup, #bit-address{left:0;}
|
||||
#bit-address{
|
||||
height: 10%;
|
||||
padding: calc(100vh - 99vh);
|
||||
padding: 1vh;
|
||||
.bit-address{
|
||||
.item{
|
||||
top: 40%;
|
||||
transform: translateY(-40%);
|
||||
font-size:1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#wallets{
|
||||
|
|
@ -302,18 +353,29 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
max-width: 410px;
|
||||
@media(max-height: 600px){
|
||||
padding-top:.55rem;
|
||||
}
|
||||
@media(max-width: 1000px){
|
||||
max-width: none;
|
||||
}
|
||||
#sidebar-wallet{display: block;}
|
||||
.list{height: 100%;overflow: visible;}
|
||||
#wallet-list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
width: 110%;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
left: -6%;
|
||||
}
|
||||
.wallet{
|
||||
position: relative;
|
||||
&.current{
|
||||
position: relative;
|
||||
.card{
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
&:before {
|
||||
right: 93%;
|
||||
top: 50%;
|
||||
|
|
@ -331,24 +393,30 @@
|
|||
}
|
||||
.card {
|
||||
max-width: 350px;
|
||||
box-shadow:$subtle-box-shadow;
|
||||
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.07);
|
||||
padding:0;
|
||||
border-radius: 6px;
|
||||
padding:2px;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
margin: 1.5rem auto 0;
|
||||
position: relative;
|
||||
opacity: .5;
|
||||
transform:scale(.85);
|
||||
transition:transform .2s ease;
|
||||
.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;
|
||||
font-size:16px;
|
||||
width: 70%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
&.wallet-number{
|
||||
visibility: hidden;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue