Merge branch 'refactor-ci-variable-list-for-future-usage-in-4110' into 'master'

Refactor CI variable list code for usage with CI/CD settings page secret variables

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

5 files changed, 96 insertions, 83 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index cff47ea76ec..c4aad24e9c1 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -60,3 +60,4 @@
 @import "framework/memory_graph";
 @import "framework/responsive_tables";
 @import "framework/stacked-progress-bar";
+@import "framework/ci_variable_list";
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d0b0c69b18f..c4b046a6d68 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -176,6 +176,11 @@
     &.btn-remove {
       @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
+
+    &.btn-primary,
+    &.btn-info {
+      @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
+    }
   }
 
   &.btn-gray {
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
new file mode 100644
index 00000000000..8f654ab363c
--- /dev/null
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -0,0 +1,88 @@
+.ci-variable-list {
+  margin-left: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  clear: both;
+}
+
+.ci-variable-row {
+  display: flex;
+  align-items: flex-end;
+
+  &:not(:last-child) {
+    margin-bottom: $gl-btn-padding;
+
+    @media (max-width: $screen-xs-max) {
+      margin-bottom: 3 * $gl-btn-padding;
+    }
+  }
+
+  &:last-child {
+    .ci-variable-body-item:last-child {
+      margin-right: $ci-variable-remove-button-width;
+
+      @media (max-width: $screen-xs-max) {
+        margin-right: 0;
+      }
+    }
+
+    .ci-variable-row-remove-button {
+      display: none;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .ci-variable-row-body {
+        margin-right: $ci-variable-remove-button-width;
+      }
+    }
+  }
+}
+
+.ci-variable-row-body {
+  display: flex;
+  width: 100%;
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+  }
+}
+
+.ci-variable-body-item {
+  flex: 1;
+
+  &:not(:last-child) {
+    margin-right: $gl-btn-padding;
+
+    @media (max-width: $screen-xs-max) {
+      margin-right: 0;
+      margin-bottom: $gl-btn-padding;
+    }
+  }
+}
+
+.ci-variable-protected-item {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+.ci-variable-row-remove-button {
+  @include transition(color);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $ci-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;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f76c6866463..1cc22f5658d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -668,9 +668,9 @@ $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
 
 /*
-Pipeline Schedules
+CI variable lists
 */
-$pipeline-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
+$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
 
 
 /*
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index b698a4f9afa..bc7fa8a26d9 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -78,84 +78,3 @@
     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;
-  }
-}