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

80
src/sass/views/onboarding/onboard-backup-request.scss
View file

@ -1,63 +1,31 @@
#onboarding-backup-request{
.warning{
margin:4rem auto 1rem;
height: 11rem;
#onboarding-backup-request {
#warning {
display: flex;
flex-direction: column;
height: calc(100vh - 320px);
justify-content: center;
align-content: center;
}
button{
color:#fff;
#alert-icon {
margin: 20px auto 5px;
height: 10vh;
}
#arrow-down{
@media (min-width: 570px){
#backup-description {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
#arrow-down {
font-size: 4.2rem;
color: $soft-blue;
}
.cta-buttons{
width:100%;
float:none;
position: absolute;
bottom: 0;
#backup-tldr {
font-size: 16px;
}
@media (min-width: 415px){
.warning{
height:16rem;
}
.cta-buttons {
@extend %cta-buttons;
padding-bottom: 10px;
}
}
@media (max-width: 399px){
#onboarding-backup-request{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
}
h3{
font-size:1.3rem;
}
p{
font-size:.9rem;
max-width: 80%;
flex: 0 0 80%;
}
.cta-buttons{
float:none;
bottom:0;
position: absolute;
button{
max-width: 400px;
}
}
}
}
@media (max-height: 540px){
#onboarding-backup-request{
.cta-buttons{
float:left;
position: relative;
}
}
}
@media (min-height: 980px){
#onboarding-backup-request{
#arrow-down{
margin-top: 7rem;
}
}
}