From f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687 Mon Sep 17 00:00:00 2001
From: Saturnino Abril <saturnino.abril@gmail.com>
Date: Thu, 3 Aug 2017 14:29:31 +0800
Subject: [PLT-1249] Add close button 'x' to the right of a link preview
 (#7017)

* add close button 'x' to the right of a link preview

* Updating webhook UI

* UI improvements for close button

* Adding hover state

* Making the close button visible on mobile

* previews are permanently disabled/closed for that link

* make post as required props

* fix JS error of undefined

* fix update issue both at center and RHS view
---
 webapp/sass/layout/_webhooks.scss | 49 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

(limited to 'webapp/sass/layout/_webhooks.scss')

diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index 6f6ab0c90..edb4cbd93 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -38,6 +38,17 @@
 
 .post {
     .attachment {
+        margin-left: -20px;
+        position: relative;
+
+        &:hover {
+            .attachment__body__wrap {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
+        }
+
         &.attachment--opengraph {
             max-width: 800px;
         }
@@ -46,7 +57,7 @@
             border-radius: 4px;
             border-style: solid;
             border-width: 1px;
-            margin: 5px 0;
+            margin: 5px 0 5px 20px;
             padding: 2px 5px;
         }
 
@@ -99,6 +110,42 @@
                 vertical-align: top;
                 width: 100%;
             }
+
+            .btn-close {
+                @include opacity(.4);
+                background: transparent;
+                border: none;
+                color: inherit;
+                font-size: 21px;
+                font-weight: 500;
+                height: 20px;
+                left: -7px;
+                line-height: 20px;
+                outline: none;
+                padding: 0;
+                position: absolute;
+                text-align: center;
+                text-decoration: none;
+                text-shadow: none;
+                visibility: hidden;
+                width: 20px;
+                z-index: 5;
+
+                span {
+                    font-family: 'Open Sans', sans-serif;
+                    line-height: 10px;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
+            }
+
+            &:hover {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
         }
 
         .attachment__body {
-- 
cgit v1.2.3-1-g7c22