BigW Consortium Gitlab

pipelines.scss 10.9 KB
Newer Older
1 2
.pipelines {
  .stage {
3 4
    max-width: 90px;
    width: 90px;
5
    text-align: center;
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .commit-title {
    margin: 0;
  }

  .controls {
    white-space: nowrap;
  }

  .btn {
    margin: 4px;
  }
22

23
  .table.ci-table {
24
    min-width: 1200px;
25

26 27
    .pipeline-id {
      color: $black;
28 29
    }

30 31 32 33
    .branch-commit {
      width: 30%;

      .branch-name {
34
        max-width: 195px;
35 36
      }
    }
37
  }
38
}
39

Annabel Dunstone committed
40 41 42 43 44 45 46
.content-list {

  &.pipelines,
  &.builds-content-list {
    width: 100%;
    overflow: auto;
  }
47 48
}

49 50 51 52 53
.pipeline-holder {
  width: 100%;
  overflow: auto;
}

54
.table.ci-table {
55
  min-width: 900px;
56

57 58 59 60
  &.pipeline {
    min-width: 650px;
  }

61 62 63 64 65 66 67
  &.builds-page {

    tr {
      height: 71px;
    }
  }

68 69
  tr {
    th {
70
      padding: 16px 8px;
71 72
      border: none;
    }
73 74 75 76

    td {
      padding: 10px 8px;
    }
77 78 79 80 81 82
  }

  tbody {
    border-top-width: 1px;
  }

83 84 85 86
  .build.retried {
    background-color: $gray-lightest;
  }

87
  .commit-link {
88 89 90 91 92
    a {
      &:focus {
        text-decoration: none;
      }
    }
93 94 95 96 97 98

    a:hover {
      text-decoration: none;
    }
  }

99 100 101 102 103
  .avatar {
    margin-left: 0;
    float: none;
  }

104
  .branch-commit {
105

106 107
    .branch-name {
      font-weight: bold;
108
      max-width: 150px;
109 110 111 112 113 114 115
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      vertical-align: top;
      text-overflow: ellipsis;
    }

116 117
    svg {
      height: 14px;
118
      width: 14px;
119
      vertical-align: middle;
120 121 122 123 124
      fill: $table-text-gray;
    }

    .fa {
      font-size: 12px;
125
      color: $gl-text-color;
126 127 128 129 130 131 132 133
    }

    .commit-id {
      color: $gl-link-color;
    }

    .commit-title {
      margin-top: 4px;
Annabel Dunstone committed
134
      max-width: 300px;
135 136 137 138 139
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

140 141 142 143
    .label {
      margin-right: 4px;
    }

Annabel Dunstone committed
144
    .label-container {
145
      font-size: 0;
146 147 148 149

      .label {
        margin-top: 5px;
      }
Annabel Dunstone committed
150
    }
151 152
  }

153 154
  .icon-container {
    display: inline-block;
155
    width: 10px;
156

157 158 159
    &.commit-icon {
      width: 15px;
      text-align: center;
160
    }
161
  }
162

163
  .stage-cell {
164
    font-size: 0;
165 166

    svg {
167 168
      height: 18px;
      width: 18px;
169 170
      position: relative;
      z-index: 2;
171
      vertical-align: middle;
172
      overflow: visible;
173
    }
174 175 176 177 178 179

    .stage-container {
      display: inline-block;
      position: relative;
      margin-right: 6px;

180 181 182 183
      .tooltip {
        white-space: nowrap;
      }

184 185 186
      &:not(:last-child) {
        &::after {
          content: '';
187
          width: 8px;
188
          position: absolute;
189
          right: -7px;
190
          bottom: 9px;
191
          border-bottom: 2px solid $border-color;
192 193
        }
      }
194 195 196 197

      a {
        display: block;
      }
198
    }
199
  }
200

201 202 203
  .duration,
  .finished-at {
    color: $table-text-gray;
Annabel Dunstone committed
204
    margin: 4px 0;
205 206

    .fa {
207
      font-size: 12px;
208
      margin-right: 4px;
209 210 211
    }

    svg {
212
      width: 12px;
213
      height: 12px;
214
      vertical-align: middle;
215
      margin-right: 4px;
216 217 218 219
    }
  }

  .pipeline-actions {
220
    min-width: 140px;
221 222

    .btn {
223
      margin: 0;
Annabel Dunstone committed
224
      color: $table-text-gray;
225 226
    }

227
    .cancel-retry-btns {
228 229
      vertical-align: middle;

230 231 232 233 234
      .btn:not(:first-child) {
        margin-left: 8px;
      }
    }

235
    .dropdown-toggle,
Annabel Dunstone committed
236
    .dropdown-menu {
237
      color: $table-text-gray;
238 239 240 241 242

      .fa {
        color: $table-text-gray;
        font-size: 14px;
      }
243

244 245
      svg,
      .fa {
246 247
        margin-right: 0;
      }
248 249 250 251 252
    }

    .btn-remove {
      color: $white-light;
    }
253 254 255 256 257 258 259 260

    .btn-group {
      &.open {
        .btn-default {
          background-color: $white-normal;
          border-color: $border-white-normal;
        }
      }
261 262 263 264 265 266 267

      .btn {
        .icon-play {
          height: 13px;
          width: 12px;
        }
      }
268
    }
269 270 271 272 273 274 275 276
  }

  .build-link {

    a {
      color: $gl-dark-link-color;
    }
  }
277 278 279 280

  .btn-group.open .dropdown-toggle {
    box-shadow: none;
  }
281
}
282 283

// Pipeline visualization
284

285 286 287 288 289 290 291 292
.toggle-pipeline-btn {
  background-color: $gray-dark;

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

293
.pipeline-graph {
294
  width: 100%;
295 296
  background-color: $background-color;
  padding: $gl-padding;
297
  overflow: auto;
298
  white-space: nowrap;
299 300 301 302 303 304
  transition: max-height 0.3s, padding 0.3s;

  &.graph-collapsed {
    max-height: 0;
    padding: 0 16px;
  }
305 306 307 308
}

.pipeline-visualization {
  position: relative;
309 310 311 312

  ul {
    padding: 0;
  }
313 314
}

315 316 317
.stage-column {
  display: inline-block;
  vertical-align: top;
318 319 320 321

  &:not(:last-child) {
    margin-right: 44px;
  }
322 323 324

  &.left-margin {
    &:not(:first-child) {
325 326 327 328 329 330
      margin-left: 44px;

      .left-connector {
        &::before {
          content: '';
          position: absolute;
331
          top: 48%;
332 333 334 335 336 337
          left: -48px;
          border-top: 2px solid $border-color;
          width: 48px;
          height: 1px;
        }
      }
338 339
    }
  }
340

341 342 343 344
  &.no-margin {
    margin: 0;
  }

345 346 347 348
  li {
    list-style: none;
  }

349
  .stage-name {
350
    margin: 0 0 15px 10px;
351
    font-weight: bold;
352
    width: 176px;
353 354 355
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
356 357 358 359
  }

  .build {
    border: 1px solid $border-color;
360
    background-color: $white-light;
361
    position: relative;
362
    padding: 7px 10px 8px;
363
    border-radius: 30px;
364
    width: 186px;
365 366
    margin-bottom: 10px;

367 368 369 370
    &:hover {
      background-color: $gray-lighter;
    }

371
    &.playable {
Annabel Dunstone committed
372 373

      svg {
374 375
        height: 13px;
        width: 20px;
Annabel Dunstone committed
376 377 378 379 380 381 382
        position: relative;
        top: 1px;

        path {
          fill: $layout-link-gray;
        }
      }
383 384
    }

385
    .build-content {
386 387 388
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
389
      width: 164px;
390 391 392 393 394 395 396

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

398 399 400 401 402 403 404 405 406
      .tooltip {
        white-space: nowrap;

        .tooltip-inner {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

407
      .ci-status-text {
408
        width: 135px;
409 410 411 412 413 414 415 416
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        display: inline-block;
        position: relative;
        top: -1px;
      }
417 418

      a {
419
        color: $gl-text-color-light;
420
        text-decoration: none;
421 422 423
      }

      .dropdown-menu-toggle {
424
        background-color: transparent;
425 426 427
        border: none;
        width: auto;
        padding: 0;
428
        color: $gl-text-color-light;
429
        flex-grow: 1;
430 431

        .ci-status-text {
432 433
          max-width: 112px;
          width: auto;
434 435 436 437
        }
      }

      .grouped-pipeline-dropdown {
438
        padding: 0;
439
        width: 186px;
440
        left: auto;
441
        right: -197px;
442
        top: -9px;
443 444 445 446

        ul {
          max-height: 245px;
          overflow: auto;
447 448 449 450 451 452 453 454

          li:first-child {
            padding-top: 8px;
          }

          li:last-child {
            padding-bottom: 8px;
          }
455
        }
456

457
        a {
458 459
          color: $gl-text-color;
          padding: 7px 8px 8px;
460 461

          &:hover {
462 463 464
            background-color: $blue-light-transparent;
            border-radius: 3px;

465 466 467
            .ci-status-text {
              text-decoration: none;
            }
468 469 470
          }
        }

471 472 473 474 475
        svg {
          width: 14px;
          height: 14px;
        }

476
        .ci-status-text {
477
          width: 112px;
478 479 480
        }

        .arrow {
481 482
          &::before,
          &::after {
483 484 485 486 487 488 489 490 491 492
            content: '';
            display: inline-block;
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            top: 18px;
          }

493
          &::before {
494 495 496 497 498
            left: -5px;
            margin-top: -6px;
            border-width: 7px 5px 7px 0;
            border-right-color: $border-color;
          }
499

500
          &::after {
501 502 503 504 505 506 507 508 509
            left: -4px;
            margin-top: -9px;
            border-width: 10px 7px 10px 0;
            border-right-color: $white-light;
          }
        }
      }

      .badge {
510 511
        background-color: $gray-darker;
        color: $gl-text-color-light;
512
        font-weight: normal;
513
        margin-left: $btn-xs-side-margin;
514
      }
515 516
    }

517
    svg {
518
      vertical-align: middle;
519 520 521
      margin-right: 5px;
    }

522
    // Connect first build in each stage with right horizontal line
523
    &:first-child {
524
      &::after {
525 526
        content: '';
        position: absolute;
527
        top: 48%;
528
        right: -48px;
529
        border-top: 2px solid $border-color;
530
        width: 48px;
531 532 533
        height: 1px;
      }
    }
534 535 536

    // Connect each build (except for first) with curved lines
    &:not(:first-child) {
537 538
      &::after,
      &::before {
539
        content: '';
540
        top: -49px;
541 542
        position: absolute;
        border-bottom: 2px solid $border-color;
543
        width: 25px;
544
        height: 69px;
545 546 547 548
      }

      // Right connecting curves
      &::after {
549
        right: -25px;
550
        border-right: 2px solid $border-color;
551
        border-radius: 0 0 20px;
552 553 554 555
      }

      // Left connecting curves
      &::before {
556
        left: -25px;
557
        border-left: 2px solid $border-color;
558
        border-radius: 0 0 0 20px;
559 560 561 562 563
      }
    }

    // Connect second build to first build with smaller curved line
    &:nth-child(2) {
564 565
      &::after,
      &::before {
566
        height: 29px;
567
        top: -9px;
568
      }
569

570 571
      .curve {
        display: block;
572 573 574 575 576 577 578 579
      }
    }
  }

  &:last-child {
    .build {
      // Remove right connecting horizontal line from first build in last stage
      &:first-child {
580
        &::after {
581 582 583 584 585 586 587 588 589
          border: none;
        }
      }
      // Remove right curved connectors from all builds in last stage
      &:not(:first-child) {
        &::after {
          border: none;
        }
      }
590 591 592 593 594 595
      // Remove opposite curve
      .curve {
        &::before {
          display: none;
        }
      }
596
    }
597
  }
598

599 600 601 602 603 604 605 606
  &:first-child {
    .build {
      // Remove left curved connectors from all builds in first stage
      &:not(:first-child) {
        &::before {
          border: none;
        }
      }
607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625
      // Remove opposite curve
      .curve {
        &::after {
          display: none;
        }
      }
    }
  }

  // Curve first child connecting lines in opposite direction
  .curve {
    display: none;

    &::before,
    &::after {
      content: '';
      width: 21px;
      height: 25px;
      position: absolute;
626
      top: -32px;
627 628 629 630
      border-top: 2px solid $border-color;
    }

    &::after {
631
      left: -44px;
632
      border-right: 2px solid $border-color;
633
      border-radius: 0 20px;
634 635 636
    }

    &::before {
637
      right: -44px;
638
      border-left: 2px solid $border-color;
639
      border-radius: 20px 0 0;
640
    }
641
  }
642
}
643 644 645 646 647 648 649 650 651 652 653

.pipeline-actions {
  border-bottom: none;
}

.toggle-pipeline-btn {

  .fa {
    color: $dropdown-header-color;
  }
}
654

655
.tab-pane {
656

657
  &.pipelines {
658

659 660 661 662
    .ci-table {
      min-width: 900px;
    }

663 664 665 666 667 668 669 670 671 672 673 674
    .content-list.pipelines {
      overflow: auto;
    }

    .stage {
      max-width: 100px;
      width: 100px;
    }

    .pipeline-actions {
      min-width: initial;
    }
675 676
  }

677 678 679 680 681 682 683
  &.builds {

    .ci-table {
      tr {
        height: 71px;
      }
    }
684 685
  }
}