diff options
Diffstat (limited to 'app/assets/stylesheets/pages/pipelines.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 1005 |
1 files changed, 12 insertions, 993 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8b104ce9017..2df43b861b2 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,119 +1,3 @@ -@mixin flat-connector-before($length: 44px) { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -$length; - border-top: 2px solid $border-color; - width: $length; - height: 1px; - } -} - -@mixin build-content($border-radius: 30px) { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: $border-radius; - background-color: $white; - - &:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - color: $gl-text-color; - } -} - -.pipelines { - .negative-margin-top { - margin-top: -$pipelines-table-header-height; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .table-holder { - overflow: unset; - width: 100%; - } - - .commit-title { - margin: 0; - white-space: normal; - - @include media-breakpoint-down(sm) { - justify-content: flex-end; - } - } - - .ci-table { - .badge { - margin-bottom: 3px; - } - - .pipeline-id { - color: $black; - } - - .pipelines-time-ago { - text-align: right; - } - - .pipeline-actions { - 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: $dropdown-toggle-active-border-color; - background-color: $white-normal; - } - - svg path { - fill: $gl-text-color-secondary; - } - - .dropdown-menu { - max-height: $dropdown-max-height; - 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 .text-center { - display: inline; - } - - .tooltip { - white-space: nowrap; - } - } - } -} - @include media-breakpoint-down(md) { .content-list { &.builds-content-list { @@ -124,22 +8,6 @@ } .ci-table { - .build.retried { - background-color: $gray-lightest; - } - - .commit-link { - a { - &:focus { - text-decoration: none; - } - } - - a:hover { - text-decoration: none; - } - } - .avatar { margin-left: 0; float: none; @@ -160,7 +28,10 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-text-color-secondary; + + &:not(.text-warning) { + fill: $gl-text-color-secondary; + } } .sprite { @@ -191,45 +62,12 @@ } } - .icon-container { - display: inline-block; - - &.commit-icon { - width: 15px; - text-align: center; - } - } - - /** - * Play button with icon in dropdowns - */ - .no-btn { - border: 0; - background: none; - outline: none; - width: 100%; - text-align: left; - - .icon-play { - position: relative; - top: 2px; - margin-right: 5px; - height: 13px; - width: 12px; - } - } - .duration, .finished-at { color: $gl-text-color-secondary; margin: 0; white-space: nowrap; - .fa { - font-size: 12px; - margin-right: 4px; - } - svg { width: 12px; height: 12px; @@ -241,843 +79,20 @@ .build-link a { color: $gl-text-color; } - - .btn-group.open .dropdown-toggle { - box-shadow: none; - } - - .pipeline-tags .label-container { - white-space: normal; - } } -.stage-cell { - .mini-pipeline-graph-dropdown-toggle { - svg { - height: $ci-action-icon-size; - width: $ci-action-icon-size; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - &:hover, - &:active, - &:focus { - svg { - top: -2px; - left: -2px; - } +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; } } - - .stage-container { - display: inline-block; - position: relative; - vertical-align: middle; - height: $ci-action-icon-size; - margin: 3px 0; - - + .stage-container { - margin-left: 6px; - } - - // Hack to show a button tooltip inline - button.has-tooltip + .tooltip { - min-width: 105px; - } - - // Bootstrap way of showing the content inline for anchors. - a.has-tooltip { - white-space: nowrap; - } - - &:not(:last-child) { - &::after { - content: ''; - width: 7px; - position: absolute; - right: -7px; - top: 11px; - border-bottom: 2px solid $border-color; - } - } - - //delete when all pipelines are updated to new size - &.mr-widget-pipeline-stages { - + .stage-container { - margin-left: 4px; - } - - &:not(:last-child) { - &::after { - width: 4px; - right: -4px; - top: 11px; - } - } - } - } -} - -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} - -// Pipeline visualization -.pipeline-actions { - border-bottom: 0; -} - -.tab-pane { - &.builds .ci-table tr { - height: 71px; - } - - .ci-table { - thead th { - border-top: 0; - } - } -} - -.build-failures { - .build-state { - padding: 20px 2px; - - .build-name { - font-weight: $gl-font-weight-normal; - } - - .stage { - color: $gl-text-color-secondary; - font-weight: $gl-font-weight-normal; - vertical-align: middle; - } - } - - .build-log { - border: 0; - line-height: initial; - } - - .build-trace-row td { - border-top: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - padding-top: 0; - } - - .build-trace { - width: 100%; - text-align: left; - margin-top: $gl-padding; - } - - .build-name { - width: 196px; - - a { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - text-decoration: none; - - &:focus, - &:hover { - text-decoration: underline; - } - } - } - - .build-actions { - width: 70px; - text-align: right; - } - - .build-stage { - width: 140px; - } - - .ci-status-icon-failed { - padding: 10px 0 10px 12px; - width: 12px + 24px; // padding-left + svg width - } - - .build-icon svg { - width: 24px; - height: 24px; - vertical-align: middle; - } - - .build-state, - .build-trace-row { - > td:last-child { - padding-right: 0; - } - } - - @include media-breakpoint-down(sm) { - td:empty { - display: none; - } - - .ci-table { - margin-top: 2 * $gl-padding; - } - - .build-trace-container { - padding-top: $gl-padding; - padding-bottom: $gl-padding; - } - - .build-trace { - margin-bottom: 0; - margin-top: 0; - } - } -} - -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: $gray-light; - padding: $gl-padding 0; - overflow: auto; -} - -// Pipeline graph -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - .stage-column-list, - .builds-container > ul { - padding: 0; - } - - a { - text-decoration: none; - color: $gl-text-color; - } - - svg { - vertical-align: middle; - } - - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - @include flat-connector-before; - } - } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - // when downstream pipelines are present, the last stage isn't the last column - &:last-child:not(.has-downstream) { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child::after { - border: 0; - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child)::after { - border: 0; - } - // Remove opposite curve - .curve::before { - display: none; - } - } - } - - // when upstream pipelines are present, the first stage isn't the first column - &:first-child:not(.has-upstream) { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child)::before { - border: 0; - } - // 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; - top: -31px; - border-top: 2px solid $border-color; - } - - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } - - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; - } - } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: $gl-font-weight-bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 2.2em; - } - - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - - .ci-job-dropdown-container { - // override dropdown.scss - .dropdown-menu li button { - padding: 0; - text-align: center; - } - } - - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } - - .ci-status-icon svg { - height: 24px; - width: 24px; - } - - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; - - &:focus { - outline: none; - } - } - - .build-content { - @include build-content(); - } - - a.build-content:hover, - button.build-content:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - } - - // 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; - } - } - - // 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; - } - - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; - } - - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; - } - } - - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } - - .curve { - display: block; - } - } - } - - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); - - // Action Icons in big pipeline-graph nodes - &.ci-action-icon-wrapper { - height: 30px; - width: 30px; - border-radius: 100%; - display: block; - padding: 0; - line-height: 0; - - svg { - fill: $gl-text-color-secondary; - } - - .spinner { - top: 2px; - } - - &.play { - svg { - left: 1px; - top: 1px; - } - } - } - } - - .stage-action svg { - left: 1px; - top: -2px; - } -} - -// Triggers the dropdown in the big pipeline graph -.dropdown-counter-badge { - font-weight: 100; - font-size: 15px; - position: absolute; - right: 13px; - top: 8px; -} - -.ci-build-text, -.ci-status-text { - font-weight: 200; -} - -@mixin mini-pipeline-graph-color( - $color-background-default, - $color-background-hover-focus, - $color-background-active, - $color-foreground-default, - $color-foreground-hover-focus, - $color-foreground-active -) { - background-color: $color-background-default; - border-color: $color-foreground-default; - - svg { - fill: $color-foreground-default; - } - - &:hover, - &:focus { - background-color: $color-background-hover-focus; - border-color: $color-foreground-hover-focus; - - svg { - fill: $color-foreground-hover-focus; - } - } - - &:active { - background-color: $color-background-active; - border-color: $color-foreground-active; - - svg { - fill: $color-foreground-active; - } - } - - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } -} - -@mixin mini-pipeline-item() { - border-radius: 100px; - background-color: $white; - border-width: 1px; - border-style: solid; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - margin: 0; - padding: 0; - position: relative; - vertical-align: middle; - - &:hover, - &:active, - &:focus { - outline: none; - border-width: 2px; - } - - // Dropdown button animation in mini pipeline graph - &.ci-status-icon-success { - @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700); - } - - &.ci-status-icon-failed { - @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700); - } - - &.ci-status-icon-pending, - &.ci-status-icon-waiting-for-resource, - &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); - } - - &.ci-status-icon-preparing, - &.ci-status-icon-running { - @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); - } - - &.ci-status-icon-canceled, - &.ci-status-icon-scheduled, - &.ci-status-icon-disabled, - &.ci-status-icon-not-found, - &.ci-status-icon-manual { - @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); - } - - &.ci-status-icon-created, - &.ci-status-icon-skipped { - @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); - } -} - -// Dropdown button in mini pipeline graph -button.mini-pipeline-graph-dropdown-toggle { - @include mini-pipeline-item(); -} - -/** - Action icons inside dropdowns: - - mini graph in pipelines table - - dropdown in big graph - - mini graph in MR widget pipeline - - mini graph in Commit widget pipeline -*/ -.big-pipeline-graph-dropdown-menu, -.mini-pipeline-graph-dropdown-menu { - width: 240px; - max-width: 240px; - - // override dropdown.scss - &.dropdown-menu li button, - &.dropdown-menu li a.ci-action-icon-container { - padding: 0; - text-align: center; - } - - .ci-action-icon-container { - position: absolute; - right: 8px; - top: 8px; - - &.ci-action-icon-wrapper { - height: $ci-action-dropdown-button-size; - width: $ci-action-dropdown-button-size; - border-radius: 50%; - display: block; - - &:hover { - box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; - background-color: $gray-darker; - - svg { - fill: $gl-text-color; - } - } - - .spinner, - svg { - width: $ci-action-dropdown-svg-size; - height: $ci-action-dropdown-svg-size; - fill: $gl-text-color-secondary; - position: relative; - top: 1px; - vertical-align: initial; - } - } - } - - // SVGs in the commit widget and mr widget - a.ci-action-icon-container.ci-action-icon-wrapper svg { - top: 5px; - } - - .scrollable-menu { - padding: 0; - max-height: 245px; - overflow: auto; - } - - li { - position: relative; - - // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered - &:hover > .mini-pipeline-graph-dropdown-item, - &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { - @extend .mini-pipeline-graph-dropdown-item:hover; - } - - // link to the build - .mini-pipeline-graph-dropdown-item { - align-items: center; - clear: both; - display: flex; - font-weight: normal; - line-height: $line-height-base; - white-space: nowrap; - - // Match dropdown.scss for all `a` tags - &.non-details-job-component { - padding: $gl-padding-8 $gl-btn-horz-padding; - } - - .ci-job-name-component { - align-items: center; - display: flex; - flex: 1; - } - - - .ci-status-icon { - @include gl-mr-3; - - position: relative; - - > svg { - width: $pipeline-dropdown-status-icon-size; - height: $pipeline-dropdown-status-icon-size; - margin: 3px 0; - position: relative; - overflow: visible; - display: block; - } - } - - &:hover, - &:focus { - outline: none; - text-decoration: none; - background-color: $gray-darker; - } - } - } -} - -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - width: 195px; - min-width: 195px; - left: 100%; - top: -10px; - box-shadow: 0 1px 5px $black-transparent; - - /** - * Top arrow in the dropdown in the big pipeline graph - */ - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } - - &::before { - left: -6px; - margin-top: 3px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } - - &::after { - left: -5px; - border-width: 10px 7px 10px 0; - border-right-color: $white; - } -} - -/** - * Top arrow in the dropdown in the mini pipeline graph - */ -.mini-pipeline-graph-dropdown-menu { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 50%; - transform: translate(-50%, 0); - border-width: 0 5px 6px; - - @include media-breakpoint-down(sm) { - left: 100%; - margin-left: -12px; - } - } - - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } - - &::after { - margin-top: 1px; - border-bottom-color: $white; - } - - /** - * Center dropdown menu in mini graph - */ - .dropdown &.dropdown-menu { - transform: translate(-80%, 0); - - @media (min-width: map-get($grid-breakpoints, md)) { - transform: translate(-50%, 0); - right: auto; - left: 50%; - } - } -} - -/** - * Terminal - */ -.terminal-icon { - margin-left: 3px; -} - -.terminal-container { - .content-block { - border-bottom: 0; - } - - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; - - > div { - min-height: 450px; - } - } -} - -.ci-header-container { - min-height: 55px; - - .text-center { - padding-top: 12px; - } } .pipelines-container .top-area .nav-controls > .btn:last-child { float: none; } -.autodevops-title { - font-weight: $gl-font-weight-normal; - line-height: 1.5; -} - -.legend-all { - color: $gl-text-color-secondary; -} - -.legend-success { - color: $green-500; -} - -.test-reports-table { - .build-trace { - @include build-trace(); - } -} - -.codequality-report { - .media { - padding: $gl-padding; - } - - .media-body { - flex-direction: row; - } - - .report-block-container { - height: auto !important; - } -} - .progress-bar.bg-primary { background-color: $blue-500 !important; } @@ -1090,6 +105,10 @@ button.mini-pipeline-graph-dropdown-toggle { width: 8rem; } +.stage-rounded { + border-radius: 2rem; +} + .stage-left-rounded { border-radius: 2rem 0 0 2rem; } |