82 lines
1.5 KiB
SCSS
82 lines
1.5 KiB
SCSS
.report-card {
|
|
@include padding($space-normal $space-small $space-normal $space-two);
|
|
@include margin($zero);
|
|
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;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-icon {
|
|
color: var(--b-400);
|
|
margin-left: var(--space-micro);
|
|
}
|
|
|
|
.metric-wrap {
|
|
align-items: baseline;
|
|
display: flex;
|
|
}
|
|
|
|
.metric {
|
|
font-size: $font-size-big;
|
|
font-weight: $font-weight-feather;
|
|
margin-top: $space-smaller;
|
|
}
|
|
|
|
.metric-trend {
|
|
font-size: $font-size-small;
|
|
margin-left: $space-small;
|
|
}
|
|
|
|
.metric-up {
|
|
color: $success-color;
|
|
}
|
|
|
|
.metric-down {
|
|
color: $alert-color;
|
|
}
|
|
|
|
.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;
|
|
flex-direction: column;
|
|
@include flex-align(center, middle);
|
|
|
|
div {
|
|
width: 100%;
|
|
}
|
|
|
|
.empty-state {
|
|
@include margin($space-jumbo);
|
|
font-size: $font-size-default;
|
|
color: $color-gray;
|
|
}
|
|
}
|
|
}
|