diff.scss 15.6 KB
Newer Older
1
// Common
2
.diff-file {
3
  margin-bottom: $gl-padding;
4

5 6
  .file-title,
  .file-title-flex-parent {
7 8
    cursor: pointer;

9 10 11 12
    a:hover {
      text-decoration: none;
    }

13
    &:hover {
14
      background-color: $gray-normal;
15 16 17 18 19 20 21
    }

    .diff-toggle-caret {
      padding-right: 6px;
    }
  }

22
  .diff-content {
23
    background: $white-light;
24
    color: $gl-text-color;
Annabel Dunstone's avatar
Annabel Dunstone committed
25
    border-radius: 0 0 3px 3px;
26

skv's avatar
skv committed
27 28 29
    .unfold {
      cursor: pointer;
    }
30

31 32
    .file-mode-changed {
      padding: 10px;
33
      color: $file-mode-changed;
34 35
    }

36 37 38 39 40 41 42
    .suppressed-container {
      padding: ($padding-base-vertical + 5px) $padding-base-horizontal;
      text-align: center;

      // "Changes suppressed. Click to show." link
      .show-suppressed-diff {
        font-size: 110%;
43
        font-weight: $gl-font-weight-bold;
44 45 46
      }
    }

47 48 49 50 51 52
    .note-text {
      table {
        font-family: $font-family-sans-serif;
      }
    }

53 54 55
    table {
      width: 100%;
      font-family: $monospace_font;
56
      border: 0;
57
      border-collapse: separate;
58 59
      margin: 0;
      padding: 0;
60 61 62 63
      table-layout: fixed;

      .diff-line-num {
        width: 50px;
Phil Hughes's avatar
Phil Hughes committed
64 65 66 67

        a {
          transition: none;
        }
68
      }
69

70
      .line_holder td {
71 72
        line-height: $code_line_height;
        font-size: $code_font_size;
73

Annabel Dunstone's avatar
Annabel Dunstone committed
74 75
        &.noteable_line {
          position: relative;
76 77
        }

Annabel Dunstone's avatar
Annabel Dunstone committed
78
        span {
Annabel Dunstone's avatar
Annabel Dunstone committed
79
          white-space: pre-wrap;
Annabel Dunstone's avatar
Annabel Dunstone committed
80
        }
81 82 83 84

        .line {
          word-wrap: break-word;
        }
85
      }
86 87 88 89 90 91 92 93 94 95 96 97

      &.left-side-selected {
        td.line_content.parallel.right-side {
          @include user-select(none);
        }
      }

      &.right-side-selected {
        td.line_content.parallel.left-side {
          @include user-select(none);
        }
      }
98
    }
99

100 101
    tr.line_holder.parallel {
      td.line_content.parallel {
102 103
        width: 46%;
      }
104 105 106 107

      .add-diff-note {
        margin-left: -55px;
      }
108 109
    }

110 111
    .old_line,
    .new_line {
112
      @include user-select(none);
113
      margin: 0;
114
      border: 0;
115
      padding: 0 5px;
116
      border-right: 1px solid;
117 118 119 120
      text-align: right;
      min-width: 35px;
      max-width: 50px;
      width: 35px;
121

122 123 124
      a {
        float: left;
        width: 35px;
125
        font-weight: $gl-font-weight-normal;
126

127 128 129 130 131 132 133
        &[disabled] {
          cursor: default;

          &:hover,
          &:active {
            text-decoration: none;
          }
134 135 136
        }
      }
    }
137

138 139
    .line_content {
      display: block;
140
      margin: 0;
141
      padding: 0 1.5em;
142
      border: 0;
143
      position: relative;
144

145 146
      &.parallel {
        display: table-cell;
147 148 149 150

        span {
          word-break: break-all;
        }
151
      }
152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167

      &.old {
        &::before {
          content: '-';
          position: absolute;
          left: 0.5em;
        }
      }

      &.new {
        &::before {
          content: '+';
          position: absolute;
          left: 0.5em;
        }
      }
168
    }
169 170

    .diff-loading-error-block {
Filipa Lacerda's avatar
Filipa Lacerda committed
171 172
      padding: $gl-padding * 2 $gl-padding;
      text-align: center;
173
    }
174
  }
175

176
  .image {
177
    background: $file-image-bg;
178 179
    text-align: center;
    padding: 30px;
180

181
    .wrap {
182 183 184 185 186
      display: inline-block;
    }

    .frame {
      display: inline-block;
187
      background-color: $white-light;
188
      line-height: 0;
189

190
      img {
191
        border: 1px solid $white-light;
192 193
        background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
        linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
194 195
        background-size: 10px 10px;
        background-position: 0 0, 5px 5px;
196 197
        max-width: 100%;
      }
198

199 200 201 202 203 204 205 206
      &.deleted {
        border: 1px solid $deleted;
      }

      &.added {
        border: 1px solid $added;
      }
    }
207

208
    .image-info {
209
      font-size: 12px;
210
      margin: 5px 0 0;
211
      color: $diff-image-info-color;
212 213
    }

214
    .view.swipe {
215 216
      position: relative;

217
      .swipe-frame {
218 219 220 221
        display: block;
        margin: auto;
        position: relative;
      }
222

223
      .swipe-wrap {
224
        overflow: hidden;
225
        border-left: 1px solid $diff-swipe-border;
226 227 228 229 230
        position: absolute;
        display: block;
        top: 13px;
        right: 7px;
      }
231

232
      .frame {
233 234 235
        top: 0;
        right: 0;
        position: absolute;
236

237
        &.deleted {
238 239 240 241 242 243
          margin: 0;
          display: block;
          top: 13px;
          right: 7px;
        }
      }
244

245
      .swipe-bar {
246 247 248 249 250 251
        display: block;
        height: 100%;
        width: 15px;
        z-index: 100;
        position: absolute;
        cursor: pointer;
252

253 254
        &:hover {
          .top-handle {
255 256
            background-position: -15px 3px;
          }
257

258
          .bottom-handle {
259 260
            background-position: -15px -11px;
          }
261
        }
262

263
        .top-handle {
264 265 266 267
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
268
          top: 0;
269
          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
270
        }
271

272
        .bottom-handle {
273 274 275 276
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
277
          bottom: 0;
278
          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
279 280
        }
      }
281 282 283 284
    }
    //.view.swipe
    .view.onion-skin {
      .onion-skin-frame {
285 286 287 288
        display: block;
        margin: auto;
        position: relative;
      }
289

290 291
      .frame.added,
      .frame.deleted {
292 293
        position: absolute;
        display: block;
294 295
        top: 0;
        left: 0;
296
      }
297

298
      .controls {
299 300 301 302 303
        display: block;
        height: 14px;
        width: 300px;
        z-index: 100;
        position: absolute;
304
        bottom: 0;
305 306 307
        left: 50%;
        margin-left: -150px;

308
        .drag-track {
309 310
          display: block;
          position: absolute;
Felipe Artur's avatar
Felipe Artur committed
311
          top: 0;
312 313 314
          left: 12px;
          height: 10px;
          width: 276px;
315
          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
316 317 318 319 320
        }

        .dragger {
          display: block;
          position: absolute;
321 322
          left: 0;
          top: 0;
323 324
          height: 14px;
          width: 14px;
325
          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
326 327 328 329 330 331 332
          cursor: pointer;
        }

        .transparent {
          display: block;
          position: absolute;
          top: 2px;
333
          right: 0;
334 335
          height: 10px;
          width: 10px;
336
          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
337 338 339 340 341 342
        }

        .opaque {
          display: block;
          position: absolute;
          top: 2px;
343
          left: 0;
344 345
          height: 10px;
          width: 10px;
346
          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
347 348
        }
      }
349 350
    }
    //.view.onion-skin
351
  }
352

353
  .view-modes {
354 355
    padding: 10px;
    text-align: center;
356
    background: $gray-darker;
357

358 359
    ul,
    li {
360 361 362 363 364 365
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;
    }

366
    li {
367 368
      color: $diff-view-modes-color;
      border-left: 1px solid $diff-view-modes-border;
369 370
      padding: 0 12px 0 16px;
      cursor: pointer;
371

372
      &:first-child {
373
        border-left: 0;
374
      }
375

376
      &:hover {
377 378
        text-decoration: underline;
      }
379

380
      &.active {
381 382 383
        cursor: default;
        color: $gl-text-color;

384
        &:hover {
385 386 387
          text-decoration: none;
        }
      }
388

389
      &.disabled {
390 391 392 393
        display: none;
      }
    }
  }
394 395 396 397

  .line_content {
    white-space: pre-wrap;
  }
398
}
399 400 401

