notes.scss 15 KB
Newer Older
Fatih Acet's avatar
Fatih Acet committed
1 2
$system-note-icon-size: 32px;
$system-note-svg-size: 16px;
3
$note-form-margin-left: 72px;
Fatih Acet's avatar
Fatih Acet committed
4 5 6 7

@mixin vertical-line($left) {
  &::before {
    content: '';
8
    border-left: 2px solid $gray-100;
Fatih Acet's avatar
Fatih Acet committed
9 10 11 12
    position: absolute;
    top: 0;
    bottom: 0;
    left: $left;
13
  }
Fatih Acet's avatar
Fatih Acet committed
14
}
15

16
@mixin outline-comment() {
17
  margin: $gl-padding $gl-padding 0;
18 19 20 21
  border: 1px solid $border-color;
  border-radius: $border-radius-default;
}

Fatih Acet's avatar
Fatih Acet committed
22 23
.note-wrapper {
  padding: $gl-padding;
24 25 26 27

  &.outlined {
    @include outline-comment();
  }
Fatih Acet's avatar
Fatih Acet committed
28 29
}

30 31 32 33
.issuable-discussion {
  .main-notes-list {
    @include vertical-line(36px);
  }
34 35 36 37 38 39 40 41 42 43
}

.notes {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;

  &.timeline > .timeline-entry {
Fatih Acet's avatar
Fatih Acet committed
44 45 46 47 48 49 50 51
    border: 1px solid $border-color;
    border-radius: $border-radius-default;
    margin: $gl-padding 0;

    &.system-note,
    &.note-form {
      border: 0;
    }
52

Fatih Acet's avatar
Fatih Acet committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
    &.note-form {
      margin-left: 0;

      @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;
    }
75
  }
Fatih Acet's avatar
Fatih Acet committed
76 77 78 79 80

  > .note-discussion {
    .card {
      border: 0;
    }
81
  }
Fatih Acet's avatar
Fatih Acet committed
82

83 84
  li.note {
    border-bottom: 1px solid $border-color;
Fatih Acet's avatar
Fatih Acet committed
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
  }

  .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;
    }
  }
139

140 141
  .note-created-ago,
  .note-updated-at {
142
    white-space: normal;
143 144
  }

145
  .discussion-body {
Clement Ho's avatar
Clement Ho committed
146
    .card {
147 148
      margin-bottom: 0;
    }
149 150 151 152 153
  }

  .discussion {
    display: block;
    position: relative;
154

155
    .timeline-discussion-body {
156
      margin-top: -$gl-padding-8;
157 158 159
      overflow-x: auto;
      overflow-y: hidden;

160 161
      .note-body {
        margin-top: $gl-padding-8;
162 163 164
      }
    }

165 166
    .diff-content {
      overflow: visible;
167
      padding: 0;
168
    }
169 170
  }

171
  > li {
172 173
    display: block;
    position: relative;
174 175
    border-bottom: 0;

176 177 178
    &.being-posted {
      pointer-events: none;
      opacity: 0.5;
Fatih Acet's avatar
Fatih Acet committed
179
      padding: $gl-padding;
180 181

      .dummy-avatar {
182 183
        background-color: $gl-gray-200;
        border: 1px solid darken($gl-gray-200, 25%);
184 185 186 187 188 189 190 191
      }

      .note-headline-light,
      .fa-spinner {
        margin-left: 3px;
      }
    }

192 193 194 195 196 197 198 199 200 201 202 203 204 205
    .editing-spinner {
      display: none;
    }

    &.is-requesting {
      .note-timestamp {
        display: none;
      }

      .editing-spinner {
        display: inline-block;
      }
    }

Eric Eastwood's avatar
Eric Eastwood committed
206
    &.is-editing {
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
      .note-header,
      .note-text,
      .edited-text {
        display: none;
      }

      .note-edit-form {
        display: block;

        &.current-note-edit-form + .note-awards {
          display: none;
        }
      }
    }

    .note-body {
223 224 225
      overflow-x: auto;
      overflow-y: hidden;

226 227 228 229
      .note-text {
        @include md-typography;
        // Reset ul style types since we're nested inside a ul already
        @include bulleted-list;
230 231
        word-wrap: break-word;

232 233 234
        table {
          @include markdown-table;
        }
235 236 237 238 239
      }
    }

    .note-awards {
      .js-awards-block {
240
        margin-top: 16px;
241 242 243 244
      }
    }

    .note-header {
Clement Ho's avatar
Clement Ho committed
245
      @include notes-media('max', map-get($grid-breakpoints, xs)) {
246 247 248 249 250 251 252
        .inline {
          display: block;
        }
      }
    }

    .note-emoji-button {
253 254 255
      position: relative;
      line-height: 1;

256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
      .fa-spinner {
        display: none;
      }

      &.is-loading {
        .fa-smile-o {
          display: none;
        }

        .fa-spinner {
          display: inline-block;
        }
      }
    }
  }

