1 files changed, 59 insertions, 37 deletions
diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
index 0c73bece035..af2dac7739e 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
@@ -1,60 +1,82 @@
 @import 'mixins_and_variables_and_functions';
 
-.pipeline-schedule-form {
-  .gl-field-error {
-    margin: 10px 0 0;
-  }
+.ci-variable-list {
+  margin-left: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  clear: both;
 }
 
-.interval-pattern-form-group {
-  label {
-    margin-right: 10px;
-    font-weight: $gl-font-weight-normal;
+.ci-variable-row {
+  display: flex;
+  align-items: flex-start;
 
-    &[for='custom'] {
-      margin-right: 0;
-    }
+  @include media-breakpoint-down(xs) {
+    align-items: flex-end;
   }
 
-  .cron-interval-input-wrapper {
-    padding-left: 0;
-  }
+  &:not(:last-child) {
+    margin-bottom: $gl-btn-padding;
 
-  .cron-interval-input {
-    margin: 10px 10px 0 0;
+    @include media-breakpoint-down(xs) {
+      margin-bottom: 3 * $gl-btn-padding;
+    }
   }
-}
 
-.pipeline-schedule-table-row {
-  .branch-name-cell {
-    max-width: 300px;
-  }
+  &:last-child {
+    .ci-variable-body-item:last-child {
+      margin-right: $ci-variable-remove-button-width;
 
-  a {
-    color: var(--gl-text-color, $gl-text-color);
-  }
+      @include media-breakpoint-down(xs) {
+        margin-right: 0;
+      }
+    }
+
+    .ci-variable-row-remove-button {
+      display: none;
+    }
 
-  svg {
-    vertical-align: middle;
+    @include media-breakpoint-down(xs) {
+      .ci-variable-row-body {
+        margin-right: $ci-variable-remove-button-width;
+      }
+    }
   }
 }
 
-.pipeline-schedules-user-callout {
-  .bordered-box.content-block {
-    border: 1px solid var(--border-color, $border-color);
-    background-color: transparent;
+.ci-variable-row-body {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-bottom: $gl-padding;
+
+  @include media-breakpoint-down(xs) {
+    display: block;
   }
 }
 
-.cron-preset-radio-input {
-  display: inline-block;
+.ci-variable-body-item {
+  flex: 1;
 
-  @include media-breakpoint-down(md) {
-    display: block;
-    margin: 0 0 5px 5px;
+  &:not(:last-child) {
+    margin-right: $gl-btn-padding;
+
+    @include media-breakpoint-down(xs) {
+      margin-right: 0;
+      margin-bottom: $gl-btn-padding;
+    }
   }
+}
 
-  input {
-    margin-right: 3px;
+.pipeline-schedule-form {
+  .gl-field-error {
+    margin: 10px 0 0;
+  }
+}
+
+.pipeline-schedule-table-row {
+  a {
+    color: var(--gl-text-color, $gl-text-color);
   }
 }