ulovliglogning.dk/_scss/module/_donationCounter.scss
Jeppe Ernst a358c732b0 first try at a donation counter
needs more work on mobile
2018-03-24 14:34:12 +01:00

45 lines
1 KiB
SCSS

$donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCounter_goal * 100);
.donationCounter {
width: 100%;
height: 80px;
background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
position: absolute;
background-size: 200%;
background-position: 100%;
bottom: 0px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
animation: donationCounterSlideIn .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s forwards;
&:before, &:after {
content: "";
height: 30px;
width: 100%;
display: block;
position: absolute;
}
&:before {
background: linear-gradient(to left bottom, #2A2A2A 49%, transparent 50%);
top: 0px;
}
&:after {
background: linear-gradient(to left bottom, transparent 49%, #ff5802 50%);
bottom: 0;
}
}
@keyframes donationCounterSlideIn {
from {
background-position: 100%;
}
to {
background-position: $donationCounter_percentFromGoal + unquote("%");
}
}