pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

budget chart legend styles

Browse Source
This commit is contained in:
Andrew Croce 2018-09-11 09:47:59 -04:00
parent 1ffeaf756a
commit f3cbe60b0c
1 changed files with 60 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
styles/components/_budget_chart.scss
View File

@ -1,6 +1,62 @@
.budget-chart { .budget-chart {
.budget-chart__header { .budget-chart__header {
border-bottom: 1px solid $color-gray-light; border-bottom: 1px solid $color-gray-light;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.budget-chart__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;
}
.budget-chart__legend__dot {
width: $gap;
height: $gap;
border-radius: $gap / 2;
margin: 0 $gap;
&.accumulated {
background-color: $color-gold;
}
&.monthly {
background-color: $color-blue;
}
}
.budget-chart__legend__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;
}
}
}
}
}
} }
.budget-chart__block { .budget-chart__block {
@ -36,7 +92,7 @@
fill: transparent; fill: transparent;
stroke-width: 2px; stroke-width: 2px;
stroke: $color-blue; stroke: $color-blue;
stroke-dasharray: 2px; stroke-dasharray: 4px;
} }
} }
@ -47,7 +103,7 @@
.budget-chart__projected-path { .budget-chart__projected-path {
stroke-width: 1px; stroke-width: 1px;
stroke: $color-gold; stroke: $color-gold;
stroke-dasharray: 2px; stroke-dasharray: 4px;
fill: none; fill: none;
} }
@ -60,21 +116,15 @@
.budget-chart__budget-line { .budget-chart__budget-line {
stroke-width: 2px; stroke-width: 2px;
stroke: $color-gray-light; stroke: $color-gray-light;
stroke-dasharray: 2px; stroke-dasharray: 4px;
} }
.budget-chart__label { .budget-chart__label {
@include h6; @include small-label;
font-weight: bold;
text-transform: none;
fill: $color-gray; fill: $color-gray;
&--strong { &--strong {
fill: $color-black; fill: $color-black;
} }
} }
.budget-chart__budget-text {
}
} }