ulovliglogning.dk/_scss/module/_donationCounter.scss

188 lines
3.9 KiB
SCSS
Raw Permalink Normal View History

$donationCounter_percentFromGoal1: 100 - ($donationCounter_donated / $donationCounter_goal1 * 100);
$donationCounter_percentFromGoal2: 100 - ($donationCounter_donated / $donationCounter_goal2 * 100);
$donationCounter_percentFromGoal3: 100 - ($donationCounter_donated / $donationCounter_goal3 * 100);
2018-07-07 12:59:13 +00:00
$donationCounter_percentFromGoal4: 100 - ($donationCounter_donated / $donationCounter_goal4 * 100);
$goal1_width: $donationCounter_goal1 / $donationCounter_goal4 * 100;
$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal4 * 100;
$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal4 * 100;
$goal4_width: ($donationCounter_goal4 - $donationCounter_goal3) / $donationCounter_goal4 * 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("%");
2018-07-07 12:59:13 +00:00
line-height: 74px;
@if $donationCounter_donated > $donationCounter_goal1 {
animation: donationCounterCelebrate 5s linear 1s forwards;
}
}
&.goal2 {
width: $goal2_width + unquote("%");
2018-07-07 12:59:13 +00:00
line-height: 84px;
@if $donationCounter_donated > $donationCounter_goal2 {
animation: donationCounterCelebrate 5s linear 1.5s forwards;
}
}
&.goal3 {
width: $goal3_width + unquote("%");
2018-07-07 12:59:13 +00:00
line-height: 95px;
@if $donationCounter_donated > $donationCounter_goal3 {
animation: donationCounterCelebrate 5s linear 2s forwards;
}
}
2018-07-07 12:59:13 +00:00
&.goal4 {
width: $goal4_width + unquote("%");
line-height: 116px;
@if $donationCounter_donated > $donationCounter_goal4 {
animation: donationCounterCelebrate 5s linear 2s forwards;
}
}
}
}
.donationCounter {
width: 100%;
height: 100%;
overflow: hidden;
2018-04-24 19:43:32 +00:00
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 {
2018-07-07 12:59:13 +00:00
background-position: $donationCounter_percentFromGoal4 + unquote("%");
}
2018-04-24 19:43:32 +00:00
}
@include media-breakpoint-down(sm) {
#intro {
padding-bottom: 8rem;
2018-04-24 19:43:32 +00:00
}
.donationContainer {
position: fixed;
height: 40px;
2018-04-24 19:43:32 +00:00
&:before, &:after {
display: none;
}
.total {
left:0;
transform: none;
text-align: center;
width: 100%;
2018-07-07 12:59:13 +00:00
background: rgba($body-bg, .8);
padding: 5px;
margin: -10px;
}
.overlay {
2018-07-07 13:52:05 +00:00
&.goal1, &.goal2, &.goal3, &.goal4 {
line-height: 40px;
2018-07-07 12:59:13 +00:00
font-size: .9rem;
}
}
2018-04-24 19:43:32 +00:00
}
}