Each bar contains a .value
element, this element needs to be styled to respond to the following characteristics:
Its height must conform to its
data-value-percentage
valueIt must be aligned on the bottom of its parent
data-bar
elementIt must show somewhere the value of its
data-value-label
valueIt must have some sort of margin between itself and the next chart bar
Let's start with these last two points. First, we can use absolute positioning to place the .value
element at the bottom of its parent and at a chosen distance from its parent's right and left borders.
Here's the required CSS:
.value{ position: absolute; bottom: 0; left: 6%; right: 6%; }
The required behavior regarding the height of the bar can be achieved by looping from 0
to 100
and printing a CSS rule that sets the height
property according to the current loop index as follows:
@for $i from 0 through 100{ *[data-value-percentage='#{$i}']{ height: 0% + $i; } }
Finally, we can use the same trick...