diff options
| author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-08-03 14:29:31 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-08-03 14:29:31 +0800 |
| commit | f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687 (patch) | |
| tree | 8555be93795821a35dfe64ec6c8e749d235bbd4d /webapp/sass | |
| parent | 345bb2236f1f34c2b1ddfec0024ea47c4b1b8950 (diff) | |
| download | chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.tar.gz chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.tar.bz2 chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.zip | |
[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
Diffstat (limited to 'webapp/sass')
| -rw-r--r-- | webapp/sass/layout/_webhooks.scss | 49 | ||||
| -rw-r--r-- | webapp/sass/responsive/_mobile.scss | 10 |
2 files changed, 58 insertions, 1 deletions
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 { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index d39797efb..de453f93f 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1349,6 +1349,16 @@ .post { .attachment { + .attachment__body__wrap { + .btn-close { + height: 30px; + left: -15px; + top: 7px; + visibility: visible; + width: 30px; + } + } + .attachment__image { &.attachment__image--openraph { max-width: 200px; |