notes.scss 16.3 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

@mixin vertical-line($left) {
  &::before {
7
    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;
Felipe Artur's avatar
Felipe Artur committed
13
  }
Fatih Acet's avatar
Fatih Acet committed
14
}
Felipe Artur's avatar
Felipe Artur committed
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;
    }
Felipe Artur's avatar
Felipe Artur committed
52

Fatih Acet's avatar
Fatih Acet committed
53 54 55
    &.note-form {
      margin-left: 0;

56
      @include notes-media('min', map-get($grid-breakpoints, md)) {
Fatih Acet's avatar
Fatih Acet committed
57 58 59 60
        margin-left: $note-form-margin-left;
      }

      .timeline-icon {
61
        @include notes-media('min', map-get($grid-breakpoints, sm)) {
Fatih Acet's avatar
Fatih Acet committed
62 63 64 65 66 67 68 69 70
          margin-left: -$note-icon-gutter-width;
        }
      }

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

71
    .notes-content {
Fatih Acet's avatar
Fatih Acet committed
72 73 74
      border: 0;
      border-top: 1px solid $border-color;
    }
Felipe Artur's avatar
Felipe Artur committed
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 85

  .replies-toggle {
    background-color: $gray-light;
    padding: $gl-padding-8 $gl-padding;
86 87
    border-top: 1px solid $gray-100;
    border-bottom: 1px solid $gray-100;
Fatih Acet's avatar
Fatih Acet committed
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

    .collapse-replies-btn:hover {
      color: $blue-600;
    }

    &.expanded {
      span {
        cursor: pointer;
      }

      svg {
        position: relative;
        top: 3px;
      }
    }

    &.collapsed {
      color: $gl-text-color-secondary;
106
      border-radius: 0 0 $border-radius-default $border-radius-default;
Fatih Acet's avatar
Fatih Acet committed
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

      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;
    }
  }
136

137 138 139 140 141 142 143 144 145
  .discussion-toggle-replies {
    border-top: 0;
    border-radius: 4px 4px 0 0;

    &.collapsed {
      border-radius: 4px;
    }
  }

146 147
  .note-created-ago,
  .note-updated-at {
148
    white-space: normal;
149 150
  }

151
  .discussion-body {
Clement Ho's avatar
Clement Ho committed
152
    .card {
153 154
      margin-bottom: 0;
    }
155 156 157 158 159
  }

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

161
    .timeline-discussion-body {
162
      margin-top: -$gl-padding-8;
163 164 165
      overflow-x: auto;
      overflow-y: hidden;

166 167
      .note-body {
        margin-top: $gl-padding-8;
168 169 170
      }
    }

171 172
    .diff-content {
      overflow: visible;
Felipe Artur's avatar
Felipe Artur committed
173
      padding: 0;
174
    }
175 176
  }

