1 files changed, 83 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index ab417948931..dc1654e006e 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -1,7 +1,7 @@
 .js-pipeline-schedule-form {
   .dropdown-select,
   .dropdown-menu-toggle {
-    width: 100%!important;
+    width: 100% !important;
   }
 
   .gl-field-error {
@@ -12,7 +12,7 @@
 .interval-pattern-form-group {
   label {
     margin-right: 10px;
-    font-size: 12px;
+    font-weight: normal;
 
     &[for='custom'] {
       margin-right: 0;
@@ -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 {
+  @include transition(color);
+  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;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    color: $gl-text-color;
+  }
+}