fp/packages/next/assets/styles/calendar-heatmap.module.scss

89 lines
1.6 KiB
SCSS

$cell-height : 10px;
$cell-width : 10px;
$cell-margin:2px;
$cell-weekdays-width: 30px;
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
#container {
height: 514px;
width: 930px;
margin: 50px auto;
}
.timeline {
margin: 20px;
margin-bottom: 60px;
.timeline-months {
display: flex;
padding-left: $cell-weekdays-width;
&-month {
width: $cell-width;
margin: $cell-margin;
border: 1px solid transparent;
font-size: 10px;
}
.Jan~.Jan,
.Feb~.Feb,
.Mar~.Mar,
.Apr~.Apr,
.May~.May,
.Jun~.Jun,
.Jul~.Jul,
.Aug~.Aug,
.Sep~.Sep,
.Oct~.Oct,
.Nov~.Nov,
.Dec~.Dec {
visibility: hidden;
}
}
&-body {
display: flex;
.timeline-weekdays {
display: inline-flex;
flex-direction: column;
width: $cell-weekdays-width;
&-weekday {
font-size: 10px;
height: $cell-height;
border: 1px solid transparent;
margin: $cell-margin;
vertical-align: middle;
}
}
.timeline-cells {
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
height: #{(10 + 4) * 8}px;
&-cell {
height: $cell-height;
width: $cell-width;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: $cell-margin;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.05);
&:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
}
}
}
}
}