search result table

app/search.jade

@@ -10,3 +10,4 @@ block content
     section.main.search-result
         include views/components/mainTitle
         include views/modules/search-filter
+        include views/modules/search-result-table

app/styles/main.scss

@@ -40,6 +40,7 @@ $prefix-for-spec:      true;
 @import 'modules/lightbox';
 @import 'modules/taskboard-table';
 @import 'modules/search-filter';
+@import 'modules/search-result-table';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/backlog-table.scss

@@ -13,7 +13,7 @@
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: flex-start;
-        padding: .5em 0;
+        padding: 1rem 0 1rem 1rem;
         text-align: left;
         width: 100%;
         @for $i from 1 through 8 {

app/styles/modules/search-filter.scss

@@ -1,6 +1,8 @@
 .search-filter {
     ul {
+        border-bottom: 3px solid $gray-light;
         display: flex;
+        padding-bottom: .5rem;
     }
     li {
         margin-right: 1rem;
@@ -9,6 +11,7 @@
         @extend %large;
         font-family: 'ostrichSans';
         opacity: .2;
+        &.active,
         &:hover {
             @include transition (opacity .3s linear);
             color: $blackish;

app/styles/modules/search-result-table.scss

@@ -0,0 +1,72 @@
+.search-result-table {
+    align-content: stretch;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 100%;
+    .row {
+        align-content: stretch;
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        padding: 1rem 0 1rem 1rem;
+        text-align: left;
+        width: 100%;
+        @for $i from 1 through 8 {
+            .width-#{$i} {
+                flex-basis: 50px;
+                flex-grow: $i;
+                flex-shrink: 0;
+            }
+        }
+        &:hover {
+            background: lighten($green-taiga, 60%);
+            @include transition (background .2s ease-in);
+        }
+    }
+    .row-selected {
+        background: lighten($green-taiga, 60%);
+        @include transition (background .2s ease-in);
+    }
+    .user-story-name {
+        flex-basis: 500px;
+        input {
+            vertical-align: top;
+        }
+        span {
+            display: inline-block;
+            max-width: 70%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .icon {
+            @extend %medium;
+            color: $gray-light;
+            &:hover {
+                color: $grayer;
+                @include transition (color .3s linear);
+            }
+        }
+    }
+    .title {
+        @extend %medium;
+        border-bottom: 1px solid $gray-light;
+        font-family: 'DroidSans-Bold';
+        &:hover {
+            background: transparent;
+        }
+    }
+    .table-main {
+        @extend %small;
+        border-bottom: 1px solid $gray-light;
+    }
+    .status,
+    .points {
+        position: relative;
+    }
+}

app/views/modules/search-result-table.jade

@@ -0,0 +1,14 @@
+section.search-result-table
+    div.row.title
+        div.user-stories.width-4 User Stories
+        div.status.width-2 Status
+        div.points.width-1 Points
+        div.points.width-1 Sprints
+    - for (var x = 0; x < 50; x++)
+        div.row.table-main
+            div.user-stories.width-4
+                div.user-story-name
+                    a(href="") Crear el perfil de usuario Senior en el admin
+            div.status.width-2 Status
+            div.points.width-1 12
+            div.points.width-1 54

csslintrc.json

@@ -18,5 +18,6 @@
     "unqualified-attributes": false,
     "regex-selectors": false,
     "floats": false,
-    "fallback-colors": false
+    "fallback-colors": false,
+    "adjoining-classes": false
 }