diff options
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 141 |
1 files changed, 68 insertions, 73 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 5d03281a30a..b31ee069236 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -1,15 +1,24 @@ -$system-note-icon-size: 2rem; +$avatar-icon-size: 2rem; +$avatar-m-top: 0.5rem; +$avatar-m-ratio: 2; +$avatar-m-left: $avatar-m-top * $avatar-m-ratio; + +$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 - 1.3rem; +$system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; @mixin vertical-line($left) { &::before { 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); } } @@ -21,8 +30,30 @@ $system-note-svg-size: 1rem; .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; + } } } @@ -36,6 +67,15 @@ $system-note-svg-size: 1rem; &.timeline > .timeline-entry { margin: $gl-padding 0; + &.system-note { + margin-top: $gl-spacing-scale-1; + margin-bottom: 0; + + .note-header-info { + padding-left: $gl-spacing-scale-4; + } + } + &.system-note, &.note-form { border: 0; @@ -45,6 +85,10 @@ $system-note-svg-size: 1rem; height: 2rem; } + .gl-avatar { + border-color: var(--gray-50, $gray-50); + } + &.note-comment, &.note-skeleton, .draft-note { @@ -113,7 +157,7 @@ $system-note-svg-size: 1rem; background-color: $white; .timeline-content:not(.flash-container) { - padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding; + padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 18px; } .timeline-discussion-body-footer { @@ -247,7 +291,10 @@ $system-note-svg-size: 1rem; &.being-posted { pointer-events: none; - opacity: 0.5; + + .timeline-entry-inner { + opacity: 0.5; + } .dummy-avatar { background-color: $gray-100; @@ -270,7 +317,7 @@ $system-note-svg-size: 1rem; } &.is-editing { - .note-header, + .note-actions, .note-text, .edited-text { display: none; @@ -325,6 +372,7 @@ $system-note-svg-size: 1rem; .note-header-info { padding-bottom: 0; + padding-top: 0; } &.timeline-entry::after { @@ -351,9 +399,7 @@ $system-note-svg-size: 1rem; } .timeline-content { - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: 30px; - } + margin-left: 30px; } .note-header { @@ -432,40 +478,6 @@ $system-note-svg-size: 1rem; } } } - - .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: -6px 0 0; - - 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 { @@ -475,7 +487,7 @@ $system-note-svg-size: 1rem; } .timeline-icon { - margin: 8px 0 0 14px; + margin: 20px 0 0 28px; } } @@ -488,18 +500,6 @@ $system-note-svg-size: 1rem; 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; } @@ -585,15 +585,6 @@ $system-note-svg-size: 1rem; .system-note { background-color: transparent; padding: 0; - - .timeline-icon { - margin-top: -2px; - } - - .timeline-entry-inner .timeline-icon { - margin-top: $grid-size; - margin-left: 14px; - } } } @@ -625,10 +616,6 @@ $system-note-svg-size: 1rem; 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 { @@ -655,6 +642,14 @@ $system-note-svg-size: 1rem; } } } + + .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 { @@ -672,7 +667,7 @@ $system-note-svg-size: 1rem; .discussion-reply-holder { border-top: 0; - border-radius: 0 0 $border-radius-default $border-radius-default; + border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base; position: relative; .discussion-form { @@ -1134,7 +1129,7 @@ $system-note-svg-size: 1rem; } .timeline-avatar { - margin: $gl-padding-8 0 0 $gl-padding; + margin: $avatar-m-top 0 0 $avatar-m-left; } } |