1 files changed, 204 insertions, 0 deletions
diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
new file mode 100644
index 00000000..583e5703
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -0,0 +1,204 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Attachment {
+    display: flex;
+
+    &:hover .o_Attachment_asideItemUnlink.o-pretty {
+        transform: translateX(0);
+    }
+}
+
+.o_Attachment_action {
+    min-width: 20px;
+}
+
+.o_Attachment_actions {
+    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+}
+
+.o_Attachment_aside {
+    position: relative;
+    overflow: hidden;
+
+    &:not(.o-has-multiple-action) {
+        min-width: 50px;
+    }
+
+    &.o-has-multiple-action {
+        min-width: 30px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.o_Attachment_asideItem {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Attachment_asideItemUnlink.o-pretty {
+    position: absolute;
+    top: 0;
+    transform: translateX(100%);
+}
+
+.o_Attachment_details {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    min-width: 0; /* This allows the text ellipsis in the flex element */
+    /* prevent hover delete button & attachment image to be too close to the text */
+    padding-left : map-get($spacers, 1);
+    padding-right : map-get($spacers, 1);
+}
+
+.o_Attachment_filename {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.o_Attachment_image {
+    flex-shrink: 0;
+    margin: 3px;
+
+    &.o-details-overlay {
+        position: relative;
+        // small, medium and large size styles should be sync with
+        // the size of the background-image and `.o_Attachment_image`.
+        &.o-small {
+            min-width: 100px;
+            min-height: 100px;
+        }
+        &.o-medium {
+            min-width: 200px;
+            min-height: 200px;
+        }
+        &.o-large {
+            min-width: 400px;
+            min-height: 400px;
+        }
+
+        &:hover {
+            .o_Attachment_imageOverlay {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.o_Attachment_imageOverlay {
+    bottom: 0;
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    left: 0;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.o_Attachment_imageOverlayDetails {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin: 3px;
+    width: 200px;
+}
+
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Attachment {
+    &.o-has-card-details {
+        background-color: gray('300');
+        border-radius: 5px;
+    }
+}
+
+.o_Attachment_action {
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+}
+
+.o_Attachment_aside {
+    border-radius: 0 5px 5px 0;
+}
+
+.o_Attachment_asideItemDownload {
+    cursor: pointer;
+
+    &:hover {
+        background-color: gray('400');
+    }
+}
+
+.o_Attachment_asideItemUnlink {
+    cursor: pointer;
+
+    &:not(.o-pretty):hover {
+        background-color: gray('400');
+    }
+
+    &.o-pretty {
+        color: white;
+        background-color: $o-brand-primary;
+
+        &:hover {
+            background-color: darken($o-brand-primary, 10%);
+        }
+    }
+
+}
+
+.o_Attachment_asideItemUploaded {
+    color: $o-brand-primary;
+}
+
+.o_Attachment_extension {
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: 400;
+}
+
+.o_Attachment_image.o-attachment-viewable {
+    cursor: zoom-in;
+
+    &:not(.o-details-overlay):hover {
+        opacity: 0.7;
+    }
+}
+
+.o_Attachment_imageOverlay {
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
+    border-radius: 5px;
+    color: white;
+    opacity: 0;
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_Attachment_asideItemUnlink.o-pretty {
+    transition: transform 0.3s ease 0s;
+}
+
+.o_Attachment_imageOverlay {
+    transition: all 0.3s ease 0s;
+}