mention link

1 files changed, 49 insertions, 0 deletions

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
new file mode 100644
index 00000000..237d9205
--- /dev/null
+++ b/src/components/mention_link/mention_link.scss
@@ -0,0 +1,49 @@
+.MentionLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+
+  & .new,
+  & .original,
+  & .full {
+    padding: 0 2px;
+    margin: 0 -2px;
+    display: inline-block;
+    border-radius: 2px;
+  }
+
+  .original {
+    opacity: 0.5;
+  }
+
+  .full {
+    pointer-events: none;
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    word-wrap: normal;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+    background-color: var(--mention-bg, var(--popover));
+    color: var(--mention-text, var(--link));
+    z-index: 1;
+  }
+
+  .new {
+    background-color: var(--mention-bg);
+    color: var(--mention-text, var(--link));
+
+    &.-you {
+      & .shortName,
+      & .full {
+        font-weight: 600;
+      }
+    }
+  }
+
+  &:hover .new .full {
+    opacity: 1;
+  }
+}