Mixin for slides

app/coffee/modules/taskboard/main.coffee

@@ -369,7 +369,7 @@ SprintGraphDirective = ->
                     redrawChart(element, $scope.stats.days)
 
                 $scope.$on "taskboard:graph:toggle-visibility", ->
-                    $el.toggle()
+                    $el.parent().toggleClass('open');
 
         $scope.$on "$destroy", ->
             $el.off()

app/partials/taskboard.jade

@@ -14,7 +14,7 @@ block content
             include views/components/sprint-summary
 
             div.graphics-container
-                div.burndown.hidden(tg-sprint-graph)
+                div.burndown(tg-sprint-graph)
                     include views/modules/burndown
 
             include views/modules/taskboard-table

app/partials/views/modules/lightbox_add-edit-task.jade

@@ -21,7 +21,9 @@ form
         div.description-preview.hidden
     div.new-us-settings
         fieldset
-            label.iocaine(for="iocaine-task icon-iocaine" data-icon="r") Iocaine
+            label.iocaine
+                span.icon.icon-iocaine(for="iocaine-task icon-iocaine")
+                span Iocaine
             input(type="checkbox", ng-model="task.is_iocaine", name="iocaine-task", id="iocaine-task")
         fieldset
             label.blocked(for="blocked-task") Blocked

app/styles/dependencies/mixins.scss

@@ -40,3 +40,13 @@
         display: table;
     }
 }
+
+@mixin slide($max, $overflow, $min: 0) {
+    @include transition(max-height .5s ease-in);
+    max-height: $min;
+    #{$overflow}: hidden;
+    &.open {
+        @include transition(max-height .5s ease-in);
+        max-height: $max;
+    }
+}

app/styles/layout/taskboard.scss

@@ -1,5 +1,5 @@
 .taskboard {
-    .burndown-container {
+    .graphics-container {
-        display: none;
+        @include slide(300px, overflow-y);
     }
 }

app/styles/modules/lightbox.scss

@@ -63,6 +63,24 @@
         max-height: 9rem;
         min-height: 7rem;
     }
+    label {
+        @extend %button;
+        @include transition(all .2s ease-in);
+        border: 1px solid $gray-light;
+        color: $grayer;
+        cursor: pointer;
+        display: block;
+        padding: 7px 30px;
+        &:hover {
+            span {
+                color: $white;
+            }
+        }
+        span {
+            color: $grayer;
+            vertical-align: middle;
+        }
+    }
     .new-us-settings {
         align-content: flex-start;
         align-items: stretch;
@@ -81,14 +99,6 @@
                 margin: 0;
             }
         }
-        label {
-            @extend %button;
-            @include transition(all .2s ease-in);
-            border: 1px solid $gray-light;
-            cursor: pointer;
-            display: block;
-            padding: 7px 30px;
-        }
         .requirement,
         .iocaine {
             &:hover {
@@ -96,6 +106,7 @@
                 background: $fresh-taiga;
                 border: 1px solid $fresh-taiga;
                 color: $white;
+
             }
             &.selected {
                 @include transition(all .2s ease-in);