diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/pipeline.scss')
| -rw-r--r-- | app/assets/stylesheets/page_bundles/pipeline.scss | 310 |
1 files changed, 3 insertions, 307 deletions
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index c9171eb4fc7..206c2eb09d0 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -120,17 +120,10 @@ } } -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: var(--gray-50, $gray-50); - padding: $gl-padding 0; - overflow: auto; -} -// These are single-value classes to use with utility-class style CSS -// but to still access this variable. Do not add other styles. +// These are single-value classes to use with utility-class style CSS. +// They are here to still access a variable or because they use magic values. +// scoped to the graph. Do not add other styles. .gl-pipeline-min-h { min-height: $dropdown-max-height-lg; } @@ -147,22 +140,6 @@ padding-right: 120px; } -.gl-build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid var(--border-color, $border-color); - border-radius: 30px; - background-color: var(--white, $white); - - &:hover, - &:focus { - background-color: var(--gray-50, $gray-50); - border: 1px solid $dropdown-toggle-active-border-color; - color: var(--gl-text-color, $gl-text-color); - } -} - .gl-ci-action-icon-container { position: absolute; right: 5px; @@ -180,259 +157,6 @@ } } -// Pipeline graph, used at -// app/assets/javascripts/pipelines/components/graph/graph_component.vue -.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: var(--gl-text-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 var(--border-color, $border-color); - } - - &::after { - left: -44px; - border-right: 2px solid var(--border-color, $border-color); - border-radius: 0 20px; - } - - &::before { - right: -44px; - border-left: 2px solid var(--border-color, $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; - } - } - - .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(); - } - - .ci-job-dropdown-container:hover .build-content, - a.build-content:hover, - button.build-content:hover { - background-color: var(--gray-100, $gray-100); - 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 var(--border-color, $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 var(--border-color, $border-color); - width: 25px; - height: 69px; - } - - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid var(--border-color, $border-color); - border-radius: 0 0 20px; - } - - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid var(--border-color, $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: var(--gray-500, $gray-500); - } - - .gl-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; -} - .split-report-section { border-bottom: 1px solid var(--gray-50, $gray-50); @@ -480,34 +204,6 @@ 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: var(--border-color, $border-color); - } - - &::after { - left: -5px; - border-width: 10px 7px 10px 0; - border-right-color: var(--white, $white); - } } .codequality-report { |