Commit 5cd0e721 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '61988-collapse-icon-on-merge-request-diff-larger-than-profile-picture' into 'master'

Change collapse icon size to size of profile picture

Closes #61988

See merge request gitlab-org/gitlab-ce!28512
parents 06c96cef c1cf0f29
......@@ -86,7 +86,6 @@ export default {
:key="note.id"
:img-src="note.author.avatar_url"
:tooltip-text="getTooltipText(note)"
:size="19"
class="diff-comment-avatar js-diff-comment-avatar"
@click.native="toggleDiscussions"
/>
......
@mixin btn-comment-icon {
border-radius: 50%;
background: $white-light;
padding: 1px 5px;
padding: 1px;
font-size: 12px;
color: $blue-500;
border: 1px solid $blue-500;
width: 24px;
height: 24px;
border: 1px solid $blue-500;
&:hover,
&.inverted {
......
......@@ -385,3 +385,8 @@
height: $size;
margin-right: $margin-right;
}
@mixin code-icon-size() {
width: $gl-font-size * $code-line-height * 0.9;
height: $gl-font-size * $code-line-height * 0.9;
}
......@@ -615,10 +615,9 @@ table.code {
.diff-comment-avatar-holders {
position: absolute;
height: 19px;
width: 19px;
margin-left: -15px;
margin-left: -$gl-padding;
z-index: 100;
@include code-icon-size();
&:hover {
.diff-comment-avatar,
......@@ -652,26 +651,28 @@ table.code {
.diff-comments-more-count {
position: absolute;
left: 0;
width: 19px;
height: 19px;
margin-right: 0;
border-color: $white-light;
cursor: pointer;
transition: all 0.1s ease-out;
@include code-icon-size();
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
z-index: (4 - $i);
}
}
.avatar {
@include code-icon-size();
}
}
.diff-comments-more-count {
width: 19px;
min-width: 19px;
padding-left: 0;
padding-right: 0;
overflow: hidden;
@include code-icon-size();
}
.diff-comments-more-count,
......@@ -680,12 +681,15 @@ table.code {
}
.diff-notes-collapse {
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
padding: 0;
transition: transform 0.1s ease-out;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
@include code-icon-size();
.collapse-icon {
height: 50%;
......
......@@ -437,7 +437,9 @@ $note-form-margin-left: 72px;
.diff-file {
.is-over {
.add-diff-note {
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
}
}
......@@ -741,7 +743,7 @@ $note-form-margin-left: 72px;
.add-diff-note {
@include btn-comment-icon;
opacity: 0;
margin-left: -50px;
margin-left: -52px;
position: absolute;
top: 50%;
transform: translateY(-50%);
......@@ -900,10 +902,6 @@ $note-form-margin-left: 72px;
.diff-comment-form {
display: block;
}
.add-diff-note svg {
margin-top: 4px;
}
}
.discussion-filter-container {
......
---
title: Change collapse icon size to size of profile picture
merge_request: 28512
author: Marcel van Remmerden
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment