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

design(collectEmail): improve animations and layout

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-04 22:21:43 -04:00
commit 0c0ccbd105
3 changed files with 51 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/sass/variables.scss
View file

@ -10,6 +10,7 @@ $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);
$visible-radius: 6px;
/* Set ionic variables */
@ -20,7 +21,7 @@ $font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$button-border-radius: 6px;
$button-border-radius: $visible-radius;
$button-height: 52px;
$button-padding: 16px;

54
src/sass/views/onboarding/onboard-collect-email.scss
View file

@ -1,3 +1,5 @@
$relish-success: 1.3s;
#onboarding-collect-email {
background: rgb(17, 209, 166);
.overlay {
@ -13,33 +15,46 @@
margin-top: 0;
height: 101%;
}
.scroll {
height: 100%;
.success-message {
top: 30vh;
position: relative;
animation-name: slideUp;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .5s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
}
#success-image {
margin-top: 4rem;
height: 10rem;
}
.col {
margin-top: 1rem;
margin-bottom: 1rem;
width: 8rem;
margin: 0 auto;
}
.collect-overlay {
animation-name: opacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .2s;
animation-delay: .8s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
opacity: 0;
button {
position: absolute;
right: 11px;
right: 0;
}
}
.collect-overlay{
top:-1px;
}
}
.collect-overlay {
top:-1px;
}
.prompt {
padding: 2rem 2rem 1rem;
display: block;
}
#email-form {
margin: 0 2rem 1rem;
}
#email-input {
border-radius: $visible-radius;
}
#collect-email {
opacity: 1;
background: #fff;
@ -49,7 +64,7 @@
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .4s;
animation-delay: 1s;
animation-delay: $relish-success + .2s;
position: absolute;
bottom: -14rem;
animation-fill-mode: forwards;
@ -176,3 +191,12 @@
opacity: 1;
}
}
@keyframes slideUp {
0% {
top: 30vh;
}
100% {
top: 10vh;
}
}