commit

app/javascript/styles/gabsocial/emoji_picker.scss

@@ -1,4 +1,5 @@
 .emoji-mart {
+
   &,
   * {
     box-sizing: border-box;
@@ -33,11 +34,11 @@
 }
 
 .emoji-mart-anchors {
-  display: flex;
-  justify-content: space-between;
   padding: 0 6px;
   color: $lighter-text-color;
   line-height: 0;
+
+  @include flex(space-between);
 }
 
 .emoji-mart-anchor {
@@ -67,12 +68,10 @@
 }
 
 .emoji-mart-anchor-bar {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-  width: 100%;
-  height: 4px;
   background-color: $highlight-text-color;
+
+  @include size(100%, 4px);
+  @include abs-position(auto, auto, -5px, 0);
 }
 
 .emoji-mart-anchors {
@@ -103,21 +102,19 @@
 }
 
 .emoji-mart-search {
-  padding: 10px;
-  padding-right: 45px;
+  padding: 10px 45px 10px 10px;
   background: $simple-background-color;
 
   input {
-    font-size: 14px;
-    font-weight: 400;
     padding: 7px 9px;
     font-family: inherit;
     display: block;
     width: 100%;
     background: rgba($ui-secondary-color, 0.3);
     color: $inverted-text-color;
-    border: 1px solid $ui-secondary-color;
-    border-radius: 4px;
+
+    @include text-sizing(14px, 400);
+    @include border-design($ui-secondary-color, 1px, 4px);
 
     &::-moz-focus-inner {
       border: 0;
@@ -142,14 +139,12 @@
 
   &:hover::before {
     z-index: 0;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     background-color: rgba($ui-secondary-color, 0.7);
     border-radius: 100%;
+
+    @include pseudo;
+    @include size(100%);
+    @include abs-position(0, auto, auto, 0, false);
   }
 }
 
@@ -175,8 +170,7 @@
   font-size: 0;
 
   span {
-    width: 22px;
-    height: 22px;
+    @include size(22px);
   }
 }
 
@@ -201,4 +195,4 @@
 
 .emoji-mart-preview {
   display: none;
-}
+}