mirror of https://github.com/BTCPrivate/copay.git
design(welcome): improve welcome responsiveness, better scss organization
This commit is contained in:
parent
c54ac99b1c
commit
bdbbc1808e
Before Width: | Height: | Size: 713 B After Width: | Height: | Size: 713 B |
|
@ -1,23 +1,13 @@
|
||||||
<ion-view id="onboard-welcome" class="onboarding">
|
<ion-view id="onboard-welcome" class="onboarding">
|
||||||
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
|
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
|
||||||
<!-- <qr-scanner id="shopping-24" on-scan="goImport(data)"></qr-scanner> -->
|
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
|
||||||
<article id="logo-tagline">
|
<div id="logo-tagline">
|
||||||
<div class="row text-center">
|
<img src='img/bitpay-logo.svg' id="logo" />
|
||||||
<img src='img/bitpay-logo.svg' class="logo col col-50" />
|
<p translate class="lead">Take control of your money,<br /> get started with bitcoin.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row text-center">
|
<div id="cta-buttons">
|
||||||
<p translate class="text-center col col-60">
|
<button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||||
Take control of your money, <br /> get started with bitcoin.
|
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
|
||||||
<article id="cta-buttons">
|
|
||||||
<div class="row">
|
|
||||||
<button class="button button-block get-started col col-75" href ui-sref="onboarding.tour" translate>Get started</button>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<button class="button button-block restore col col-75" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "icons";
|
|
||||||
@import "ionic";
|
@import "ionic";
|
||||||
|
@import "icons";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "mixins/mixins";
|
@import "mixins/mixins";
|
||||||
@import "views/views";
|
@import "views/views";
|
||||||
|
|
|
@ -92,12 +92,6 @@ input[type=number] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-block {
|
|
||||||
width: 90% !important;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-wallet {
|
.name-wallet {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
|
@ -13,9 +13,15 @@ $light-gray: #9b9bab;
|
||||||
|
|
||||||
$positive: $soft-blue;
|
$positive: $soft-blue;
|
||||||
|
|
||||||
|
$font-size-base: 16px;
|
||||||
|
$font-size-small: 12px;
|
||||||
$font-family-sans-serif: $roboto;
|
$font-family-sans-serif: $roboto;
|
||||||
$font-family-light-sans-serif: $roboto-light;
|
$font-family-light-sans-serif: $roboto-light;
|
||||||
|
|
||||||
|
$button-border-radius: 6px;
|
||||||
|
$button-height: 52px;
|
||||||
|
$button-padding: 16px;
|
||||||
|
|
||||||
$base-background-color: $subtle-gray;
|
$base-background-color: $subtle-gray;
|
||||||
|
|
||||||
$item-default-active-bg: $subtle-gray;
|
$item-default-active-bg: $subtle-gray;
|
||||||
|
|
|
@ -1,34 +1,32 @@
|
||||||
#onboard-welcome {
|
#onboard-welcome {
|
||||||
ion-content {
|
& > ion-content {
|
||||||
background: url(../img/onboarding-welcome-bg.png);
|
background: url(../img/onboarding-welcome-bg.png);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
#shopping-24 {
|
}
|
||||||
content: url("../img/onboarding-welcome-shopping24.png");
|
#qrcode {
|
||||||
|
content: url("../img/onboarding-welcome-qrcode.png");
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
width: 35px;
|
width: 20px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.logo,
|
#logo-tagline {
|
||||||
p {
|
width: 100%;
|
||||||
@include center-block();
|
height: 70%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
.logo {
|
#logo {
|
||||||
margin-top: 20rem;
|
width: 40%;
|
||||||
}
|
max-width: 200px;
|
||||||
button {
|
margin: 5rem auto 0;
|
||||||
@include center-block(1rem);
|
|
||||||
color: #fff;
|
|
||||||
&.get-started {
|
|
||||||
background: rgb(100, 124, 232);
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
&.restore {
|
|
||||||
background: none;
|
|
||||||
}
|
}
|
||||||
|
.lead {
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
#cta-buttons {
|
#cta-buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -36,38 +34,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
button {
|
button {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:500px),
|
|
||||||
(max-height:800px) {
|
|
||||||
#onboard-welcome {
|
|
||||||
ion-content {
|
|
||||||
.logo {
|
|
||||||
margin-top: 12rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:420px) {
|
|
||||||
#onboard-welcome {
|
|
||||||
ion-content {
|
|
||||||
.logo {
|
|
||||||
margin-top: 8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height:550px) {
|
|
||||||
#onboard-welcome {
|
|
||||||
#cta-buttons {
|
|
||||||
position: relative !important;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,32 @@
|
||||||
|
$button-primary-bg: $positive;
|
||||||
|
$button-primary-text: #fff;
|
||||||
|
$button-primary-border: transparent;
|
||||||
|
$button-primary-active-bg: darken($positive, 5%);
|
||||||
|
$button-primary-active-border: transparent;
|
||||||
|
|
||||||
|
$button-secondary-bg: rgba(215, 215, 215, 0.1);
|
||||||
|
$button-secondary-text: #fff;
|
||||||
|
$button-secondary-border: transparent;
|
||||||
|
$button-secondary-active-bg: rgba(215, 215, 215, 0.2);
|
||||||
|
$button-secondary-active-border: transparent;
|
||||||
|
|
||||||
|
.onboarding .button {
|
||||||
|
&.button-primary {
|
||||||
|
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
|
||||||
|
@include button-clear($button-primary-bg);
|
||||||
|
@include button-outline($button-primary-bg);
|
||||||
|
}
|
||||||
|
&.button-secondary {
|
||||||
|
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
|
||||||
|
@include button-clear($button-secondary-text);
|
||||||
|
@include button-outline($button-secondary-text);
|
||||||
|
}
|
||||||
|
&.button-primary,
|
||||||
|
&.button-secondary {
|
||||||
|
&.button-block {
|
||||||
|
width: 85%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,15 +1,10 @@
|
||||||
.onboarding {
|
.onboarding {
|
||||||
background: rgba(30, 49, 134, 1);
|
background: #1e3186;
|
||||||
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
|
||||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
|
|
||||||
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
|
||||||
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
|
||||||
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
|
||||||
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
|
||||||
color: #fff;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
.bar.bar-header {
|
.bar.bar-header {
|
||||||
background: rgb(30, 49, 134);
|
background: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
button {
|
button {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -21,8 +16,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bar.bar-stable {
|
.bar.bar-stable {
|
||||||
border-color: transparent;
|
border: 0 none transparent;
|
||||||
border:none;
|
|
||||||
}
|
}
|
||||||
ion-content {
|
ion-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -57,34 +51,18 @@
|
||||||
@media (min-width: 450px){
|
@media (min-width: 450px){
|
||||||
p{
|
p{
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.col {
|
|
||||||
@include center-block(.5rem);
|
|
||||||
}
|
|
||||||
.swiper-pagination {
|
.swiper-pagination {
|
||||||
&-bullet {
|
&-bullet {
|
||||||
background: rgb(100, 124, 232);
|
background: $soft-blue;
|
||||||
&-active {
|
&-active {
|
||||||
background: rgb(100, 124, 232);
|
background: $soft-blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button-transparent{
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
.button-translucent{
|
|
||||||
background: rgba(215, 215, 215, 0.1)
|
|
||||||
}
|
|
||||||
.button-primary{
|
|
||||||
background: rgb(100, 124, 232) !important;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
.light-blue{
|
|
||||||
color:rgb(100, 124, 232);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 415px){
|
@media (min-width: 415px){
|
||||||
|
@ -95,19 +73,14 @@
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
line-height: 1.9rem;
|
line-height: 1.6;
|
||||||
}
|
|
||||||
p,h2,h3{
|
|
||||||
max-width: 600px !important;
|
|
||||||
}
|
|
||||||
button{
|
|
||||||
max-width: 400px !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "terms-of-use";
|
@import "terms-of-use";
|
||||||
|
@import "onboarding-buttons";
|
||||||
@import "onboard-welcome";
|
@import "onboard-welcome";
|
||||||
@import "onboard-tour";
|
@import "onboard-tour";
|
||||||
@import "onboard-collect-email";
|
@import "onboard-collect-email";
|
||||||
|
|
Loading…
Reference in New Issue