merge_requests.scss 14.5 KB
Newer Older
1 2
/**
 * MR -> show: Automerge widget
randx's avatar
randx committed
3 4
 *
 */
5 6 7 8 9 10 11 12 13 14 15 16 17

.space-children {
  @include clearfix;

  > * {
    float: left;
  }

  > *:not(:last-child) {
    margin-right: 10px;
  }
}

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
.mr-widget-border-top {
  border-top: 1px solid $border-color;
}

.media-section {
  @include media-breakpoint-down(md) {
    align-items: flex-start;

    .media-body {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .code-text {
    @include media-breakpoint-up(lg) {
      align-self: center;
      flex: 1;
    }
  }
}

.mr-widget-section {
  .media {
    align-items: center;
  }

  .code-text {
    flex: 1;
  }
}


51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
.mr-widget-heading {
  position: relative;
  border: 1px solid $border-color;
  border-radius: 4px;

  &:not(.deploy-heading)::before {
    content: '';
    border-left: 1px solid $theme-gray-200;
    position: absolute;
    left: 32px;
    top: -17px;
    height: 16px;
  }
}

.mr-section-container {
  border: 1px solid $border-color;
  border-radius: $border-radius-default;
  border-top: 0;
}

.mr-widget-heading,
.mr-widget-section,
.mr-widget-footer {
  padding: $gl-padding;
}

78
.mr-state-widget {
79
  color: $gl-text-color;
80 81 82 83 84 85 86 87 88

  .mr-widget-section,
  .mr-widget-footer {
    border-top: solid 1px $border-color;
  }

  .mr-widget-footer {
    padding: 0;
  }
89

90
  .mr-report {
91 92 93 94 95 96 97
    padding: 0;

    > .media {
      padding: $gl-padding;
    }
  }

98
  form {
99
    margin-bottom: 0;
100

101
    .clearfix {
102
      margin-bottom: 0;
randx's avatar
randx committed
103 104 105
    }
  }

106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
  label {
    margin-bottom: 0;
  }

  .btn {
    font-size: $gl-font-size;

    &[disabled] {
      opacity: 0.3;
    }

    &.dropdown-toggle {
      .fa {
        color: inherit;
      }
    }
  }

124 125 126
  .accept-merge-holder {
    .accept-action {
      display: inline-block;
127
      float: left;
128

129
      .accept-merge-request {
130 131
        &.ci-pending,
        &.ci-running {
132
          @include btn-blue;
133 134 135 136 137 138 139 140 141
        }

        &.ci-skipped,
        &.ci-failed,
        &.ci-canceled,
        &.ci-error {
          @include btn-red;
        }
      }
142 143 144 145
    }

    .accept-control {
      display: inline-block;
146
      float: left;
147
      margin: 0;
148
      margin-left: 20px;
149
      padding: 5px;
150
      padding-top: 8px;
151 152
      line-height: 20px;

153 154
      &.right {
        float: right;
155
        padding-right: 0;
156
      }
157

158
      .modify-merge-commit-link {
159 160 161
        padding: 0;
        background-color: transparent;
        border: 0;
162
        color: $gl-text-color;
163 164 165 166 167

        &:hover,
        &:focus {
          text-decoration: underline;
        }
168 169
      }

170
      .merge-param-checkbox {
171 172
        margin: 0;
      }
173 174 175 176 177 178 179 180 181

      a .fa-question-circle {
        color: $gl-text-color-secondary;

        &:hover,
        &:focus {
          color: $link-hover-color;
        }
      }
182
    }
randx's avatar
randx committed
183
  }
184

Fatih Acet's avatar
Fatih Acet committed
185
  .ci-widget {
186
    color: $gl-text-color;
187
    display: flex;
188 189
    align-items: center;
    justify-content: space-between;
190

Clement Ho's avatar
Clement Ho committed
191
    @include media-breakpoint-down(xs) {
192 193
      flex-wrap: wrap;
    }
194 195 196 197

    .ci-widget-content {
      display: flex;
      align-items: center;
198
      flex: 1;
199
    }
200
  }
201

202 203
  .mr-widget-icon {
    font-size: 22px;
204
    margin-right: $gl-btn-padding;
205
  }
206

207 208 209 210 211
  .ci-status-icon svg {
    margin: 3px 0;
    position: relative;
    overflow: visible;
    display: block;
212 213
  }

214 215
  .mr-widget-pipeline-graph {
    .dropdown-menu {
216
      z-index: 300;
217
    }
218
  }
219

220 221 222
  .mini-pipeline-graph-dropdown-toggle {
    vertical-align: top;
  }
223

224
  .normal {
225
    flex: 1;
226
    flex-basis: auto;
Fatih Acet's avatar
Fatih Acet committed
227 228 229 230
  }

  .capitalize {
    text-transform: capitalize;
231
  }
232

233
  .label-branch {
234 235 236
    @extend .ref-name;

    color: $gl-text-color;
237
    font-weight: normal;
238 239
    overflow: hidden;
    word-break: break-all;
240
  }
241

242 243
  .deploy-link,
  .label-branch {
244 245 246 247 248 249 250 251 252 253 254 255 256
    &.label-truncate {
      // NOTE: This selector targets its children because some of the HTML comes from
      // 'source_branch_link'. Once this external HTML is no longer used, we could
      // simplify this.
      > a,
      > span {
        display: inline-block;
        max-width: 12.5em;
        margin-bottom: -3px;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 14px;
        overflow: hidden;
257 258
      }
    }
259 260
  }

261 262 263 264
  .widget-status-icon {
    align-self: flex-start;
  }

265
  .mr-widget-body {
266 267
    line-height: 28px;

268 269 270 271 272 273 274 275 276
    @include clearfix;

    &.media > *:first-child {
      margin-right: 10px;
    }

    .approve-btn {
      margin-right: 5px;
    }
277

278
    h4 {
279
      float: left;
280
      font-weight: $gl-font-weight-bold;
281 282 283 284
      font-size: 14px;
      line-height: inherit;
      margin-top: 0;
      margin-bottom: 0;
285 286

      &.has-conflicts .fa-exclamation-triangle {
287
        color: $orange-500;
288
      }
Fatih Acet's avatar
Fatih Acet committed
289 290

      time {
291
        font-weight: $gl-font-weight-normal;
Fatih Acet's avatar
Fatih Acet committed
292
      }
293 294
    }

295 296 297 298 299
    .btn-grouped {
      margin-left: 0;
      margin-right: 7px;
    }

Fatih Acet's avatar
Fatih Acet committed
300
    label {
301
      font-weight: $gl-font-weight-normal;
Fatih Acet's avatar
Fatih Acet committed
302 303 304
    }

    .spacing {
305
      margin: 0 0 0 10px;
Fatih Acet's avatar
Fatih Acet committed
306 307 308
    }

    .bold {
309
      font-weight: $gl-font-weight-bold;
Fatih Acet's avatar
Fatih Acet committed
310 311 312 313
      color: $gl-gray-light;
    }

    .state-label {
314
      font-weight: $gl-font-weight-bold;
Fatih Acet's avatar
Fatih Acet committed
315 316 317 318
      padding-right: 10px;
    }

    .danger {
319
      color: $red-500;
Fatih Acet's avatar
Fatih Acet committed
320 321
    }

322 323 324 325 326
    .spacing,
    .bold {
      vertical-align: middle;
    }

Fatih Acet's avatar
Fatih Acet committed
327 328 329 330 331
    .dropdown-menu {
      li a {
        padding: 5px;
      }

332 333
      .merge-opt-icon {
        line-height: 1.5;
Fatih Acet's avatar
Fatih Acet committed
334 335 336 337 338 339 340 341 342
      }

      .merge-opt-title {
        margin-left: 8px;
      }
    }

    .dropdown-toggle {
      .fa {
343
        margin-left: 0;
Fatih Acet's avatar
Fatih Acet committed
344 345 346 347 348 349 350 351
        color: inherit;
      }
    }

    .has-custom-error {
      display: inline-block;
    }

Clement Ho's avatar
Clement Ho committed
352
    @include media-breakpoint-down(xs) {
353 354 355 356
      p {
        font-size: 13px;
      }

357 358 359 360 361
      .btn-grouped {
        float: none;
        margin-right: 0;
      }

362 363 364 365 366
      .accept-action {
        width: 100%;
        text-align: center;
      }

367 368 369 370 371 372
      .accept-control {
        width: 100%;
        text-align: center;
        margin: 0;
      }
    }
Fatih Acet's avatar
Fatih Acet committed
373 374 375 376 377 378 379

    .commit-message-editor {
      label {
        padding: 0;
      }
    }

380 381
    &.mr-widget-empty-state {
      line-height: 20px;
382 383 384 385

      .artwork {
        margin-bottom: $gl-padding;
      }
386

387 388
      .text {
        span {
389
          font-weight: $gl-font-weight-bold;
390
        }
391

392 393 394 395 396
        p {
          margin-top: $gl-padding;
        }
      }
    }
397 398
  }

399 400 401 402 403
  .mr-widget-help {
    padding: 10px 16px 10px 48px;
    font-style: italic;
  }

404 405 406
  .ci-coverage {
    float: right;
  }
407

408
  .stop-env-container {
409 410
    color: $gl-text-color;
    float: right;
411

412 413 414 415
    a {
      color: $gl-text-color;
    }
  }
randx's avatar
randx committed
416
}
417

418 419 420 421
.mr-widget-body-controls {
  flex-wrap: wrap;
}

422 423
.mr_source_commit,
.mr_target_commit {
424 425
  margin-bottom: 0;

426
  .commit {
427
    margin: 0;
428
    padding: 10px;
429
    list-style: none;
430

431
    &:hover {
432
      background: none;
433 434 435 436
    }
  }
}

437 438 439 440 441 442 443
.commits-empty {
  text-align: center;

  h4 {
    padding-top: 20px;
    padding-bottom: 10px;
  }
444

445 446 447 448 449
  svg {
    width: 230px;
  }
}

450 451 452 453 454 455
.nothing-here-block {
  img {
    width: 230px;
  }
}

456 457
.mr-list {
  .merge-request {
Nur Rony's avatar
Nur Rony committed
458
    padding: 10px  0 10px 15px;
459
    position: relative;
460 461
    display: -webkit-flex;
    display: flex;
462

Nur Rony's avatar
Nur Rony committed
463
    .issue-info-container {
464 465
      -webkit-flex: 1;
      flex: 1;
Nur Rony's avatar
Nur Rony committed
466
    }
467 468

    .merge-request-title {
469
      margin-bottom: 2px;
470 471 472 473 474 475 476 477 478

      .ci-status-link {

        svg {
          height: 16px;
          width: 16px;
          position: relative;
          top: 3px;
        }
479 480 481 482 483

        &:hover,
        &:focus {
          text-decoration: none;
        }
484
      }
485
    }
Stefan Tatschner's avatar
Stefan Tatschner committed
486 487 488 489 490
  }

  .merge-request-labels {
    display: inline-block;
  }
491
}
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
492 493 494

.merge-request-angle {
  text-align: center;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
495
  margin: 0 auto;
496 497
  font-size: 2em;
  line-height: 1.1;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
498 499
}

500
// hide mr close link for inline diff comment form
501 502 503
.diff-file .close-mr-link,
.diff-file .reopen-mr-link {
  display: none;
504
}
505

Douwe Maan's avatar
Douwe Maan committed
506
#modal_merge_info .modal-dialog {
507 508 509 510
  .dark {
    margin-right: 40px;
  }

511
  .btn-clipboard {
512
    margin-right: 20px;
513 514 515 516
    margin-top: 5px;
    position: absolute;
    right: 0;
  }
Douwe Maan's avatar
Douwe Maan committed
517
}
518

519
.mr-links {
520
  padding-left: $status-icon-size + $gl-btn-padding;
521 522
}

Fatih Acet's avatar
Fatih Acet committed
523
.mr-info-list {
524
  clear: left;
Fatih Acet's avatar
Fatih Acet committed
525
  position: relative;
526
  padding-top: 4px;
527

Fatih Acet's avatar
Fatih Acet committed
528
  p {
529
    margin: 0;
530
    position: relative;
531
    padding: 4px 0;
Fatih Acet's avatar
Fatih Acet committed
532 533

    &:last-child {
534
      padding-bottom: 0;
535
    }
536
  }
Fatih Acet's avatar
Fatih Acet committed
537

538 539 540 541
  &.mr-memory-usage {
    p {
      float: left;
    }
542

543 544 545 546
    .memory-graph-container {
      float: left;
      margin-left: 5px;
    }
547 548 549
  }
}

550
.mr-source-target {
551 552
  display: flex;
  flex-wrap: wrap;
553 554 555 556 557 558 559 560
  border-radius: $border-radius-default;
  padding: $gl-padding;
  border: 1px solid $border-color;
  min-height: 69px;

  @include media-breakpoint-up(md) {
    align-items: center;
  }
Fatih Acet's avatar
Fatih Acet committed
561 562 563 564

  .dropdown-toggle .fa {
    color: $gl-text-color;
  }
565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587

  .git-merge-icon-container {
    border: 1px solid $theme-gray-400;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    color: $theme-gray-700;
    line-height: 28px;

    .ic-git-merge {
      vertical-align: middle;
      width: 31px;
    }
  }

  .git-merge-container {
    justify-content: space-between;
    flex: 1;
    flex-direction: row;
    align-items: center;

    @include media-breakpoint-down(md) {
      flex-direction: column;
588
      align-items: stretch;
589 590 591 592 593 594 595 596 597

      .branch-actions {
        margin-top: 16px;
      }
    }

    @include media-breakpoint-up(lg) {
      .branch-actions {
        align-self: center;
598
        margin-left: $gl-padding;
599
        white-space: nowrap;
600 601 602 603 604 605 606
      }
    }
  }

  .diverged-commits-count {
    color: $gl-text-color-secondary;
  }
607
}
608

Clement Ho's avatar
Clement Ho committed
609
.card-new-merge-request {
610
  .card-header {
611
    padding: 5px 10px;
612
    font-weight: $gl-font-weight-bold;
613 614 615
    line-height: 25px;
  }

Clement Ho's avatar
Clement Ho committed
616
  .card-body {
617 618 619
    padding: 10px 5px;
  }

Clement Ho's avatar
Clement Ho committed
620
  .card-footer {
621
    padding: 0;
622 623 624 625

    .btn {
      min-width: auto;
    }
626 627 628 629 630 631 632
  }

  .commit {
    .commit-row-title {
      margin-bottom: 4px;
    }

633
    .item-title {
Clement Ho's avatar
Clement Ho committed
634
      @include media-breakpoint-up(sm) {
635
        width: 45%;
636 637 638
      }
    }

639
    .avatar {
640 641
      left: 0;
      top: 2px;
642 643 644 645 646 647 648 649
    }
  }

  .btn-clipboard {
    margin-right: 5px;
    padding: 0;
    background: transparent;
  }
Phil Hughes's avatar
Phil Hughes committed
650 651 652 653

  .ci-status-link {
    margin-right: 5px;
  }
654 655 656 657 658
}

.merge-request-select {
  padding-left: 5px;
  padding-right: 5px;
Phil Hughes's avatar
Phil Hughes committed
659 660 661 662 663 664
  margin-bottom: 10px;

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

Clement Ho's avatar
Clement Ho committed
665
  @include media-breakpoint-up(xs) {
Phil Hughes's avatar
Phil Hughes committed
666 667 668 669
    float: left;
    width: 50%;
    margin-bottom: 0;
  }
670 671 672 673 674 675 676 677 678 679

  .dropdown-menu-toggle {
    width: 100%;
  }

  .dropdown-menu {
    left: 5px;
    right: 5px;
    width: auto;
  }
680
}
Phil Hughes's avatar
Phil Hughes committed
681

Phil Hughes's avatar
Phil Hughes committed
682 683 684
.issuable-form-select-holder {
  display: inline-block;
  width: 250px;
685 686 687 688

  .dropdown-menu-toggle {
    width: 100%;
  }
Phil Hughes's avatar
Phil Hughes committed
689
}
Annabel Dunstone's avatar
Annabel Dunstone committed
690

691 692 693 694
.target-branch-select-dropdown-container {
  position: relative;
}

695 696 697 698 699
.assign-to-me-link {
  padding-left: 12px;
  white-space: nowrap;
}

Annabel Dunstone's avatar
Annabel Dunstone committed
700
.table-holder {
701
  .ci-table {
Annabel Dunstone's avatar
Annabel Dunstone committed
702 703 704

    th {
      background-color: $white-light;
705
      color: $gl-text-color-secondary;
Annabel Dunstone's avatar
Annabel Dunstone committed
706 707 708
    }
  }
}
709 710 711 712 713 714

.merged-buttons {
  .btn {
    float: left;
  }
}
715

716
.mr-version-controls {
717
  position: relative;
718
  background: $gray-light;
tauriedavis's avatar
tauriedavis committed
719 720 721 722 723 724
  color: $gl-text-color;

  .mr-version-menus-container {
    display: flex;
    align-items: center;
    padding: 16px;
Felipe Artur's avatar
Felipe Artur committed
725
    z-index: 199;
tauriedavis's avatar
tauriedavis committed
726 727
  }

728 729 730 731
  .content-block {
    padding: $gl-padding-top $gl-padding;
  }

tauriedavis's avatar
tauriedavis committed
732
  .comments-disabled-notif {
733 734
    line-height: 28px;

tauriedavis's avatar
tauriedavis committed
735 736 737 738
    .btn {
      margin-left: 5px;
    }
  }
739

740 741
  .mr-version-dropdown,
  .mr-version-compare-dropdown {
tauriedavis's avatar
tauriedavis committed
742
    margin: 0 7px;
743 744 745 746 747
  }

  .dropdown-title {
    color: $gl-text-color;
  }
748

749
  .fa-info-circle {
750
    color: $orange-500;
tauriedavis's avatar
tauriedavis committed
751
    padding-right: 5px;
752
  }
753
}
754

755
.merge-request-tabs-holder {
756
  top: $header-height;
757
  z-index: 200;
758
  background-color: $white-light;
759
  border-bottom: 1px solid $border-color;
760

Clement Ho's avatar
Clement Ho committed
761
  @include media-breakpoint-up(sm) {
762 763 764 765
    position: sticky;
    position: -webkit-sticky;
  }

766
  &.affix {
767 768
    left: 0;
    transition: right .15s;
769

Clement Ho's avatar
Clement Ho committed
770
    @include media-breakpoint-down(xs) {
771 772
      right: 0;
    }
773 774 775 776 777

    .merge-request-tabs-container {
      padding-left: $gl-padding;
      padding-right: $gl-padding;
    }
778
  }
779 780 781 782 783 784

  .nav-links {
    border: 0;
  }
}

785
.with-performance-bar .merge-request-tabs-holder {
786
  top: $header-height + $performance-bar-height;
787 788
}

789 790
.merge-request-tabs {
  display: flex;
791
  flex-wrap: nowrap;
792 793
  margin-bottom: 0;
  padding: 0;
794
}
795

796 797 798 799 800
.limit-container-width {
  .merge-request-tabs-container {
    max-width: $limited-layout-width;
    margin-left: auto;
    margin-right: auto;
801 802 803 804 805 806

    .inner-page-scroll-tabs {
      background-color: $white-light;
      margin-left: -$gl-padding;
      padding-left: $gl-padding;
    }
807 808 809
  }
}

810 811 812 813
.merge-request-tabs-container {
  display: flex;
  justify-content: space-between;

Clement Ho's avatar
Clement Ho committed
814
  @include media-breakpoint-down(xs) {
815 816 817 818
    flex-direction: column-reverse;
  }
}

819 820 821 822 823
.limit-container-width:not(.container-limited) {
  .merge-request-tabs-holder:not(.affix) {
    .merge-request-tabs-container {
      max-width: $limited-layout-width - ($gl-padding * 2);
    }
824 825
  }
}
Fatih Acet's avatar
Fatih Acet committed
826 827

.mr-memory-usage {
Phil Hughes's avatar
Phil Hughes committed
828 829
  width: 100%;

830 831 832
  p.usage-info-loading .usage-info-load-spinner {
    margin-right: 10px;
    font-size: 16px;
Fatih Acet's avatar
Fatih Acet committed
833 834
  }
}
835 836 837 838

.fork-sprite {
  margin-right: -5px;
}
839

840
.deploy-heading {
841 842 843 844 845 846 847 848 849
  margin-top: -19px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: $gray-light;

  @include media-breakpoint-up(md) {
    padding: $gl-padding-8 $gl-padding;
  }

850 851
  .media-body {
    min-width: 0;
852 853
    font-size: 12px;
    margin-left: 48px;
854 855 856
  }
}

857 858
.deploy-body {
  display: flex;
859
  align-items: center;
860 861
  flex-wrap: wrap;

Clement Ho's avatar
Clement Ho committed
862
  @include media-breakpoint-up(xs) {
863 864 865 866
    flex-wrap: nowrap;
    white-space: nowrap;
  }

867 868 869 870 871 872 873 874 875
  @include media-breakpoint-down(md) {
    flex-direction: column;
    align-items: flex-start;

    .deployment-info {
      margin-bottom: $gl-padding;
    }
  }

876 877 878
  > *:not(:last-child) {
    margin-right: .3em;
  }
879 880 881 882

  svg {
    vertical-align: text-top;
  }
883

884 885 886 887 888 889
  .deployment-info {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100px;
890

891 892 893 894 895 896 897 898
    @include media-breakpoint-up(xs) {
      min-width: 0;
      max-width: 100%;
    }
  }

  .btn svg {
    fill: $theme-gray-700;
899
  }
900
}
901 902 903

// Hack alert: we've rewritten `btn` class in a way that
// we've broken it and it is not possible to use with `btn-link`
Filipa Lacerda's avatar
Filipa Lacerda committed
904
// which causes a blank button when it's disabled and hovering
905 906 907 908 909 910 911 912
// The css in here is the boostrap one
.btn-link-retry {
  &[disabled] {
    cursor: not-allowed;
    box-shadow: none;
    opacity: .65;

    &:hover {
Filipa Lacerda's avatar
Filipa Lacerda committed
913
      color: $file-mode-changed;
914 915 916
      text-decoration: none;
    }
  }
917
}
918 919 920 921 922 923

.ci-widget-container {
  justify-content: space-between;
  flex: 1;
  flex-direction: row;

924
  @include media-breakpoint-down(sm) {
925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947
    flex-direction: column;

    .stage-cell .stage-container {
      margin-top: 16px;
    }

    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
      transform: initial;
    }
  }

  .coverage {
    font-size: 12px;
    color: $theme-gray-700;
    line-height: initial;
  }

  .mini-pipeline-graph-dropdown-toggle,
  .stage-cell .mini-pipeline-graph-dropdown-toggle svg {
    height: $ci-action-icon-size-lg;
    width: $ci-action-icon-size-lg;
  }
}