Initial Commit

Co-authored-by: Subin <subinthattaparambil@gmail.com>
Co-authored-by: Manoj <manojmj92@gmail.com>
Co-authored-by: Nithin <webofnithin@gmail.com>

app/javascript/src/assets/scss/widgets/_emojiinput.scss

@@ -0,0 +1,106 @@
+.emoji-dialog {
+  width: 28.6rem;
+  height: 20rem;
+  background: $color-white;
+  box-sizing: content-box;
+  border-radius: 2px;
+  position: absolute;
+  top: -22rem;
+  right: 0;
+  padding-bottom: $space-two;
+  @include elegant-card;
+
+  &:before {
+    position: absolute;
+    bottom: -$space-slab;
+    right: $space-two;
+    @include arrow(bottom, $color-white, $space-slab);
+  }
+
+  .emojione {
+    @include margin($zero);
+    font-size: $font-size-small;
+  }
+
+  .emoji-row {
+    box-sizing: border-box;
+    overflow-y: scroll;
+    height: 180px;
+    @include padding($space-small);
+    padding-bottom: 0;
+
+    .emoji {
+      display: inline-block;
+      padding: 5px;
+      border-radius: 4px;
+    }
+
+    .emojione{
+      margin: 0.6rem;
+      float:left;
+      cursor: pointer;
+    }
+
+  }
+  .emoji-dialog-header {
+    @include padding($zero $space-smaller);
+    background-color: $light-gray;
+    border-top-left-radius: $space-small;
+    border-top-right-radius: $space-small;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      padding-top: $space-smaller;
+
+      li {
+        display: inline-block;
+        box-sizing: border-box;
+        height: 3.4rem;
+        text-align: center;
+        @include padding($space-small $space-small);
+        cursor: pointer;
+
+        img, svg {
+          -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+        }
+
+        &.active {
+          background: #fff;
+          border-top-left-radius: $space-small;
+          border-top-right-radius: $space-small;
+
+          img,
+          svg {
+            -webkit-filter: grayscale(0);
+            filter: grayscale(0);
+          }
+        }
+      }
+
+    }
+  }
+  .emoji-category-title {
+    font-size: $font-size-small;
+    font-weight: $font-weight-medium;
+    color: $color-heading;
+    text-transform: capitalize;
+    margin: 0;
+  }
+  .emoji-category-heading-decoration {
+    text-align: right;
+  }
+
+}
+
+.emoji-dialog .emoji-category-header > * {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.emoji-dialog .emoji-row
+.emoji-dialog .emoji-row .emoji:hover {
+  background: #F5F7F9;
+}