notes.scss 11.9 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
  .timeline-icon {
    float: left;
19 20

    svg {
21 22
      width: 16px;
      height: 16px;
23 24
      fill: $gray-darkest;
      position: absolute;
25 26
      left: 0;
      top: 16px;
27
    }
28 29 30
  }

  .timeline-content {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
31
    margin-left: 55px;
32 33 34 35 36 37

    &.timeline-content-form {
      @media (max-width: $screen-sm-max) {
        margin-left: 0;
      }
    }
38 39
  }

40 41
  .note-created-ago,
  .note-updated-at {
42 43 44
    white-space: nowrap;
  }

45
  .discussion-body {
46 47 48 49 50
    padding-top: 8px;

    .panel {
      margin-bottom: 0;
    }
51 52 53 54 55 56 57 58 59
  }

  .discussion {
    overflow: hidden;
    display: block;
    position: relative;
  }

  .note {
60
    padding: $gl-padding $gl-btn-padding 0;
61 62 63 64
    display: block;
    position: relative;
    border-bottom: 1px solid $white-normal;

65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
    &.being-posted {
      pointer-events: none;
      opacity: 0.5;

      .dummy-avatar {
        display: inline-block;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background-color: $kdb-border;
        border: 1px solid darken($kdb-border, 25%);
      }

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

84 85
    &.note-discussion {
      &.timeline-entry {
86
        padding: $gl-padding 10px;
87 88 89
      }
    }

90
    &.is-editing {
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
      .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 {
        word-wrap: break-word;
        @include md-typography;
        // Reset ul style types since we're nested inside a ul already
        @include bulleted-list;
        ul.task-list {
          ul:not(.task-list) {
            padding-left: 1.3em;
          }
        }
blackst0ne's avatar
blackst0ne committed
120 121 122 123

        table {
          @include markdown-table;
        }
124 125 126 127 128
      }
    }

    .note-awards {
      .js-awards-block {
129
        margin-bottom: 16px;
130 131 132 133 134 135 136 137 138 139 140 141 142
      }
    }

    .note-header {

      @media (max-width: $screen-xs-min) {
        .inline {
          display: block;
        }
      }
    }

    .note-emoji-button {
143 144 145
      position: relative;
      line-height: 1;

146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
      .fa-spinner {
        display: none;
      }

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

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

162 163
  .system-note {
    font-size: 14px;
164 165 166
    padding: 0;
    clear: both;

167 168 169 170
    @media (min-width: $screen-sm-min) {
      margin-left: 65px;
    }

171
    .note-header-info {
172 173 174
      padding-bottom: 0;
    }

175 176 177 178 179
    &.timeline-entry::after {
      clear: none;
    }

    .system-note-message {
180
      display: inline;
181 182 183 184

      &::first-letter {
        text-transform: lowercase;
      }
185 186 187 188 189

      a {
        color: $gl-link-color;
        text-decoration: none;
      }
190 191

      p {
192
        display: inline;
193 194 195 196 197 198
        margin: 0;

        &::first-letter {
          text-transform: lowercase;
        }
      }
199 200 201 202
    }

    .timeline-content {
      padding: 14px 10px;
203 204 205 206

      @media (min-width: $screen-sm-min) {
        margin-left: 20px;
      }
207 208
    }

209 210 211 212
    .note-header {
      padding-bottom: 0;
    }

213 214 215 216
    .note-body {
      overflow: hidden;

      .system-note-commit-list-toggler {
217
        color: $gl-link-color;
218 219 220
        display: none;
        padding: 10px 0 0;
        cursor: pointer;
221 222
        position: relative;
        z-index: 2;
223 224 225 226 227

        &:hover {
          color: $gl-link-color;
          text-decoration: underline;
        }
228 229 230 231 232 233 234 235
      }

      .note-text {
        & p:first-child {
          display: none;
        }

        &.system-note-commit-list {
Nur Rony's avatar
Nur Rony committed
236
          max-height: 70px;
237 238 239 240
          overflow: hidden;
          display: block;

          ul {
Nur Rony's avatar
Nur Rony committed
241
            margin: 3px 0 3px 16px !important;
242 243 244 245 246 247 248 249 250
          }

          p:first-child {
            display: none;
          }

          &::after {
            content: '';
            width: 100%;
251
            height: 67px;
252 253
            position: absolute;
            left: 0;
254
            bottom: 0;
255
            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
256 257 258 259 260 261 262
          }

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

            &::after {
263
              display: none;
264 265 266 267 268 269
              background: transparent;
            }
          }
        }
      }
    }
270 271
  }
}
272

273
// Diff code in discussion view
274
.discussion-body .diff-file {
275 276 277 278 279 280 281 282
  .file-title {
    cursor: default;

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

283
  .line_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
284
    white-space: pre-wrap;
285
  }
286 287
}

288
.diff-file .notes_holder {
289
  font-family: $regular_font;
290

291
  td {
292
    border: 1px solid $white-normal;
293 294 295
    border-left: none;

    &.notes_line {
296
      vertical-align: middle;
297 298
      text-align: center;
      padding: 10px 0;
299
      background: $gray-light;
300
      color: $text-color;
301
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
302

303 304 305
    &.notes_line2 {
      text-align: center;
      padding: 10px 0;
306
      border-left: 1px solid $note-line2-border !important;
307
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
308

309
    &.notes_content {
310
      background-color: $gray-light;
311
      border-width: 1px 0;
Phil Hughes's avatar
Phil Hughes committed
312
      padding: 0;
313
      vertical-align: top;
314
      white-space: normal;
Annabel Dunstone's avatar
Annabel Dunstone committed
315

316
      &.parallel {
317 318
        border-width: 1px;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
319

320 321 322 323 324 325 326 327 328 329 330 331
      .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
332 333 334
      .notes {
        background-color: $white-light;
      }
335 336 337 338 339

      a code {
        top: 0;
        margin-right: 0;
      }
340
    }
341 342
  }
}
343

344 345
.discussion-header,
.note-header {
346 347
  position: relative;

348 349 350 351 352
  a {
    color: inherit;

    &:hover {
      color: $gl-link-color;
353 354 355 356
    }

    &:focus,
    &:hover {
357 358 359 360
      text-decoration: none;
    }
  }

361
  .author_link {
362
    color: $gl-text-color;
363
  }
364 365
}

366 367 368 369
.discussion-header {
  font-size: 14px;
}

370 371 372
.note-header {
  display: flex;
  justify-content: space-between;
373 374 375 376

  @media (max-width: $screen-xs-max) {
    flex-flow: row wrap;
  }
377 378 379 380
}

.note-header-info {
  min-width: 0;
381
  padding-bottom: 8px;
382 383
}

384 385 386 387
.system-note .note-header-info {
  padding-bottom: 0;
}

388 389 390 391 392 393
.note-header-author-name {
  @media (max-width: $screen-xs-max) {
    display: none;
  }
}

394 395 396 397 398 399 400 401
.note-headline-light {
  display: inline;

  @media (max-width: $screen-xs-min) {
    display: block;
  }
}

402 403
.note-headline-light,
.discussion-headline-light {
Phil Hughes's avatar
Phil Hughes committed
404
  color: $notes-light-color;
405 406
}

Phil Hughes's avatar
Phil Hughes committed
407 408 409 410 411 412
.discussion-headline-light {
  a {
    color: $gl-link-color;
  }
}

413 414 415
.note-headline-meta {
  display: inline-block;
  white-space: nowrap;
416 417 418 419

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

422
/**
423
 * Actions for Discussions/Notes
424
 */
425

426
.discussion-actions {
427 428
  float: right;
  margin-left: 10px;
429
  color: $gray-darkest;
430
}
431

432
.note-actions {
433 434 435 436 437
  flex-shrink: 0;
  // For PhantomJS that does not support flex
  float: right;
  margin-left: 10px;
  color: $gray-darkest;
438

439 440 441 442 443
  @media (max-width: $screen-xs-max) {
    float: none;
    margin-left: 0;
  }

444
  .note-action-button {
445
    margin-left: 8px;
446
  }
447 448
}

Phil Hughes's avatar
Phil Hughes committed
449
.discussion-actions {
450
  @media (max-width: $screen-md-max) {
Phil Hughes's avatar
Phil Hughes committed
451 452 453 454 455 456 457 458 459
    float: none;
    margin-left: 0;

    .note-action-button {
      margin-left: 0;
    }
  }
}

460
.note-action-button {
461
  display: inline;
462 463 464 465 466 467
  line-height: 20px;

  @media (min-width: $screen-sm-min) {
    margin-left: 10px;
    line-height: 24px;
  }
468

469
  .fa {
470
    color: $gray-darkest;
Phil Hughes's avatar
Phil Hughes committed
471 472 473 474
    position: relative;
    font-size: 17px;
  }

475 476 477 478 479 480 481 482 483 484
  svg {
    height: 16px;
    width: 16px;
    fill: $gray-darkest;
    vertical-align: text-top;
  }

  .award-control-icon-positive,
  .award-control-icon-super-positive {
    position: absolute;
485 486
    top: 0;
    left: 0;
487 488 489 490 491
    opacity: 0;
  }

  &:hover,
  &.is-active {
Clement Ho's avatar
Clement Ho committed
492 493
    .danger-highlight {
      color: $gl-text-red;
Annabel Dunstone's avatar
Annabel Dunstone committed
494 495
    }

Clement Ho's avatar
Clement Ho committed
496 497
    .link-highlight {
      color: $gl-link-color;
498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519

      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
520
    }
521
  }
522
}
523

524
.discussion-toggle-button {
525 526 527
  padding: 0;
  background-color: transparent;
  border: 0;
528 529
  line-height: 20px;
  font-size: 13px;
530 531 532 533 534 535 536 537 538 539 540
  transition: color 0.1s linear;

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

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

542 543 544 545 546
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
547 548
  }
}
549 550 551 552 553 554 555

.note-role {
  position: relative;
  top: -2px;
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
Phil Hughes's avatar
Phil Hughes committed
556
  color: $notes-role-color;
557 558
  font-size: 12px;
  line-height: 20px;
559
  border: 1px solid $border-color;
560 561 562
  border-radius: $border-radius-base;
}

563

564
/**
565
 * Line note button on the side of diffs
566
 */
567

568 569 570 571 572
.add-diff-note {
  display: none;
  margin-top: -2px;
  border-radius: 50%;
  background: $white-light;
Phil Hughes's avatar
Phil Hughes committed
573
  padding: 1px 5px;
574
  font-size: 12px;
575
  color: $blue-500;
576 577 578 579 580
  margin-left: -55px;
  position: absolute;
  z-index: 10;
  width: 23px;
  height: 23px;
581
  border: 1px solid $blue-500;
Phil Hughes's avatar
Phil Hughes committed
582
  transition: transform .1s ease-in-out;
583

584
  &:hover {
585 586
    background: $blue-500;
    border-color: $blue-600;
587
    color: $white-light;
Phil Hughes's avatar
Phil Hughes committed
588
    transform: scale(1.15);
589
  }
590

591 592
  &:active {
    outline: 0;
593
  }
594
}
595

596 597 598 599 600 601 602 603 604 605 606
.discussion-body,
.diff-file {
  .notes .note {
    padding: 10px 15px;

    &.system-note {
      padding: 0;
    }
  }
}

607 608
.diff-file {
  .is-over {
609
    .add-diff-note {
610
      display: inline-block;
611
    }
randx's avatar
randx committed
612
  }
613
}
Phil Hughes's avatar
Phil Hughes committed
614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631

.disabled-comment {
  margin-left: -$gl-padding-top;
  margin-right: -$gl-padding-top;
  background-color: $gray-light;
  border-radius: $border-radius-base;
  border: 1px solid $border-gray-normal;
  color: $note-disabled-comment-color;
  line-height: 200px;

  .disabled-comment-text {
    line-height: normal;
  }

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

633
.line-resolve-all-container {
634 635 636 637 638 639 640 641 642
  @media (min-width: $screen-sm-min) {
    margin-right: 0;
    padding-left: $gl-padding;
  }

  > div {
    white-space: nowrap;
  }

643 644 645 646 647 648 649 650
  .btn-group {
    margin-left: -4px;
  }

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

  .btn.discussion-create-issue-btn {
653 654 655
    margin-left: -4px;
    border-radius: 0;
    border-right: 0;
656 657 658 659 660 661 662 663 664 665 666 667 668 669 670

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

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

    .new-issue-for-discussion path {
      fill: $gray-darkest;
    }
  }
671 672
}

Phil Hughes's avatar
Phil Hughes committed
673
.line-resolve-all {
674
  vertical-align: middle;
675
  display: inline-block;
676
  padding: 5px 10px 6px;
677
  background-color: $gray-light;
Phil Hughes's avatar
Phil Hughes committed
678
  border: 1px solid $border-color;
679
  border-radius: $border-radius-default;
Phil Hughes's avatar
Phil Hughes committed
680

681 682 683
  &.has-next-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
684
    border-right: 0;
685 686 687 688
  }

  .line-resolve-btn {
    margin-right: 5px;
689 690 691 692

    svg {
      vertical-align: middle;
    }
Phil Hughes's avatar
Phil Hughes committed
693 694 695 696 697
  }
}

.line-resolve-btn {
  position: relative;
698
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
699 700
  padding: 0;
  background-color: transparent;
701
  border: none;
Phil Hughes's avatar
Phil Hughes committed
702 703
  outline: 0;

704 705 706 707
  &.is-disabled {
    cursor: default;
  }

708
  &:not(.is-disabled):hover,
Phil Hughes's avatar
Phil Hughes committed
709
  &.is-active {
710
    color: $gl-text-green;
Phil Hughes's avatar
Phil Hughes committed
711

712
    svg {
713
      fill: $gl-text-green;
Phil Hughes's avatar
Phil Hughes committed
714 715 716
    }
  }

717
  svg {
718
    fill: $gray-darkest;
719 720
    height: 16px;
    width: 16px;
Phil Hughes's avatar
Phil Hughes committed
721
  }
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
722 723 724 725 726

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

729 730 731 732
.line-resolve-text {
  vertical-align: middle;
}

733
.discussion-next-btn {
734 735
  svg {
    margin: 0;
736

737 738 739
    path {
      fill: $gray-darkest;
    }
740 741
  }
}
Filipa Lacerda's avatar
Filipa Lacerda committed
742

743 744 745 746
.discussion-notes .flash-container {
  margin-bottom: 0;
}

Filipa Lacerda's avatar
Filipa Lacerda committed
747 748 749
// Merge request notes in diffs
.diff-file {
  // Diff is side by side
750
  .notes_content.parallel .note-header .note-header-author-name {
Filipa Lacerda's avatar
Filipa Lacerda committed
751 752 753 754 755 756 757 758
    display: block;
  }
  // Diff is inline
  .notes_content .note-header .note-headline-light {
    display: inline-block;
    position: relative;
  }
}