mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-04 05:31:44 -04:00
80 lines
1.3 KiB
SCSS
80 lines
1.3 KiB
SCSS
@use "uswds-core" as *;
|
|
|
|
$delivered: color('blue-50v');
|
|
$pending: color('green-cool-40v');
|
|
$failed: color('orange-30v');
|
|
|
|
.chart-container {
|
|
display: flex;
|
|
height: units(8);
|
|
&.usage {
|
|
height: units(4);
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
border-radius: units(0.5);
|
|
&.delivered, &.usage {
|
|
background-color: $delivered;
|
|
margin-right: 1px;
|
|
}
|
|
&.pending{
|
|
background-color: $pending;
|
|
margin-right: 1px;
|
|
}
|
|
&.failed, &.remaining {
|
|
background-color: $failed;
|
|
}
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
margin: units(1) 0;
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-right: units(2);
|
|
}
|
|
.legend-color {
|
|
width: units(3);
|
|
height: units(3);
|
|
margin-right: 0;
|
|
padding: 0;
|
|
border-radius: 2px;
|
|
background-color: $delivered;
|
|
&.pending {
|
|
background-color: $pending;
|
|
}
|
|
&.failed, &.remaining {
|
|
background-color: $failed;
|
|
}
|
|
}
|
|
.legend-value {
|
|
margin: 0 units(1);
|
|
}
|
|
}
|
|
|
|
.usa-tooltip {
|
|
line-height: 1;
|
|
.usa-tooltip__body {
|
|
width: units(mobile);
|
|
height: auto;
|
|
white-space: wrap;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 300px;
|
|
height: 20px;
|
|
background-color: #eee;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-bar-inner {
|
|
height: 100%;
|
|
background-color: #007bff;
|
|
border-radius: inherit;
|
|
}
|