mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-19 05:53:51 -04:00
161 lines
2.7 KiB
SCSS
161 lines
2.7 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);
|
|
font-size: units(1);
|
|
height: auto;
|
|
white-space: wrap;
|
|
line-height: units(1);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
// tabs
|
|
|
|
// .tab {
|
|
// display: flex;
|
|
// margin-bottom: 10px; /* Replace units(2) with 10px */
|
|
// }
|
|
|
|
// .tab button {
|
|
// cursor: pointer;
|
|
// border-radius: 0;
|
|
// margin-right: -1px; /* Replace units(-1px) with -1px */
|
|
// &:focus {
|
|
// outline-width: 2px;
|
|
// }
|
|
// &.active, &:hover {
|
|
// background-color: #0076d6; /* Assuming color("blue-60v") is #0076d6 */
|
|
// color: #FFF;
|
|
// box-shadow: none;
|
|
// }
|
|
// }
|
|
|
|
// .tabcontent {
|
|
// display: none;
|
|
// height: 400px;
|
|
// width: 100%;
|
|
// padding: 10px; /* Replace units(1) with 10px */
|
|
// }
|
|
|
|
#chartsArea {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.chart-subtitle {
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: units(2);
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.chart {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.axis text {
|
|
font-size: size("body", 2);
|
|
}
|
|
|
|
.axis line,
|
|
.axis path {
|
|
shape-rendering: crispEdges;
|
|
stroke: #000;
|
|
fill: none;
|
|
}
|
|
|
|
.bar {
|
|
fill-opacity: 0.8;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
position: relative; /* Ensure it is relative for absolute positioning of tooltip */
|
|
}
|
|
|
|
#tooltip {
|
|
position: absolute;
|
|
display: none;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
pointer-events: none;
|
|
font-size: size("body", 2);
|
|
z-index: 100; /* Ensure tooltip appears above other elements */
|
|
}
|