272
  .system-note {
273
    padding: 6px 21px;
Fatih Acet's avatar
Fatih Acet committed
274 275
    margin: $gl-padding-24 0;
    background-color: transparent;
276

277
    .note-header-info {
278 279 280
      padding-bottom: 0;
    }

281 282 283 284 285
    &.timeline-entry::after {
      clear: none;
    }

    .system-note-message {
286
      display: inline;
287 288 289 290

      &::first-letter {
        text-transform: lowercase;
      }
291 292

      a {
293
        color: $blue-600;
294
      }
295 296

      p {
297
        display: inline;
298 299 300 301 302 303
        margin: 0;

        &::first-letter {
          text-transform: lowercase;
        }
      }
304 305
    }

306 307
    .timeline-icon {
      float: left;
Fatih Acet's avatar
Fatih Acet committed
308 309 310 311 312 313 314 315
      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;
316

317
      svg {
Fatih Acet's avatar
Fatih Acet committed
318 319
        width: $system-note-svg-size;
        height: $system-note-svg-size;
320
        fill: $gray-darkest;
Fatih Acet's avatar
Fatih Acet committed
321 322
        display: block;
        margin: 0 auto;
323 324
      }
    }
325

326
    .timeline-content {
Clement Ho's avatar
Clement Ho committed
327
      @include notes-media('min', map-get($grid-breakpoints, sm)) {
328
        margin-left: 30px;
329
      }
330 331
    }

332 333 334 335
    .note-header {
      padding-bottom: 0;
    }

336 337 338 339
    .note-body {
      overflow: hidden;

      .system-note-commit-list-toggler {
340
        color: $blue-600;
341 342
        padding: 10px 0 0;
        cursor: pointer;
343 344
        position: relative;
        z-index: 2;
345 346

        &:hover {
347
          color: $blue-600;
348 349
          text-decoration: underline;
        }
350 351 352
      }

      .note-text {
353
        p:first-child {
354 355 356
          display: none;
        }

357
        &.system-note-commit-list:not(.hide-shade) {
Nur Rony's avatar
Nur Rony committed
358
          max-height: 70px;
359 360 361 362
          overflow: hidden;
          display: block;

          ul {
Nur Rony's avatar
Nur Rony committed
363
            margin: 3px 0 3px 16px !important;
364 365 366 367 368 369 370 371
          }

          p:first-child {
            display: none;
          }

          &::after {
            content: '';
372
            height: 70px;
373
            position: absolute;
374 375
            left: $gl-padding-24;
            right: 0;
376
            bottom: 0;
377
            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
378 379 380 381
          }
        }
      }
    }
382 383
  }
}
384

385
// Diff code in discussion view
386
.discussion-body .diff-file {
387 388
  .file-title {
    cursor: default;
Fatih Acet's avatar
Fatih Acet committed
389 390 391
    line-height: 42px;
    padding: 0 $gl-padding;
    border-top: 1px solid $border-color;
392
    border-radius: 0;
393

394 395 396 397 398 399 400 401
    @media (min-width: map-get($grid-breakpoints, md)) {
      top: 91px;

      .with-performance-bar & {
        top: 126px;
      }
    }

402 403 404
    &:hover {
      background-color: $gray-light;
    }
Fatih Acet's avatar
Fatih Acet committed
405 406 407 408

    .btn-clipboard {
      top: 10px;
    }
409 410
  }

411
  .line_content {
412
    white-space: pre-wrap;
413
  }
414 415
}

416
.tab-pane.notes {
417
  .diff-file .notes .system-note {
418 419 420 421
    margin: 0;
  }
}

