atst/styles/components/_budget_chart.scss
mk-dds 5f99ceee5f CSS refactor
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
2019-07-30 11:10:29 -04:00

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;
}
}
}