diff options
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 293 |
1 files changed, 208 insertions, 85 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index be535ade0a6..dcb1275d182 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -1,26 +1,135 @@ -/** - * Notes - */ +$system-note-icon-size: 32px; +$system-note-svg-size: 16px; +$note-form-margin-left: 70px; -@-webkit-keyframes targe3-note { - from { - background: $note-targe3-outside; +@mixin vertical-line($left) { + &::before { + content: ''; + border-left: 2px solid $theme-gray-100; + position: absolute; + top: 0; + bottom: 0; + left: $left; } +} - 50% { - background: $note-targe3-inside; - } +.note-wrapper { + padding: $gl-padding; +} + +.issuable-discussion { + .notes.timeline > .timeline-entry { + border: 1px solid $border-color; + border-radius: $border-radius-default; + margin: $gl-padding 0; + + &.system-note, + &.note-form { + border: 0; + } + + &.note-form { + margin-left: 0; - to { - background: $note-targe3-outside; + @include notes-media('min', map-get($grid-breakpoints, md)) { + margin-left: $note-form-margin-left; + } + + .timeline-icon { + @include notes-media('min', map-get($grid-breakpoints, sm)) { + margin-left: -$note-icon-gutter-width; + } + } + + .timeline-content { + margin-left: 0; + } + } + + .notes_content { + border: 0; + border-top: 1px solid $border-color; + } } } -ul.notes { +.main-notes-list { + @include vertical-line(39px); +} + +.notes { display: block; list-style: none; margin: 0; padding: 0; + position: relative; + + > .note-discussion { + .card { + border: 0; + } + + li.note { + border-bottom: 1px solid $border-color; + + &:first-child { + border-radius: $border-radius-default $border-radius-default 0 0; + } + } + } + + .replies-toggle { + background-color: $gray-light; + padding: $gl-padding-8 $gl-padding; + + .collapse-replies-btn:hover { + color: $blue-600; + } + + &.expanded { + border-bottom: 1px solid $border-color; + + span { + cursor: pointer; + } + + svg { + position: relative; + top: 3px; + } + } + + &.collapsed { + color: $gl-text-color-secondary; + + svg { + float: left; + position: relative; + top: $gl-padding-4; + margin-right: $gl-padding-8; + cursor: pointer; + } + + img { + margin: -2px 4px 0 0; + } + + .author-link { + color: $gl-text-color; + } + } + + .user-avatar-link { + &:last-child img { + margin-right: $gl-padding-8; + } + } + + .btn-link { + border: 0; + vertical-align: baseline; + } + } .note-created-ago, .note-updated-at { @@ -28,8 +137,6 @@ ul.notes { } .discussion-body { - padding-top: 8px; - .card { margin-bottom: 0; } @@ -46,21 +153,10 @@ ul.notes { } > li { - // .timeline-entry - padding: 0; display: block; position: relative; border-bottom: 0; - @include notes-media('min', map-get($grid-breakpoints, sm)) { - padding-left: $note-icon-gutter-width; - } - - .timeline-entry-inner { - padding: $gl-padding $gl-btn-padding; - border-bottom: 1px solid $white-normal; - } - &:target, &.target { border-bottom: 1px solid $white-normal; @@ -75,23 +171,10 @@ ul.notes { } } - .timeline-icon { - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: -$note-icon-gutter-width; - } - } - - .timeline-content { - margin-left: $note-icon-gutter-width; - - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: 0; - } - } - &.being-posted { pointer-events: none; opacity: 0.5; + padding: $gl-padding; .dummy-avatar { background-color: $gl-gray-200; @@ -104,12 +187,6 @@ ul.notes { } } - &.note-discussion { - .timeline-entry-inner { - padding: $gl-padding 10px; - } - } - .editing-spinner { display: none; } @@ -191,8 +268,9 @@ ul.notes { } .system-note { - font-size: 14px; - clear: both; + padding: 6px $gl-padding-24; + margin: $gl-padding-24 0; + background-color: transparent; .note-header-info { padding-bottom: 0; @@ -225,17 +303,21 @@ ul.notes { .timeline-icon { float: left; - - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: 0; - width: auto; - } + display: flex; + align-items: center; + background-color: $white-light; + width: $system-note-icon-size; + height: $system-note-icon-size; + border: 1px solid $border-color; + border-radius: $system-note-icon-size; + margin: -6px $gl-padding 0 0; svg { - width: 16px; - height: 16px; + width: $system-note-svg-size; + height: $system-note-svg-size; fill: $gray-darkest; - margin-top: 2px; + display: block; + margin: 0 auto; } } @@ -302,10 +384,17 @@ ul.notes { .discussion-body .diff-file { .file-title { cursor: default; + line-height: 42px; + padding: 0 $gl-padding; + border-top: 1px solid $border-color; &:hover { background-color: $gray-light; } + + .btn-clipboard { + top: 10px; + } } .line_content { @@ -320,6 +409,23 @@ ul.notes { } } + .discussion-notes { + &:not(:first-child) { + border-top: 1px solid $white-normal; + margin-top: 20px; + } + + &:not(:last-child) { + border-bottom: 1px solid $white-normal; + margin-bottom: 20px; + } + + .system-note { + margin: 0; + padding: $gl-padding; + } + } + // Merge request notes in diffs // Diff is inline .notes_content .note-header .note-headline-light { @@ -335,7 +441,6 @@ ul.notes { border-left: 0; &.notes_content { - background-color: $gray-light; border-width: 1px 0; padding: 0; vertical-align: top; @@ -349,18 +454,6 @@ ul.notes { } } - .discussion-notes { - &:not(:first-child) { - border-top: 1px solid $white-normal; - margin-top: 20px; - } - - &:not(:last-child) { - border-bottom: 1px solid $white-normal; - margin-bottom: 20px; - } - } - .notes { background-color: $white-light; } @@ -374,6 +467,30 @@ ul.notes { } } +.diffs { + .discussion-notes { + margin-left: 0; + border-left: 0; + + .notes { + position: relative; + @include vertical-line(52px); + } + } + + .note-wrapper { + margin: $gl-padding; + border: 1px solid $border-color; + border-radius: $border-radius-default; + } + + .discussion-reply-holder { + border-radius: 0 0 $border-radius-default $border-radius-default; + border-top: 1px solid $border-color; + position: relative; + } +} + .discussion-header, .note-header-info { a { @@ -399,7 +516,17 @@ ul.notes { } .discussion-header { - font-size: 14px; + min-height: 72px; + + .note-header-info { + padding-bottom: 0; + } +} + +.unresolved { + .note-header-info { + margin-top: $gl-padding-8; + } } .note-header { @@ -409,7 +536,7 @@ ul.notes { .note-header-info { min-width: 0; - padding-bottom: 8px; + padding-bottom: $gl-padding-8; &.discussion { padding-bottom: 0; @@ -471,9 +598,18 @@ ul.notes { margin-left: 10px; color: $gray-darkest; + @include media-breakpoint-down(xs) { + width: 100%; + margin: $gl-padding-8 0; + } + .btn-group > .discussion-next-btn { margin-left: -1px; } + + svg { + height: 15px; + } } .note-actions { @@ -585,19 +721,6 @@ ul.notes { z-index: 10; } -.discussion-body, -.diff-file { - .notes .note { - border-bottom: 1px solid $white-normal; - - .timeline-entry-inner { - padding-left: $gl-padding; - padding-right: $gl-padding; - border-bottom: 0; - } - } -} - .disabled-comment { background-color: $gray-light; border-radius: $border-radius-base; @@ -634,7 +757,7 @@ ul.notes { } .btn { - svg path { + svg { fill: $gray-darkest; } @@ -659,7 +782,7 @@ ul.notes { .line-resolve-all { vertical-align: middle; display: inline-block; - padding: 5px 10px 6px; + padding: 6px 10px; background-color: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; |