.file-content .diff-file {
  margin: 0;
402
  border: 0;
403
}
404 405 406 407 408

.diff-wrap-lines .line_content {
  white-space: pre-wrap;
}

409 410 411
.inline-parallel-buttons {
  float: right;
}
412

Annabel Dunstone's avatar
Annabel Dunstone committed
413
.files-changed {
414
  border-bottom: 0;
Annabel Dunstone's avatar
Annabel Dunstone committed
415 416
}

417 418 419 420 421
.diff-stats-summary-toggler {
  padding: 0;
  background-color: transparent;
  border: 0;
  color: $gl-link-color;
422
  font-weight: $gl-font-weight-bold;
423 424 425 426 427 428 429 430

  &:hover,
  &:focus {
    outline: none;
    color: $gl-link-hover-color;
  }
}

431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463
// Mobile
@media (max-width: 480px) {
  .diff-title {
    margin: 0;

    .file-mode {
      display: none;
    }
  }

  .diff-controls {
    position: static;
    text-align: center;
  }
}

// Bigger screens
@media (min-width: 481px) {
  .diff-title {
    margin-right: 200px;

    .file-mode {
      margin-left: 10px;
    }
  }

  .diff-controls {
    float: right;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}
464

465 466
@mixin diff_background($background, $idiff, $border) {
  background: $background;
467

468 469
  &.line_content span.idiff {
    background: $idiff;
470 471
  }

472 473
  &.diff-line-num {
    border-color: $border;
474 475
  }
}
476 477

.files {
478
  margin-top: 1px;
479 480 481 482 483

  .diff-file:last-child {
    margin-bottom: 0;
  }
}
484

485 486 487
.file-holder {
  .diff-line-num:not(.js-unfold-bottom) {
    a {
488
      &::before {
489
        content: attr(data-linenumber);
490 491 492 493
      }
    }
  }
}
494 495 496 497 498 499

.diff-comment-avatar-holders {
  position: absolute;
  height: 19px;
  width: 19px;
  margin-left: -15px;
500
  z-index: 100;
501 502 503 504 505 506 507 508 509 510 511 512 513 514 515

  &:hover {
    .diff-comment-avatar,
    .diff-comments-more-count {
      @for $i from 1 through 4 {
        $x-pos: 14px;

        &:nth-child(#{$i}) {
          @if $i == 4 {
            $x-pos: 14.5px;
          }

          transform: translateX((($i * $x-pos) - $x-pos));

          &:hover {
516
            transform: translateX((($i * $x-pos) - $x-pos));
517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557
          }
        }
      }
    }

    .diff-comments-more-count {
      padding-left: 2px;
      padding-right: 2px;
      width: auto;
    }
  }
}

.diff-comment-avatar,
.diff-comments-more-count {
  position: absolute;
  left: 0;
  width: 19px;
  height: 19px;
  margin-right: 0;
  border-color: $white-light;
  cursor: pointer;
  transition: all .1s ease-out;

  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      z-index: (4 - $i);
    }
  }
}