Felipe Artur's avatar
Felipe Artur committed
177
  > li {
178 179
    display: block;
    position: relative;
180 181
    border-bottom: 0;

182 183 184
    &.being-posted {
      pointer-events: none;
      opacity: 0.5;
Fatih Acet's avatar
Fatih Acet committed
185
      padding: $gl-padding;
186 187

      .dummy-avatar {
188 189
        background-color: $gl-gray-200;
        border: 1px solid darken($gl-gray-200, 25%);
190 191 192 193 194 195 196 197
      }

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

198 199 200 201 202 203 204 205 206 207 208 209 210 211
    .editing-spinner {
      display: none;
    }

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

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

212
    &.is-editing {
213 214 215 216 217 218
      .note-header,
      .note-text,
      .edited-text {
        display: none;
      }

219 220 221 222
      .user-avatar-link img {
        margin-top: $gl-padding-8;
      }

223 224
      .note-edit-form {
        display: block;
225
        margin-left: 0;
226 227 228 229 230 231 232 233

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

    .note-body {
234 235 236
      overflow-x: auto;
      overflow-y: hidden;

237
      .note-text {
238
        word-wrap: break-word;
239 240 241 242 243
      }
    }

    .note-awards {
      .js-awards-block {
244
        margin-top: 16px;
245 246 247 248
      }
    }

    .note-header {
249
      @include notes-media('max', map-get($grid-breakpoints, xs)) {
250 251 252 253 254 255 256
        .inline {
          display: block;
        }
      }
    }

    .note-emoji-button {
257 258 259
      position: relative;
      line-height: 1;

260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275
      .fa-spinner {
        display: none;
      }

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

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

276
  .system-note {
277 278
    padding: $gl-padding-4 20px;
    margin: $gl-padding 0;
Fatih Acet's avatar
Fatih Acet committed
279
    background-color: transparent;
280

281
    .note-header-info {
282 283 284
      padding-bottom: 0;
    }

285 286 287 288 289
    &.timeline-entry::after {
      clear: none;
    }

    .system-note-message {
290 291 292
      &::first-letter {
        text-transform: lowercase;
      }
293 294

      a {
295
        color: $blue-600;
296
      }
297 298

      p {
299
        display: inline;
300 301 302 303 304 305
        margin: 0;

        &::first-letter {
          text-transform: lowercase;
        }
      }
306 307
    }

308
    .timeline-content {
309
      @include notes-media('min', map-get($grid-breakpoints, sm)) {
310
        margin-left: 30px;
311
      }
312 313
    }

314 315 316 317
    .note-header {
      padding-bottom: 0;
    }

318 319 320 321
    .note-body {
      overflow: hidden;

      .system-note-commit-list-toggler {
322
        color: $blue-600;
323 324
        padding: 10px 0 0;
        cursor: pointer;
325 326
        position: relative;
        z-index: 2;
327 328

        &:hover {
329
          color: $blue-600;
330 331
          text-decoration: underline;
        }
332 333 334
      }

      .note-text {
335
        p:first-child {
336 337 338
          display: none;
        }

339
        &.system-note-commit-list:not(.hide-shade) {
Nur Rony's avatar
Nur Rony committed
340
          max-height: 70px;
341 342 343 344
          overflow: hidden;
          display: block;

          ul {
Nur Rony's avatar
Nur Rony committed
345
            margin: 3px 0 3px 16px !important;
346 347 348 349 350 351 352
          }

          p:first-child {
            display: none;
          }

          &::after {
353
            content: '';
354
            height: 70px;
355
            position: absolute;
356 357
            left: $gl-padding-24;
            right: 0;
358
            bottom: 0;
359
            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
360 361 362 363
          }
        }
      }
    }
364
  }
365 366 367 368 369 370 371 372 373 374 375 376

  .system-note,
  .discussion-filter-note {
    .timeline-icon {
      float: left;
      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;
377
      margin: -6px 20px 0 0;
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395

      svg {
        width: $system-note-svg-size;
        height: $system-note-svg-size;
        fill: $gray-darkest;
        display: block;
        margin: 0 auto;
      }
    }
  }

  .discussion-filter-note {
    .timeline-icon {
      width: $system-note-icon-size + 6;
      height: $system-note-icon-size + 6;
      margin-top: -8px;
    }
  }
396
}
397

398
// Diff code in discussion view
399
.discussion-body .diff-file {
400 401
  .file-title {
    cursor: default;
Fatih Acet's avatar
Fatih Acet committed
402 403 404
    line-height: 42px;
    padding: 0 $gl-padding;
    border-top: 1px solid $border-color;
405
    border-radius: 0;
406

407
    @media (min-width: map-get($grid-breakpoints, md)) {
408
      top: $mr-tabs-height + $header-height;
409 410 411 412 413 414

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

415 416 417
    &:hover {
      background-color: $gray-light;
    }
Fatih Acet's avatar
Fatih Acet committed
418 419 420 421

    .btn-clipboard {
      top: 10px;
    }
422 423
  }

424
  .line_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
425
    white-space: pre-wrap;
426
  }
427 428
}

429
.tab-pane.notes {
430
  .diff-file .notes .system-note {
431 432 433 434
    margin: 0;
  }
}

435 436 437 438 439 440 441 442
.tab-pane.diffs {
  .system-note {
    padding: 0 $gl-padding;
    margin-left: 20px;
  }

  .notes > .note-discussion li.note.system-note {
    border-bottom: 0;
443
    padding: 0;
444 445 446
  }
}

447 448 449
.diff-file {
  .is-over {
    .add-diff-note {
450 451 452
      display: inline-flex;
      justify-content: center;
      align-items: center;
453 454
    }
  }
455

Fatih Acet's avatar
Fatih Acet committed
456 457
  .discussion-notes {
    &:not(:last-child) {
458
      margin-bottom: 0;
Fatih Acet's avatar
Fatih Acet committed
459 460 461
    }

    .system-note {
462
      background-color: $white-light;
Fatih Acet's avatar
Fatih Acet committed
463 464 465 466
      padding: $gl-padding;
    }
  }

467 468
  // Merge request notes in diffs
  // Diff is inline
469
  .notes-content .note-header .note-headline-light {
470 471 472
    display: inline-block;
    position: relative;
  }
473

474 475 476 477 478 479 480 481
  .notes-content .discussion-notes.diff-discussions {
    border-bottom: 1px solid $border-color;

    &:nth-last-child(1) {
      border-bottom: 0;
    }
  }

482
  .notes_holder {
483
    font-family: $regular-font;
Annabel Dunstone's avatar
Annabel Dunstone committed
484

485
    td {
486
      border: 1px solid $border-color;
487
      border-left: 0;
Annabel Dunstone's avatar
Annabel Dunstone committed
488

489
      &.notes-content {
490 491 492 493 494
        border-width: 1px 0;
        padding: 0;
        vertical-align: top;
        white-space: normal;

Paul Slaughter's avatar
Paul Slaughter committed
495 496 497 498 499
        // Fixes subpixel rounding issue https://gitlab.com/gitlab-org/gitlab-ce/issues/53973
        // background-color is needed for dark code preference
        padding-bottom: 1px;
        background-color: $white-light;

500 501
        &.parallel {
          border-width: 1px;
502 503 504 505

          &.new {
            border-right-width: 0;
          }
506 507
        }

Clement Ho's avatar
Clement Ho committed
508 509 510 511
        .notes {
          background-color: $white-light;
        }

512 513 514 515
        a code {
          top: 0;
          margin-right: 0;
        }
516
      }
517
    }
518 519
  }
}
520

Fatih Acet's avatar
Fatih Acet committed
521 522 523 524 525 526 527
.diffs {
  .discussion-notes {
    margin-left: 0;
    border-left: 0;
  }

  .note-wrapper {
528 529 530 531
    &.system-note {
      border: 0;
      margin-left: 20px;
    }
Fatih Acet's avatar
Fatih Acet committed
532 533 534 535 536
  }

  .discussion-reply-holder {
    border-radius: 0 0 $border-radius-default $border-radius-default;
    position: relative;
537 538 539 540 541 542 543 544 545 546 547

    .discussion-form {
      width: 100%;
      background-color: $gray-light;
      padding: 0;
    }

    .disabled-comment {
      padding: $gl-vert-padding 0;
      width: 100%;
    }
Fatih Acet's avatar
Fatih Acet committed
548 549 550
  }
}

551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567
.code-commit .notes-content,
.diff-viewer > .image ~ .note-container {
  background-color: $white-light;

  .avatar-note-form-holder {
    .user-avatar-link img {
      margin: 13px $gl-padding $gl-padding;
    }

    form,
    ~ .discussion-form-container {
      padding: $gl-padding;

      @include media-breakpoint-up(sm) {
        margin-left: $note-icon-gutter-width;
      }
    }
568
  }
569 570
}

571 572 573 574
.diff-viewer > .image ~ .note-container form.new-note {
  margin-left: 0;
}

575
.discussion-header,
576
.note-header-info {
577 578 579 580
  a {
    color: inherit;

    &:hover {
581
      color: $blue-600;
582 583 584 585
    }

    &:focus,
    &:hover {
586
      text-decoration: none;
587 588 589 590

      .note-header-author-name {
        text-decoration: underline;
      }
591 592 593
    }
  }

594
  .author-link {
595
    color: $gl-text-color;
596
  }
597 598
}

599
.discussion-header {
600 601
  min-height: $line-height-base * 2em;
  box-sizing: content-box;
Fatih Acet's avatar
Fatih Acet committed
602 603 604 605

  .note-header-info {
    padding-bottom: 0;
  }
606 607 608 609 610

  .timeline-content {
    overflow-x: auto;
    overflow-y: hidden;
  }
Fatih Acet's avatar
Fatih Acet committed
611

612 613 614
  &.note-wrapper {
    display: flex;
    align-items: center;
Fatih Acet's avatar
Fatih Acet committed
615
  }
616 617
}

618 619 620 621 622 623 624
.note-header {
  display: flex;
  justify-content: space-between;
}

.note-header-info {
  min-width: 0;
Fatih Acet's avatar
Fatih Acet committed
625
  padding-bottom: $gl-padding-8;
626 627 628 629

  &.discussion {
    padding-bottom: 0;
  }
630 631
}

632 633 634 635
.system-note .note-header-info {
  padding-bottom: 0;
}

636 637 638
.note-headline-light {
  display: inline;

639
  @include notes-media('max', map-get($grid-breakpoints, xs)) {
640 641 642 643
    display: block;
  }
}

644 645
.note-headline-light,
.discussion-headline-light {
646
  color: $gl-text-color-secondary;
647 648
}

Phil Hughes's avatar
Phil Hughes committed
649 650
.discussion-headline-light {
  a {
651
    color: $blue-600;
Phil Hughes's avatar
Phil Hughes committed
652 653 654
  }
}

655
.note-headline-meta {
656
  .system-note-separator {
657
    color: $gray-700;
658 659
  }

660 661 662 663
  .note-timestamp {
    white-space: nowrap;
  }

664 665 666
  a:hover {
    text-decoration: underline;
  }
667 668
}

669
/**
670
 * Actions for Discussions/Notes
671
 */
672

673
.discussion-actions {
674
  float: right;
675
  color: $gray-darkest;
676

Fatih Acet's avatar
Fatih Acet committed
677 678 679 680 681
  @include media-breakpoint-down(xs) {
    width: 100%;
    margin: $gl-padding-8 0;
  }

682 683 684
  .btn-group > .discussion-next-btn {
    margin-left: -1px;
  }
Fatih Acet's avatar
Fatih Acet committed
685

686 687 688 689
  .btn-group > .discussion-create-issue-btn {
    margin-left: -2px;
  }

Fatih Acet's avatar
Fatih Acet committed
690 691 692
  svg {
    height: 15px;
  }
693
}
694

695
.note-actions {
696
  align-self: flex-start;
697
  flex-shrink: 0;
698 699
  display: inline-flex;
  align-items: center;
700
  margin-left: 10px;
701
  color: $gray-600;
702

703
  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
704 705 706
    float: none;
    margin-left: 0;
  }
707 708 709
}

.more-actions {
710 711
  display: flex;
  align-items: flex-end;
712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727

  .tooltip {
    white-space: nowrap;
  }
}

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

.more-actions-dropdown {
  width: 180px;
  min-width: 180px;
728 729
}

730
.note-actions-item {
micael.bergeron's avatar
micael.bergeron committed
731
  margin-left: 12px;
732 733 734 735 736 737
  display: flex;
  align-items: center;

  &.more-actions {
    // compensate for narrow icon
    margin-left: 10px;
Phil Hughes's avatar
Phil Hughes committed
738 739 740
  }
}

741
.note-action-button {
742
  @include emoji-menu-toggle-button;
743
}
744

745
.discussion-toggle-button {
746 747 748
  padding: 0;
  background-color: transparent;
  border: 0;
749 750
  line-height: 20px;
  font-size: 13px;
751 752 753
  transition: color 0.1s linear;

  &:hover {
754
    color: $blue-600;
755 756 757 758 759
  }

  &:focus {
    text-decoration: underline;
    outline: none;
760
    color: $blue-600;
761
  }
762

763 764 765 766 767
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
768 769
  }
}
770 771

.note-role {
772 773 774 775
  margin: 0 3px;
}

.note-role-special {
776
  position: relative;
777
  display: inline-block;
778
  color: $gl-text-color-secondary;
779
  font-size: 12px;
780
  text-shadow: 0 0 15px $gl-text-color-inverted;
781 782
}

783
/**
784
 * Line note button on the side of diffs
785
 */
786

787 788 789
.line_holder .is-over:not(.no-comment-btn) {
  .add-diff-note {
    opacity: 1;
790
    z-index: 101;
791 792 793
  }
}

794
.add-diff-note {
Felipe Artur's avatar
Felipe Artur committed
795
  @include btn-comment-icon;
796
  opacity: 0;
797
  margin-left: -52px;
798
  position: absolute;
799 800
  top: 50%;
  transform: translateY(-50%);
801 802
  z-index: 10;
}
803

Phil Hughes's avatar
Phil Hughes committed
804 805 806 807 808
.disabled-comment {
  background-color: $gray-light;
  border-radius: $border-radius-base;
  border: 1px solid $border-gray-normal;
  color: $note-disabled-comment-color;
809
  padding: $gl-padding-8 0;
Phil Hughes's avatar
Phil Hughes committed
810

811
  &.discussion-locked {
812
    border: 0;
813 814 815
    background-color: $white-light;
  }

816
  a:not(.learn-more) {
817
    color: $blue-600;
Phil Hughes's avatar
Phil Hughes committed
818 819
  }
}
Phil Hughes's avatar
Phil Hughes committed
820

821
.line-resolve-all-container {
822
  margin: $gl-padding-4;
823 824 825 826 827

  > div {
    white-space: nowrap;
  }

828 829 830 831 832 833 834 835
  .btn-group {
    margin-left: -4px;
  }

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

837
  .btn {
838 839
    line-height: $gl-line-height;

Fatih Acet's avatar
Fatih Acet committed
840
    svg {
841 842 843
      fill: $gray-darkest;
    }

844 845 846 847
    &.discussion-create-issue-btn {
      margin-left: -4px;
      border-radius: 0;
      border-right: 0;
848

849 850 851
      a {
        padding: 0;
        line-height: 0;
852

853 854 855 856
        &:hover {
          text-decoration: none;
          border: 0;
        }
857 858 859
      }
    }
  }
860 861
}

Phil Hughes's avatar
Phil Hughes committed
862
.line-resolve-all {
863
  vertical-align: middle;
864
  display: inline-block;
865
  padding: $gl-padding-4 10px;
866
  background-color: $gray-light;
Phil Hughes's avatar
Phil Hughes committed
867
  border: 1px solid $border-color;
868
  border-radius: $border-radius-default;
869
  font-size: $gl-btn-small-font-size;
Phil Hughes's avatar
Phil Hughes committed
870

871 872 873
  &.has-next-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
874
    border-right: 0;
875 876 877 878
  }

  .line-resolve-btn {
    margin-right: 5px;
Jarek Ostrowski's avatar
Jarek Ostrowski committed
879
    color: $gray-darkest;
880 881 882 883

    svg {
      vertical-align: middle;
    }
Phil Hughes's avatar
Phil Hughes committed
884
  }
885 886 887 888

  @include media-breakpoint-down(xs) {
    flex: 1;
  }
Phil Hughes's avatar
Phil Hughes committed
889 890 891 892
}

.line-resolve-btn {
  position: relative;
893
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
894 895
  padding: 0;
  background-color: transparent;
896
  border: 0;
Phil Hughes's avatar
Phil Hughes committed
897
  outline: 0;
898
  transition: color $general-hover-transition-duration $general-hover-transition-curve;
Phil Hughes's avatar
Phil Hughes committed
899

900 901 902 903
  &.is-disabled {
    cursor: default;
  }

904 905 906
  &:not(.is-disabled) {
    &:hover,
    &:focus {
907
      color: $green-600;
908 909 910
    }
  }

Phil Hughes's avatar
Phil Hughes committed
911
  &.is-active {
912
    color: $green-600;
Phil Hughes's avatar
Phil Hughes committed
913

914 915
    &:hover,
    &:focus {
916
      color: $green-700;
Phil Hughes's avatar
Phil Hughes committed
917 918 919
    }
  }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
920 921 922 923
  .loading {
    margin: 0;
    height: auto;
  }
Phil Hughes's avatar
Phil Hughes committed
924
}
Felipe Artur's avatar
Felipe Artur committed
925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951

// 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 {
952
          border: 0;
Felipe Artur's avatar
Felipe Artur committed
953 954 955 956 957 958 959 960 961
        }
      }
    }
  }

  .diff-comment-form {
    display: block;
  }
}
962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980

.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;
    }
  }
}
981 982 983 984 985 986 987 988 989 990 991 992 993

//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;
  }
}