Update award emoji button native emoji alignment29228-update-award-emoji-native-unicode-alignment

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/29228

1 files changed, 10 insertions, 6 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index f363affa46c..546718ddaf8 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -96,11 +96,9 @@
 
 .award-control {
   margin: 3px 5px 3px 0;
-  padding: 5px 6px;
+  padding: .35em .4em;
   outline: 0;
 
-  line-height: 1;
-
   &.disabled {
     cursor: default;
 
@@ -140,10 +138,12 @@
   }
 
   .icon,
+  gl-emoji,
   .award-control-icon {
-    float: left;
-    margin-right: 5px;
-    font-size: 18px;
+    vertical-align: middle;
+    margin-right: 0.15em;
+    font-size: 1.5em;
+    line-height: 1;
   }
 
   .award-control-icon-loading {
@@ -154,4 +154,8 @@
     color: $border-gray-normal;
     margin-top: 1px;
   }
+
+  .award-control-text {
+    vertical-align: middle;
+  }
 }