Merge pull request #247 from Bitcoin-com/wallet/task/514
height space in the bottom (wallet selection & review)
This commit is contained in:
Jean-Baptiste Dominguez
GitHub
commit
5ee9d4d284
5 changed files with 153 additions and 32 deletions
|
|
@ -468,3 +468,7 @@ input[type=file] {
|
|||
.white-space-initial {
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.height-spacer {
|
||||
height: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@
|
|||
bottom: 92px;
|
||||
}
|
||||
|
||||
.fee-summary-spacer {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.shapeshift-banner, .bitpay-banner, .egifter-banner {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
174
www/css/main.css
174
www/css/main.css
|
|
@ -10253,6 +10253,46 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
|
|||
color: #fff; }
|
||||
.button-white.activated {
|
||||
color: #FFF; }
|
||||
.button-white-outline {
|
||||
border-color: #FFFFFF;
|
||||
background-color: transparent;
|
||||
color: #FFFFFF;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-white-outline:hover {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none; }
|
||||
.button-white-outline.active, .button-white-outline.activated {
|
||||
border-color: #FFF;
|
||||
background-color: #FAFAFA; }
|
||||
.button-white-outline.button-outline {
|
||||
border-color: #FFFFFF;
|
||||
background: transparent;
|
||||
color: #FFFFFF; }
|
||||
.button-white-outline.button-outline.active, .button-white-outline.button-outline.activated {
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #fff; }
|
||||
.button-grey-outline {
|
||||
border-color: #727272;
|
||||
background-color: transparent;
|
||||
color: #727272;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-grey-outline:hover {
|
||||
color: #727272;
|
||||
text-decoration: none; }
|
||||
.button-grey-outline.active, .button-grey-outline.activated {
|
||||
border-color: #727272;
|
||||
background-color: #FAFAFA; }
|
||||
.button-grey-outline.button-outline {
|
||||
border-color: #727272;
|
||||
background: transparent;
|
||||
color: #727272; }
|
||||
.button-grey-outline.button-outline.active, .button-grey-outline.button-outline.activated {
|
||||
background-color: #727272;
|
||||
box-shadow: none;
|
||||
color: #fff; }
|
||||
|
||||
.button-clear {
|
||||
background: none !important; }
|
||||
|
|
@ -10271,8 +10311,8 @@ qrcode {
|
|||
content: "";
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
left: 88px;
|
||||
margin-top: 88px;
|
||||
left: calc(50% - 22px);
|
||||
margin-top: calc(50% - 22px);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute; }
|
||||
|
|
@ -10886,6 +10926,28 @@ qrcode {
|
|||
width: 100%;
|
||||
display: block; }
|
||||
|
||||
#tab-home .buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
margin: 6px auto -12px;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
#tab-home .buttons > .col {
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 0; }
|
||||
#tab-home .buttons .button {
|
||||
border: 2px solid;
|
||||
border-radius: 47px;
|
||||
padding: 0 15px 0 15px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
font-size: 19px;
|
||||
font-weight: bolder;
|
||||
min-height: auto;
|
||||
line-height: 36px; }
|
||||
|
||||
#tab-home .wallet-coin-logo {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px; }
|
||||
|
|
@ -11871,10 +11933,11 @@ qrcode {
|
|||
height: 100%;
|
||||
height: calc(100% - env(safe-area-inset-bottom) * 2); }
|
||||
#walletDetails .bp-content.status-bar {
|
||||
margin-top: 20px; }
|
||||
margin-top: 20px;
|
||||
margin-top: env(safe-area-inset-top); }
|
||||
#walletDetails .bar-header {
|
||||
border: 0;
|
||||
background: none; }
|
||||
background: #eeb640; }
|
||||
#walletDetails .bar-header .title, #walletDetails .bar-header .button {
|
||||
color: #fff; }
|
||||
#walletDetails .bar-header .button {
|
||||
|
|
@ -11886,7 +11949,7 @@ qrcode {
|
|||
top: 0;
|
||||
margin-bottom: 16px; }
|
||||
#walletDetails ion-content.collapsible {
|
||||
margin-top: 210px; }
|
||||
margin-top: 230px; }
|
||||
#walletDetails ion-content .scroll {
|
||||
background: #f8f8f9;
|
||||
min-height: 300px; }
|
||||
|
|
@ -11911,11 +11974,32 @@ qrcode {
|
|||
height: 200px;
|
||||
-webkit-transform: translateY(100px);
|
||||
transform: translateY(100px); }
|
||||
#walletDetails .amount-wrapper .send-receive-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 20px; }
|
||||
#walletDetails .amount-wrapper .send-receive-buttons > .col {
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 0; }
|
||||
#walletDetails .amount-wrapper .send-receive-buttons .button {
|
||||
border: 2px solid;
|
||||
border-radius: 47px;
|
||||
padding: 0 15px 0 15px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
font-size: 19px;
|
||||
font-weight: bolder;
|
||||
min-height: auto;
|
||||
line-height: 36px; }
|
||||
#walletDetails .amount {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 210px;
|
||||
height: 230px;
|
||||
padding-top: 40px;
|
||||
display: block;
|
||||
align-items: center;
|
||||
|
|
@ -13975,11 +14059,6 @@ slide-to-accept-success {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
slide-to-accept-success .slide-success__windows-background {
|
||||
background: #11D1A6;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed; }
|
||||
slide-to-accept-success .slide-success__background {
|
||||
height: 10vmax;
|
||||
width: 10vmax;
|
||||
|
|
@ -13996,8 +14075,10 @@ slide-to-accept-success {
|
|||
slide-to-accept-success .slide-success__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -20vh; }
|
||||
margin-top: -10vh; }
|
||||
slide-to-accept-success .slide-success__content > img {
|
||||
width: 45vw;
|
||||
max-width: 166px;
|
||||
margin-bottom: 1.8rem;
|
||||
-webkit-transform: translateY(5rem);
|
||||
transform: translateY(5rem);
|
||||
|
|
@ -14010,7 +14091,7 @@ slide-to-accept-success {
|
|||
opacity: 1; }
|
||||
slide-to-accept-success .slide-success__content__header {
|
||||
color: #FFFFFF;
|
||||
font-size: 26px;
|
||||
font-size: 29px;
|
||||
-webkit-transform: translateY(5rem);
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
|
|
@ -14020,6 +14101,22 @@ slide-to-accept-success {
|
|||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1; }
|
||||
slide-to-accept-success .slide-success__content__share {
|
||||
transition: transform 400ms ease, opacity 400ms ease;
|
||||
transition-delay: 600ms;
|
||||
opacity: 0;
|
||||
margin-top: 15vh; }
|
||||
slide-to-accept-success .slide-success__content__share span {
|
||||
color: #FFF;
|
||||
font-size: 22px;
|
||||
height: 28px; }
|
||||
slide-to-accept-success .slide-success__content__share img {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
vertical-align: bottom;
|
||||
margin-right: 4px; }
|
||||
slide-to-accept-success .slide-success__content__share.reveal {
|
||||
opacity: 0.79; }
|
||||
slide-to-accept-success .slide-success__footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -14042,11 +14139,11 @@ slide-to-accept-success {
|
|||
slide-to-accept-success .slide-success__footer__btn {
|
||||
display: block;
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2.86px;
|
||||
padding: 1rem 0 1.1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.45);
|
||||
padding: 2rem 0 2.1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
||||
cursor: pointer; }
|
||||
|
||||
#tx-details .action-created.action-accepted {
|
||||
|
|
@ -14988,17 +15085,10 @@ account-selector {
|
|||
height: 100%; }
|
||||
#custom-amount .address .qr-code {
|
||||
text-align: center;
|
||||
margin-top: 24vh;
|
||||
margin-bottom: 7vh; }
|
||||
@media (max-height: 800px) {
|
||||
#custom-amount .address .qr-code {
|
||||
margin-top: 18vh; } }
|
||||
@media (max-height: 700px) {
|
||||
#custom-amount .address .qr-code {
|
||||
margin-top: 14vh; } }
|
||||
@media (max-height: 600px) {
|
||||
#custom-amount .address .qr-code {
|
||||
margin-top: 8vh; } }
|
||||
margin-top: 6px; }
|
||||
#custom-amount .address .qr-code qrcode canvas {
|
||||
height: 30vh;
|
||||
max-height: 220px; }
|
||||
#custom-amount .address .info {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -15038,6 +15128,28 @@ account-selector {
|
|||
margin-left: 10px; }
|
||||
#custom-amount .address .address-types {
|
||||
text-align: center; }
|
||||
#custom-amount .address .amount {
|
||||
margin-top: 20vh;
|
||||
margin-bottom: 4vh;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
@media (max-height: 800px) {
|
||||
#custom-amount .address .amount {
|
||||
margin-top: 12vh;
|
||||
margin-bottom: 6vh; } }
|
||||
@media (max-height: 700px) {
|
||||
#custom-amount .address .amount {
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 4vh; } }
|
||||
@media (max-height: 600px) {
|
||||
#custom-amount .address .amount {
|
||||
margin-top: 6vh;
|
||||
margin-bottom: 2vh; } }
|
||||
#custom-amount .address .amount-alternative {
|
||||
line-height: 36px; }
|
||||
|
||||
#pin {
|
||||
background-color: #FAFAFA;
|
||||
|
|
@ -15262,6 +15374,8 @@ log-options #check-bar .checkbox-icon {
|
|||
#view-review .fee-summary {
|
||||
position: absolute;
|
||||
bottom: 92px; }
|
||||
#view-review .fee-summary-spacer {
|
||||
height: 15px; }
|
||||
#view-review .shapeshift-banner, #view-review .bitpay-banner, #view-review .egifter-banner {
|
||||
box-shadow: none; }
|
||||
#view-review .warning {
|
||||
|
|
@ -15644,6 +15758,9 @@ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer
|
|||
.size-24 {
|
||||
font-size: 24px; }
|
||||
|
||||
.size-25 {
|
||||
font-size: 25px; }
|
||||
|
||||
.size-28 {
|
||||
font-size: 28px; }
|
||||
|
||||
|
|
@ -15818,3 +15935,6 @@ input[type=file] {
|
|||
|
||||
.white-space-initial {
|
||||
white-space: initial; }
|
||||
|
||||
.height-spacer {
|
||||
height: 15px; }
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fee-summary-spacer"></div>
|
||||
<div class="height-spacer"></div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,5 +55,6 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="height-spacer"></div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
Loading…
Add table
Add a link
Reference in a new issue