Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 56 insertions, 0 deletions

diff --git a/web/sass-files/sass/components/_mentions.scss b/web/sass-files/sass/components/_mentions.scss
new file mode 100644
index 000000000..98efc599d
--- /dev/null
+++ b/web/sass-files/sass/components/_mentions.scss
@@ -0,0 +1,56 @@
+@charset 'UTF-8';
+
+.mention {
+    color: #fff;
+    background: $color--primary;
+    position: relative;
+    z-index: 10;
+    padding-bottom: 2px;
+    @include border-radius(3px);
+}
+
+.mentions__name {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    padding: 2px;
+    z-index: 101;
+    line-height: 36px;
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    .mention-align {
+        @include clearfix;
+        text-overflow: ellipsis;
+        width: calc(100% - 50px);
+    }
+}
+
+.mention__image {
+    margin-right: 6px;
+    height: 32px;
+    width: 32px;
+    line-height: 36px;
+    display: block;
+    font-size: 20px;
+    text-align: center;
+    @include border-radius(32px);
+
+    .mention--align {
+        max-width: 80%;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.mention__fullname {
+    color: grey;
+    padding-left: 10px;
+}
+
+.mention--highlight {
+    background-color: #fff2bb;
+}