Wallet/src/sass/views/onboarding/onboard-collect-email.scss

156 lines
2.9 KiB
SCSS

#onboarding-collect-email {
background: rgb(17, 209, 166);
.scroll-content {
margin-top: 0;
height: 101%;
}
.scroll {
height: 100%;
}
#success-image {
margin-top: 4rem;
height: 10rem;
}
.col {
margin-top: 1rem;
margin-bottom: 1rem;
}
.collect-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;
button {
position: absolute;
right: 11px;
}
}
.collect-overlay{
top:-1px;
}
#collect-email {
opacity: 1;
background: #fff;
color: rgb(108, 108, 108);
height: 14rem;
animation-name: topBottom;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .4s;
animation-delay: 1s;
position: absolute;
bottom: -14rem;
animation-fill-mode: forwards;
z-index: 5;
margin-top: 0;
width: 100%;
form {
label {
background: rgba(200, 200, 200, 0.20);
height: 3rem;
margin-top:0;
i {
position: absolute;
right: 3%;
top: 1rem;
}
}
}
#news-updates{
padding-top:0;
.list{
max-width: 310px;
text-align: center;
width: 100%;
@include center-block();
label{
display: inline-block;
margin-top: 0;
padding-bottom: 1rem;
.checkbox{
left:0;
margin-left:0;
}
.item-content{
margin-left: 12%;
position: relative;
font-size:.8rem;
}
}
}
}
}
.item {
border: none;
label{
background: none;
}
.checkbox input:before,
.checkbox .checkbox-icon:before {
border-radius: 50% !important;
background: none;
border-width: 2px;
padding: .9rem;
position: relative;
left: -7px;
top: -8px;
}
.checkbox input:checked:after,
input:checked + .checkbox-icon:after {
border-color: rgb(19, 229, 182);
top:20%;
left:11%;
}
.item-content {
width: 90%;
margin-left: 10%;
}
}
.item-checkbox .checkbox {
margin-left: 10%;
top: 55%;
}
.checkbox input:before,
.checkbox .checkbox-icon:before{
border-color:$soft-blue;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: rgb(19, 229, 182);
}
}
@media (min-width: 1000px){
#onboarding-collect-email{
#collect-email{
p, form{
max-width: 600px;
@include center-block();
}
form{
margin-top:.5rem;
}
}
}
}
@keyframes topBottom {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}