accordion_table.scss refactor audit_log.scss refactor budget_chart.scss refactor delete checklist.scss dod_login_notice.scss refactor empty_state.scss refactor footer.scss refactor forms.scss refactor global_navigation.scss refactor delete member_edit.scss modal.scss refactor refactor portfolio_layout delete search_bar.scss selector.scss refactor sticky_cta.scss refactor refactor topbar.scss refactor accordions.scss refactor action_group.scss refactor block_list.scss refactor card.scss refactor icon css refactor inputs.scss refactor labels.scss refactor panel.scss sidename.scss tables.scss refactor uploader.scss application list and edit refactor home.scss refactor login.scss styles reports.scss refactor task_order.scss refactor
170 lines
2.7 KiB
SCSS
170 lines
2.7 KiB
SCSS
.budget-chart {
|
|
svg {
|
|
display: block;
|
|
|
|
.filter__text-background {
|
|
feFlood {
|
|
flood-color: $color-white;
|
|
flood-opacity: 1;
|
|
}
|
|
|
|
&--highlighted {
|
|
feFlood {
|
|
flood-color: $color-aqua-lightest;
|
|
flood-opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
stroke: $color-gray-light;
|
|
stroke-dasharray: 2px;
|
|
}
|
|
|
|
&:hover {
|
|
.filter__text-background {
|
|
feFlood {
|
|
flood-color: $color-aqua-lightest;
|
|
flood-opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
border-bottom: 1px solid $color-gray-light;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
&__legend {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
dl {
|
|
margin: 0 0 0 ($gap * 2);
|
|
|
|
> div {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
|
|
dt {
|
|
@include small-label;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__dot {
|
|
width: $gap;
|
|
height: $gap;
|
|
border-radius: $gap / 2;
|
|
margin: 0 $gap;
|
|
|
|
&.accumulated {
|
|
background-color: $color-gold;
|
|
}
|
|
|
|
&.monthly {
|
|
background-color: $color-blue;
|
|
}
|
|
}
|
|
|
|
&__line {
|
|
height: 2px;
|
|
width: $gap * 3;
|
|
border-top-width: 2px;
|
|
border-top-style: dashed;
|
|
margin: $gap;
|
|
|
|
&.spend {
|
|
border-color: $color-blue;
|
|
}
|
|
|
|
&.accumulated {
|
|
border-color: $color-gold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__block {
|
|
fill: transparent;
|
|
cursor: pointer;
|
|
|
|
&--highlighted {
|
|
fill: rgba($color-aqua, 0.15);
|
|
}
|
|
|
|
&--is-expiration {
|
|
border-left: 2px dotted $color-gray;
|
|
}
|
|
|
|
&:hover {
|
|
fill: rgba($color-aqua, 0.15);
|
|
}
|
|
}
|
|
|
|
&__bar {
|
|
fill: $color-blue;
|
|
|
|
&--projected {
|
|
fill: transparent;
|
|
stroke-width: 2px;
|
|
stroke: $color-blue;
|
|
stroke-dasharray: 4px;
|
|
}
|
|
}
|
|
|
|
&__expiration-line {
|
|
stroke-width: 2px;
|
|
stroke: $color-gray-light;
|
|
stroke-dasharray: 4px;
|
|
}
|
|
|
|
&__cumulative {
|
|
&__dot {
|
|
fill: $color-gold;
|
|
}
|
|
}
|
|
|
|
&__projected-path {
|
|
stroke-width: 1px;
|
|
stroke: $color-gold;
|
|
stroke-dasharray: 4px;
|
|
fill: none;
|
|
}
|
|
|
|
&__spend-path {
|
|
stroke-width: 1px;
|
|
stroke: $color-gold;
|
|
fill: none;
|
|
}
|
|
|
|
&__budget-line {
|
|
stroke-width: 2px;
|
|
stroke: $color-gray-light;
|
|
stroke-dasharray: 4px;
|
|
}
|
|
|
|
&__label {
|
|
@include small-label;
|
|
|
|
fill: $color-gray;
|
|
pointer-events: none;
|
|
|
|
&--strong {
|
|
fill: $color-black;
|
|
}
|
|
}
|
|
}
|