diff options
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 115 |
1 files changed, 46 insertions, 69 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 68a5176ad4b..b31ee069236 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -7,7 +7,7 @@ $system-note-icon-size: 1.5rem; $system-note-svg-size: 1rem; $icon-size-diff: $avatar-icon-size - $system-note-icon-size; -$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 0.1rem; +$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 1.3rem; $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; @mixin vertical-line($left) { @@ -15,10 +15,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; content: ''; border-left: 2px solid var(--gray-50, $gray-50); position: absolute; - top: $gl-padding-6; + top: 16px; bottom: 0; left: calc(#{$left} - 1px); - height: calc(100% + 1.5rem); + height: calc(100% + 20px); } } @@ -30,8 +30,30 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .issuable-discussion:not(.incident-timeline-events), .limited-width-notes { - .main-notes-list > li.timeline-entry:not(:last-of-type) { - @include vertical-line(1rem); + .main-notes-list::before, + .timeline-entry:last-child::before { + content: ''; + position: absolute; + width: 2px; + left: 15px; + top: 15px; + height: calc(100% - 15px); + } + + .main-notes-list::before { + background: var(--gray-50, $gray-50); + } + + .timeline-entry:last-child::before { + background: var(--white); + + .gl-dark & { + background: var(--gray-10); + } + + &.note-comment { + top: 30px; + } } } @@ -63,6 +85,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; height: 2rem; } + .gl-avatar { + border-color: var(--gray-50, $gray-50); + } + &.note-comment, &.note-skeleton, .draft-note { @@ -265,7 +291,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; &.being-posted { pointer-events: none; - opacity: 0.5; + + .timeline-entry-inner { + opacity: 0.5; + } .dummy-avatar { background-color: $gray-100; @@ -343,6 +372,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .note-header-info { padding-bottom: 0; + padding-top: 0; } &.timeline-entry::after { @@ -369,9 +399,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-content { - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: 30px; - } + margin-left: 30px; } .note-header { @@ -450,40 +478,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } } - - .timeline-icon { - float: left; - } - - .system-note, - .discussion-filter-note { - .timeline-icon { - display: flex; - align-items: center; - background-color: $gray-50; - width: $system-note-icon-size; - height: $system-note-icon-size; - border: 1px solid $gray-50; - border-radius: $system-note-icon-size; - margin: -$gl-spacing-scale-1 0 0 $gl-spacing-scale-2; - - svg { - width: $system-note-svg-size; - height: $system-note-svg-size; - fill: $gray-600; - display: block; - margin: 0 auto; - } - } - } - - .discussion-filter-note { - .timeline-icon { - width: $system-note-icon-size; - height: $system-note-icon-size; - margin-top: -8px; - } - } } .card .notes { @@ -493,7 +487,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .timeline-icon { - margin: 8px 0 0 14px; + margin: 20px 0 0 28px; } } @@ -506,18 +500,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; border-radius: 0; margin-left: 2.5rem; - @media (min-width: map-get($grid-breakpoints, md)) { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); - - &.is-sidebar-moved { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px}); - } - - .with-performance-bar & { - --top: 123px; - } - } - &:hover { background-color: $gray-light; } @@ -603,15 +585,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .system-note { background-color: transparent; padding: 0; - - .timeline-icon { - margin-top: -2px; - } - - .timeline-entry-inner .timeline-icon { - margin-top: $system-note-icon-m-top; - margin-left: $system-note-icon-m-left; - } } } @@ -643,10 +616,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; padding: 0; vertical-align: top; white-space: normal; - - // Fixes subpixel rounding issue https://gitlab.com/gitlab-org/gitlab-foss/issues/53973 - // background-color is needed for dark code preference - padding-bottom: 1px; background-color: $white; &.parallel { @@ -673,6 +642,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } } + + .diff-grid-comments:last-child { + .notes-content { + border-bottom-width: 0; + border-bottom-left-radius: #{$border-radius-default - 1px}; + border-bottom-right-radius: #{$border-radius-default - 1px}; + } + } } .diffs { |