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

design(onboarding): polish the notification and backupRequest views

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-06 21:12:24 -04:00
commit 550d1c0630
8 changed files with 90 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
.onboarding {
background: #1e3186;
color: #fff;
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
height: 100%;
text-align: center;
@ -10,71 +11,40 @@
button {
color: #fff;
}
.secondary-buttons {
button {
color: rgba(255, 255, 255, .5);
}
}
}
ion-content {
height: 100%;
.scroll{
height: 100%;
}
color: #fff;
h2, h3{color:#fff;}
h2 {
font-size: 1.4rem;
}
p {
&.tagline {
color: rgba(255, 255, 255, .5);
}
}
#cta {
background-size: contain;
width: 100%;
clear: both;
height: 23rem;
margin-bottom: -3rem;
background-position: center;
background-repeat: no-repeat;
img {
height: 16rem;
}
}
button {
color:#fff;
}
@media (min-width: 450px){
p{
font-size: 1.1rem;
line-height: 1.6;
}
}
}
.swiper-pagination {
&-bullet {
background: $soft-blue;
&-active {
background: $soft-blue;
}
}
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
margin-left: 3rem;
margin-right: 3rem;
}
.onboarding-topic {
font-size: 24px;
margin-top: .5rem;
line-height: 1.3;
}
.onboarding-description {
margin-top: 1rem;
font-size: 16px;
color: rgba(255,255,255,0.5);
line-height: 1.5;
}
.onboarding-tldr {
font-size: 18px;
margin-top: 1rem;
margin-bottom: 1em;
line-height: 1.3;
}
}
@media (min-width: 415px){
.onboarding{
ion-content{
h2{
font-size: 2rem;
}
p{
font-size: 1.4rem;
line-height: 1.6;
}
}
}
//
}
%cta-buttons {
@ -116,4 +86,8 @@
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-control.svg);
}
&-notifications {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-push-notifications.svg);
}
}