Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/pages/pipelines.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/pages/pipelines.scss')
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss699
1 files changed, 317 insertions, 382 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8b104ce9017..d382fc6241f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -26,10 +26,6 @@
}
.pipelines {
- .negative-margin-top {
- margin-top: -$pipelines-table-header-height;
- }
-
.stage {
max-width: 90px;
width: 90px;
@@ -111,6 +107,10 @@
white-space: nowrap;
}
}
+
+ .pipeline-tags .label-container {
+ white-space: normal;
+ }
}
}
@@ -124,22 +124,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;
@@ -191,45 +175,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,14 +192,6 @@
.build-link a {
color: $gl-text-color;
}
-
- .btn-group.open .dropdown-toggle {
- box-shadow: none;
- }
-
- .pipeline-tags .label-container {
- white-space: normal;
- }
}
.stage-cell {
@@ -322,9 +265,11 @@
}
}
-.admin-builds-table {
- .ci-table td:last-child {
- min-width: 120px;
+[data-page='admin:jobs:index'] {
+ .admin-builds-table {
+ td:last-child {
+ min-width: 120px;
+ }
}
}
@@ -333,377 +278,376 @@
border-bottom: 0;
}
-.tab-pane {
- &.builds .ci-table tr {
- height: 71px;
- }
-
- .ci-table {
- thead th {
- border-top: 0;
+[data-page='projects:pipelines:show'] {
+ .tab-pane {
+ .ci-table {
+ thead th {
+ border-top: 0;
+ }
}
}
-}
-.build-failures {
- .build-state {
- padding: 20px 2px;
+ .build-failures {
+ .build-state {
+ padding: 20px 2px;
- .build-name {
- font-weight: $gl-font-weight-normal;
- }
+ .build-name {
+ font-weight: $gl-font-weight-normal;
+ }
- .stage {
- color: $gl-text-color-secondary;
- font-weight: $gl-font-weight-normal;
- vertical-align: middle;
+ .stage {
+ color: $gl-text-color-secondary;
+ font-weight: $gl-font-weight-normal;
+ vertical-align: middle;
+ }
}
- }
- .build-log {
- border: 0;
- line-height: initial;
- }
+ .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-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-trace {
+ width: 100%;
+ text-align: left;
+ margin-top: $gl-padding;
+ }
- .build-name {
- width: 196px;
+ .build-name {
+ width: 196px;
- a {
- font-weight: $gl-font-weight-bold;
- color: $gl-text-color;
- text-decoration: none;
+ a {
+ font-weight: $gl-font-weight-bold;
+ color: $gl-text-color;
+ text-decoration: none;
- &:focus,
- &:hover {
- text-decoration: underline;
+ &: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;
+ .build-actions {
+ width: 70px;
+ text-align: right;
}
- }
- @include media-breakpoint-down(sm) {
- td:empty {
- display: none;
+ .build-stage {
+ width: 140px;
}
- .ci-table {
- margin-top: 2 * $gl-padding;
+ .ci-status-icon-failed {
+ padding: 10px 0 10px 12px;
+ width: 12px + 24px; // padding-left + svg width
}
- .build-trace-container {
- padding-top: $gl-padding;
- padding-bottom: $gl-padding;
+ .build-icon svg {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
}
- .build-trace {
- margin-bottom: 0;
- margin-top: 0;
+ .build-state,
+ .build-trace-row {
+ > td:last-child {
+ padding-right: 0;
+ }
}
- }
-}
-.pipeline-tab-content {
- display: flex;
- width: 100%;
- min-height: $dropdown-max-height-lg;
- background-color: $gray-light;
- padding: $gl-padding 0;
- overflow: auto;
-}
+ @include media-breakpoint-down(sm) {
+ td:empty {
+ display: none;
+ }
-// Pipeline graph
-.pipeline-graph {
- white-space: nowrap;
- transition: max-height 0.3s, padding 0.3s;
+ .ci-table {
+ margin-top: 2 * $gl-padding;
+ }
- .stage-column-list,
- .builds-container > ul {
- padding: 0;
- }
+ .build-trace-container {
+ padding-top: $gl-padding;
+ padding-bottom: $gl-padding;
+ }
- a {
- text-decoration: none;
- color: $gl-text-color;
+ .build-trace {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
}
- svg {
- vertical-align: middle;
+ .pipeline-tab-content {
+ display: flex;
+ width: 100%;
+ min-height: $dropdown-max-height-lg;
+ background-color: $gray-light;
+ padding: $gl-padding 0;
+ overflow: auto;
}
- .stage-column {
- display: inline-block;
- vertical-align: top;
-
- &.left-margin {
- &:not(:first-child) {
- margin-left: 44px;
+ // 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;
- .left-connector {
- @include flat-connector-before;
- }
- }
+ .stage-column-list,
+ .builds-container > ul {
+ padding: 0;
}
- &.no-margin {
- margin: 0;
+ a {
+ text-decoration: none;
+ color: $gl-text-color;
}
- li {
- list-style: none;
+ svg {
+ vertical-align: middle;
}
- // 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;
- }
- }
- }
+ .stage-column {
+ display: inline-block;
+ vertical-align: top;
- // 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;
+ &.left-margin {
+ &:not(:first-child) {
+ margin-left: 44px;
+
+ .left-connector {
+ @include flat-connector-before;
+ }
}
}
- }
-
- // 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;
+ &.no-margin {
+ margin: 0;
}
- &::after {
- left: -44px;
- border-right: 2px solid $border-color;
- border-radius: 0 20px;
+ li {
+ list-style: none;
}
- &::before {
- right: -44px;
- border-left: 2px solid $border-color;
- border-radius: 20px 0 0;
+ // 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;
+ }
+ }
}
- }
- }
- .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;
+ // 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;
+ }
+ }
}
- }
- // ensure .build-content has hover style when action-icon is hovered
- .ci-job-dropdown-container:hover .build-content {
- @extend .build-content:hover;
- }
+ // Curve first child connecting lines in opposite direction
+ .curve {
+ display: none;
- .ci-status-icon svg {
- height: 24px;
- width: 24px;
- }
+ &::before,
+ &::after {
+ content: '';
+ width: 21px;
+ height: 25px;
+ position: absolute;
+ top: -31px;
+ border-top: 2px solid $border-color;
+ }
- .dropdown-menu-toggle {
- background-color: transparent;
- border: 0;
- padding: 0;
+ &::after {
+ left: -44px;
+ border-right: 2px solid $border-color;
+ border-radius: 0 20px;
+ }
- &:focus {
- outline: none;
+ &::before {
+ right: -44px;
+ border-left: 2px solid $border-color;
+ border-radius: 20px 0 0;
+ }
}
}
- .build-content {
- @include build-content();
+ .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;
}
- a.build-content:hover,
- button.build-content:hover {
- background-color: $gray-darker;
- border: 1px solid $dropdown-toggle-active-border-color;
- }
+ .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;
+ }
+ }
- // 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;
+ // ensure .build-content has hover style when action-icon is hovered
+ .ci-job-dropdown-container:hover .build-content {
+ @extend .build-content:hover;
}
- }
- // 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;
+ .ci-status-icon svg {
+ height: 24px;
+ width: 24px;
}
- // Right connecting curves
- &::after {
- right: -25px;
- border-right: 2px solid $border-color;
- border-radius: 0 0 20px;
+ .dropdown-menu-toggle {
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+
+ &:focus {
+ outline: none;
+ }
}
- // Left connecting curves
- &::before {
- left: -25px;
- border-left: 2px solid $border-color;
- border-radius: 0 0 0 20px;
+ .build-content {
+ @include build-content();
}
- }
- // Connect second build to first build with smaller curved line
- &:nth-child(2) {
- &::after,
- &::before {
- height: 29px;
- top: -9px;
+ a.build-content:hover,
+ button.build-content:hover {
+ background-color: $gray-darker;
+ border: 1px solid $dropdown-toggle-active-border-color;
}
- .curve {
- display: block;
+ // 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;
+ }
}
- }
- }
- .ci-action-icon-container {
- position: absolute;
- right: 5px;
- top: 50%;
- transform: translateY(-50%);
+ // 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;
+ }
- // 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;
+ // Right connecting curves
+ &::after {
+ right: -25px;
+ border-right: 2px solid $border-color;
+ border-radius: 0 0 20px;
+ }
- svg {
- fill: $gl-text-color-secondary;
+ // Left connecting curves
+ &::before {
+ left: -25px;
+ border-left: 2px solid $border-color;
+ border-radius: 0 0 0 20px;
+ }
}
- .spinner {
- top: 2px;
+ // 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;
- &.play {
svg {
- left: 1px;
- top: 1px;
+ fill: $gl-text-color-secondary;
+ }
+
+ .spinner {
+ top: 2px;
+ }
+
+ &.play {
+ svg {
+ left: 1px;
+ top: 1px;
+ }
}
}
}
- }
- .stage-action svg {
- left: 1px;
- top: -2px;
+ .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;
+ // 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,
@@ -1013,31 +957,35 @@ button.mini-pipeline-graph-dropdown-toggle {
/**
* Terminal
*/
-.terminal-icon {
- margin-left: 3px;
-}
-
-.terminal-container {
- .content-block {
- border-bottom: 0;
- }
+[data-page='projects:jobs:terminal'],
+[data-page='projects:environments:terminal'] {
+ .terminal-container {
+ .content-block {
+ border-bottom: 0;
+ }
- #terminal {
- margin-top: 10px;
- min-height: 450px;
- box-sizing: border-box;
+ #terminal {
+ margin-top: 10px;
- > div {
- min-height: 450px;
+ > div {
+ min-height: 450px;
+ }
}
}
}
-.ci-header-container {
- min-height: 55px;
-
- .text-center {
- padding-top: 12px;
+/**
+ * Pipelines / Jobs header
+ */
+[data-page='projects:pipelines:show'],
+[data-page='projects:jobs:show'] {
+ .ci-header-container {
+ min-height: $gl-spacing-scale-7;
+ display: flex;
+
+ .text-center {
+ padding-top: 12px;
+ }
}
}
@@ -1045,19 +993,6 @@ button.mini-pipeline-graph-dropdown-toggle {
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();
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-19 02:25:58 +0300