2019-08-14 09:48:44 +00:00
|
|
|
.report-card {
|
|
|
|
@include padding($space-normal $space-small $space-normal $space-two);
|
|
|
|
@include margin($zero);
|
|
|
|
@include background-light;
|
|
|
|
cursor: pointer;
|
|
|
|
@include custom-border-top(3px, transparent);
|
|
|
|
&.active {
|
|
|
|
@include custom-border-top(3px, $color-woot);
|
|
|
|
@include background-white;
|
|
|
|
.heading,
|
|
|
|
.metric {
|
|
|
|
color: $color-woot;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.heading {
|
|
|
|
@include margin($zero);
|
|
|
|
font-size: $font-size-small;
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
color: $color-heading;
|
|
|
|
}
|
|
|
|
.metric {
|
|
|
|
font-size: $font-size-bigger;
|
|
|
|
font-weight: $font-weight-feather;
|
|
|
|
}
|
|
|
|
.desc {
|
|
|
|
@include margin($zero);
|
|
|
|
font-size: $font-size-small;
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.report-bar {
|
|
|
|
@include margin(-1px $zero);
|
|
|
|
@include background-white;
|
|
|
|
@include border-light;
|
|
|
|
@include padding($space-small $space-medium);
|
|
|
|
.chart-container {
|
|
|
|
@include flex;
|
2019-10-20 08:04:19 +00:00
|
|
|
flex-direction: column;
|
2019-08-14 09:48:44 +00:00
|
|
|
@include flex-align(center, middle);
|
|
|
|
div {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.empty-state {
|
|
|
|
@include margin($space-jumbo);
|
|
|
|
font-size: $font-size-default;
|
|
|
|
color: $color-gray;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|