From 942f47fa2dfa157cabc2554d2933388f337fb8b7 Mon Sep 17 00:00:00 2001
From: Kirill Arutyunov <kirill@arutyunov.me>
Date: Sun, 6 Oct 2019 16:08:17 +0300
Subject: [PATCH] Fix #70 issue codeclimate in
 app/javascript/src/assets/scss/widgets/_emojiinput.scss

---
 .../src/assets/scss/_variables.scss           |   2 +
 .../src/assets/scss/widgets/_emojiinput.scss  | 138 +++++++++---------
 2 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/app/javascript/src/assets/scss/_variables.scss b/app/javascript/src/assets/scss/_variables.scss
index 3056531a0..6ecbcbc2a 100644
--- a/app/javascript/src/assets/scss/_variables.scss
+++ b/app/javascript/src/assets/scss/_variables.scss
@@ -55,6 +55,8 @@ $color-white: #FFF;
 $color-body: #3C4858;
 $color-heading: #1F2D3D;
 $color-modal-header: #f1f1f1;
+$color-extra-light-blue: #F5F7F9;
+
 // Thumbnail
 $thumbnail-radius: 4rem;
 
diff --git a/app/javascript/src/assets/scss/widgets/_emojiinput.scss b/app/javascript/src/assets/scss/widgets/_emojiinput.scss
index 02847c69c..ecc19a265 100644
--- a/app/javascript/src/assets/scss/widgets/_emojiinput.scss
+++ b/app/javascript/src/assets/scss/widgets/_emojiinput.scss
@@ -1,20 +1,20 @@
 .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;
+  background: $color-white;
+  border-radius: 2px;
+  box-sizing: content-box;
+  height: 20rem;
+  padding-bottom: $space-two;
+  position: absolute;
+  right: 0;
+  top: -22rem;
+  width: 28.6rem;
 
-  &:before {
-    position: absolute;
-    bottom: -$space-slab;
-    right: $space-two;
+  &::before {
     @include arrow(bottom, $color-white, $space-slab);
+    bottom: -$space-slab;
+    position: absolute;
+    right: $space-two;
   }
 
   .emojione {
@@ -23,84 +23,84 @@
   }
 
   .emoji-row {
-    box-sizing: border-box;
-    overflow-y: scroll;
-    height: 180px;
     @include padding($space-small);
+    box-sizing: border-box;
+    height: 180px;
+    overflow-y: scroll;
     padding-bottom: 0;
 
     .emoji {
+      border-radius: 4px;
       display: inline-block;
       padding: 5px;
-      border-radius: 4px;
     }
 
-    .emojione{
-      margin: 0.6rem;
-      float:left;
+    .emojione {
       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);
-          }
-        }
-      }
-
+      float: left;
+      margin: .6rem;
     }
   }
+
   .emoji-category-title {
+    color: $color-heading;
     font-size: $font-size-small;
     font-weight: $font-weight-medium;
-    color: $color-heading;
-    text-transform: capitalize;
     margin: 0;
+    text-transform: capitalize;
   }
+
   .emoji-category-heading-decoration {
     text-align: right;
   }
-
 }
 
-.emoji-dialog .emoji-category-header > * {
-  display: table-cell;
-  vertical-align: middle;
+.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 {
+    list-style: none;
+    margin: 0;
+    padding: $space-smaller 0 0;
+
+    > li {
+      @include padding($space-small $space-small);
+      box-sizing: border-box;
+      cursor: pointer;
+      display: inline-block;
+      height: 3.4rem;
+      text-align: center;
+    }
+
+    > .active {
+      background: $white;
+      border-top-left-radius: $space-small;
+      border-top-right-radius: $space-small;
+    }
+
+    img,
+    svg {
+      filter: grayscale(100%);
+    }
+  }
+
+  .active {
+    img,
+    svg {
+      filter: grayscale(0);
+    }
+  }
+
+  > * {
+    display: table-cell;
+    vertical-align: middle;
+  }
 }
 
-.emoji-dialog .emoji-row
+.emoji-dialog .emoji-row,
 .emoji-dialog .emoji-row .emoji:hover {
-  background: #F5F7F9;
+  background: $color-extra-light-blue;
 }