Attachments module

app/partials/views/modules/attachments.jade

@@ -11,9 +11,12 @@ section.attachments
             div.single-attachment
                 div.attachment-name
                     span.icon.icon-document
-                    a(href="", title="Attachment pefildeusuario.png") pefildeusuario.png
+                    a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefildeusuariopefildeusuario.png
                 div.attachment-comment
                     span Comentario sobre el contenido
                     span.attachment-size (125kb.)
-                a.icon.icon-edit(href="","Edit")
-                a.icon.icon-drag-v(href="","Drag")
+                a.settings.icon.icon-edit(href="","Edit")
+                a.settings.icon.icon-drag-v(href="","Drag")
+        a.more-attachments(href="", title="show atachments history")
+            span + show atachments history
+            span.more-attachments-num (3 more)

app/styles/dependencies/typography.scss

@@ -177,7 +177,7 @@ a:visited {
 .icon-fontawesome-webfont:before {
     content: 'u';
 }
-.icon-fontawesome-webfont-1:before {
+.icon-document:before {
     content: 'v';
 }
 .icon-clipboard-notes:before {

app/styles/modules/attachments.scss

@@ -1,3 +1,7 @@
+.attachments {
+    margin-bottom: 2rem;
+}
+
 .attachments-header {
     background: $whitish;
     @include clearfix;
@@ -21,22 +25,57 @@
     @extend %small;
     border-bottom: 1px solid #cdcdcd;
     padding: 1rem 0 1rem 1rem;
+    position: relative;
     &:last-child {
         border: 0;
     }
     .attachment-name {
+        @include ellipsis(200px);
         @include table-flex-child(1, 200px);
+        padding-right: 1rem;
+        .icon {
+            margin-right: .5rem;
+        }
     }
     .attachment-comment {
-        @include table-flex-child(3, 300px);
+        @include table-flex-child(10, 300px);
         .attachment-size {
             color: $gray-light;
             margin-left: .5rem;
         }
     }
-    .icon {
+    .settings {
         @extend %large;
         color: $gray-light;
         display: none;
     }
+    &:hover {
+        @include transition (background .2s ease-in);
+        background: lighten($green-taiga, 60%);
+        .settings {
+            @include transition (opacity .2s ease-in);
+            display: block;
+            position: absolute;
+            top: 1rem;
+        }
+        .icon-edit {
+            right: 4rem;
+        }
+        .icon-drag-v {
+            cursor: move;
+            right: 1rem;
+        }
+    }
+}
+
+.more-attachments {
+    @extend %small;
+    border-bottom: 1px solid $gray-light;
+    color: $gray-light;
+    display: block;
+    padding: 1rem 0 1rem 1rem;
+    .more-attachments-num {
+        color: $green-taiga;
+        margin-left: .5rem;
+    }
 }