updated and fixed issues with collect email view styling, moved skip button to top right

This commit is contained in:
Jamal Jackson 2016-09-08 15:41:44 -04:00
commit d2b5a70d93
3 changed files with 50 additions and 28 deletions

View file

@ -1,4 +1,8 @@
@mixin center-block($topBottom: 0) {
float:none;
margin: $topBottom auto;
}
.center-block{
@include center-block();
}

View file

@ -1,5 +1,9 @@
#onboarding-collect-email {
background: rgb(17, 209, 166);
.scroll-content {
margin-top: 0;
height: 101%;
}
.scroll {
height: 100%;
}
@ -10,6 +14,25 @@
margin-top: 1rem;
margin-bottom: 1rem;
}
.collect-overlay, .bar-overlay {
animation-name: opacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .2s;
animation-delay: .8s;
animation-fill-mode: forwards;
opacity: 0;
}
.collect-overlay{
top:-1px;
}
.bar-overlay{
background: rgba(0, 0, 0, 0.23);
.button-clear{
color:#fff;
min-width: 100%;
}
}
#collect-email {
opacity: 1;
background: #fff;
@ -18,8 +41,8 @@
animation-name: topBottom;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-delay: 2s;
animation-duration: .4s;
animation-delay: 1s;
position: absolute;
bottom: -14rem;
animation-fill-mode: forwards;
@ -29,7 +52,7 @@
label {
background: rgba(200, 200, 200, 0.20);
height: 3rem;
margin-top:0;
margin-top: 0;
input {
position: absolute;
}
@ -40,15 +63,6 @@
}
}
}
.overlay {
animation-name: bottomTop;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
top: 100%;
}
}
@keyframes topBottom {
@ -60,11 +74,11 @@
}
}
@keyframes bottomTop {
@keyframes opacity {
0% {
top: 100%;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}