pipelines.scss 16.8 KB
Newer Older
Regis's avatar
Regis committed
1 2 3 4 5 6 7 8 9 10
.pipelines {
  .stage {
    max-width: 90px;
    width: 90px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

11 12 13 14 15 16 17 18
  .table-holder {
    width: 100%;

    @media (max-width: $screen-sm-max) {
      overflow: auto;
    }
  }

19 20
  .commit-title {
    margin: 0;
Regis's avatar
Regis committed
21 22 23 24
  }

  .table.ci-table {

25 26 27 28
    .label {
      margin-bottom: 3px;
    }

Regis's avatar
Regis committed
29 30
    .pipeline-id {
      color: $black;
31
    }
32

33
    .stage-cell {
34
      min-width: 130px; // Guarantees we show at least 4 stages in line
Regis's avatar
Regis committed
35
      width: 20%;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
36
    }
37 38 39 40 41 42 43 44 45 46 47 48 49 50 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 78 79 80 81 82 83 84 85 86 87 88 89 90

    .pipelines-time-ago {
      text-align: right;
    }

    .pipeline-actions {
      padding-right: 0;
      min-width: 170px; //Guarantees buttons don't break in several lines.

      .btn-default {
        color: $gl-text-color-secondary;
      }

      .btn.btn-retry:hover,
      .btn.btn-retry:focus {
        border-color: $gray-darkest;
        background-color: $white-normal;
      }

      svg path {
        fill: $gl-text-color-secondary;
      }

      .dropdown-menu {
        max-height: 250px;
        overflow-y: auto;
      }

      .dropdown-toggle,
      .dropdown-menu {
        color: $gl-text-color-secondary;

        .fa {
          color: $gl-text-color-secondary;
          font-size: 14px;
        }
      }

      .btn-group {
        &.open {
          .btn-default {
            background-color: $white-normal;
            border-color: $border-white-normal;
          }
        }

        .btn {
          .icon-play {
            height: 13px;
            width: 12px;
          }
        }
      }

91 92 93 94
      .btn .text-center {
        display: inline;
      }

95 96 97 98
      .tooltip {
        white-space: nowrap;
      }
    }
Regis's avatar
Regis committed
99 100
  }
}
101

Regis's avatar
Regis committed
102 103 104 105 106
@media (max-width: $screen-md-max) {
  .content-list {
    &.builds-content-list {
      width: 100%;
      overflow: auto;
107
    }
Regis's avatar
Regis committed
108 109
  }
}
110

Regis's avatar
Regis committed
111
.table.ci-table {
112

113
  &.builds-page tbody tr {
114
    height: 71px;
115 116
  }

Regis's avatar
Regis committed
117 118 119 120 121 122 123 124 125 126
  tr {
    th {
      padding: 16px 8px;
      border: none;
    }

    td {
      padding: 10px 8px;
    }

127 128 129 130
    td.environments-actions {
      padding-right: 0;
    }

131 132 133 134
    td.stage-cell {
      padding: 10px 0;
    }

Regis's avatar
Regis committed
135
    .commit-link {
Filipa Lacerda's avatar
Filipa Lacerda committed
136
      padding: 9px 8px 10px 2px;
Regis's avatar
Regis committed
137
    }
138 139
  }

Regis's avatar
Regis committed
140 141
  tbody {
    border-top-width: 1px;
142 143
  }

Regis's avatar
Regis committed
144 145 146
  .build.retried {
    background-color: $gray-lightest;
  }
147

Regis's avatar
Regis committed
148 149 150 151 152
  .commit-link {
    a {
      &:focus {
        text-decoration: none;
      }
153 154
    }

Regis's avatar
Regis committed
155 156
    a:hover {
      text-decoration: none;
157
    }
Regis's avatar
Regis committed
158
  }
159

Regis's avatar
Regis committed
160 161 162 163
  .avatar {
    margin-left: 0;
    float: none;
  }
164

165 166 167 168
  .api {
    @extend .monospace;
  }

Regis's avatar
Regis committed
169
  .branch-commit {
170

171
    .ref-name {
Regis's avatar
Regis committed
172 173 174 175 176 177 178
      font-weight: bold;
      max-width: 120px;
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      vertical-align: top;
      text-overflow: ellipsis;
179 180
    }

Regis's avatar
Regis committed
181 182 183 184
    svg {
      height: 14px;
      width: 14px;
      vertical-align: middle;
185
      fill: $gl-text-color-secondary;
186 187
    }

Regis's avatar
Regis committed
188 189 190
    .fa {
      font-size: 12px;
      color: $gl-text-color;
191 192
    }

193
    .commit-sha {
Regis's avatar
Regis committed
194 195
      color: $gl-link-color;
    }
196

Regis's avatar
Regis committed
197 198 199 200 201
    .commit-title {
      max-width: 225px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
Annabel Dunstone's avatar
Annabel Dunstone committed
202
    }
203

Regis's avatar
Regis committed
204 205
    .label {
      margin-right: 4px;
206
    }
207

Regis's avatar
Regis committed
208 209
    .label-container {
      font-size: 0;
210

Regis's avatar
Regis committed
211 212
      .label {
        margin-top: 5px;
Regis's avatar
Regis committed
213
      }
Regis's avatar
Regis committed
214 215
    }
  }
216

Regis's avatar
Regis committed
217 218 219
  .icon-container {
    display: inline-block;
    width: 10px;
Regis's avatar
Regis committed
220

Regis's avatar
Regis committed
221 222 223 224 225
    &.commit-icon {
      width: 15px;
      text-align: center;
    }
  }
Regis's avatar
Regis committed
226

Regis's avatar
Regis committed
227 228
  .duration,
  .finished-at {
229
    color: $gl-text-color-secondary;
230
    margin: 0;
231
    white-space: nowrap;
232

Regis's avatar
Regis committed
233 234 235
    .fa {
      font-size: 12px;
      margin-right: 4px;
236 237
    }

Regis's avatar
Regis committed
238 239 240 241 242 243 244
    svg {
      width: 12px;
      height: 12px;
      vertical-align: middle;
      margin-right: 4px;
    }
  }
245

246 247
  .build-link a {
    color: $gl-text-color;
Regis's avatar
Regis committed
248
  }
249

Regis's avatar
Regis committed
250 251 252 253
  .btn-group.open .dropdown-toggle {
    box-shadow: none;
  }
}
254

255 256
.stage-cell {
  font-size: 0;
257
  padding: 0 4px;
258 259 260 261 262 263 264 265 266 267 268 269 270 271 272

  > .stage-container > div > button > span > svg,
  > .stage-container > button > svg {
    height: 22px;
    width: 22px;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 2;
    overflow: visible;
  }

  .stage-container {
    display: inline-block;
    position: relative;
273
    vertical-align: middle;
274 275 276
    height: 22px;
    margin: 3px 6px 3px 0;

277 278 279
    // Hack to show a button tooltip inline
    button.has-tooltip + .tooltip {
      min-width: 105px;
280 281
    }

282 283 284
    // Bootstrap way of showing the content inline for anchors.
    a.has-tooltip {
      white-space: nowrap;
285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
    }

    &:not(:last-child) {
      &::after {
        content: '';
        width: 7px;
        position: absolute;
        right: -7px;
        top: 10px;
        border-bottom: 2px solid $border-color;
      }
    }
  }
}

Regis's avatar
Regis committed
300 301 302 303 304
.admin-builds-table {
  .ci-table td:last-child {
    min-width: 120px;
  }
}
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
305

Regis's avatar
Regis committed
306 307 308 309
// Pipeline visualization
.pipeline-actions {
  border-bottom: none;
}
310

Regis's avatar
Regis committed
311
.tab-pane {
312 313
  &.builds .ci-table tr {
    height: 71px;
314
  }
Regis's avatar
Regis committed
315
}
316

317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342
.build-failures {
  .build-state {
    padding: 20px 2px;

    .build-name {
      float: right;
      font-weight: 500;
    }

    .ci-status-icon-failed svg {
      vertical-align: middle;
    }

    .stage {
      color: $gl-text-color-secondary;
      font-weight: 500;
      vertical-align: middle;
    }
  }

  .build-log {
    border: none;
    line-height: initial;
  }
}

Regis's avatar
Regis committed
343 344 345 346 347 348 349
// Pipeline graph
.pipeline-graph {
  width: 100%;
  background-color: $gray-light;
  padding: $gl-padding;
  white-space: nowrap;
  transition: max-height 0.3s, padding 0.3s;
350
  overflow: auto;
Regis's avatar
Regis committed
351

352 353
  .stage-column-list,
  .builds-container > ul {
Regis's avatar
Regis committed
354
    padding: 0;
355
  }
356

Regis's avatar
Regis committed
357 358
  a {
    text-decoration: none;
359
    color: $gl-text-color-secondary;
Regis's avatar
Regis committed
360
  }
361

Regis's avatar
Regis committed
362 363 364 365
  svg {
    vertical-align: middle;
    margin-right: 3px;
  }
366

Regis's avatar
Regis committed
367 368 369
  .stage-column {
    display: inline-block;
    vertical-align: top;
370

Regis's avatar
Regis committed
371 372
    &:not(:last-child) {
      margin-right: 44px;
Regis's avatar
Regis committed
373
    }
374

Regis's avatar
Regis committed
375 376 377 378 379 380 381 382 383
    &.left-margin {
      &:not(:first-child) {
        margin-left: 44px;

        .left-connector {
          &::before {
            content: '';
            position: absolute;
            top: 48%;
384
            left: -44px;
Regis's avatar
Regis committed
385
            border-top: 2px solid $border-color;
386
            width: 44px;
Regis's avatar
Regis committed
387 388
            height: 1px;
          }
389 390
        }
      }
391
    }
Luke Bennett's avatar
Luke Bennett committed
392

Regis's avatar
Regis committed
393 394
    &.no-margin {
      margin: 0;
395 396
    }

Regis's avatar
Regis committed
397 398
    li {
      list-style: none;
Regis's avatar
Regis committed
399 400
    }

Regis's avatar
Regis committed
401 402 403 404 405 406
    &:last-child {
      .build {
        // Remove right connecting horizontal line from first build in last stage
        &:first-child {
          &::after {
            border: none;
407 408
          }
        }
Regis's avatar
Regis committed
409 410 411 412
        // Remove right curved connectors from all builds in last stage
        &:not(:first-child) {
          &::after {
            border: none;
Regis's avatar
Regis committed
413
          }
Regis's avatar
Regis committed
414 415 416 417 418
        }
        // Remove opposite curve
        .curve {
          &::before {
            display: none;
419 420 421
          }
        }
      }
Regis's avatar
Regis committed
422
    }
Luke Bennett's avatar
Luke Bennett committed
423

Regis's avatar
Regis committed
424 425 426 427 428 429
    &:first-child {
      .build {
        // Remove left curved connectors from all builds in first stage
        &:not(:first-child) {
          &::before {
            border: none;
430
          }
Regis's avatar
Regis committed
431 432 433 434 435
        }
        // Remove opposite curve
        .curve {
          &::after {
            display: none;
436 437 438
          }
        }
      }
Regis's avatar
Regis committed
439
    }
440

Regis's avatar
Regis committed
441 442 443
    // Curve first child connecting lines in opposite direction
    .curve {
      display: none;
444

Regis's avatar
Regis committed
445 446 447 448 449 450 451 452 453
      &::before,
      &::after {
        content: '';
        width: 21px;
        height: 25px;
        position: absolute;
        top: -31px;
        border-top: 2px solid $border-color;
      }
454

Regis's avatar
Regis committed
455 456 457 458
      &::after {
        left: -44px;
        border-right: 2px solid $border-color;
        border-radius: 0 20px;
459
      }
460

Regis's avatar
Regis committed
461 462 463 464 465
      &::before {
        right: -44px;
        border-left: 2px solid $border-color;
        border-radius: 20px 0 0;
      }
Regis's avatar
Regis committed
466
    }
Regis's avatar
Regis committed
467
  }
468

Regis's avatar
Regis committed
469 470 471 472 473 474 475 476
  .stage-name {
    margin: 0 0 15px 10px;
    font-weight: bold;
    width: 176px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
477

Regis's avatar
Regis committed
478 479 480 481 482
  .build {
    position: relative;
    width: 186px;
    margin-bottom: 10px;
    white-space: normal;
483
    color: $gl-text-color-secondary;
484

485
    // Action Icons in big pipeline-graph nodes
486
    .ci-action-icon-container .ci-action-icon-wrapper {
487 488 489 490 491 492
      height: 30px;
      width: 30px;
      background: $white-light;
      border: 1px solid $border-color;
      border-radius: 100%;
      display: block;
493

494 495 496 497 498 499 500 501 502 503
      &:hover {
        background-color: $stage-hover-bg;
        border: 1px solid $stage-hover-bg;
      }

      svg {
        fill: $border-color;
        position: relative;
        left: -1px;
        top: -1px;
504 505
      }

506 507
      &:hover svg {
        fill: $gl-text-color;
508 509 510
      }
    }

511
    .ci-action-icon-container {
512 513 514 515 516 517 518 519 520
      position: absolute;
      right: 5px;
      top: 5px;
    }

    .ci-status-icon svg {
      height: 20px;
      width: 20px;
    }
521

Regis's avatar
Regis committed
522 523 524 525
    .dropdown-menu-toggle {
      background-color: transparent;
      border: none;
      padding: 0;
526
      color: $gl-text-color-secondary;
Regis's avatar
Regis committed
527

Regis's avatar
Regis committed
528 529
      &:focus {
        outline: none;
530
      }
531

Regis's avatar
Regis committed
532 533
      &:hover {
        color: $gl-text-color;
534

Regis's avatar
Regis committed
535
        .dropdown-counter-badge {
Regis's avatar
Regis committed
536 537
          color: $gl-text-color;
        }
538
      }
Regis's avatar
Regis committed
539
    }
540

541
    .build-content {
Regis's avatar
Regis committed
542 543 544 545 546 547
      display: inline-block;
      padding: 8px 10px 9px;
      width: 100%;
      border: 1px solid $border-color;
      border-radius: 30px;
      background-color: $white-light;
548

Regis's avatar
Regis committed
549 550 551 552
      &:hover {
        background-color: $stage-hover-bg;
        border: 1px solid $stage-hover-border;
        color: $gl-text-color;
553
      }
Regis's avatar
Regis committed
554
    }
555

Regis's avatar
Regis committed
556

Regis's avatar
Regis committed
557 558 559 560 561 562 563 564 565 566 567 568
    // Connect first build in each stage with right horizontal line
    &:first-child {
      &::after {
        content: '';
        position: absolute;
        top: 48%;
        right: -48px;
        border-top: 2px solid $border-color;
        width: 48px;
        height: 1px;
      }
    }
Regis's avatar
Regis committed
569

Regis's avatar
Regis committed
570 571 572 573 574 575 576 577 578 579
    // Connect each build (except for first) with curved lines
    &:not(:first-child) {
      &::after,
      &::before {
        content: '';
        top: -49px;
        position: absolute;
        border-bottom: 2px solid $border-color;
        width: 25px;
        height: 69px;
580 581
      }

Regis's avatar
Regis committed
582 583 584 585 586 587
      // Right connecting curves
      &::after {
        right: -25px;
        border-right: 2px solid $border-color;
        border-radius: 0 0 20px;
      }
Regis's avatar
Regis committed
588

Regis's avatar
Regis committed
589 590 591 592 593
      // Left connecting curves
      &::before {
        left: -25px;
        border-left: 2px solid $border-color;
        border-radius: 0 0 0 20px;
594 595 596
      }
    }

Regis's avatar
Regis committed
597 598 599 600 601 602 603
    // Connect second build to first build with smaller curved line
    &:nth-child(2) {
      &::after,
      &::before {
        height: 29px;
        top: -9px;
      }
Regis's avatar
Regis committed
604

Regis's avatar
Regis committed
605 606
      .curve {
        display: block;
607 608 609
      }
    }
  }
Regis's avatar
Regis committed
610 611
}

612
// Triggers the dropdown in the big pipeline graph
Regis's avatar
Regis committed
613 614 615 616 617
.dropdown-counter-badge {
  color: $border-color;
  font-weight: 100;
  font-size: 15px;
  position: absolute;
618
  right: 13px;
Regis's avatar
Regis committed
619 620 621 622 623 624 625 626 627 628 629
  top: 8px;
}

.ci-status-text {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  display: inline-block;
  position: relative;
630
  font-weight: normal;
Regis's avatar
Regis committed
631 632
}

633 634 635 636 637 638 639 640 641 642 643 644
// Dropdown button in mini pipeline graph
.mini-pipeline-graph-dropdown-toggle {
  border-radius: 100px;
  background-color: $white-light;
  border-width: 1px;
  border-style: solid;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  transition: all 0.2s linear;
  position: relative;
Regis's avatar
Regis committed
645

646 647 648 649 650 651 652 653 654 655
  > .fa.fa-caret-down {
    position: absolute;
    left: 20px;
    top: 5px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    color: inherit;
    font-size: 12px;
    transition: visibility 0.1s, opacity 0.1s linear;
Filipa Lacerda's avatar
Filipa Lacerda committed
656
  }
657

658 659 660 661 662
  &:active,
  &:focus,
  &:hover {
    outline: none;
    width: 35px;
Filipa Lacerda's avatar
Filipa Lacerda committed
663

664 665 666
    .fa.fa-caret-down {
      visibility: visible;
      opacity: 1;
Regis's avatar
Regis committed
667
    }
Regis's avatar
Regis committed
668
  }
Filipa Lacerda's avatar
Filipa Lacerda committed
669

670 671
  // Dropdown button animation in mini pipeline graph
  &.ci-status-icon-success {
672 673
    border-color: $green-500;
    color: $green-500;
Filipa Lacerda's avatar
Filipa Lacerda committed
674

675 676 677
    &:hover,
    &:focus,
    &:active {
678 679 680 681 682 683 684
      background-color: $green-50;
      border-color: $green-600;
      color: $green-600;

      svg {
        fill: $green-600;
      }
Filipa Lacerda's avatar
Filipa Lacerda committed
685
    }
dimitrieh's avatar
dimitrieh committed
686 687
  }

688
  &.ci-status-icon-failed {
689 690
    border-color: $red-500;
    color: $red-500;
Filipa Lacerda's avatar
Filipa Lacerda committed
691

692 693 694
    &:hover,
    &:focus,
    &:active {
695 696 697 698 699 700 701
      background-color: $red-50;
      border-color: $red-600;
      color: $red-600;

      svg {
        fill: $red-600;
      }
702
    }
Regis's avatar
Regis committed
703
  }
Filipa Lacerda's avatar
Filipa Lacerda committed
704

705 706
  &.ci-status-icon-pending,
  &.ci-status-icon-success_with_warnings {
707 708
    border-color: $orange-500;
    color: $orange-500;
Filipa Lacerda's avatar
Filipa Lacerda committed
709

710 711 712
    &:hover,
    &:focus,
    &:active {
713 714 715 716 717 718 719
      background-color: $orange-50;
      border-color: $orange-600;
      color: $orange-600;

      svg {
        fill: $orange-600;
      }
Regis's avatar
Regis committed
720 721
    }
  }
722

723
  &.ci-status-icon-running {
724 725
    border-color: $blue-400;
    color: $blue-400;
Filipa Lacerda's avatar
Filipa Lacerda committed
726

727
    &:hover,
728
    &:focus,
729
    &:active {
730 731 732 733 734 735 736
      background-color: $blue-50;
      border-color: $blue-600;
      color: $blue-600;

      svg {
        fill: $blue-600;
      }
Regis's avatar
Regis committed
737 738
    }
  }
739

740 741 742 743 744 745
  &.ci-status-icon-canceled,
  &.ci-status-icon-disabled,
  &.ci-status-icon-not-found,
  &.ci-status-icon-manual {
    border-color: $gl-text-color;
    color: $gl-text-color;
746

747
    &:hover,
748 749
    &:focus,
    &:active {
750 751 752
      background-color: rgba($gl-text-color, 0.1);
      border-color: $gl-text-color;
    }
Regis's avatar
Regis committed
753
  }
754

755 756 757 758
  &.ci-status-icon-created,
  &.ci-status-icon-skipped {
    border-color: $gray-darkest;
    color: $gray-darkest;
759

760 761 762 763 764
    &:hover,
    &:focus,
    &:active {
      background-color: rgba($gray-darkest, 0.1);
      border-color: $gray-darkest;
765
    }
Regis's avatar
Regis committed
766 767 768
  }
}

769 770 771 772 773
// dropdown content for big and mini pipeline
.big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu {
  width: 195px;
  max-width: 195px;
774

775 776
  li {
    padding: 2px 3px;
Filipa Lacerda's avatar
Filipa Lacerda committed
777
  }
Regis's avatar
Regis committed
778

779
  .scrollable-menu {
780
    padding: 0;
781 782
    max-height: 245px;
    overflow: auto;
dimitrieh's avatar
dimitrieh committed
783
  }
784

785 786 787 788 789 790 791 792 793 794 795 796 797
  // Action icon on the right
  a.ci-action-icon-wrapper {
    color: $action-icon-color;
    border: 1px solid $action-icon-color;
    border-radius: 20px;
    width: 22px;
    height: 22px;
    padding: 2px 0 0 5px;
    cursor: pointer;
    float: right;
    margin: -26px 9px 0 0;
    font-size: 12px;
    background-color: $white-light;
798

799 800 801 802 803
    &:hover,
    &:focus {
      background-color: $stage-hover-bg;
      border: 1px solid transparent;
    }
804 805 806 807 808 809 810 811 812 813 814 815 816 817

    svg {
      width: 22px;
      height: 22px;
      left: -6px;
      position: relative;
      top: -3px;
      fill: $action-icon-color;
    }

    &:hover svg,
    &:focus svg {
      fill: $gl-text-color;
    }
818
  }
819

820 821 822 823 824 825 826 827 828
  // link to the build
  .mini-pipeline-graph-dropdown-item {
    padding: 3px 7px 4px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    white-space: nowrap;
    margin: 0 5px;
    border-radius: 3px;
829

830
    // build name
831 832
    .ci-build-text,
    .ci-status-text {
833 834 835 836
      font-weight: 200;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
837
      max-width: 70%;
838
      color: $gl-text-color-secondary;
839 840 841 842 843 844
      margin-left: 2px;
      display: inline-block;
      top: 1px;
      vertical-align: text-bottom;
      position: relative;
    }
845

846 847 848 849
    // status icon on the left
    .ci-status-icon {
      top: 3px;
      position: relative;
850

851 852 853 854
      > svg {
        overflow: visible;
        width: 18px;
        height: 18px;
Regis's avatar
Regis committed
855
      }
Regis's avatar
Regis committed
856
    }
857

858 859 860 861 862 863
    &:hover,
    &:focus {
      outline: none;
      text-decoration: none;
      color: $gl-text-color;
      background-color: $stage-hover-bg;
864
    }
Filipa Lacerda's avatar
Filipa Lacerda committed
865
  }
866
}
Filipa Lacerda's avatar
Filipa Lacerda committed
867

868 869 870 871 872 873 874 875
// Dropdown in the big pipeline graph
.big-pipeline-graph-dropdown-menu {
  width: 195px;
  min-width: 195px;
  left: auto;
  right: -195px;
  top: -4px;
  box-shadow: 0 1px 5px $black-transparent;
Regis's avatar
Regis committed
876

877 878 879
  .mini-pipeline-graph-dropdown-item {
    .ci-status-icon {
      top: -1px;
880
    }
881
  }
882
}
883

884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915
/**
 * Top arrow in the dropdown in the big pipeline graph
 */
.big-pipeline-graph-dropdown-menu {

  &::before,
  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 18px;
  }

  &::before {
    left: -5px;
    margin-top: -6px;
    border-width: 7px 5px 7px 0;
    border-right-color: $border-color;
  }

  &::after {
    left: -4px;
    margin-top: -9px;
    border-width: 10px 7px 10px 0;
    border-right-color: $white-light;
  }
}

916 917 918 919
/**
 * Top arrow in the dropdown in the mini pipeline graph
 */
.mini-pipeline-graph-dropdown-menu {
Regis's avatar
Regis committed
920

921 922 923 924 925 926 927 928 929 930 931 932 933
  &::before,
  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -6px;
    left: 2px;
    border-width: 0 5px 6px;
  }
Regis's avatar
Regis committed
934

935 936 937 938 939 940 941 942
  &::before {
    border-width: 0 5px 5px;
    border-bottom-color: $border-color;
  }

  &::after {
    margin-top: 1px;
    border-bottom-color: $white-light;
Regis's avatar
Regis committed
943
  }
Regis's avatar
Regis committed
944 945 946
}

/**
947
 * Terminal
Regis's avatar
Regis committed
948 949 950 951 952 953 954 955
 */
.terminal-icon {
  margin-left: 3px;
}

.terminal-container {
  .content-block {
    border-bottom: none;
956 957
  }

Regis's avatar
Regis committed
958 959 960 961
  #terminal {
    margin-top: 10px;
    min-height: 450px;
    box-sizing: border-box;
962

Regis's avatar
Regis committed
963
    > div {
964 965
      min-height: 450px;
    }
966
  }
Regis's avatar
Regis committed
967
}
968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986

/**
 * Play button with icon in dropdowns
 */
.ci-table .no-btn {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  text-align: left;

  .icon-play {
    position: relative;
    top: 2px;
    margin-right: 5px;
    height: 13px;
    width: 12px;
  }
}