ulovliglogning.dk/_scss/module/_donationCounter.scss

174 lines
3.5 KiB
SCSS

$donationCounter_percentFromGoal1: 100 - ($donationCounter_donated / $donationCounter_goal1 * 100);
$donationCounter_percentFromGoal2: 100 - ($donationCounter_donated / $donationCounter_goal2 * 100);
$donationCounter_percentFromGoal3: 100 - ($donationCounter_donated / $donationCounter_goal3 * 100);
$goal1_width: $donationCounter_goal1 / $donationCounter_goal3 * 100;
$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal3 * 100;
$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal3 * 100;
.donationContainer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
&:before, &:after {
content: "";
height: 30px;
width: 100%;
display: block;
position: absolute;
z-index: 1;
}
&:before {
background: linear-gradient(to left bottom, $body-bg 49%, transparent 50%);
top: 0px;
}
&:after {
background: linear-gradient(to left bottom, transparent 49%, $alternate-bg 50%);
bottom: 0;
}
.total {
display: block;
position: absolute;
left: 50%;
top: -35px;
transform: translate3d(-50%,0,0);
font-size: 1.5rem;
text-align: center;
sub {
display: block;
font-size: .7rem;
opacity: .5;
}
}
.overlay {
display: inline-block;
height: 100%;
border-right: 2px solid rgba(0,0,0,.3);
line-height: 100px;
&:last-child {
border-right: none;
}
&.goal1 {
width: $goal1_width + unquote("%");
line-height: 100 - ($goal1_width/2) + unquote("px");
@if $donationCounter_donated > $donationCounter_goal1 {
animation: donationCounterCelebrate 5s linear 1s forwards;
}
}
&.goal2 {
width: $goal2_width + unquote("%");
@if $donationCounter_donated > $donationCounter_goal2 {
animation: donationCounterCelebrate 5s linear 1.5s forwards;
}
}
&.goal3 {
width: $goal3_width + unquote("%");
line-height: 100 + ($goal3_width/2) + unquote("px");
@if $donationCounter_donated > $donationCounter_goal3 {
animation: donationCounterCelebrate 5s linear 2s forwards;
}
}
}
}
.donationCounter {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 1.3rem;
background: linear-gradient(to right, $donationCounter_light 50%, $donationCounter_dark 50%);
background-size: 200%;
background-position: 100%;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
animation: donationCounterSlideIn .5s linear .5s forwards;
sub {
display: block;
font-size: .8rem;
opacity: .5;
}
}
@keyframes donationCounterCelebrate {
0% {
background: $donationCounter_light;
//ransform: scale(1);
}
20% {
background: #efcc3d;
}
40% {
background: #5670de;
//transform: scale(1.4);
}
60% {
background: #de41b2;
}
80% {
background: #49ca61;
}
100% {
background: $donationCounter_light;
}
}
@keyframes donationCounterSlideIn {
from {
background-position: 100%;
}
to {
background-position: $donationCounter_percentFromGoal3 + unquote("%");
}
}
@include media-breakpoint-down(sm) {
#intro {
padding-bottom: 8rem;
}
.donationContainer {
position: fixed;
height: 40px;
&:before, &:after {
display: none;
}
.total {
left:0;
transform: none;
text-align: center;
width: 100%;
background: rgba($alternate-bg, .8);
padding: 5px;
margin: -10px;
}
.overlay {
&.goal1, &.goal2, &.goal3 {
line-height: 40px;
}
}
}
}