.diff-comments-more-count {
  width: 19px;
  min-width: 19px;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.diff-comments-more-count,
.diff-notes-collapse {
558
  @extend .avatar-counter;
559 560 561
}

.diff-notes-collapse {
Felipe Artur's avatar
Felipe Artur committed
562 563 564
  width: 24px;
  height: 24px;
  border-radius: 50%;
565 566
  padding: 0;
  transition: transform .1s ease-out;
567
  z-index: 100;
568

Felipe Artur's avatar
Felipe Artur committed
569 570 571 572 573
  .collapse-icon {
    height: 50%;
    width: 100%;
  }

574
  svg {
Felipe Artur's avatar
Felipe Artur committed
575
    vertical-align: middle;
576 577
  }

Felipe Artur's avatar
Felipe Artur committed
578
  .collapse-icon,
579 580 581 582 583 584 585 586
  path {
    fill: $white-light;
  }

  &:focus {
    outline: 0;
  }
}
587

588
.diff-files-changed {
589 590 591 592 593
  .inline-parallel-buttons {
    position: relative;
    z-index: 1;
  }

594
  .commit-stat-summary {
595 596 597 598 599
    @media (min-width: $screen-sm-min) {
      margin-left: -$gl-padding;
      padding-left: $gl-padding;
      background-color: $white-light;
    }
600 601 602 603 604
  }

  @media (min-width: $screen-sm-min) {
    position: -webkit-sticky;
    position: sticky;
605
    top: 24px;
606 607 608
    background-color: $white-light;
    z-index: 190;

609
    &.diff-files-changed-merge-request {
610
      top: 76px;
611 612
    }

613
    &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
614 615 616 617 618 619 620
      display: none;
    }

    &.is-stuck {
      padding-top: 0;
      padding-bottom: 0;
      border-bottom: 1px solid $white-dark;
621
      transform: translateY(16px);
622 623 624 625 626 627 628 629 630

      .diff-stats-additions-deletions-expanded,
      .inline-parallel-buttons {
        display: none;
      }
    }
  }
}

631 632 633 634 635 636 637 638
@media (min-width: $screen-sm-min) {
  .with-performance-bar {
    .diff-files-changed.diff-files-changed-merge-request {
      top: 76px + $performance-bar-height;
    }
  }
}

