Merge pull request #123 from kirillarutyunov/codeclimate-70-issue-emojiinput-scss

Fix #70 issue codeclimate in _emojiinput.scss

@kirillarutyunov Thanks 🎉

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;
 

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;
-
-  &:before {
+  background: $color-white;
+  border-radius: 2px;
+  box-sizing: content-box;
+  height: 20rem;
+  padding-bottom: $space-two;
   position: absolute;
-    bottom: -$space-slab;
-    right: $space-two;
+  right: 0;
+  top: -22rem;
+  width: 28.6rem;
+
+  &::before {
     @include arrow(bottom, $color-white, $space-slab);
+    bottom: -$space-slab;
+    position: absolute;
+    right: $space-two;
   }
 
   .emojione {
@@ -23,25 +23,38 @@
   }
 
   .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;
       cursor: pointer;
+      float: left;
+      margin: .6rem;
+    }
   }
 
+  .emoji-category-title {
+    color: $color-heading;
+    font-size: $font-size-small;
+    font-weight: $font-weight-medium;
+    margin: 0;
+    text-transform: capitalize;
   }
+
+  .emoji-category-heading-decoration {
+    text-align: right;
+  }
+}
+
 .emoji-dialog-header {
   @include padding($zero $space-smaller);
   background-color: $light-gray;
@@ -49,58 +62,45 @@
   border-top-right-radius: $space-small;
 
   ul {
-      padding: 0;
-      margin: 0;
     list-style: none;
-      padding-top: $space-smaller;
+    margin: 0;
+    padding: $space-smaller 0 0;
 
-      li {
-        display: inline-block;
+    > li {
+      @include padding($space-small $space-small);
       box-sizing: border-box;
+      cursor: pointer;
+      display: inline-block;
       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;
+    > .active {
+      background: $white;
       border-top-left-radius: $space-small;
       border-top-right-radius: $space-small;
+    }
 
     img,
     svg {
-            -webkit-filter: grayscale(0);
+      filter: grayscale(100%);
+    }
+  }
+
+  .active {
+    img,
+    svg {
       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;
+}
+
+.emoji-dialog .emoji-row,
+.emoji-dialog .emoji-row .emoji:hover {
+  background: $color-extra-light-blue;
 }