notes.scss 13.2 KB
Newer Older
1 2 3
/**
 * Notes
 */
4

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
5
@-webkit-keyframes targe3-note {
6 7 8
  from { background: $note-targe3-outside; }
  50% { background: $note-targe3-inside; }
  to { background: $note-targe3-outside; }
9 10
}

11
ul.notes {
12 13
  display: block;
  list-style: none;
14 15
  margin: 0;
  padding: 0;
16

17 18
  .note-created-ago,
  .note-updated-at {
19 20 21
    white-space: nowrap;
  }

22
  .discussion-body {
23 24 25 26 27
    padding-top: 8px;

    .panel {
      margin-bottom: 0;
    }
28 29 30 31 32
  }

  .discussion {
    display: block;
    position: relative;
33 34 35 36

    .diff-content {
      overflow: visible;
    }
37 38
  }

39 40
  > li { // .timeline-entry
    padding: 0;
41 42
    display: block;
    position: relative;
43 44 45 46 47
    border-bottom: 0;

    @include notes-media('min', $screen-sm-min) {
      padding-left: $note-icon-gutter-width;
    }
48

49 50
    .timeline-entry-inner {
      padding: $gl-padding $gl-btn-padding;
51 52 53
      border-bottom: 1px solid $white-normal;
    }

54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
    &:target,
    &.target {
      border-bottom: 1px solid $white-normal;

      &:not(:first-child) {
        border-top: 1px solid $white-normal;
        margin-top: -1px;
      }

      .timeline-entry-inner {
        border-bottom: 0;
      }
    }

    .timeline-icon {
      @include notes-media('min', $screen-sm-min) {
        margin-left: -$note-icon-gutter-width;
      }
    }

    .timeline-content {
      margin-left: $note-icon-gutter-width;

      @include notes-media('min', $screen-sm-min) {
        margin-left: 0;
      }
    }

82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
    &.being-posted {
      pointer-events: none;
      opacity: 0.5;

      .dummy-avatar {
        background-color: $kdb-border;
        border: 1px solid darken($kdb-border, 25%);
      }

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

97
    &.note-discussion {
98
      .timeline-entry-inner {
99
        padding: $gl-padding 10px;
100 101 102
      }
    }

103 104 105 106 107 108 109 110 111 112 113 114 115 116
    .editing-spinner {
      display: none;
    }

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

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

117
    &.is-editing {
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
      .note-header,
      .note-text,
      .edited-text {
        display: none;
      }

      .note-edit-form {
        display: block;

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

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

      .note-text {
        @include md-typography;
        // Reset ul style types since we're nested inside a ul already
        @include bulleted-list;
141 142
        word-wrap: break-word;

143 144 145 146 147
        ul.task-list {
          ul:not(.task-list) {
            padding-left: 1.3em;
          }
        }
blackst0ne's avatar
blackst0ne committed
148 149 150 151

        table {
          @include markdown-table;
        }
152 153 154 155 156
      }
    }

    .note-awards {
      .js-awards-block {
157
        margin-top: 16px;
158 159 160 161 162
      }
    }

    .note-header {

163
      @include notes-media('max', $screen-xs-min) {
164 165 166 167 168 169 170
        .inline {
          display: block;
        }
      }
    }

    .note-emoji-button {
171 172 173
      position: relative;
      line-height: 1;

174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
      .fa-spinner {
        display: none;
      }

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

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

190 191
  .system-note {
    font-size: 14px;
192 193
    clear: both;

194
    .note-header-info {
195 196 197
      padding-bottom: 0;
    }

198 199 200 201 202
    &.timeline-entry::after {
      clear: none;
    }

    .system-note-message {
203
      display: inline;
204 205 206 207

      &::first-letter {
        text-transform: lowercase;
      }
208 209 210 211 212

      a {
        color: $gl-link-color;
        text-decoration: none;
      }
213 214

      p {
215
        display: inline;
216 217 218 219 220 221
        margin: 0;

        &::first-letter {
          text-transform: lowercase;
        }
      }
222 223
    }

224 225 226
    .timeline-icon {
      float: left;

227 228 229 230 231
      @include notes-media('min', $screen-sm-min) {
        margin-left: 0;
        width: auto;
      }

232 233 234 235
      svg {
        width: 16px;
        height: 16px;
        fill: $gray-darkest;
236
        margin-top: 2px;
237 238
      }
    }
239

240
    .timeline-content {
241
      @include notes-media('min', $screen-sm-min) {
242
        margin-left: 30px;
243
      }
244 245
    }

246 247 248 249
    .note-header {
      padding-bottom: 0;
    }

250 251 252 253
    .note-body {
      overflow: hidden;

      .system-note-commit-list-toggler {
254
        color: $gl-link-color;
255 256 257
        display: none;
        padding: 10px 0 0;
        cursor: pointer;
258 259
        position: relative;
        z-index: 2;
260 261 262 263 264

        &:hover {
          color: $gl-link-color;
          text-decoration: underline;
        }
265 266 267
      }

      .note-text {
268
        p:first-child {
269 270 271 272
          display: none;
        }

        &.system-note-commit-list {
Nur Rony's avatar
Nur Rony committed
273
          max-height: 70px;
274 275 276 277
          overflow: hidden;
          display: block;

          ul {
Nur Rony's avatar
Nur Rony committed
278
            margin: 3px 0 3px 16px !important;
279 280 281 282 283 284 285 286 287
          }

          p:first-child {
            display: none;
          }

          &::after {
            content: '';
            width: 100%;
288
            height: 70px;
289 290
            position: absolute;
            left: 0;
291
            bottom: 0;
292
            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
293 294 295 296 297 298 299
          }

          &.hide-shade {
            max-height: 100%;
            overflow: auto;

            &::after {
300
              display: none;
301 302 303 304 305 306
              background: transparent;
            }
          }
        }
      }
    }
307 308
  }
}
309

310
// Diff code in discussion view
311
.discussion-body .diff-file {
312 313 314 315 316 317 318 319
  .file-title {
    cursor: default;

    &:hover {
      background-color: $gray-light;
    }
  }

320
  .line_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
321
    white-space: pre-wrap;
322
  }
323 324
}

325
.diff-file .notes_holder {
326
  font-family: $regular_font;
327

328
  td {
329
    border: 1px solid $white-normal;
330 331 332
    border-left: none;

    &.notes_line {
333
      vertical-align: middle;
334 335
      text-align: center;
      padding: 10px 0;
336
      background: $gray-light;
337
      color: $text-color;
338
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
339

340 341 342
    &.notes_line2 {
      text-align: center;
      padding: 10px 0;
343
      border-left: 1px solid $note-line2-border !important;
344
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
345

346
    &.notes_content {
347
      background-color: $gray-light;
348
      border-width: 1px 0;
Phil Hughes's avatar
Phil Hughes committed
349
      padding: 0;
350
      vertical-align: top;
351
      white-space: normal;
Annabel Dunstone's avatar
Annabel Dunstone committed
352

353
      &.parallel {
354 355
        border-width: 1px;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
356

357 358 359 360 361 362 363 364 365 366 367 368
      .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;
        }
      }

Annabel Dunstone's avatar
Annabel Dunstone committed
369 370 371
      .notes {
        background-color: $white-light;
      }
372 373 374 375 376

      a code {
        top: 0;
        margin-right: 0;
      }
377
    }
378 379
  }
}
380

381
.discussion-header,
382
.note-header-info {
383 384 385 386 387
  a {
    color: inherit;

    &:hover {
      color: $gl-link-color;
388 389 390 391
    }

    &:focus,
    &:hover {
392 393 394 395
      text-decoration: none;
    }
  }

396
  .author_link {
397
    color: $gl-text-color;
398
  }
399 400
}

401 402 403 404
.discussion-header {
  font-size: 14px;
}

405 406 407
.note-header {
  display: flex;
  justify-content: space-between;
408

409
  @include notes-media('max', $screen-xs-max) {
410 411
    flex-flow: row wrap;
  }
412 413 414 415
}

.note-header-info {
  min-width: 0;
416
  padding-bottom: 8px;
417 418 419 420

  &.discussion {
    padding-bottom: 0;
  }
421 422
}

423 424 425 426
.system-note .note-header-info {
  padding-bottom: 0;
}

427
.note-header-author-name {
428
  @include notes-media('max', $screen-xs-max) {
429 430 431 432
    display: none;
  }
}

433 434 435
.note-headline-light {
  display: inline;

436
  @include notes-media('max', $screen-xs-min) {
437 438 439 440
    display: block;
  }
}

441 442
.note-headline-light,
.discussion-headline-light {
Phil Hughes's avatar
Phil Hughes committed
443
  color: $notes-light-color;
444 445
}

Phil Hughes's avatar
Phil Hughes committed
446 447 448 449 450 451
.discussion-headline-light {
  a {
    color: $gl-link-color;
  }
}

452 453 454
.note-headline-meta {
  display: inline-block;
  white-space: nowrap;
455 456 457 458

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

461
/**
462
 * Actions for Discussions/Notes
463
 */
464

465
.discussion-actions {
466 467
  float: right;
  margin-left: 10px;
468
  color: $gray-darkest;
469
}
470

471
.note-actions {
472 473
  @include new-style-dropdown;

474
  align-self: flex-start;
475
  flex-shrink: 0;
476 477
  display: inline-flex;
  align-items: center;
478 479 480 481
  // For PhantomJS that does not support flex
  float: right;
  margin-left: 10px;
  color: $gray-darkest;
482

483
  @include notes-media('max', $screen-xs-max) {
484 485 486
    float: none;
    margin-left: 0;
  }
487 488 489
}

.more-actions {
490 491 492
  float: right; // phantomjs fallback
  display: flex;
  align-items: flex-end;
493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508

  .tooltip {
    white-space: nowrap;
  }
}

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

.more-actions-dropdown {
  width: 180px;
  min-width: 180px;
509 510
}

Phil Hughes's avatar
Phil Hughes committed
511
.discussion-actions {
512
  @include notes-media('max', $screen-md-max) {
Phil Hughes's avatar
Phil Hughes committed
513 514
    float: none;
    margin-left: 0;
515 516
  }
}
Phil Hughes's avatar
Phil Hughes committed
517

518
.note-actions-item {
micael.bergeron's avatar
micael.bergeron committed
519
  margin-left: 12px;
520 521 522 523 524 525
  display: flex;
  align-items: center;

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

529
.note-action-button {
530 531 532 533
  line-height: 1;
  padding: 0;
  min-width: 16px;
  color: $gray-darkest;
534

535
  .fa {
Phil Hughes's avatar
Phil Hughes committed
536
    position: relative;
537
    font-size: 16px;
Phil Hughes's avatar
Phil Hughes committed
538 539
  }

540 541


542 543 544
  svg {
    height: 16px;
    width: 16px;
545
    top: 0;
546
    vertical-align: text-top;
547 548 549 550

    path {
      fill: currentColor;
    }
551 552 553 554 555
  }

  .award-control-icon-positive,
  .award-control-icon-super-positive {
    position: absolute;
556 557
    top: 0;
    left: 0;
558 559 560 561 562
    opacity: 0;
  }

  &:hover,
  &.is-active {
Clement Ho's avatar
Clement Ho committed
563 564
    .danger-highlight {
      color: $gl-text-red;
Annabel Dunstone's avatar
Annabel Dunstone committed
565 566
    }

Clement Ho's avatar
Clement Ho committed
567 568
    .link-highlight {
      color: $gl-link-color;
569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590

      svg {
        fill: $gl-link-color;
      }
    }

    .award-control-icon-neutral {
      opacity: 0;
    }

    .award-control-icon-positive {
      opacity: 1;
    }
  }

  &.is-active {
    .award-control-icon-positive {
      opacity: 0;
    }

    .award-control-icon-super-positive {
      opacity: 1;
Annabel Dunstone's avatar
Annabel Dunstone committed
591
    }
592
  }
593
}
594

595
.discussion-toggle-button {
596 597 598
  padding: 0;
  background-color: transparent;
  border: 0;
599 600
  line-height: 20px;
  font-size: 13px;
601 602 603 604 605 606 607 608 609 610 611
  transition: color 0.1s linear;

  &:hover {
    color: $gl-link-color;
  }

  &:focus {
    text-decoration: underline;
    outline: none;
    color: $gl-link-color;
  }
612

613 614 615 616 617
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
618 619
  }
}
620 621 622

.note-role {
  position: relative;
623
  display: inline-block;
Phil Hughes's avatar
Phil Hughes committed
624
  color: $notes-role-color;
625 626
  font-size: 12px;
  line-height: 20px;
micael.bergeron's avatar
micael.bergeron committed
627
  margin: 0 3px;
628 629 630 631 632 633 634 635 636 637

  &.note-role-access {
    padding: 0 7px;
    border: 1px solid $border-color;
    border-radius: $label-border-radius;
  }

  &.note-role-special {
    text-shadow: 0 0 15px white;
  }
638 639
}

640

641

642
/**
643
 * Line note button on the side of diffs
644
 */
645

646 647 648 649 650 651
.line_holder .is-over:not(.no-comment-btn) {
  .add-diff-note {
    opacity: 1;
  }
}

652
.add-diff-note {
653
  opacity: 0;
654 655 656
  margin-top: -2px;
  border-radius: 50%;
  background: $white-light;
Phil Hughes's avatar
Phil Hughes committed
657
  padding: 1px 5px;
658
  font-size: 12px;
659
  color: $blue-500;
660 661 662 663 664
  margin-left: -55px;
  position: absolute;
  z-index: 10;
  width: 23px;
  height: 23px;
665
  border: 1px solid $blue-500;
666

667
  &:hover {
668 669
    background: $blue-500;
    border-color: $blue-600;
670 671
    color: $white-light;
  }
672

673 674
  &:active {
    outline: 0;
675
  }
676
}
677

678 679 680
.discussion-body,
.diff-file {
  .notes .note {
681
    border-bottom: 1px solid $white-normal;
682

683 684 685 686
    .timeline-entry-inner {
      padding-left: $gl-padding;
      padding-right: $gl-padding;
      border-bottom: none;
687 688 689 690
    }
  }
}

691 692
.diff-file {
  .is-over {
693
    .add-diff-note {
694
      display: inline-block;
695
    }
randx's avatar
randx committed
696
  }
697
}
Phil Hughes's avatar
Phil Hughes committed
698 699 700 701 702 703

.disabled-comment {
  background-color: $gray-light;
  border-radius: $border-radius-base;
  border: 1px solid $border-gray-normal;
  color: $note-disabled-comment-color;
704
  padding: 90px 0;
Phil Hughes's avatar
Phil Hughes committed
705 706 707 708 709

  a {
    color: $gl-link-color;
  }
}
Phil Hughes's avatar
Phil Hughes committed
710

711
.line-resolve-all-container {
712
  @include notes-media('min', $screen-sm-min) {
713 714 715 716 717 718 719 720
    margin-right: 0;
    padding-left: $gl-padding;
  }

  > div {
    white-space: nowrap;
  }

721 722 723 724 725 726 727 728
  .btn-group {
    margin-left: -4px;
  }

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

  .btn.discussion-create-issue-btn {
731 732 733
    margin-left: -4px;
    border-radius: 0;
    border-right: 0;
734 735 736 737 738 739 740 741 742 743 744 745 746 747 748

    a {
      padding: 0;
      line-height: 0;

      &:hover {
        text-decoration: none;
        border: 0;
      }
    }

    .new-issue-for-discussion path {
      fill: $gray-darkest;
    }
  }
749 750
}

Phil Hughes's avatar
Phil Hughes committed
751
.line-resolve-all {
752
  vertical-align: middle;
753
  display: inline-block;
754
  padding: 5px 10px 6px;
755
  background-color: $gray-light;
Phil Hughes's avatar
Phil Hughes committed
756
  border: 1px solid $border-color;
757
  border-radius: $border-radius-default;
Phil Hughes's avatar
Phil Hughes committed
758

759 760 761
  &.has-next-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
762
    border-right: 0;
763 764 765 766
  }

  .line-resolve-btn {
    margin-right: 5px;
767 768 769 770

    svg {
      vertical-align: middle;
    }
Phil Hughes's avatar
Phil Hughes committed
771 772 773 774 775
  }
}

.line-resolve-btn {
  position: relative;
776
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
777 778
  padding: 0;
  background-color: transparent;
779
  border: none;
Phil Hughes's avatar
Phil Hughes committed
780
  outline: 0;
781
  transition: color $general-hover-transition-duration $general-hover-transition-curve;
Phil Hughes's avatar
Phil Hughes committed
782

783 784 785 786
  &.is-disabled {
    cursor: default;
  }

787 788 789 790 791 792 793
  &:not(.is-disabled) {
    &:hover,
    &:focus {
      color: $gl-text-green;
    }
  }

Phil Hughes's avatar
Phil Hughes committed
794
  &.is-active {
795
    color: $gl-text-green;
Phil Hughes's avatar
Phil Hughes committed
796

797 798 799
    &:hover,
    &:focus {
      color: $gl-text-green-hover;
Phil Hughes's avatar
Phil Hughes committed
800 801 802
    }
  }

803
  svg {
804
    fill: $gray-darkest;
805 806
    height: 16px;
    width: 16px;
Phil Hughes's avatar
Phil Hughes committed
807
  }
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
808 809 810 811 812

  .loading {
    margin: 0;
    height: auto;
  }
Phil Hughes's avatar
Phil Hughes committed
813
}
814

815 816 817 818
.line-resolve-text {
  vertical-align: middle;
}

819
.discussion-next-btn {
820 821
  svg {
    margin: 0;
822

823 824 825
    path {
      fill: $gray-darkest;
    }
826 827
  }
}
Filipa Lacerda's avatar
Filipa Lacerda committed
828 829 830 831 832 833 834 835 836

// Merge request notes in diffs
.diff-file {
  // Diff is inline
  .notes_content .note-header .note-headline-light {
    display: inline-block;
    position: relative;
  }
}