Slide effect in filters

app/coffee/modules/backlog/main.coffee

@@ -319,7 +319,7 @@ BacklogDirective = ($repo, $rootscope) ->
         $el.on "click", "#show-filters-button", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
-            $el.find("sidebar.filters-bar").toggle()
+            $el.find("sidebar.filters-bar").toggleClass("active")
             target.toggleClass("active")
             toggleText(target.find(".text"), ["Hide Filters", "Show Filters"]) # TODO: i18n
             $rootscope.$broadcast("resize")

app/partials/views/modules/filters.jade

@@ -1,12 +1,11 @@
 section.filters
-    header
+    div.filters-inner
         h1 filters
         form
             fieldset
                 input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$")
                 a.icon.icon-search(href="", title="search")
         div.filter-list
-            a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict"
-                            ng-class="{selected: tag.selected}")
+            a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict" ng-class="{selected: tag.selected}")
                 span.name(tg-bo-html="tag.name")
                 span.number(tg-bo-html="tag.count")

app/styles/modules/filters.scss

@@ -1,9 +1,29 @@
-.filters-bar {
-    display: none;
+.menu-secondary {
+    &.filters-bar {
+        @include table-flex-child(0, 1px, 0, 1px);
+        @include transition(all .3s linear);
+        padding: 0;
+        &.active {
+            @include table-flex-child(1, 260px, 0, 260px);
+            @include transition(all .3s linear);
+            padding: 2em 1em;
+
+            .filters-inner {
+                @include transition (all .5s ease-in);
+                opacity: 1;
+            }
+        }
+    }
 }
 
 .filters {
+
     form {
         margin-bottom: 2rem;
     }
 }
+
+.filters-inner {
+    opacity: 0;
+    @include transition (all .1s ease-in);
+}