Backlog graph show/hide refactor

app/partials/includes/components/sprint-summary.jade

@@ -25,4 +25,5 @@ div.summary.large-summary
             span.number(ng-bind="stats.iocaine_doses|default:'--'")
             span.description(translate="BACKLOG.SPRINT_SUMMARY.IOCAINE_DOSES")
             
-    a.icon.icon-stats.toggle-analytics-visibility(href="", title="{{'BACKLOG.SPRINT_SUMMARY.SHOW_STATISTICS_TITLE' | translate}}")
+    div.stats.toggle-analytics-visibility(title="{{'BACKLOG.SPRINT_SUMMARY.SHOW_STATISTICS_TITLE' | translate}}")
+        include ../../../svg/graph.svg

app/partials/includes/components/summary.jade

@@ -17,6 +17,6 @@ div.summary
         span.number(ng-bind="stats.speed | number:0") --
         span.description(translate="BACKLOG.SUMMARY.POINTS_PER_SPRINT")
 
-    a.icon.icon-stats.js-toggle-burndown-visibility-button(href="",
-                                      title="{{'BACKLOG.SPRINT_SUMMARY.TOGGLE_BAKLOG_GRAPH' | translate}}")
     
+    div.stats.js-toggle-burndown-visibility-button(title="{{'BACKLOG.SPRINT_SUMMARY.TOGGLE_BAKLOG_GRAPH' | translate}}")
+        include ../../../svg/graph.svg

app/styles/components/summary.scss

@@ -1,6 +1,8 @@
+$summary-background: $grayer;
+
 .summary {
     align-content: center;
-    background: $grayer;
+    background: $summary-background;
     color: $white;
     display: flex;
     flex-wrap: wrap;
@@ -16,26 +18,6 @@
             color: $fresh-taiga;
         }
     }
-    .icon {
-        font-size: 1.4rem;
-        margin-right: .4rem;
-        &.icon-stats {
-            color: $gray;
-            float: right;
-            transition: color .3s linear;
-            &:hover {
-                color: $fresh-taiga;
-                transition: color .3s linear;
-            }
-            &.active {
-                color: $fresh-taiga;
-            }
-            &.active:hover {
-                color: $gray;
-                transition: color .3s linear;
-            }
-        }
-    }
     .number {
         @extend %xlarge;
         @extend %bold;
@@ -48,6 +30,47 @@
         @extend %light;
         line-height: 1;
     }
+    .stats {
+        cursor: pointer;
+        height: 2rem;
+        margin-left: auto;
+        width: 2rem;
+        path {
+            opacity: 1;
+        }
+        &:hover {
+            .graph,
+            .color-line {
+                fill: $fresh-taiga;
+                transition: fill .2s;
+            }
+        }
+        &.active {
+            .white-line,
+            .color-line {
+                display: none;
+            }
+            .graph {
+                fill: $green-taiga;
+            }
+        }
+        svg {
+            height: 100%;
+            width: 100%;
+        }
+        .graph,
+        .color-line {
+            fill: darken($gray-light, 20%);
+            transition: fill .2s;
+        }
+        .white-line {
+            fill: $summary-background;
+        }
+        .white-line,
+        .color-line {
+            display: block;
+        }
+    }
 }
 
 .summary-progress-bar {
@@ -105,4 +128,28 @@
     .summary-stats-divider {
         margin-right: 2rem;
     }
+    .icon {
+        font-size: 1.4rem;
+        margin-right: .4rem;
+        &.icon-stats {
+            color: $green-taiga;
+            float: right;
+            transition: color .3s linear;
+            &:hover {
+                color: $fresh-taiga;
+                transition: color .3s linear;
+            }
+            &.active {
+                color: $fresh-taiga;
+            }
+            &.active:hover {
+                color: $green-taiga;
+                transition: color .3s linear;
+            }
+        }
+    }
+}
+
+.graphics-container {
+    @include slide(300px, hidden, 0);
 }

app/svg/graph.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 287.81297 236.94013">
+ <g transform="translate(-2.9e2 -5.7e2)">
+  <path class="graph" d="m4.7e2 5.7e2c-4.4 0-7.9 3.3-7.9 7.3v2e2c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-2e2c0-4.1-3.5-7.3-7.9-7.3h-45zm-72 70c-4.4 0-7.9 3.3-7.9 7.3v1.3e2c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-1.3e2c0-4.1-3.5-7.3-7.9-7.3h-45zm-72 62c-4.4 0-7.9 3.3-7.9 7.3v67c0 4.1 3.5 7.3 7.9 7.3h45c4.4 0 7.9-3.3 7.9-7.3v-67c0-4.1-3.5-7.3-7.9-7.3h-45z" />
+  <rect class="white-line" transform="rotate(-30)" rx="0" ry="0" height="28" width="3.1e2" y="8e2" x="-1.3e2"/>
+  <rect class="color-line" ry="0" rx="0" transform="rotate(-30)" height="28" width="3.1e2" y="8.3e2" x="-1.3e2"/>
+ </g>
+</svg>