422 423 424 425 426 427 428 429 430 431 432 433
.tab-pane.diffs {
  .system-note {
    padding: 0 $gl-padding;
    margin-left: 20px;
  }

  .notes > .note-discussion li.note.system-note {
    border-bottom: 0;
    padding: 0 $gl-padding;
  }
}

434 435 436 437 438 439
.diff-file {
  .is-over {
    .add-diff-note {
      display: inline-block;
    }
  }
440

Fatih Acet's avatar
Fatih Acet committed
441 442
  .discussion-notes {
    &:not(:last-child) {
443
      margin-bottom: 0;
Fatih Acet's avatar
Fatih Acet committed
444 445 446
    }

    .system-note {
447
      background-color: $white-light;
Fatih Acet's avatar
Fatih Acet committed
448 449 450 451
      padding: $gl-padding;
    }
  }

452 453 454 455 456 457
  // Merge request notes in diffs
  // Diff is inline
  .notes_content .note-header .note-headline-light {
    display: inline-block;
    position: relative;
  }
458

459
  .notes_holder {
460
    font-family: $regular-font;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
461

462
    td {
463
      border: 1px solid $border-color;
464
      border-left: 0;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
465

466 467 468 469 470 471 472 473
      &.notes_content {
        border-width: 1px 0;
        padding: 0;
        vertical-align: top;
        white-space: normal;

        &.parallel {
          border-width: 1px;
474 475 476 477

          &.new {
            border-right-width: 0;
          }
478 479
        }

Clement Ho's avatar
Clement Ho committed
480 481 482 483
        .notes {
          background-color: $white-light;
        }

484 485 486 487
        a code {
          top: 0;
          margin-right: 0;
        }
488
      }
489
    }
490 491
  }
}
492

Fatih Acet's avatar
Fatih Acet committed
493 494 495 496 497 498 499 500 501 502 503 504
.diffs {
  .discussion-notes {
    margin-left: 0;
    border-left: 0;

    .notes {
      position: relative;
      @include vertical-line(52px);
    }
  }

  .note-wrapper {
505 506 507 508
    &.system-note {
      border: 0;
      margin-left: 20px;
    }
Fatih Acet's avatar
Fatih Acet committed
509 510 511 512 513 514 515 516
  }

  .discussion-reply-holder {
    border-radius: 0 0 $border-radius-default $border-radius-default;
    position: relative;
  }
}

517
.commit-diff {
518 519 520
  .notes_content {
    background-color: $white-light;
  }
521 522
}

523
.discussion-header,
524
.note-header-info {
525 526 527 528
  a {
    color: inherit;

    &:hover {
529
      color: $blue-600;
530 531 532 533
    }

    &:focus,
    &:hover {
534
      text-decoration: none;
535 536 537 538

      .note-header-author-name {
        text-decoration: underline;
      }
539 540 541
    }
  }

542
  .author-link {
543
    color: $gl-text-color;
544
  }
545 546
}

547
.discussion-header {
Fatih Acet's avatar
Fatih Acet committed
548 549 550 551 552 553 554 555 556 557 558
  min-height: 72px;

  .note-header-info {
    padding-bottom: 0;
  }
}

.unresolved {
  .note-header-info {
    margin-top: $gl-padding-8;
  }
559 560
}

561 562 563 564 565 566 567
.note-header {
  display: flex;
  justify-content: space-between;
}

.note-header-info {
  min-width: 0;
Fatih Acet's avatar
Fatih Acet committed
568
  padding-bottom: $gl-padding-8;
569 570 571 572

  &.discussion {
    padding-bottom: 0;
  }
573 574
}

575 576 577 578
.system-note .note-header-info {
  padding-bottom: 0;
}

579 580 581
.note-headline-light {
  display: inline;

Clement Ho's avatar
Clement Ho committed
582
  @include notes-media('max', map-get($grid-breakpoints, xs)) {
583 584 585 586
    display: block;
  }
}

587 588
.note-headline-light,
.discussion-headline-light {
589
  color: $gl-text-color-secondary;
590 591
}

Phil Hughes's avatar
Phil Hughes committed
592 593
.discussion-headline-light {
  a {
594
    color: $blue-600;
Phil Hughes's avatar
Phil Hughes committed
595 596 597
  }
}

