ulovliglogning.dk/_scss/module/_donationCounter.scss
Jeppe Ernst baecd6b2fa maybe fixed mobile overflow…
har ikke en enhed med gammel iOS til at teste med 💩
2018-04-25 17:23:24 +02:00

66 lines
1.3 KiB
SCSS

$donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCounter_goal * 100);
.donationCounter {
width: 100%;
height: 100px;
font-size: 1.3rem;
background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
position: absolute;
background-size: 200%;
background-position: 100%;
bottom: 0px;
left: 0px;
right: 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;
sub {
display: block;
font-size: .8rem;
opacity: .5;
}
&: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("%");
}
}
@include media-breakpoint-down(sm) {
#intro {
padding-bottom: 6rem;
}
.donationCounter {
height: 80px;
&:before, &:after {
display: none;
}
}
}