Add some style to attachments (thanks @uptonic)

assets/demo.html

@@ -35,6 +35,75 @@
         padding: 0;
       }
 
+      figure.attachment {
+        position: relative;
+        padding: 0;
+        margin: 0;
+      }
+
+      figure.attachment.file {
+        border-radius: .4rem;
+        border: 1px solid rgba(0,0,0,0.15);
+        font-size: 1em;
+        overflow: hidden;
+        padding: 1rem 1.5rem;
+        position: relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      figure.attachment.file:before {
+        position: relative;
+        content: '';
+        display: inline-block;
+        height: 3.6rem;
+        width: 3rem;
+        vertical-align: middle;
+        z-index: 1;
+        background-image: url("/file_icon.png");
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+      }
+
+      figure.attachment.file figcaption {
+        position: relative;
+        white-space: nowrap;
+        vertical-align: middle;
+        display: inline-block;
+        z-index: 1;
+      }
+
+      figure.attachment.file span.size {
+        color: #aa9c84;
+        margin-left: 1rem;
+      }
+
+      figure.attachment.image img {
+        position: relative;
+        z-index: 1;
+      }
+
+      figure.attachment progress[value] {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      figure.attachment progress[value]::-webkit-progress-bar {
+        background-color: transparent;
+        border-radius: .6rem;
+        width: 100%;
+      }
+
+      figure.attachment progress[value]::-webkit-progress-value {
+        background-color: #e6f6fc;
+        border-radius: .4rem 0 0 .4rem;
+      }
+
       #debug {
         white-space: pre-wrap;
       }
@@ -91,35 +160,6 @@
         display: block;
       }
 
-      .trix-editor figure.attachment {
-        font-family: monospace;
-        width: 100px;
-        margin: 2px 4px;
-        padding: 5px;
-        border: 1px solid #BDBDBD;
-        border-radius: 3px;
-        display: inline-block;
-      }
-
-      .trix-editor .attachment .extension {
-        background-color: #BDBDBD;
-        color: white;
-        border-radius: 3px;
-        text-transform: uppercase;
-        font-size: 2em;
-        text-align: center;
-        padding: 8px 0;
-        margin-bottom: 5px;
-      }
-
-      .trix-editor .attachment figcaption {
-        font-size: .8em;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       textarea.debug {
         width: 90%;
         max-width: 450px;

src/trix/views/file_attachment_view.coffee

@@ -6,6 +6,8 @@
 class Trix.FileAttachmentView extends Trix.AttachmentView
   render: ->
     element = super
+    element.classList.add("file")
+
     caption = document.createElement("figcaption")
     caption.textContent = @attachmentPiece.getFilename()
 

src/trix/views/image_attachment_view.coffee

@@ -3,6 +3,7 @@
 class Trix.ImageAttachmentView extends Trix.AttachmentView
   render: ->
     element = super
+    element.classList.add("image")
     image = document.createElement("img")
 
     if @attachmentPiece.isPending()