598 599 600
.note-headline-meta {
  display: inline-block;
  white-space: nowrap;
601 602 603 604

  .system-note-message {
    white-space: normal;
  }
605

606 607 608 609
  .system-note-separator {
    color: $gl-text-color-disabled;
  }

610 611 612
  a:hover {
    text-decoration: underline;
  }
613 614
}

615
/**
616
 * Actions for Discussions/Notes
617
 */
618

619
.discussion-actions {
620
  float: right;
621
  color: $gray-darkest;
622

Fatih Acet's avatar
Fatih Acet committed
623 624 625 626 627
  @include media-breakpoint-down(xs) {
    width: 100%;
    margin: $gl-padding-8 0;
  }

628 629 630
  .btn-group > .discussion-next-btn {
    margin-left: -1px;
  }
Fatih Acet's avatar
Fatih Acet committed
631 632 633 634

  svg {
    height: 15px;
  }
635
}
636

637
.note-actions {
638
  align-self: flex-start;
639
  flex-shrink: 0;
640 641
  display: inline-flex;
  align-items: center;
642 643
  margin-left: 10px;
  color: $gray-darkest;
644

Clement Ho's avatar
Clement Ho committed
645
  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
646 647 648
    float: none;
    margin-left: 0;
  }
649 650 651
}

.more-actions {
652 653
  display: flex;
  align-items: flex-end;
654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669

  .tooltip {
    white-space: nowrap;
  }
}

.more-actions-toggle {
  &:hover .icon,
  &:focus .icon {
    color: $blue-600;
  }
}

.more-actions-dropdown {
  width: 180px;
  min-width: 180px;
670 671
}

672
.note-actions-item {
673
  margin-left: 12px;
674 675 676 677 678 679
  display: flex;
  align-items: center;

  &.more-actions {
    // compensate for narrow icon
    margin-left: 10px;
680 681 682
  }
}

683
.note-action-button {
684
  @include emoji-menu-toggle-button;
685
}
686

687
.discussion-toggle-button {
688 689 690
  padding: 0;
  background-color: transparent;
  border: 0;
691 692
  line-height: 20px;
  font-size: 13px;
693 694 695
  transition: color 0.1s linear;

  &:hover {
696
    color: $blue-600;
697 698 699 700 701
  }

  &:focus {
    text-decoration: underline;
    outline: none;
702
    color: $blue-600;
703
  }
704

705 706 707 708 709
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
710 711
  }
}
712 713

.note-role {
714 715 716 717
  margin: 0 3px;
}

.note-role-special {
718
  position: relative;
719
  display: inline-block;
720
  color: $gl-text-color-secondary;
721
  font-size: 12px;
722
  text-shadow: 0 0 15px $gl-text-color-inverted;
723 724
}

725
/**
726
 * Line note button on the side of diffs
727
 */
728

729 730 731
.line_holder .is-over:not(.no-comment-btn) {
  .add-diff-note {
    opacity: 1;
732
    z-index: 101;
733 734 735
  }
}

736
.add-diff-note {
Felipe Artur's avatar
Felipe Artur committed
737
  @include btn-comment-icon;
738
  opacity: 0;
739 740
  margin-left: -55px;
  position: absolute;
741 742
  top: 50%;
  transform: translateY(-50%);
743 744
  z-index: 10;
}
745

Phil Hughes's avatar
Phil Hughes committed
746 747 748 749 750
.disabled-comment {
  background-color: $gray-light;
  border-radius: $border-radius-base;
  border: 1px solid $border-gray-normal;
  color: $note-disabled-comment-color;
751
  padding: 90px 0;
Phil Hughes's avatar
Phil Hughes committed
752

753
  &.discussion-locked {
754
    border: 0;
755 756 757
    background-color: $white-light;
  }

Phil Hughes's avatar
Phil Hughes committed
758
  a {
759
    color: $blue-600;
Phil Hughes's avatar
Phil Hughes committed
760 761
  }
}
Phil Hughes's avatar
Phil Hughes committed
762

