Skip to content

Instantly share code, notes, and snippets.

@SuperCipher
Last active August 22, 2018 10:34
Show Gist options
  • Save SuperCipher/f8ace4b8092213982d3b93c96e0325cf to your computer and use it in GitHub Desktop.
Save SuperCipher/f8ace4b8092213982d3b93c96e0325cf to your computer and use it in GitHub Desktop.
.Charts {
margin: 0 auto;
background-color: #f9f9f9;
display: flex;
align-items: flex-end;
padding: 50px;
}
.Charts.horizontal {
display: block;
}
.Charts.horizontal .Charts--serie {
display: block;
margin: 0 0 30px 0;
border: 0;
}
.Charts.horizontal .Charts--serie label {
position: relative;
top: auto;
right: auto;
left: 0;
bottom: auto;
padding: 0 0 10px 0;
}
.Charts--serie {
height: 100%;
margin: 0 30px 0 0;
display: inline-block;
flex: 1;
display: flex;
align-items: flex-end;
transform-origin: 0 100%;
animation: slideUp .6s;
position: relative;
border-bottom: 1px solid #c2c2c2;
}
.Charts--serie.stacked {
display: block;
}
.Charts--serie label {
position: absolute;
left: 0;
right: 0;
bottom: -20px;
font-family: Helvetica, sans-serif;
font-size: 10px;
text-align: center;
color: #808080;
}
.Charts.horizontal .Charts--item {
display: block;
border-radius: 0 2px 2px 0;
margin: 0 0 5px 0;
height: 1em;
}
.Charts.horizontal .Charts--item b {
position: absolute;
right: -20px;
top: .3em;
}
.Charts--item {
background-color: #43A19E;
display: inline-block;
margin: 0 5px 0 0;
flex: 1;
transition: height 1s ease-out, width 1s ease-out;
position: relative;
text-align: center;
border-radius: 2px 2px 0 0;
}
.Charts--item.layered {
position: absolute;
left: 5%;
right: 5%;
bottom: 0;
margin: 0;
}
.Charts--item.layered b {
position: absolute;
right: 0;
}
.Charts--item.stacked {
position: relative;
display: block;
border-radius: 0;
}
.Charts--item b {
position: relative;
font-family: Helvetica, sans-serif;
font-size: 10px;
top: -20px;
color: #43A19E;
}
.Legend--color {
display: inline-block;
vertical-align: middle;
border-radius: 2px;
width: 16px;
height: 16px;
}
.Legend--label {
display: inline-block;
vertical-align: middle;
font-family: Helvetica, sans-serif;
font-size: 12px;
margin: 0 0 0 5px;
}
@keyframes slideUp {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment