Merge branch '239861-move-ee-graph-styles' into 'master'

Move EE pipeline graph styles to page bundle CSS

See merge request gitlab-org/gitlab!45015

ee/app/assets/stylesheets/page_bundles/pipeline.scss

+@import '../../../../../app/assets/stylesheets/page_bundles/pipeline';
+
+/**
+ * Cross-project pipelines (applied conditionally to pipeline graph)
+ */
+
+.stage-cell {
+  .stage-container {
+    &.has-downstream {
+      &::after {
+        content: '';
+        width: 0;
+        border: 0;
+      }
+    }
+  }
+}
+
+.upstream-pipeline {
+  margin-right: 84px;
+}
+
+.linked-pipelines-column.stage-column {
+  position: relative;
+
+  > ul {
+    padding: 0;
+  }
+
+  &.graph-position-left {
+    margin-right: 36px;
+
+    .cross-project-triangle {
+      right: -42px;
+    }
+  }
+
+  &.graph-position-right {
+    margin-left: 60px;
+
+    .cross-project-triangle {
+      left: -64px;
+    }
+
+    // reset connectors for the downstream pipeline
+    .linked-pipeline.build {
+      .curve::before,
+      &::after {
+        content: '';
+        width: 0;
+        border: 0;
+      }
+    }
+  }
+
+  .linked-pipeline.build {
+    height: 42px;
+
+    &::before {
+      content: none;
+    }
+
+    // apply custom dimensions to connector before and after for triangle arrow
+    &.flat-connector-before {
+      @include flat-connector-before($linked-project-column-margin);
+    }
+
+    &.active {
+      .linked-pipeline-content,
+      .linked-pipeline-content:hover,
+      .linked-pipeline-content:focus {
+        background-color: $blue-100;
+      }
+
+      &.left-connector {
+        @include flat-connector-before(88px);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 48%;
+        right: -88px;
+        border-top: 2px solid $border-color;
+        width: 88px;
+        height: 1px;
+      }
+    }
+
+    &.downstream-pipeline {
+      height: 86px;
+    }
+
+    .linked-pipeline-content {
+      @include build-content(0);
+      text-align: inherit;
+      min-height: 42px;
+    }
+  }
+}
+
+.stage-column.has-upstream {
+  .left-connector {
+    @include flat-connector-before(60px);
+  }
+
+  &.has-only-one-job {
+    margin-left: 30px;
+    margin-right: 0;
+
+    .left-connector {
+      @include flat-connector-before;
+    }
+  }
+}
+
+.stage-column.has-downstream {
+  margin-right: $linked-project-column-margin;
+
+  &.has-only-one-job:not(:first-child) {
+    margin-right: 36px;
+
+    .left-connector {
+      @include flat-connector-before;
+    }
+  }
+
+  .build {
+    &:first-child {
+      &::after {
+        right: -$linked-project-column-margin;
+        width: $linked-project-column-margin;
+      }
+    }
+  }
+}
+
+.cross-project-triangle {
+  position: absolute;
+  top: 50px;
+  width: 0;
+  height: 0;
+  border-bottom: 7px solid transparent;
+  border-top: 7px solid transparent;
+  border-left: 7px solid $gray-darkest;
+  font-size: 0;
+  line-height: 0;
+  z-index: 10;
+}
+
+.project-name-pipeline-id-separator {
+  display: inline-block;
+  margin: 4px 2px 0;
+  font-size: 10px;
+  vertical-align: top;
+}

ee/app/assets/stylesheets/pages/pipelines.scss

@@ -77,158 +77,3 @@
     }
   }
 }
-
-/**
- * Cross-project pipelines (applied conditionally to pipeline graph)
- */
-
-.stage-cell {
-  .stage-container {
-    &.has-downstream {
-      &::after {
-        content: '';
-        width: 0;
-        border: 0;
-      }
-    }
-  }
-}
-
-.upstream-pipeline {
-  margin-right: 84px;
-}
-
-.linked-pipelines-column.stage-column {
-  position: relative;
-
-  > ul {
-    padding: 0;
-  }
-
-  &.graph-position-left {
-    margin-right: 36px;
-
-    .cross-project-triangle {
-      right: -42px;
-    }
-  }
-
-  &.graph-position-right {
-    margin-left: 60px;
-
-    .cross-project-triangle {
-      left: -64px;
-    }
-
-    // reset connectors for the downstream pipeline
-    .linked-pipeline.build {
-      .curve::before,
-      &::after {
-        content: '';
-        width: 0;
-        border: 0;
-      }
-    }
-  }
-
-  .linked-pipeline.build {
-    height: 42px;
-
-    &::before {
-      content: none;
-    }
-
-    // apply custom dimensions to connector before and after for triangle arrow
-    &.flat-connector-before {
-      @include flat-connector-before($linked-project-column-margin);
-    }
-
-    &.active, {
-      .linked-pipeline-content,
-      .linked-pipeline-content:hover,
-      .linked-pipeline-content:focus, {
-        background-color: $blue-100;
-      }
-
-      &.left-connector {
-        @include flat-connector-before(88px);
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 48%;
-        right: -88px;
-        border-top: 2px solid $border-color;
-        width: 88px;
-        height: 1px;
-      }
-    }
-
-    &.downstream-pipeline {
-      height: 86px;
-    }
-
-    .linked-pipeline-content {
-      @include build-content(0);
-      text-align: inherit;
-      min-height: 42px;
-    }
-  }
-}
-
-.stage-column.has-upstream {
-  .left-connector {
-    @include flat-connector-before(60px);
-  }
-
-  &.has-only-one-job {
-    margin-left: 30px;
-    margin-right: 0;
-
-    .left-connector {
-      @include flat-connector-before;
-    }
-  }
-}
-
-.stage-column.has-downstream {
-  margin-right: $linked-project-column-margin;
-
-  &.has-only-one-job:not(:first-child) {
-    margin-right: 36px;
-
-    .left-connector {
-      @include flat-connector-before;
-    }
-  }
-
-  .build {
-    &:first-child {
-      &::after {
-        right: -$linked-project-column-margin;
-        width: $linked-project-column-margin;
-      }
-    }
-  }
-}
-
-.cross-project-triangle {
-  position: absolute;
-  top: 50px;
-  width: 0;
-  height: 0;
-  border-bottom: 7px solid transparent;
-  border-top: 7px solid transparent;
-  border-left: 7px solid $gray-darkest;
-  font-size: 0;
-  line-height: 0;
-  z-index: 10;
-}
-
-.project-name-pipeline-id-separator {
-  display: inline-block;
-  margin: 4px 2px 0;
-  font-size: 10px;
-  vertical-align: top;
-}