updated and fixed issues with collect email view styling, moved skip button to top right
This commit is contained in:
parent
57c1942740
commit
d2b5a70d93
3 changed files with 50 additions and 28 deletions
|
|
@ -1,4 +1,8 @@
|
|||
@mixin center-block($topBottom: 0) {
|
||||
float:none;
|
||||
margin: $topBottom auto;
|
||||
}
|
||||
|
||||
.center-block{
|
||||
@include center-block();
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue