8 files changed, 239 insertions, 5 deletions

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/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
new file mode 100644
index 00000000000..4f26cd015e4
--- /dev/null
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -0,0 +1,103 @@
+.feature-highlight {
+  position: relative;
+  margin-left: $gl-padding;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 8px;
+    height: 8px;
+    background-color: $blue-500;
+    border-radius: 50%;
+    box-shadow: 0 0 0 rgba($blue-500, 0.4);
+    animation: pulse-highlight 2s infinite;
+  }
+
+  &:hover::before,
+  &.disable-animation::before {
+    animation: none;
+  }
+
+  &[disabled]::before {
+    display: none;
+  }
+}
+
+.is-showing-fly-out {
+  .feature-highlight {
+    display: none;
+  }
+}
+
+.feature-highlight-popover-content {
+  display: none;
+
+  hr {
+    margin: $gl-padding * 0.5 0;
+  }
+
+  .btn-link {
+    svg {
+      @include btn-svg;
+
+      path {
+        fill: currentColor;
+      }
+    }
+  }
+
+  .feature-highlight-illustration {
+    width: 100%;
+    height: 100px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
+    background-color: $indigo-50;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    border-bottom: 1px solid darken($gray-normal, 8%);
+  }
+}
+
+.popover .feature-highlight-popover-content {
+  display: block;
+}
+
+.feature-highlight-popover {
+  width: 240px;
+  padding: 0;
+  border: 1px solid $dropdown-border-color;
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+
+  &.right > .arrow {
+    border-right-color: $dropdown-border-color;
+  }
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.feature-highlight-popover-sub-content {
+  padding: 9px 14px;
+}
+
+@include keyframes(pulse-highlight) {
+  0% {
+    box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index 5621505996d..e378e84ca1b 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -16,3 +16,31 @@
     background-color: $user-mention-bg-hover;
   }
 }
+
+.gfm-color_chip {
+  display: inline-block;
+  margin: 0 0 2px 4px;
+  vertical-align: middle;
+  border-radius: 3px;
+
+  $chip-size: 0.9em;
+  $bg-size: $chip-size / 0.9;
+  $bg-pos: $bg-size / 2;
+
+  width: $chip-size;
+  height: $chip-size;
+  background: $white-light;
+  background-image: linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%),
+                    linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%);
+  background-size: $bg-size $bg-size;
+  background-position: 0 0, $bg-pos $bg-pos;
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    margin-bottom: 2px;
+    border-radius: 3px;
+    border: 1px solid $black-transparent;
+  }
+}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index fd5c3c81a53..2d015ef086b 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -20,7 +20,7 @@
     width: 100%;
   }
 
-  $image-widths: 250 306 394;
+  $image-widths: 250 306 394 430;
   @each $width in $image-widths {
     &.svg-#{$width} {
       img,
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 51ae09777fd..a6b1bf9b099 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -4,11 +4,17 @@
 
   .page-title {
     margin-top: 0;
+
+    .color-label {
+      font-size: $gl-font-size;
+      padding: $gl-vert-padding $label-padding-modal;
+    }
   }
 }
 
 .modal-body {
   background-color: $modal-body-bg;
+  line-height: $line-height-base;
   min-height: $modal-body-height;
   position: relative;
   padding: #{3 * $grid-size} #{2 * $grid-size};
diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
index 5f67126bafa..17c31d6b184 100644
--- a/app/assets/stylesheets/framework/secondary-navigation-elements.scss
+++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
@@ -82,6 +82,10 @@
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-xs-max) {
       width: 100%;
+
+      &.mobile-separator {
+        border-bottom: 1px solid $border-color;
+      }
     }
   }
 
@@ -168,9 +172,9 @@
         display: inline-block;
       }
 
-      // Applies on /dashboard/issues
       .project-item-select-holder {
         margin: 0;
+        width: 100%;
       }
     }
   }
@@ -340,7 +344,6 @@
 
 .project-item-select-holder.btn-group {
   display: flex;
-  max-width: 350px;
   overflow: hidden;
   float: right;
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f76c6866463..0d21a9f5f77 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -558,6 +558,7 @@ $jq-ui-default-color: #777;
 * Label
 */
 $label-padding: 7px;
+$label-padding-modal: 10px;
 $label-gray-bg: #f8fafc;
 $label-inverse-bg: #333;
 $label-remove-border: rgba(0, 0, 0, .1);
@@ -668,9 +669,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});
 
 
 /*