763
.line-resolve-all-container {
Clement Ho's avatar
Clement Ho committed
764
  @include notes-media('min', map-get($grid-breakpoints, sm)) {
765 766 767 768 769 770 771
    margin-right: 0;
  }

  > div {
    white-space: nowrap;
  }

772 773 774 775 776 777 778 779
  .btn-group {
    margin-left: -4px;
  }

  .discussion-next-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
780

781
  .btn {
Fatih Acet's avatar
Fatih Acet committed
782
    svg {
783 784 785
      fill: $gray-darkest;
    }

786 787 788 789
    &.discussion-create-issue-btn {
      margin-left: -4px;
      border-radius: 0;
      border-right: 0;
790

791 792 793
      a {
        padding: 0;
        line-height: 0;
794

795 796 797 798
        &:hover {
          text-decoration: none;
          border: 0;
        }
799 800 801
      }
    }
  }
802 803
}

Phil Hughes's avatar
Phil Hughes committed
804
.line-resolve-all {
805
  vertical-align: middle;
806
  display: inline-block;
Fatih Acet's avatar
Fatih Acet committed
807
  padding: 6px 10px;
808
  background-color: $gray-light;
Phil Hughes's avatar
Phil Hughes committed
809
  border: 1px solid $border-color;
810
  border-radius: $border-radius-default;
Phil Hughes's avatar
Phil Hughes committed
811

812 813 814
  &.has-next-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
815
    border-right: 0;
816 817 818 819
  }

  .line-resolve-btn {
    margin-right: 5px;
820 821 822 823

    svg {
      vertical-align: middle;
    }
Phil Hughes's avatar
Phil Hughes committed
824 825 826 827 828
  }
}

.line-resolve-btn {
  position: relative;
829
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
830 831
  padding: 0;
  background-color: transparent;
832
  border: 0;
Phil Hughes's avatar
Phil Hughes committed
833
  outline: 0;
834
  color: $gray-darkest;
835
  transition: color $general-hover-transition-duration $general-hover-transition-curve;
Phil Hughes's avatar
Phil Hughes committed
836

837 838 839 840
  &.is-disabled {
    cursor: default;
  }

841 842 843
  &:not(.is-disabled) {
    &:hover,
    &:focus {
844
      color: $green-600;
845 846 847
    }
  }

Phil Hughes's avatar
Phil Hughes committed
848
  &.is-active {
849
    color: $green-600;
Phil Hughes's avatar
Phil Hughes committed
850

851 852
    &:hover,
    &:focus {
853
      color: $green-700;
Phil Hughes's avatar
Phil Hughes committed
854 855 856
    }
  }

Luke Bennett's avatar
Luke Bennett committed
857 858 859 860
  .loading {
    margin: 0;
    height: auto;
  }
Phil Hughes's avatar
Phil Hughes committed
861
}
862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888

// Vue refactored diff discussion adjustments
.files {
  .diff-discussions {
    .note-discussion.timeline-entry {
      padding-left: 0;

      &:last-child {
        border-bottom: 0;
      }

      > .timeline-entry-inner {
        padding: 0;

        > .timeline-content {
          margin-left: 0;
        }

        > .timeline-icon {
          display: none;
        }
      }

      .discussion-body {
        padding-top: 0;

        .discussion-wrapper {
889
          border: 0;
890 891 892 893 894 895 896 897 898 899 900 901 902
        }
      }
    }
  }

  .diff-comment-form {
    display: block;
  }

  .add-diff-note svg {
    margin-top: 4px;
  }
}
903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922

.discussion-filter-container {

  .btn > svg {
    width: $gl-col-padding;
    height: $gl-col-padding;
  }

  .dropdown-menu {
    margin-bottom: $gl-padding-4;

    @include media-breakpoint-down(md) {
      margin-left: $btn-side-margin + $contextual-sidebar-collapsed-width;
    }

    @include media-breakpoint-down(xs) {
      margin-left: $btn-side-margin;
    }
  }
}
923 924 925 926 927 928 929 930 931 932 933 934 935 936

//This needs to be deleted when Snippet/Commit comments are convered to Vue
// See https://gitlab.com/gitlab-org/gitlab-ce/issues/53918#note_117038785
.unstyled-comments {

  .discussion-header {
    padding: $gl-padding;
    border-bottom: 1px solid $border-color;
  }

  .discussion-form-container {
    padding: $gl-padding;
  }
}