From b87c53c72d7cb3226200b025ee7d7ca8fccece42 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 5 Dec 2017 01:35:37 -0600
Subject: Fix comment on image discussion icon alignment

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

Use SVG icons to avoid having to position things
See https://gitlab.com/gitlab-org/gitlab-ce/issues/39608#note_50088917
---
 app/assets/stylesheets/pages/diff.scss | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'app/assets/stylesheets/pages/diff.scss')

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 848d7f144dc..71a6c7a2bf9 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -732,18 +732,18 @@
 
 .frame.click-to-comment {
   position: relative;
-  cursor: image-url('icon_image_comment.svg')
+  cursor: image-url('illustrations/image_comment_light_cursor.svg')
     $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
 
   // Retina cursor
-  cursor: -webkit-image-set(image-url('icon_image_comment.svg') 1x, image-url('icon_image_comment@2x.svg') 2x)
+  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
     $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
 
   .comment-indicator {
     position: absolute;
     padding: 0;
     width: (2px * $image-comment-cursor-left-offset);
-    height: (1px * $image-comment-cursor-top-offset);
+    height: (2px * $image-comment-cursor-top-offset);
     // center the indicator to match the top left click region
     margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
     margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
@@ -778,15 +778,20 @@
 .frame .badge,
 .frame .image-comment-badge {
   // Center align badges on the frame
-  transform: translate3d(-50%, -50%, 0);
+  transform: translate(-50%, -50%);
 }
 
 .image-comment-badge {
-  @include btn-comment-icon;
   position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
 
-  &.inverted {
-    border-color: $white-light;
+  > svg {
+    width: 100%;
+    height: 100%;
   }
 }
 
-- 
cgit v1.2.3