#bar-chart {
margin: 0 auto;
max-width: 900px;
position: relative;
}
#bar-chart h1 {
text-align: center;
margin: .5em 0 1em;
font-size: 2em;
font-weight: 600;
}
#bar-chart .row {
position: relative;
line-height: 1.25em;
margin-bottom: 2em;
height: 500px;
}
#bar-chart .row .segment {
-webkit-box-flex: 1;
-ms-flex: 1 100%;
flex: 1 100%;
display: block;
position: relative;
}
#bar-chart .row .segment:nth-child(even) {
background-color: rgba(255,255,255,.1);
}
#bar-chart .label {
display: block;
font-size: 1.25em;
}
/* X Axis */
#bar-chart .x-axis {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 4em;
height: 100%
}
#bar-chart .x-axis .year {
-webkit-box-flex: 1;
-ms-flex: 1;flex: 1;
}
#bar-chart .x-axis .year .col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
}
@-webkit-keyframes slide-up-one {
from {height: 0;}
to {height: 97%}
}
@keyframes slide-up-one {
from {height: 0;}
to {height: 97%}
}
@-webkit-keyframes slide-up-two {
from {height: 0;}
to {height: 88%}
}
@keyframes slide-up-two {
from {height: 0;}
to {height: 88%}
}
#bar-chart .x-axis .year .col .bar {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-item-align: end;
align-self: flex-end;
position: relative;
margin: 0 15%;
height: 0px;
-webkit-animation: slide-up-one .75s ease 1s forwards;
animation: slide-up-one .75s ease 1s forwards;
}
#bar-chart .x-axis .year .col .bar.one {
background-color: rgb(202,158,81);
background-color: rgba(202,158,81,.8);
}
#bar-chart .x-axis .year .col .bar.two {
background-color: rgb(56,181,156);
background-color: rgba(56,181,156,.8);
-webkit-animation-name: slide-up-two;
animation-name: slide-up-two;
}
#bar-chart .x-axis .year .col .bar .value {
font-size: 3em;
display: block;
position: absolute;
top: 50%;
left: 50%;
line-height: 1em;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#bar-chart .x-axis .label {
-ms-flex-item-align: end;
align-self: flex-end;
padding-top: 1em;
text-align: center;
}
/* Y Axis */
#bar-chart .y-axis {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
width: 100%;
}
#bar-chart .y-axis:after {
content: "";
width: 100%;
display: block;
height: 3px;
background-color: #fff;
position: absolute;
bottom: 0;
z-index: 1;
}
#bar-chart .y-axis .label {
text-align: right;
width: 2.5em;
margin-top: -7px;
}
/* Benchmark */
#bar-chart .row .segment.benchmark {
position: absolute;
width: 86%;
left: 9%;
background: none;
/*border-top: 4px dotted #38b59c;*/
background-image: linear-gradient(to right, #38b59c 20%, rgba(255, 255, 255, 0) 0%);
background-position: top;
background-size: 10px 2px;
background-repeat: repeat-x;
top: 1%;
}
#bar-chart .y-axis .benchmark .label {
width: auto;
padding-right: 2em;
color: #38b59c;
margin-top: -1em;
font-size: 1.5em;
}
#bar-chart .y-axis .benchmark .label:after {
content: "Benchmark";
display: block;
font-size: .7em;
margin-top: .75em;
}
font-size: .8em;
line-height: 1;
text-transform: uppercase;
width: 100%;
height: 40px;
margin-left: 130px;
background: repeating-linear-gradient(
to right,
#ddd,
#ddd 1px,
#fff 1px,
#fff 5%
);
&:after {
content: "";
display: block;
background-color: #3d9970;
width: 50px;
margin-bottom: 10px;
height: 90%;
position: relative;
top: 50%;
transform: translateY(-50%);
transition: background-color .3s ease;
cursor: pointer;
}
&:hover,
&:focus {
&:after {
background-color: #aaa;
}
}
}
@for $i from 1 through 100 {
.percentage-#{$i} {
&:after {
$value: ($i * 1%);
width: $value;
}
}
}