Skip to content

Instantly share code, notes, and snippets.

@seeb0h
Created June 6, 2016 12:43
Show Gist options
  • Save seeb0h/86d2f35b1089ac3460be10677f0ae9ae to your computer and use it in GitHub Desktop.
Save seeb0h/86d2f35b1089ac3460be10677f0ae9ae to your computer and use it in GitHub Desktop.
CSS to use with this JS gist : https://gist.github.com/CGamesPlay/8628541
.figure {
overflow: auto;
margin: 1em 0;
}
.figure table {
margin: 0;
}
.figure > input {
display: none;
}
.figure > .tabs {
text-align: right;
margin-bottom: 10px;
}
.tabs {
border-bottom: solid 1px #aaa;
font-size: 14px;
}
.tabs label {
display: inline-block;
background: #ddd;
border: solid 1px #aaa;
border-radius: 5px 5px 0 0;
padding: 1px 4px 0;
margin: 1px 3px -3px;
}
.view_table:checked ~ .tabs .view_table,
.view_chart:checked ~ .tabs .view_chart {
background: #fff;
border-bottom: none;
padding-bottom: 1px;
}
.figure > table, .figure > canvas {
clear: right;
float: left;
margin-right: -100%;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 500ms;
}
.figure .view_table:checked ~ table,
.figure .view_chart:checked ~ canvas {
opacity: 1;
pointer-events: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment