1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index 595eb40fec7..dc719a6ba94 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -74,3 +74,84 @@
     margin-right: 3px;
   }
 }
+
+.pipeline-variable-list {
+  margin-left: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  clear: both;
+}
+
+.pipeline-variable-row {
+  display: flex;
+  align-items: flex-end;
+
+  &:not(:last-child) {
+    margin-bottom: $gl-btn-padding;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    padding-right: $gl-col-padding;
+  }
+
+  &:last-child {
+    & .pipeline-variable-row-remove-button {
+      display: none;
+    }
+
+    @media (max-width: $screen-sm-max) {
+      & .pipeline-variable-value-input {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .pipeline-variable-row-body {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
+    }
+  }
+}
+
+.pipeline-variable-row-body {
+  display: flex;
+  width: calc(75% - #{$gl-col-padding});
+  padding-left: $gl-col-padding;
+
+  @media (max-width: $screen-sm-max) {
+    width: 100%;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+  }
+}
+
+.pipeline-variable-key-input {
+  margin-right: $gl-btn-padding;
+
+  @media (max-width: $screen-xs-max) {
+    margin-bottom: $gl-btn-padding;
+  }
+}
+
+.pipeline-variable-row-remove-button {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $pipeline-variable-remove-button-width;
+  height: $input-height;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: $gl-text-color-secondary;
+  @include transition(color);
+
+  &:hover,
+  &:focus {
+    outline: none;
+    color: $gl-text-color;
+  }
+}