diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2017-12-05 01:35:37 -0600 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2017-12-08 04:30:13 -0600 |
commit | b87c53c72d7cb3226200b025ee7d7ca8fccece42 (patch) | |
tree | a20581b9deace7b0aa5e3147c6f9ee67d0b7dc01 /app/assets/stylesheets/pages/diff.scss | |
parent | 7fabc892f251740dbd9a4755baede662e6854870 (diff) | |
download | gitlab-ce-b87c53c72d7cb3226200b025ee7d7ca8fccece42.tar.gz |
Fix comment on image discussion icon alignment39608-comment-on-image-discussions-tab-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
Diffstat (limited to 'app/assets/stylesheets/pages/diff.scss')
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 19 |
1 files changed, 12 insertions, 7 deletions
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%; } } |