639
.diff-file-changes {
Phil Hughes's avatar
Phil Hughes committed
640
  max-width: 560px;
641
  width: 100%;
642 643
  z-index: 150;

644 645 646 647
  @media (min-width: $screen-sm-min) {
    left: $gl-padding;
  }

648 649
  .diff-changed-file {
    display: flex;
650 651
    padding-top: 8px;
    padding-bottom: 8px;
652
    min-width: 0;
653
  }
654

655 656 657 658 659
  .diff-file-changed-icon {
    margin-top: 2px;
  }

  .diff-changed-file-content {
660
    display: flex;
661 662 663 664
    flex-direction: column;
    min-width: 0;
  }

665 666
  .diff-changed-file-name,
  .diff-changed-blank-file-name {
667 668 669 670 671
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

672 673 674 675 676
  .diff-changed-blank-file-name {
    color: $gl-text-color-tertiary;
    font-style: italic;
  }

677
  .diff-changed-file-path {
Phil Hughes's avatar
Phil Hughes committed
678
    color: $gl-text-color-tertiary;
679 680 681 682 683
  }

  .diff-changed-stats {
    margin-left: auto;
    white-space: nowrap;
684
  }
685 686 687
}

.diff-file-changes-path {
688 689 690 691
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
692
}
Felipe Artur's avatar
Felipe Artur committed
693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747

.note-container {
  background-color: $gray-light;
  border-top: 1px solid $white-normal;

  // double jagged line divider
  .discussion-notes + .discussion-notes::before,
  .discussion-notes + .discussion-form::before {
    content: '';
    position: relative;
    display: block;
    width: 100%;
    height: 10px;
    background-color: $white-light;
    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
    background-position: 5px 5px,0 5px,0 5px,5px 5px;
    background-size: 10px 10px;
    background-repeat: repeat;
  }

  .notes {
    position: relative;
  }

  .diff-notes-collapse {
    position: absolute;
    left: -12px;
  }
}

.diff-file .note-container > .new-note,
.note-container .discussion-notes {
  margin-left: 100px;
  border-left: 1px solid $white-normal;
}

.notes.active {
  .diff-file .note-container > .new-note,
  .note-container .discussion-notes {
    // Override our margin and border (set for diff tab)
    // when user is on the discussion tab for MR
    margin-left: inherit;
    border-left: inherit;
  }
}

.files:not([data-can-create-note]) .frame {
  cursor: auto;
}

.frame.click-to-comment {
  position: relative;
748
  cursor: image-url('illustrations/image_comment_light_cursor.svg')
Felipe Artur's avatar
Felipe Artur committed
749 750 751
    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;

  // Retina cursor
752
  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
Felipe Artur's avatar
Felipe Artur committed
753 754 755 756 757 758
    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;

  .comment-indicator {
    position: absolute;
    padding: 0;
    width: (2px * $image-comment-cursor-left-offset);
759
    height: (2px * $image-comment-cursor-top-offset);
Felipe Artur's avatar
Felipe Artur committed
760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793
    // center the indicator to match the top left click region
    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;

    svg {
      width: 100%;
      height: 100%;
    }

    &:focus {
      outline: none;
    }
  }
}

.frame .badge,
.image-diff-avatar-link .badge,
.notes > .badge {
  position: absolute;
  background-color: $blue-400;
  color: $white-light;
  border: $white-light 1px solid;
  min-height: $gl-padding;
  padding: 5px 8px;
  border-radius: 12px;

  &:focus {
    outline: none;
  }
}

.frame .badge,
.frame .image-comment-badge {
  // Center align badges on the frame
794
  transform: translate(-50%, -50%);
Felipe Artur's avatar
Felipe Artur committed
795 796 797 798
}

.image-comment-badge {
  position: absolute;
799 800 801 802 803
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
Felipe Artur's avatar
Felipe Artur committed
804

805 806 807
  > svg {
    width: 100%;
    height: 100%;
Felipe Artur's avatar
Felipe Artur committed
808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851
  }
}

.image-diff-avatar-link {
  position: relative;

  .badge,
  .image-comment-badge {
    top: 25px;
    right: 8px;
  }
}

.notes > .badge {
  display: none;
  left: -13px;
}

.discussion-notes {
  min-height: 35px;

  &:first-child {
    // First child does not have the jagged borders
    min-height: 25px;
  }

  &.collapsed {
    background-color: $white-light;

    .diff-notes-collapse,
    .note,
    .discussion-reply-holder, {
      display: none;
    }

    .notes > .badge {
      display: block;
    }
  }
}

.discussion-body .image .frame {
  position: relative;
}