Filters module

app/backlog.jade

@@ -4,6 +4,8 @@ block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
+    sidebar.menu-secondary.extrabar
+        include views/modules/filters
     section.main.backlog
         include views/components/mainTitle
         include views/components/summary

app/layout.jade

@@ -9,6 +9,6 @@ html(lang="en")
     link(rel="stylesheet", href="styles/main.css")
     block head
   body
-    div.wrapper
     include views/modules/nav
+    div.wrapper
       block content

app/styles/components/filter.scss

@@ -0,0 +1,30 @@
+.single-filter {
+    display: block;
+    margin-bottom: .5em;
+    font-family: 'ostrichSans';
+    @extend .large;
+    height: 32px;
+    opacity: .5;
+    @include clearfix;
+    position: relative;
+    margin-bottom: 1rem;
+    &:hover {
+        opacity: 1;
+        @include transition (opacity .2s linear);
+        color: $grayer;
+    }
+    .name, .number {
+        padding: 8px 10px;
+    }
+    .name {
+        background: darken($whitish, 10%); /* Fallback */
+        display: block;
+        width: 100%;
+    }
+    .number {
+        background: darken($whitish, 20%); /* Fallback */
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}

app/styles/components/summary.scss

@@ -24,6 +24,21 @@
             color: $freshTaiga;
         }
     }
+    .number {
+        font-family: 'DroidSans-Bold';
+        @extend .xlarge;
+        float: left;
+        margin-right: .2rem;
+    }
+
+    .description {
+        font-family: 'DroidSans';
+        @extend .small;
+        float: left;
+        line-height: .9rem;
+        position: relative;
+        top: -6px;
+    }
 }
 
 .summary-progress-bar {
@@ -43,19 +58,3 @@
         height: 24px;
     }
 }
-
-.number {
-    font-family: 'DroidSans-Bold';
-    @extend .xlarge;
-    float: left;
-    margin-right: .2rem;
-}
-
-.description {
-    font-family: 'DroidSans';
-    @extend .small;
-    float: left;
-    line-height: .9rem;
-    position: relative;
-    top: -6px;
-}

app/styles/dependencies/forms.scss

@@ -0,0 +1,27 @@
+fieldset{
+    width: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    .icon {
+        position: absolute;
+        top: 6px;
+        right: 10px;
+    }
+}
+
+input[type="text"], input[type="email"], textarea{
+    font-family: 'ostrichSans';
+    @extend .large;
+    padding: 5px;
+    height: 32px;
+    background: $grayLight;
+    width: 100%;
+    border: 0;
+    margin: 0;
+    color: $grayer;
+    @include placeholder {
+        color: $white;
+    }
+}

app/styles/layout/base.scss

@@ -21,23 +21,26 @@ body {
     justify-content: flex-start;
     align-content: stretch;
     align-items: stretch;
+    padding-left: 90px;
 }
 
 .menu-secondary {
-    width: 200px;
     flex-grow: 1;
     flex-shrink: 0;
-    flex-basis: 200px;
+    flex-basis: 260px;
     padding: 2em 1em;
 }
 
+.extrabar {
+    background: $whitish;
+    /* display: none; */
+}
+
 .main {
-    width: 600px;
     flex-grow: 8;
     flex-shrink: 0;
-    flex-basis: 200px;
+    flex-basis: 600px;
     padding: 2em;
-    padding-left: calc(2em + 90px);
 }
 
 .icon {

app/styles/main.scss

@@ -16,6 +16,7 @@ $prefix-for-spec:      true;
 @import 'dependencies/typography';
 @import 'dependencies/elements';
 @import 'dependencies/mixins';
+@import 'dependencies/forms';
 
 //Components
 @import 'components/buttons';
@@ -23,6 +24,7 @@ $prefix-for-spec:      true;
 @import 'components/summary';
 @import 'components/popover';
 @import 'components/tag';
+@import 'components/filter';
 
 //Layout
 @import 'layout/base';
@@ -34,6 +36,7 @@ $prefix-for-spec:      true;
 @import 'modules/sprints';
 @import 'modules/burndown';
 @import 'modules/backlog-table';
+@import 'modules/filters';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/filters.scss

@@ -0,0 +1,9 @@
+.filters {
+    form {
+        margin-bottom: 2rem;
+    }
+}
+
+.filter-list {
+
+}

app/views/components/filter.jade

@@ -0,0 +1,3 @@
+a.single-filter(href="", title="filter")
+    span.name filter
+    span.number 23

app/views/modules/filters.jade

@@ -0,0 +1,10 @@
+section.filters
+    header
+        h1 filters
+        form
+            fieldset
+                input(type="text", placeholder="Filter Filters")
+                a.icon.icon-search(href="", title="search")
+        div.filter-list
+            - for (var x = 0; x < 10; x++)
+                include ../components/filter