1 files changed, 15 insertions, 28 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 662f7f52d61..412a1e8d6c9 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -122,12 +122,8 @@
   }
 }
 
-.award-control {
+.gl-button.btn.award-control {
   margin: 4px 8px 4px 0;
-  outline: 0;
-  position: relative;
-  display: block;
-  float: left;
 
   &.disabled {
     cursor: default;
@@ -145,15 +141,6 @@
   &:hover,
   &:active,
   &.is-active {
-    background-color: $blue-50;
-    border-color: $blue-200;
-    box-shadow: none;
-    outline: 0;
-
-    .award-control-icon svg {
-      fill: $blue-500;
-    }
-
     .award-control-icon-neutral {
       opacity: 0;
     }
@@ -164,6 +151,14 @@
     }
   }
 
+  &.active,
+  &.is-active,
+  &:active {
+    background-color: $blue-50;
+    border-color: $blue-200;
+    box-shadow: inset 0 0 2px $blue-200;
+  }
+
   &.is-active {
     .award-control-icon-positive {
       opacity: 0;
@@ -192,10 +187,6 @@
     &:focus {
       outline: 0;
     }
-
-    .award-control-icon {
-      margin: 0;
-    }
   }
 
   &.is-loading {
@@ -213,9 +204,7 @@
   gl-emoji,
   .award-control-icon {
     vertical-align: middle;
-    margin-right: 0.15em;
-    font-size: 1.5em;
-    line-height: 1;
+    line-height: 0.5em;
   }
 
   .award-control-icon-loading {
@@ -224,11 +213,8 @@
 
   .award-control-icon {
     color: $border-gray-normal;
-    margin-top: 1px;
-    padding: 0 2px;
 
     svg {
-      margin-bottom: 1px;
       height: $default-icon-size;
       width: $default-icon-size;
       border-radius: 50%;
@@ -239,10 +225,8 @@
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     @include transition(opacity, transform);
-    position: absolute;
-    left: 10px;
-    bottom: 6px;
     opacity: 0;
+    position: absolute;
 
     path {
       fill: $award-emoji-positive-add-lines;
@@ -261,7 +245,6 @@
 // migrated to Vue.
 
 .gl-button .award-emoji-block gl-emoji {
-  top: -1px;
   margin-top: -1px;
   margin-bottom: -1px;
 }
@@ -363,3 +346,7 @@
     }
   }
 }
+
+.awards .is-active {
+  box-shadow: inset 0 0 0 1px $blue-200;
+}