anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

design(tour): improve tour responsiveness, better scss organization

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-04 20:49:22 -04:00
commit 3fbb626141
10 changed files with 146 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/sass/icons.scss
View file

@ -20,7 +20,7 @@
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
box-shadow: $hovering-box-shadow;
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;

4
src/sass/variables.scss
View file

@ -8,6 +8,8 @@ $roboto-light: "Roboto-Light", sans-serif-light;
$dark-gray: #445;
$mid-gray: #667;
$light-gray: #9b9bab;
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
/* Set ionic variables */
@ -31,4 +33,4 @@ $tabs-icon-size: 22px;
$ios-transition-duration: 200ms;
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$card-box-shadow: $subtle-box-shadow;

93
src/sass/views/onboarding/onboard-tour.scss
View file

@ -1,69 +1,40 @@
#onboard-tour {
&-secure {
#cta {
background-image: url(../img/onboarding-tour-phone.svg);
height: 17rem;
margin-bottom:-1.5rem;
}
}
#onboarding-tour {
&-currency {
#cta {
background-image: url(../img/onboarding-tour-currency-bg.svg);
height:18rem;
}
.next-slide {
margin-top: 3rem;
}
}
&-control {
#cta {
background-image: url(../img/onboarding-tour-control.svg);
margin-bottom: .05rem;
height: 15rem;
background-position: top;
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 100px;
}
.cta-button{
position: absolute;
bottom: 85px;
}
}
@media (max-width: 359px){
#onboard-tour{
&-secure, &-currency, &-control{
#cta{
height: 14rem;
}
}
}
}
@media (min-width: 450px){
#onboard-tour{
&-secure, &-currency, &-control{
#cta{
height: 26rem;
}
}
}
}
@media (min-width: 1000px){
#onboard-tour{
p, h2, h3{
max-width: 600px;
}
button{
max-width: 400px;
}
#cta{
margin: 2rem 0 0;
}
&-control{
#cta{
margin-bottom: 2rem;
}
}
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
margin: 1rem 3rem .5rem;
}
.onboarding-topic {
font-size: 24px;
}
.onboarding-description {
font-size: 16px;
color: rgba(255,255,255,0.5);
}
.onboarding-tldr {
font-size: 18px;
margin-bottom: 1em;
}
#onboarding-illustration-currency-exchange-rate {
background-color: $soft-blue;
border-radius: $button-border-radius;
box-shadow: $subtle-box-shadow;
font-size: 14px;
font-weight: bold;
height: 40px;
line-height: 38px;
margin: 10px auto 0;
position: relative;
width: 120px;
z-index: 1;
}
}

11
src/sass/views/onboarding/onboard-welcome.scss
View file

@ -25,15 +25,12 @@
max-width: 200px;
margin: 5rem auto 0;
}
.lead {
#lead {
line-height: 1.6;
font-size: 18px;
}
#cta-buttons {
position: absolute;
bottom: 0;
width: 100%;
button {
max-width: 400px;
}
@extend %cta-buttons;
padding-bottom: 1rem;
}
}

1
src/sass/views/onboarding/onboarding-buttons.scss
View file

@ -25,6 +25,7 @@ $button-secondary-active-border: transparent;
&.button-secondary {
&.button-block {
width: 85%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}

35
src/sass/views/onboarding/onboarding.scss
View file

@ -5,6 +5,7 @@
text-align: center;
.bar.bar-header {
background: none;
border: 0 none transparent;
color: #fff;
button {
color: #fff;
@ -15,9 +16,6 @@
}
}
}
.bar.bar-stable {
border: 0 none transparent;
}
ion-content {
height: 100%;
.scroll{
@ -79,6 +77,12 @@
}
}
%cta-buttons {
position: absolute;
bottom: 0;
width: 100%;
}
@import "terms-of-use";
@import "onboarding-buttons";
@import "onboard-welcome";
@ -88,3 +92,28 @@
@import "../backup-warning";
@import "onboard-disclaimer";
@import "onboard-push-notifications";
%onboarding-illustration {
position: absolute;
width: 100%;
height: 40%;
margin-top: 25vh;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.onboarding-illustration {
&-secure {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-phone.svg);
}
&-currency {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-currency-bg.svg);
}
&-control {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-control.svg);
}
}

2
src/sass/views/wallet-backup-phrase.scss
View file

@ -44,7 +44,7 @@
}
.select-word {
background: #fff;
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
box-shadow: $hovering-box-shadow;
margin: .1rem 0;
display: inline-block;
padding: 0 5px;