Merge branch 'fix-style-lint-errors-pipeline-ce' into 'master'

Adds backport change for pipeline.scss

See merge request gitlab-org/gitlab-ce!32670

4 files changed, 16 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ba0dea626dc..27c1b639889 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -20,6 +20,9 @@ export default {
         <stage-column-component
           v-for="(stage, index) in graph"
           :key="stage.name"
+          :class="{
+            'append-right-48': shouldAddRightMargin(index),
+          }"
           :title="capitalizeStageName(stage.name)"
           :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"
diff --git a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
index 66e9476dadf..f383a4b3368 100644
--- a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
@@ -40,5 +40,15 @@ export default {
     refreshPipelineGraph() {
       this.$emit('refreshPipelineGraph');
     },
+    /**
+     * CSS class is applied:
+     *  - if pipeline graph contains only one stage column component
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    shouldAddRightMargin(index) {
+      return !(index === this.graph.length - 1);
+    },
   },
 };
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index e9218dcec67..b95978b6966 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -395,6 +395,7 @@ img.emoji {
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-32 { margin-left: 32px; }
+.prepend-left-64 { margin-left: 64px; }
 .append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
@@ -402,6 +403,8 @@ img.emoji {
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
+.append-right-32 { margin-right: 32px; }
+.append-right-48 { margin-right: 48px; }
 .prepend-right-32 { margin-right: 32px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 5f4db37c317..d4bd5b1b7dc 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -476,10 +476,6 @@
     display: inline-block;
     vertical-align: top;
 
-    &:not(:last-child) {
-      margin-right: 44px;
-    }
-
     &.left-margin {
       &:not(:first-child) {
         margin-left: 44px;