5 files changed, 98 insertions, 92 deletions

diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 42b06945539..c33936021d4 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -44,22 +44,3 @@ export default {
     </span>
   </div>
 </template>
-
-<style scoped>
-.ide-job-item {
-  display: flex;
-  padding: 16px;
-}
-
-.ide-job-item:not(:last-child) {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.ide-job-item .ci-status-icon {
-  display: flex;
-  justify-content: center;
-  height: 20px;
-  margin-top: -2px;
-  overflow: hidden;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 2f8b898652b..370bb61bae8 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -54,7 +54,7 @@ export default {
 
 <template>
   <div
-    class="card prepend-top-default"
+    class="ide-stage card prepend-top-default"
   >
     <div
       class="card-header"
@@ -86,7 +86,7 @@ export default {
       </div>
       <icon
         :name="collapseIcon"
-        css-classes="pull-right"
+        css-classes="ide-stage-collapse-icon"
       />
     </div>
     <div
@@ -106,28 +106,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-.card-header {
-  display: flex;
-  cursor: pointer;
-}
-.card-header .ci-status-icon {
-  display: flex;
-  align-items: center;
-}
-
-.card-header .pull-right {
-  margin: auto 0 auto auto;
-}
-
-.card-body {
-  padding: 0;
-}
-
-.ide-stage-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index a1fcdf5bbd5..703c4a70cfa 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -63,21 +63,3 @@ export default {
     </nav>
   </div>
 </template>
-
-<style>
-.ide-right-sidebar {
-  width: auto;
-  min-width: 60px;
-}
-
-.ide-right-sidebar .ide-activity-bar {
-  border-left: 1px solid #eaeaea;
-}
-
-.ide-right-sidebar .multi-file-commit-panel-inner {
-  width: 350px;
-  padding: 8px 16px;
-  background-color: #fff;
-  border-left: 1px solid #eaeaea;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 138807492eb..9f2fe1cb95c 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -140,31 +140,3 @@ export default {
     </template>
   </div>
 </template>
-
-<style scoped>
-.ide-pipeline {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.ide-pipeline-list {
-  flex: 1;
-  overflow: auto;
-}
-
-.ide-pipeline-header {
-  min-height: 50px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.ide-pipeline-header .ci-status-icon {
-  display: flex;
-}
-
-.ide-pipeline .empty-state {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-</style>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 1affe6ff671..2845063e3c5 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1148,3 +1148,99 @@
     }
   }
 }
+
+.ide-right-sidebar {
+  width: auto;
+  min-width: 60px;
+
+  .ide-activity-bar {
+    border-left: 1px solid $white-dark;
+  }
+
+  .multi-file-commit-panel-inner {
+    width: 350px;
+    padding: $grid-size $gl-padding;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
+  }
+}
+
+.ide-pipeline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .empty-state {
+    margin-top: auto;
+    margin-bottom: auto;
+
+    p {
+      margin: $grid-size 0;
+      text-align: center;
+      line-height: 24px;
+    }
+
+    .btn,
+    h4 {
+      margin: 0;
+    }
+  }
+}
+
+.ide-pipeline-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.ide-pipeline-header {
+  min-height: 50px;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+
+  .ci-status-icon {
+    display: flex;
+  }
+}
+
+.ide-job-item {
+  display: flex;
+  padding: 16px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .ci-status-icon {
+    display: flex;
+    justify-content: center;
+    height: 20px;
+    margin-top: -2px;
+    overflow: hidden;
+  }
+}
+
+.ide-stage {
+  .card-header {
+    display: flex;
+    cursor: pointer;
+
+    .ci-status-icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .card-body {
+    padding: 0;
+  }
+}
+
+.ide-stage-collapse-icon {
+  margin: auto 0 auto auto;
+}
+
+.ide-stage-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}