better modifier, no background for unhighlighted mentions

2 files changed, 9 insertions, 6 deletions

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 37717424..4e061be9 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -37,13 +37,15 @@
     }
   }
 
-  & .new {
+  .new:not(.-highlighted) {
+    .short {
+      background: none;
+    }
+  }
+  .new {
     &,
-    &.-striped,
-    &.-solid,
-    &.-side {
+    &.-highlighted {
       .short {
-        font-size: 90%;
         line-height: 1.5;
         vertical-align: middle;
 
@@ -58,6 +60,7 @@
       .you {
         padding-right: 0.25em;
       }
+
       .short {
         padding-left: 0.25em;
         padding-right: 0;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 5a8506eb..a38faa7b 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -12,7 +12,7 @@
       v-if="user"
       class="new"
       :style="style"
-      :class="[{ '-you': isYou }, highlightType]"
+      :class="[{ '-you': isYou, '-highlighted': highlight }, highlightType]"
     >
       <button
         class="short"