rmit-programming-club/network-vis

View on GitHub
app/assets/stylesheets/cal-heatmap.css

Summary

Maintainability
Test Coverage
/* Cal-HeatMap CSS */

.cal-heatmap-container {
    display: block;
}

.cal-heatmap-container .graph
{
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.cal-heatmap-container .graph-label
{
    fill: #999;
    font-size: 10px
}

.cal-heatmap-container .graph, .cal-heatmap-container .graph-legend rect {
    shape-rendering: crispedges
}

.cal-heatmap-container .graph-rect
{
    fill: #ededed
}

.cal-heatmap-container .graph-subdomain-group rect:hover
{
    stroke: #000;
    stroke-width: 1px
}

.cal-heatmap-container .subdomain-text {
    font-size: 8px;
    fill: #999;
    pointer-events: none
}

.cal-heatmap-container .hover_cursor:hover {
    cursor: pointer
}

.cal-heatmap-container .qi {
    background-color: #999;
    fill: #999
}

/*
Remove comment to apply this style to date with value equal to 0
.q0
{
    background-color: #fff;
    fill: #fff;
    stroke: #ededed
}
*/

.cal-heatmap-container .q1
{
    background-color: #dae289;
    fill: #dae289
}

.cal-heatmap-container .q2
{
    background-color: #cedb9c;
    fill: #9cc069
}

.cal-heatmap-container .q3
{
    background-color: #b5cf6b;
    fill: #669d45
}

.cal-heatmap-container .q4
{
    background-color: #637939;
    fill: #637939
}

.cal-heatmap-container .q5
{
    background-color: #3b6427;
    fill: #3b6427
}

.cal-heatmap-container rect.highlight
{
    stroke:#444;
    stroke-width:1
}

.cal-heatmap-container text.highlight
{
    fill: #444
}

.cal-heatmap-container rect.highlight-now
{
    stroke: red
}

.cal-heatmap-container text.highlight-now
{
    fill: red;
    font-weight: 800
}

.cal-heatmap-container .domain-background {
    fill: none;
    shape-rendering: crispedges
}

.ch-tooltip {
    padding: 10px;
    background: #222;
    color: #bbb;
    font-size: 12px;
    line-height: 1.4;
    width: 140px;
    position: absolute;
    z-index: 99999;
    text-align: center;
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    display: none;
    box-sizing: border-box;
}

.ch-tooltip::after{
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: "";
    padding: 0;
    display: block;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0;
    border-top-color: #222;
}