From f3cbe60b0cd5349fe145f04366ca363c59527be1 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 11 Sep 2018 09:47:59 -0400
Subject: [PATCH] budget chart legend styles

---
 styles/components/_budget_chart.scss | 70 ++++++++++++++++++++++++----
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/styles/components/_budget_chart.scss b/styles/components/_budget_chart.scss
index 351094a2..92c22c39 100644
--- a/styles/components/_budget_chart.scss
+++ b/styles/components/_budget_chart.scss
@@ -1,6 +1,62 @@
 .budget-chart {
   .budget-chart__header {
     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 {
@@ -36,7 +92,7 @@
       fill: transparent;
       stroke-width: 2px;
       stroke: $color-blue;
-      stroke-dasharray: 2px;
+      stroke-dasharray: 4px;
     }
   }
 
@@ -47,7 +103,7 @@
   .budget-chart__projected-path {
     stroke-width: 1px;
     stroke: $color-gold;
-    stroke-dasharray: 2px;
+    stroke-dasharray: 4px;
     fill: none;
   }
 
@@ -60,21 +116,15 @@
   .budget-chart__budget-line {
     stroke-width: 2px;
     stroke: $color-gray-light;
-    stroke-dasharray: 2px;
+    stroke-dasharray: 4px;
   }
 
   .budget-chart__label {
-    @include h6;
-    font-weight: bold;
-    text-transform: none;
+    @include small-label;
     fill: $color-gray;
 
     &--strong {
       fill: $color-black;
     }
   }
-
-  .budget-chart__budget-text {
-
-  }
 }