Attachments table

app/partials/views/modules/attachments.jade

@@ -1,18 +1,17 @@
 section.attachments
     div.attachments-header
-        div.attachments-inner
-            h3.attachments-title
-                span.icon.icon-attachment
-                span.attachments-num {{5}}
-                span.attachemnts-text attachments
+        h3.attachments-title
+            span.icon.icon-attachment
+            span.attachments-num 5
+            span.attachments-text attachments
             a.button.button-gray(href="", title="Add new attachment")
                 span +new file
     div.attachment-body
-        div.attachments-inner
-            div.attachment-single
+        - for(var x = 0; x < 3; x++)
+            div.single-attachment
                 div.attachment-name
                     span.icon.icon-document
-                    span pefildeusuario.png
+                    a(href="", title="Attachment pefildeusuario.png") pefildeusuario.png
                 div.attachment-comment
                     span Comentario sobre el contenido
                     span.attachment-size (125kb.)

app/styles/dependencies/mixins.scss

@@ -10,7 +10,7 @@
 }
 
 // Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex() {
+@mixin table-flex {
     align-content: stretch;
     align-items: stretch;
     display: flex;
@@ -32,3 +32,11 @@
 @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
     box-shadow: $h-shadow $v-shadow $blur $spread $color;
 }
+
+@mixin clearfix {
+    &:after {
+        clear: both;
+        content: '';
+        display: table;
+    }
+}

app/styles/layout/us-detail.scss

@@ -24,6 +24,18 @@
     }
 }
 
+.us-content {
+    ul {
+        margin-left: 1rem;
+    }
+    li {
+        list-style-type: disc;
+    }
+    a {
+        color: $green-taiga;
+    }
+}
+
 .user-story-tags {
     input {
         display: inline-block;

app/styles/modules/attachments.scss

@@ -1 +1,42 @@
+.attachments-header {
+    background: $whitish;
+    @include clearfix;
+    padding: .5rem 1rem;
+    .button {
+        float: right;
+        padding: .2rem 6rem;
+    }
+    .icon,
+    .attachments-num,
+    .attachments-text {
+        @extend %medium;
+        margin-right: .5rem;
+        position: relative;
+        top: 2px;
+    }
+}
 
+.single-attachment {
+    @include table-flex();
+    @extend %small;
+    border-bottom: 1px solid #cdcdcd;
+    padding: 1rem 0 1rem 1rem;
+    &:last-child {
+        border: 0;
+    }
+    .attachment-name {
+        @include table-flex-child(1, 200px);
+    }
+    .attachment-comment {
+        @include table-flex-child(3, 300px);
+        .attachment-size {
+            color: $gray-light;
+            margin-left: .5rem;
+        }
+    }
+    .icon {
+        @extend %large;
+        color: $gray-light;
+        display: none;
+    }
+}