Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

22 files changed, 3617 insertions, 20 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 1e239877428..d1f7c2e9865 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -6,9 +6,10 @@
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
   a:not(.btn),
-  .btn-link:hover,
-  .btn-link:focus,
-  .btn-link:active {
+  .gl-button.btn-link,
+  .gl-button.btn-link:hover,
+  .gl-button.btn-link:focus,
+  .gl-button.btn-link:active {
     color: var(--ide-link-color, $blue-600);
   }
 
@@ -225,20 +226,20 @@
     @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
   }
 
-  .btn:not(.btn-link):not([disabled]):hover {
+  .btn:not(.gl-button):not(.btn-link):not([disabled]):hover {
     border-width: var(--ide-btn-hover-border-width, 1px);
     padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-sm:hover {
+  .btn:not(.gl-button):not([disabled]).btn-sm:hover {
     padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-block:hover {
+  .btn:not(.gl-button):not([disabled]).btn-block:hover {
     padding: calc-btn-hover-padding(6px) 0;
   }
 
-  .btn-default,
+  .btn-default:not(.gl-button),
   .dropdown,
   .dropdown-menu-toggle {
     background-color: var(--ide-input-background, $white) !important;
@@ -257,7 +258,7 @@
   }
 
   // In IDE, the only inverted buttons are `.btn-remove`
-  .btn-inverted.btn-remove {
+  .btn-inverted.btn-remove:not(.gl-button) {
     color: var(--ide-input-color, $red-500) !important;
     background-color: var(--ide-input-background, $white) !important;
     border-color: var(--ide-btn-default-border, $red-500);
@@ -276,17 +277,21 @@
     }
   }
 
-  .btn-default {
+  // todo: remove this block after all default buttons have been migrated to gl-button
+  .btn-default:not(.gl-button) {
+    background-color: var(--ide-btn-default-background, $white) !important;
+    border-color: var(--ide-btn-default-border, $border-color);
+
     &:hover,
     &:focus {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-normal) !important;
+      background-color: var(--ide-btn-default-background, $white-normal) !important;
     }
 
     &:active,
     .active {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-dark) !important;
+      background-color: var(--ide-btn-default-background, $white-dark) !important;
     }
   }
 
@@ -320,8 +325,9 @@
     border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
 
-  .btn-primary,
-  .btn-info {
+  // todo: remove this block after all primary/info buttons have been migrated to gl-button
+  .btn-primary:not(.gl-button),
+  .btn-info:not(.gl-button) {
     background-color: var(--ide-btn-primary-background, $blue-500);
     border-color: var(--ide-btn-primary-border, $blue-600) !important;
 
@@ -338,7 +344,8 @@
     }
   }
 
-  .btn-success {
+  // todo: remove this block after all success buttons have been migrated to gl-button
+  .btn-success:not(.gl-button) {
     background-color: var(--ide-btn-success-background, $green-500);
     border-color: var(--ide-btn-success-border, $green-600) !important;
 
@@ -355,12 +362,70 @@
     }
   }
 
-  .btn[disabled] {
+  // todo: remove this block after all disabled buttons have been migrated to gl-button
+  .btn[disabled]:not(.gl-button) {
     background-color: var(--ide-btn-default-background, $gray-light) !important;
     border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
     color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }
 
+  @function ide-btn-var($btn-type, $var-type, $value) {
+    @return var(--ide-btn-#{$btn-type}-#{$var-type}, $value);
+  }
+
+  @mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) {
+    background-color: ide-btn-var($btn-type, background, $bg-normal);
+    box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal);
+
+    &:hover,
+    &:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-hover);
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover),
+        0 2px 2px 0 $box-shadow-hover;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+
+    &:active:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-active);
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+  }
+
+  .btn-default.gl-button.gl-button {
+    color: var(--ide-input-color, $gl-text-color);
+
+    @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
+  }
+
+  .btn-success.gl-button.gl-button {
+    @include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900);
+  }
+
+  .btn-info.gl-button.gl-button,
+  .btn-primary.gl-button.gl-button {
+    @include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900);
+  }
+
+  .btn-danger.btn-danger-secondary.gl-button.gl-button {
+    color: var(--ide-input-color, $red-500);
+
+    @include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700);
+  }
+
+  .btn[disabled].gl-button.gl-button {
+    color: var(--ide-btn-disabled-color, $gl-text-color-disabled);
+
+    @include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent);
+  }
+
   .md table:not(.code) tbody {
     background-color: var(--ide-border-color, $white);
   }
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
new file mode 100644
index 00000000000..499394ad960
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -0,0 +1,233 @@
+@mixin flat-connector-before($length: 44px) {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 48%;
+    left: -$length;
+    border-top: 2px solid $border-color;
+    width: $length;
+    height: 1px;
+  }
+}
+
+@mixin build-content($border-radius: 30px) {
+  display: inline-block;
+  padding: 8px 10px 9px;
+  width: 100%;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white;
+
+  &:hover {
+    background-color: $gray-darker;
+    border: 1px solid $dropdown-toggle-active-border-color;
+    color: $gl-text-color;
+  }
+}
+
+@mixin mini-pipeline-graph-color(
+  $color-background-default,
+  $color-background-hover-focus,
+  $color-background-active,
+  $color-foreground-default,
+  $color-foreground-hover-focus,
+  $color-foreground-active
+) {
+  background-color: $color-background-default;
+  border-color: $color-foreground-default;
+
+  svg {
+    fill: $color-foreground-default;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-background-hover-focus;
+    border-color: $color-foreground-hover-focus;
+
+    svg {
+      fill: $color-foreground-hover-focus;
+    }
+  }
+
+  &:active {
+    background-color: $color-background-active;
+    border-color: $color-foreground-active;
+
+    svg {
+      fill: $color-foreground-active;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 4px 1px $blue-300;
+  }
+}
+
+@mixin mini-pipeline-item() {
+  border-radius: 100px;
+  background-color: $white;
+  border-width: 1px;
+  border-style: solid;
+  width: $ci-action-icon-size;
+  height: $ci-action-icon-size;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+
+  &:hover,
+  &:active,
+  &:focus {
+    outline: none;
+    border-width: 2px;
+  }
+
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+  }
+
+  &.ci-status-icon-failed {
+    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+  }
+
+  &.ci-status-icon-pending,
+  &.ci-status-icon-waiting-for-resource,
+  &.ci-status-icon-success-with-warnings {
+    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+  }
+
+  &.ci-status-icon-preparing,
+  &.ci-status-icon-running {
+    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+  }
+
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-scheduled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+  }
+
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+  }
+}
+
+/**
+ Action icons inside dropdowns:
+ - mini graph in pipelines table
+ - dropdown in big graph
+ - mini graph in MR widget pipeline
+ - mini graph in Commit widget pipeline
+*/
+@mixin pipeline-graph-dropdown-menu() {
+  width: 240px;
+  max-width: 240px;
+
+  // override dropdown.scss
+  &.dropdown-menu li button,
+  &.dropdown-menu li a.ci-action-icon-container {
+    padding: 0;
+    text-align: center;
+  }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
+      border-radius: 50%;
+      display: block;
+
+      &:hover {
+        box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
+        background-color: $gray-darker;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      .spinner,
+      svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: 1px;
+        vertical-align: initial;
+      }
+    }
+  }
+
+  // SVGs in the commit widget and mr widget
+  a.ci-action-icon-container.ci-action-icon-wrapper svg {
+    top: 5px;
+  }
+
+  .scrollable-menu {
+    padding: 0;
+    max-height: 245px;
+    overflow: auto;
+  }
+
+  li {
+    position: relative;
+
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
+    }
+
+    // link to the build
+    .mini-pipeline-graph-dropdown-item {
+      align-items: center;
+      clear: both;
+      display: flex;
+      font-weight: normal;
+      line-height: $line-height-base;
+      white-space: nowrap;
+
+      // Match dropdown.scss for all `a` tags
+      &.non-details-job-component {
+        padding: $gl-padding-8 $gl-btn-horz-padding;
+      }
+
+      .ci-job-name-component {
+        align-items: center;
+        display: flex;
+        flex: 1;
+      }
+
+      .ci-status-icon {
+        @include gl-mr-3;
+
+        position: relative;
+
+        > svg {
+          width: $pipeline-dropdown-status-icon-size;
+          height: $pipeline-dropdown-status-icon-size;
+          margin: 3px 0;
+          position: relative;
+          overflow: visible;
+          display: block;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        outline: none;
+        text-decoration: none;
+        background-color: $gray-darker;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
new file mode 100644
index 00000000000..e908e3622ed
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -0,0 +1,613 @@
+@import 'mixins_and_variables_and_functions';
+
+.user-can-drag {
+  cursor: grab;
+}
+
+.is-ghost {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.dropdown-projects {
+  .dropdown-content {
+    max-height: 200px;
+  }
+}
+
+.dropdown-menu-issues-board-new {
+  width: 320px;
+
+  .dropdown-content {
+    max-height: 140px;
+  }
+}
+
+.issue-board-dropdown-content {
+  margin: 0;
+  padding: $gl-padding-4 $gl-padding $gl-padding;
+  border-bottom: 0;
+  color: var(--gray-500, $gray-500);
+}
+
+.issue-boards-page {
+  .content-wrapper {
+    padding-bottom: 0;
+  }
+}
+
+.boards-app {
+  @include media-breakpoint-up(sm) {
+    transition: width $sidebar-transition-duration;
+    width: 100%;
+
+    &.is-compact {
+      width: calc(100% - #{$gutter-width});
+    }
+  }
+}
+
+.boards-list,
+.board-swimlanes {
+  height: calc(100vh - #{$issue-board-list-difference-xs});
+  overflow-x: scroll;
+  min-height: 200px;
+
+  @include media-breakpoint-only(sm) {
+    height: calc(100vh - #{$issue-board-list-difference-sm});
+  }
+
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - #{$issue-board-list-difference-md});
+  }
+
+  @include media-breakpoint-up(lg) {
+    height: calc(100vh - #{$issue-board-list-difference-lg});
+  }
+
+  .with-performance-bar & {
+    height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
+
+    @include media-breakpoint-only(sm) {
+      height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height});
+    }
+
+    @include media-breakpoint-up(md) {
+      height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
+    }
+
+    @include media-breakpoint-up(lg) {
+      height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height});
+    }
+  }
+}
+
+.board {
+  // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS
+  // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828
+  display: inline-block;
+  width: calc(85vw - 15px);
+
+  @include media-breakpoint-up(sm) {
+    width: 400px;
+  }
+
+  .board-title-caret {
+    border-radius: $border-radius-default;
+    line-height: $gl-spacing-scale-5;
+    height: $gl-spacing-scale-5;
+
+    &.btn svg {
+      top: 0;
+    }
+
+    &:hover {
+      background-color: var(--gray-50, $gray-50);
+      transition: background-color 0.1s linear;
+    }
+  }
+
+  &:not(.is-collapsed) {
+    .board-title-caret {
+      margin-right: $gl-padding-4;
+    }
+  }
+
+  &.is-collapsed {
+    width: 50px;
+
+    .board-title {
+      flex-direction: column;
+    }
+
+    .board-title-caret {
+      margin-top: 1px;
+    }
+
+    .user-avatar-link,
+    .milestone-icon {
+      margin-top: $gl-padding-8;
+      transform: rotate(90deg);
+    }
+
+    .board-title-text {
+      flex-grow: 0;
+      margin: $gl-padding-8 0;
+
+      .board-title-main-text {
+        display: block;
+      }
+
+      .board-title-sub-text {
+        display: none;
+      }
+    }
+
+    .issue-count-badge {
+      border: 0;
+      white-space: nowrap;
+      padding: 0;
+    }
+
+    .board-title-text > span,
+    .issue-count-badge > span {
+      height: 16px;
+
+      // Force the height to be equal to the parent's width while centering the contents.
+      // The contents *should* be about 16 px.
+      // We do this because the flow of elements isn't affected by the rotate transform, so we must ensure that a
+      // rotated element has square dimensions so it won't overlap with its siblings.
+      margin: calc(50% - 8px) 0;
+
+      transform: rotate(90deg);
+      transform-origin: center;
+    }
+  }
+}
+
+.board-inner {
+  font-size: $issue-boards-font-size;
+  background: var(--gray-10, $gray-10);
+  border: 1px solid var(--gray-100, $gray-100);
+}
+
+.board-header {
+  &.has-border::before {
+    border-top: 3px solid;
+    border-color: inherit;
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+    content: '';
+    position: absolute;
+    width: calc(100% + 2px);
+    top: 0;
+    left: 0;
+    margin-top: -1px;
+    margin-right: -1px;
+    margin-left: -1px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-left: 1px;
+
+    .board-title {
+      padding-top: ($gl-padding - 3px);
+      padding-bottom: $gl-padding;
+    }
+  }
+}
+
+.board-title {
+  align-items: center;
+  font-size: 1em;
+  border-bottom: 1px solid var(--gray-100, $gray-100);
+  padding: 0 $gl-spacing-scale-3;
+  height: 3rem;
+
+  .js-max-issue-size::before {
+    content: '/';
+  }
+}
+
+.board-title-text {
+  flex-grow: 1;
+}
+
+.board-delete.gl-button {
+  background-color: transparent;
+  outline: 0;
+
+  &:hover {
+    color: var(--blue-600, $blue-600);
+    box-shadow: none;
+  }
+}
+
+.board-blank-state,
+.board-promotion-state {
+  background-color: var(--white, $white);
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.board-blank-state-list {
+  > li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .label-color {
+    top: 2px;
+    width: 16px;
+    height: 16px;
+    margin-right: 3px;
+  }
+}
+
+.board-list-component {
+  min-height: 0; // firefox fix
+}
+
+.board-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.board-list-loading {
+  margin-top: 10px;
+  font-size: (26px / $issue-boards-font-size) * 1em;
+}
+
+.board-card {
+  background: var(--white, $white);
+  border: 1px solid var(--gray-100, $gray-100);
+  box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1);
+  line-height: $gl-padding;
+  list-style: none;
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: $gl-padding-8;
+  }
+
+  &.is-active,
+  &.is-active .board-card-assignee:hover a {
+    background-color: var(--blue-50, $blue-50);
+  }
+
+  &.multi-select {
+    border-color: var(--blue-200, $blue-200);
+    background-color: var(--blue-50, $blue-50);
+  }
+
+  .gl-label {
+    margin-top: 4px;
+    margin-right: 4px;
+  }
+
+  .confidential-icon {
+    color: var(--orange-500, $orange-500);
+    cursor: help;
+  }
+
+  .issue-blocked-icon {
+    color: var(--red-500, $red-500);
+  }
+
+  @include media-breakpoint-down(md) {
+    padding: $gl-padding-8;
+  }
+}
+
+.board-card-title {
+  @include overflow-break-word();
+  font-size: 1em;
+
+  a {
+    color: var(--gray-900, $gray-900);
+  }
+
+  @include media-breakpoint-down(md) {
+    font-size: $label-font-size;
+  }
+}
+
+.board-card-header {
+  text-align: initial;
+}
+
+.board-card-assignee {
+  margin-top: -$gl-padding-4;
+  margin-bottom: -$gl-padding-4;
+
+  .avatar-counter {
+    vertical-align: middle;
+    line-height: $gl-padding-24;
+    min-width: $gl-padding-24;
+    height: $gl-padding-24;
+    border-radius: $gl-padding-24;
+    background-color: var(--gray-400, $gray-400);
+    font-size: $gl-font-size-xs;
+    cursor: help;
+    font-weight: $gl-font-weight-bold;
+    margin-left: -$gl-padding-4;
+    border: 0;
+    padding: 0 $gl-padding-4;
+
+    @include media-breakpoint-down(md) {
+      min-width: auto;
+      height: $gl-padding;
+      border-radius: $gl-padding;
+      line-height: $gl-padding;
+    }
+  }
+
+  img {
+    vertical-align: top;
+  }
+
+  .user-avatar-link:not(:only-child) {
+    margin-left: -$gl-padding-4;
+
+    &:nth-of-type(1) {
+      z-index: 2;
+    }
+
+    &:nth-of-type(2) {
+      z-index: 1;
+    }
+  }
+
+  .avatar {
+    @include media-breakpoint-down(md) {
+      width: $gl-padding;
+      height: $gl-padding;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.board-card-number {
+  font-size: $gl-font-size-xs;
+  color: var(--gray-500, $gray-500);
+
+  @include media-breakpoint-up(md) {
+    font-size: $label-font-size;
+  }
+}
+
+.board-list-count {
+  padding: 10px 0;
+  color: var(--gray-500, $gray-500);
+  font-size: 13px;
+}
+
+.board-new-issue-form {
+  z-index: 4;
+  margin: 5px;
+}
+
+.right-sidebar.issue-boards-sidebar {
+  .gutter-toggle {
+    bottom: 15px;
+    width: 22px;
+    padding-left: $gl-padding-32;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      margin-top: (-11px / 2);
+      height: $gl-font-size-12;
+      width: $gl-font-size-12;
+    }
+  }
+
+  .issuable-header-text {
+    @include overflow-break-word();
+    padding-right: 35px;
+  }
+}
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.add-issues-modal {
+  background-color: rgba($black, 0.3);
+  z-index: 9999;
+}
+
+.add-issues-container {
+  width: 90vw;
+  height: 85vh;
+  max-width: 1100px;
+  min-height: 500px;
+  padding: 25px 15px 0;
+  background-color: var(--white, $white);
+  box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5);
+
+  .empty-state {
+    &.add-issues-empty-state-filter {
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .svg-content {
+      margin-top: -40px;
+    }
+  }
+}
+
+.add-issues-header {
+  margin: -25px -15px -5px;
+  border-bottom: 1px solid $border-color;
+  border-top-right-radius: $border-radius-default;
+  border-top-left-radius: $border-radius-default;
+
+  > h2 {
+    font-size: 18px;
+  }
+}
+
+.add-issues-list-column {
+  width: 100%;
+
+  @include media-breakpoint-up(sm) {
+    width: 50%;
+  }
+
+  @include media-breakpoint-up(md) {
+    width: (100% / 3);
+  }
+}
+
+.add-issues-list {
+  padding-top: 3px;
+  margin-left: -$gl-vert-padding;
+  margin-right: -$gl-vert-padding;
+  overflow-y: scroll;
+
+  .board-card-parent {
+    padding: 0 5px 5px;
+  }
+
+  .board-card {
+    border: 1px solid var(--gray-900, $gray-900);
+    box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4);
+    cursor: pointer;
+  }
+}
+
+.add-issues-footer {
+  margin: auto -15px 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-bottom-right-radius: $border-radius-default;
+  border-bottom-left-radius: $border-radius-default;
+}
+
+.add-issues-footer-to-list {
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  line-height: $input-height;
+}
+
+.issue-card-selected {
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 17px;
+  background-color: var(--blue-500, $blue-500);
+  color: $white;
+  border: 1px solid var(--blue-600, $blue-600);
+  font-size: 9px;
+  line-height: 15px;
+  border-radius: 50%;
+}
+
+.board-card-info {
+  color: var(--gray-500, $gray-500);
+  white-space: nowrap;
+  margin-right: $gl-padding-8;
+
+  &:not(.board-card-weight) {
+    cursor: help;
+  }
+
+  &.board-card-weight {
+    color: var(--gray-500, $gray-500);
+    cursor: pointer;
+
+    &:hover {
+      color: initial;
+      text-decoration: underline;
+    }
+  }
+
+  .board-card-info-icon {
+    color: var(--gray-500, $gray-500);
+    margin-right: $gl-padding-4;
+    vertical-align: text-top;
+  }
+
+  @include media-breakpoint-down(md) {
+    font-size: $label-font-size;
+  }
+}
+
+.board-issue-path.js-show-tooltip {
+  cursor: help;
+}
+
+.board-labels-toggle-wrapper,
+.board-swimlanes-toggle-wrapper {
+  /**
+   * Make the wrapper the same height as a button so it aligns properly when the
+   * filtered-search-box input element increases in size on Linux smaller breakpoints
+   */
+  height: $input-height;
+}
+
+.issue-boards-content.is-focused {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: var(--white, $white);
+  z-index: 9000;
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 10px;
+  }
+
+  .boards-list {
+    height: calc(100vh - #{$issue-boards-filter-height});
+    overflow-x: scroll;
+  }
+
+  .issue-boards-sidebar {
+    height: 100%;
+    top: 0;
+  }
+}
+
+.board-swimlanes {
+  overflow-x: auto;
+}
+
+.board-header-collapsed-info-icon:hover {
+  color: var(--gray-900, $gray-900);
+}
+
+$epic-icons-spacing: 40px;
+
+.board-epic-lane {
+  max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
+
+  .page-with-icon-sidebar & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
+  }
+
+  .page-with-icon-sidebar .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+
+  .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
new file mode 100644
index 00000000000..3a5e2e4159d
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -0,0 +1,355 @@
+@import 'mixins_and_variables_and_functions';
+
+#cycle-analytics,
+.cycle-analytics {
+  margin: 24px auto 0;
+  position: relative;
+
+  .landing {
+    margin-top: 0;
+
+    .inner-content {
+      white-space: normal;
+
+      h4,
+      p {
+        margin: 7px 0 0;
+        max-width: 480px;
+        padding: 0 $gl-padding;
+
+        @include media-breakpoint-down(sm) {
+          margin: 0 auto;
+        }
+      }
+    }
+
+    .svg-container svg {
+      width: 136px;
+      height: 136px;
+    }
+  }
+
+  .col-headers {
+    ul {
+      @include clearfix;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      display: inline-block;
+      float: left;
+      line-height: 50px;
+      width: 20%;
+    }
+
+    .stage-header {
+      width: 20.5%;
+    }
+
+    .median-header {
+      width: 19.5%;
+    }
+
+    .event-header {
+      width: 45%;
+    }
+
+    .total-time-header {
+      width: 15%;
+    }
+  }
+
+  .card {
+    .content-block {
+      padding: 24px 0;
+      border-bottom: 0;
+      position: relative;
+
+      @include media-breakpoint-down(xs) {
+        padding: 6px 0 24px;
+      }
+    }
+
+    .column {
+      text-align: center;
+
+      @include media-breakpoint-down(xs) {
+        padding: 15px 0;
+      }
+
+      .header {
+        font-size: 30px;
+        line-height: 38px;
+        font-weight: $gl-font-weight-normal;
+        margin: 0;
+      }
+
+      .text {
+        color: var(--gray-500, $gray-500);
+        margin: 0;
+      }
+
+      &:last-child {
+        @include media-breakpoint-down(xs) {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .stage-panel-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .stage-nav,
+  .stage-entries {
+    display: flex;
+    vertical-align: top;
+    font-size: $gl-font-size;
+  }
+
+  .stage-nav {
+    width: 40%;
+    margin-bottom: 0;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+    }
+
+    li {
+      @include clearfix;
+      list-style-type: none;
+    }
+
+    .stage-nav-item {
+      line-height: 65px;
+
+      &.active {
+        background: var(--blue-50, $blue-50);
+        border-color: var(--blue-300, $blue-300);
+        box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
+      }
+
+      &:hover:not(.active) {
+        background-color: var(--gray-10, $gray-10);
+        box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
+        cursor: pointer;
+      }
+
+      .stage-nav-item-cell.stage-name {
+        width: 44.5%;
+      }
+
+      .stage-nav-item-cell.stage-median {
+        min-width: 43%;
+      }
+
+      .stage-empty,
+      .not-available {
+        color: var(--gray-500, $gray-500);
+      }
+    }
+  }
+
+  .stage-panel-container {
+    width: 100%;
+    overflow: auto;
+  }
+
+  .stage-panel {
+    min-width: 968px;
+
+    .card-header {
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .events-description {
+      line-height: 65px;
+      padding: 0 $gl-padding;
+    }
+
+    .events-info {
+      color: var(--gray-500, $gray-500);
+    }
+  }
+
+  .stage-events {
+    width: 60%;
+    min-height: 467px;
+  }
+
+  .stage-event-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .stage-event-item {
+    @include clearfix;
+    list-style-type: none;
+    padding: 0 0 $gl-padding;
+    margin: 0 $gl-padding $gl-padding;
+    border-bottom: 1px solid var(--gray-50, $gray-50);
+
+    &:last-child {
+      border-bottom: 0;
+      margin-bottom: 0;
+    }
+
+    .item-details,
+    .item-time {
+      float: left;
+    }
+
+    .item-details {
+      width: 75%;
+    }
+
+    .item-title {
+      margin: 0 0 2px;
+
+      &.issue-title,
+      &.commit-title,
+      &.merge-request-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+        display: block;
+
+        a {
+          color: var(--gl-text-color, $gl-text-color);
+        }
+      }
+    }
+
+    .item-time {
+      width: 25%;
+      text-align: right;
+    }
+
+    .total-time {
+      font-size: $cycle-analytics-big-font;
+      color: var(--gl-text-color, $gl-text-color);
+
+      span {
+        color: var(--gl-text-color, $gl-text-color);
+        font-size: $gl-font-size;
+      }
+    }
+
+    .issue-date,
+    .build-date {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+
+    .mr-link,
+    .issue-link,
+    .commit-author-link,
+    .issue-author-link {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+
+    // Custom CSS for components
+    .item-conmmit-component {
+      .commit-icon {
+        svg {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          vertical-align: bottom;
+        }
+      }
+    }
+
+    .merge-request-branch {
+      a {
+        max-width: 180px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+  }
+
+  // Custom Styles for stage items
+  .item-build-component {
+    .item-title {
+      .icon-build-status {
+        float: left;
+        margin-right: 5px;
+        position: relative;
+        top: 2px;
+      }
+
+      .item-build-name {
+        color: var(--gl-text-color, $gl-text-color);
+      }
+
+      .pipeline-id {
+        color: var(--gl-text-color, $gl-text-color);
+        padding: 0 3px 0 0;
+      }
+
+      .ref-name {
+        color: var(--gray-900, $gray-900);
+        display: inline-block;
+        max-width: 180px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        line-height: 1.3;
+        vertical-align: top;
+      }
+
+      .commit-sha {
+        color: var(--blue-600, $blue-600);
+        line-height: 1.3;
+        vertical-align: top;
+        font-weight: $gl-font-weight-normal;
+      }
+
+      .fa {
+        color: var(--gray-500, $gray-500);
+        font-size: $code-font-size;
+      }
+    }
+  }
+
+  .empty-stage,
+  .no-access-stage {
+    text-align: center;
+    width: 75%;
+    margin: 0 auto;
+    padding-top: 130px;
+    color: var(--gray-500, $gray-500);
+
+    h4 {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+  }
+
+  .empty-stage {
+    .icon-no-data {
+      height: 36px;
+      width: 78px;
+      display: inline-block;
+      margin-bottom: 20px;
+    }
+  }
+
+  .no-access-stage {
+    .icon-lock {
+      height: 36px;
+      width: 78px;
+      display: inline-block;
+      margin-bottom: 20px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss
new file mode 100644
index 00000000000..5c6019efce6
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/dev_ops_report.scss
@@ -0,0 +1,261 @@
+@import 'mixins_and_variables_and_functions';
+
+$space-between-cards: 8px;
+
+.devops-empty svg {
+  margin: 64px auto 32px;
+  max-width: 420px;
+}
+
+.devops-header {
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+
+  .devops-header-title {
+    font-size: 48px;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .devops-header-subtitle {
+    font-size: 22px;
+    line-height: 1;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+    margin-left: 8px;
+    font-weight: $gl-font-weight-normal;
+
+    .devops-header-icon {
+      vertical-align: px-to-rem(-$gl-spacing-scale-1);
+    }
+
+    a {
+      font-size: 18px;
+      color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+
+      &:hover {
+        color: var(--blue-500, $blue-500);
+      }
+    }
+  }
+}
+
+.devops-cards {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.devops-card-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: center;
+  width: 50%;
+  border-color: var(--border-color, $border-color);
+  margin: 0 0 32px;
+  padding: $space-between-cards / 2;
+  position: relative;
+
+  @include media-breakpoint-up(xs) {
+    width: percentage(1 / 4);
+  }
+
+  @include media-breakpoint-up(sm) {
+    width: percentage(1 / 5);
+  }
+
+  @include media-breakpoint-up(md) {
+    width: percentage(1 / 6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: percentage(1 / 10);
+  }
+}
+
+.devops-card {
+  border: solid 1px var(--border-color, $border-color);
+  border-radius: 3px;
+  border-top-width: 3px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.devops-card-low {
+  border-top-color: var(--red-400, $red-400);
+
+  .board-card-score-big {
+    background-color: var(--red-50, $red-50);
+  }
+}
+
+.devops-card-average {
+  border-top-color: var(--orange-200, $orange-200);
+
+  .board-card-score-big {
+    background-color: var(--orange-50, $orange-50);
+  }
+}
+
+.devops-card-high {
+  border-top-color: var(--green-400, $green-400);
+
+  .board-card-score-big {
+    background-color: var(--green-50, $green-50);
+  }
+}
+
+.devops-card-title {
+  margin: $gl-padding auto auto;
+  max-width: 100px;
+
+  h3 {
+    font-size: 14px;
+    margin: 0 0 2px;
+  }
+
+  .light-text {
+    font-size: 13px;
+    line-height: 1.25;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+  }
+}
+
+.board-card-scores {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: $gl-padding $gl-btn-padding;
+  line-height: 1;
+}
+
+.board-card-score {
+  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+
+  .board-card-score-name {
+    font-size: 13px;
+    margin-top: 4px;
+  }
+}
+
+.board-card-score-value {
+  font-size: 16px;
+  color: var(--gl-text-color, $gl-text-color);
+  font-weight: $gl-font-weight-normal;
+}
+
+.board-card-score-big {
+  border-top: 2px solid var(--border-color, $border-color);
+  border-bottom: 1px solid var(--border-color, $border-color);
+  font-size: 22px;
+  padding: 10px 0;
+  font-weight: $gl-font-weight-normal;
+}
+
+.board-card-buttons {
+  display: flex;
+
+  > * {
+    font-size: 16px;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+    padding: 10px;
+    flex-grow: 1;
+
+    &:hover {
+      background-color: var(--border-color, $border-color);
+      color: var(--border-color, $border-color);
+    }
+
+    + * {
+      border-left: solid 1px var(--border-color, $border-color);
+    }
+  }
+}
+
+.devops-steps {
+  margin-top: $gl-padding;
+  height: 1px;
+  min-width: 100%;
+  justify-content: space-around;
+  position: relative;
+  background: var(--border-color, $border-color);
+}
+
+.devops-step {
+  $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%;
+  @each $pos in $step-positions {
+    $i: index($step-positions, $pos);
+
+    &:nth-child(#{$i}) {
+      left: $pos;
+    }
+  }
+
+  position: absolute;
+  transform-origin: 75% 50%;
+  padding: 8px;
+  height: 50px;
+  width: 50px;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: solid 1px var(--border-color, $border-color);
+  background: var(--white, $white);
+  transform: translate(-50%, -50%);
+  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+  fill: var(--gl-text-color-secondary, $gl-text-color-secondary);
+  box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color);
+
+  &:hover {
+    padding: 8px 10px;
+    fill: currentColor;
+    z-index: 100;
+    height: auto;
+    width: auto;
+
+    .devops-step-title {
+      max-height: 2em;
+      opacity: 1;
+      transition: opacity 0.2s;
+    }
+
+    svg {
+      transform: scale(1.5);
+      margin: $gl-btn-padding;
+    }
+  }
+
+  svg {
+    transition: transform 0.1s;
+    width: 30px;
+    height: 30px;
+    min-height: 30px;
+    min-width: 30px;
+  }
+}
+
+.devops-step-title {
+  max-height: 0;
+  opacity: 0;
+  text-transform: uppercase;
+  margin: $gl-vert-padding 0 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.devops-high-score {
+  color: var(--green-400, $green-400);
+}
+
+.devops-average-score {
+  color: var(--orange-500, $orange-500);
+}
+
+.devops-low-score {
+  color: var(--red-400, $red-400);
+}
diff --git a/app/assets/stylesheets/page_bundles/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss
new file mode 100644
index 00000000000..871f118ea9d
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/environments.scss
@@ -0,0 +1,131 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.environments-container {
+  .ci-table {
+    .commit-title {
+      margin: 0;
+    }
+
+    .external-url,
+    .dropdown-new {
+      color: var(--gray-500, $gray-500);
+    }
+
+    .build-link,
+    .ref-name {
+      color: var(--gray-900, $gray-900);
+    }
+
+    .folder-icon {
+      margin-right: 3px;
+      color: var(--gray-500, $gray-500);
+      display: inline-block;
+      vertical-align: text-top;
+    }
+
+    .folder-name {
+      cursor: pointer;
+      color: var(--gray-500, $gray-500);
+      display: inline-block;
+    }
+
+    .icon-container {
+      width: 20px;
+      text-align: center;
+    }
+
+    .no-btn {
+      border: 0;
+      background: none;
+      outline: none;
+      width: 100%;
+      text-align: left;
+    }
+
+    .environment-child-row {
+      padding-left: 20px;
+    }
+  }
+}
+
+.gl-responsive-table-row {
+  .branch-commit {
+    max-width: 100%;
+  }
+}
+
+.folder-row {
+  border-left: 0;
+  border-right: 0;
+
+  @media (min-width: map-get($grid-breakpoints, md)-1) {
+    border-top: 0;
+  }
+}
+
+.x-axis path,
+.y-axis path,
+.label-x-axis-line,
+.label-y-axis-line {
+  fill: none;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+.x-axis path,
+.y-axis path {
+  stroke: var(--gray-300, $gray-300);
+}
+
+.label-x-axis-line,
+.label-y-axis-line {
+  stroke: var(--gray-100, $gray-100);
+}
+
+.y-axis {
+  line {
+    stroke: var(--gray-300, $gray-300);
+    stroke-width: 1;
+  }
+}
+
+.metric-area {
+  opacity: 0.25;
+}
+
+.rect-text-metric {
+  fill: var(--white, $white);
+  stroke-width: 1;
+  stroke: var(--gray-600, $gray-600);
+}
+
+.rect-axis-text {
+  fill: var(--white, $white);
+}
+
+.text-metric {
+  font-size: 12px;
+}
+
+.selected-metric-line {
+  stroke: var(--gray-900, $gray-900);
+  stroke-width: 1;
+}
+
+.deployment-line {
+  stroke: var(--white, $white);
+  stroke-width: 1;
+}
+
+.divider-line {
+  stroke-width: 1;
+  stroke: var(--gray-600, $gray-600);
+}
+
+.environments-actions {
+  .external-url,
+  .monitoring-url,
+  .terminal-button {
+    width: 38px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/error_tracking_details.scss b/app/assets/stylesheets/page_bundles/error_tracking_details.scss
new file mode 100644
index 00000000000..a47c5cc9b3e
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/error_tracking_details.scss
@@ -0,0 +1,51 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.error-details {
+  li {
+    @include gl-line-height-32;
+  }
+
+  .btn-outline-info {
+    color: var(--blue-500, $blue-500);
+    border-color: var(--blue-500, $blue-500);
+  }
+
+  .error-details-header {
+    border-bottom: 1px solid var(--border-color, $border-color);
+
+    @include media-breakpoint-down(xs) {
+      flex-flow: column;
+
+      .error-details-meta-culprit {
+        display: flex;
+      }
+
+      .error-details-options {
+        width: 100%;
+
+        .dropdown-toggle {
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+.stacktrace {
+  .file-title {
+    svg {
+      vertical-align: middle;
+      top: -1px;
+    }
+  }
+
+  .file-title-name {
+    &.limited-width {
+      max-width: 80%;
+    }
+  }
+
+  .line_content.old::before {
+    content: none !important;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/error_tracking_index.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
new file mode 100644
index 00000000000..65bddfb7890
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
@@ -0,0 +1,40 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.error-list {
+  .dropdown {
+    min-width: auto;
+  }
+
+  .sort-control {
+    .btn {
+      padding-right: 2rem;
+    }
+
+    .gl-dropdown-caret {
+      position: absolute;
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .error-list-table {
+      .table-col {
+        min-height: 68px;
+
+        &:last-child {
+          background-color: var(--gray-10, $gray-10);
+
+          &::before {
+            content: none !important;
+          }
+
+          div {
+            width: 100% !important;
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss
new file mode 100644
index 00000000000..337b5b001fe
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss
@@ -0,0 +1,96 @@
+@import 'mixins_and_variables_and_functions';
+
+.signup-page {
+  .page-wrap {
+    background-color: var(--gray-10, $gray-10);
+  }
+
+  .signup-box-container {
+    max-width: 960px;
+  }
+
+  .signup-box {
+    background-color: var(--white, $white);
+    box-shadow: 0 0 0 1px var(--border-color, $border-color);
+    border-radius: $border-radius;
+  }
+
+  .form-control {
+    &:active,
+    &:focus {
+      background-color: var(--white, $white);
+    }
+  }
+
+  .devise-errors {
+    h2 {
+      font-size: $gl-font-size;
+      color: var(--red-700, $red-700);
+    }
+  }
+
+  .omniauth-divider {
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-bottom: 1px solid var(--gray-100, $gray-100);
+      margin: $gl-padding-24 0;
+    }
+
+    &::before {
+      margin-right: $gl-padding;
+    }
+
+    &::after {
+      margin-left: $gl-padding;
+    }
+  }
+
+  .omniauth-btn {
+    width: 48%;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+
+    img {
+      width: $default-icon-size;
+      height: $default-icon-size;
+    }
+  }
+
+  .decline-page {
+    width: 350px;
+  }
+}
+
+.signup-page[data-page^='registrations:experience_levels'] {
+  $card-shadow-color: rgba(var(--black, $black), 0.2);
+
+  .page-wrap {
+    background-color: var(--white, $white);
+  }
+
+  .card-deck {
+    max-width: 828px;
+  }
+
+  .card {
+    transition: box-shadow 0.3s ease-in-out;
+  }
+
+  .card:hover {
+    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
+  }
+
+  @media (min-width: $breakpoint-sm) {
+    .card-deck .card {
+      margin: 0 $gl-spacing-scale-3;
+    }
+  }
+
+  .stretched-link:hover {
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
index 37e6be9849b..41f9a8e6db7 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -20,20 +20,28 @@
   --ide-btn-default-background: transparent;
   --ide-btn-default-border: #bfbfbf;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent;
   --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
 
-  --ide-btn-hover-border-width: 2px;
-
   --ide-dropdown-background: #404040;
   --ide-dropdown-hover-background: #525252;
 
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
index 0ef0834d8db..ccb6f7a333b 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
@@ -18,22 +18,30 @@
   --ide-input-color: #fff;
 
   --ide-btn-default-background: transparent;
-  --ide-btn-default-border: var(--ide-input-border);
+  --ide-btn-default-border: #d8d8d8;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: transparent;
   --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
 
-  --ide-btn-hover-border-width: 2px;
-
   --ide-dropdown-background: #004c61;
   --ide-dropdown-hover-background: #00617a;
 
diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
new file mode 100644
index 00000000000..8a958bdf0c5
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -0,0 +1,45 @@
+@import 'mixins_and_variables_and_functions';
+
+.issues-list {
+  &.manual-ordering {
+    background-color: var(--gray-10, $gray-10);
+    border-radius: $border-radius-default;
+    padding: $gl-padding-8;
+
+    .issue {
+      background-color: var(--white, $white);
+      margin-bottom: $gl-padding-8;
+      border-radius: $border-radius-default;
+      border: 1px solid var(--border-color, $border-color);
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+    }
+  }
+
+  .issue {
+    padding: 10px $gl-padding;
+    position: relative;
+
+    .title {
+      margin-bottom: 2px;
+    }
+
+    .issue-labels,
+    .author-link {
+      display: inline-block;
+    }
+
+    .icon-merge-request-unmerged {
+      height: 13px;
+      margin-bottom: 3px;
+    }
+  }
+}
+
+.user-can-drag {
+  cursor: grab;
+}
+
+.is-ghost {
+  opacity: 0.3;
+  pointer-events: none;
+}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index 83d16f29d49..b8cdd120e04 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -13,6 +13,7 @@ $atlaskit-border-color: #dfe1e6;
       padding-top: $gl-padding-4;
 
       .ak-button {
+        align-items: center;
         height: auto;
         margin-left: $btn-margin-5;
       }
@@ -20,6 +21,74 @@ $atlaskit-border-color: #dfe1e6;
   }
 }
 
+$header-height: 40px;
+
+.jira-connect-header {
+  border-bottom: 1px solid $gray-100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $header-height;
+  padding-left: 16px;
+  padding-right: 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.jira-connect-user {
+  float: right;
+  position: relative;
+  top: -30px;
+}
+
+.jira-connect-app {
+  margin-top: $header-height;
+  max-width: 600px;
+  padding-top: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.gl-mt-5 {
+  margin-top: 16px;
+}
+
+.heading-with-border {
+  border-bottom: 1px solid $gray-100;
+  display: inline-block;
+  padding-bottom: 16px;
+}
+
+svg {
+  fill: currentColor;
+
+  &.s16 {
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.ak-field-group label {
+  text-align: left;
+}
+
+.ak-button__appearance-primary {
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  svg {
+    align-self: center;
+    margin-left: 4px;
+  }
+}
+
 .subscriptions {
   tbody {
     tr {
@@ -31,3 +100,11 @@ $atlaskit-border-color: #dfe1e6;
     }
   }
 }
+
+.empty-subscriptions {
+  color: $gray-900;
+}
+
+.browser-limitations-notice {
+  margin-top: 32px;
+}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
new file mode 100644
index 00000000000..6725bf8f1a1
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
@@ -0,0 +1,13 @@
+@import 'mixins_and_variables_and_functions';
+
+.jira-connect-users-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: px-to-rem(350px);
+}
+
+.devise-layout-html body .navless-container {
+  @include media-breakpoint-down(xs) {
+    padding-top: 65px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
new file mode 100644
index 00000000000..b0655408edf
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -0,0 +1,316 @@
+@import 'mixins_and_variables_and_functions';
+// Disabled to use the color map for creating color schemes
+// scss-lint:disable ColorVariable
+$colors: (
+  white-header-head-neutral   : #e1fad7,
+  white-line-head-neutral     : #effdec,
+  white-button-head-neutral   : #9adb84,
+
+  white-header-head-chosen    : #baf0a8,
+  white-line-head-chosen      : #e1fad7,
+  white-button-head-chosen    : #52c22d,
+
+  white-header-origin-neutral : #e0f0ff,
+  white-line-origin-neutral   : #f2f9ff,
+  white-button-origin-neutral : #87c2fa,
+
+  white-header-origin-chosen  : #add8ff,
+  white-line-origin-chosen    : #e0f0ff,
+  white-button-origin-chosen  : #268ced,
+
+  white-header-not-chosen     : #f0f0f0,
+  white-line-not-chosen       : $gray-light,
+
+  dark-header-head-neutral   : rgba(#3f3, 0.2),
+  dark-line-head-neutral     : rgba(#3f3, 0.1),
+  dark-button-head-neutral   : #40874f,
+
+  dark-header-head-chosen    : rgba(#3f3, 0.33),
+  dark-line-head-chosen      : rgba(#3f3, 0.2),
+  dark-button-head-chosen    : #258537,
+
+  dark-header-origin-neutral : rgba(#2878c9, 0.4),
+  dark-line-origin-neutral   : rgba(#2878c9, 0.3),
+  dark-button-origin-neutral : #2a5c8c,
+
+  dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  dark-line-origin-chosen    : rgba(#2878c9, 0.4),
+  dark-button-origin-chosen  : #1d6cbf,
+
+  dark-header-not-chosen     : rgba(#fff, 0.25),
+  dark-line-not-chosen       : rgba(#fff, 0.1),
+
+  monokai-header-head-neutral   : rgba(#a6e22e, 0.25),
+  monokai-line-head-neutral     : rgba(#a6e22e, 0.1),
+  monokai-button-head-neutral   : #376b20,
+
+  monokai-header-head-chosen    : rgba(#a6e22e, 0.4),
+  monokai-line-head-chosen      : rgba(#a6e22e, 0.25),
+  monokai-button-head-chosen    : #39800d,
+
+  monokai-header-origin-neutral : rgba(#60d9f1, 0.35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, 0.15),
+  monokai-button-origin-neutral : #38848c,
+
+  monokai-header-origin-chosen  : rgba(#60d9f1, 0.5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, 0.35),
+  monokai-button-origin-chosen  : #3ea4b2,
+
+  monokai-header-not-chosen     : rgba(#76715d, 0.24),
+  monokai-line-not-chosen       : rgba(#76715d, 0.1),
+
+  solarized-light-header-head-neutral   : rgba(#859900, 0.37),
+  solarized-light-line-head-neutral     : rgba(#859900, 0.2),
+  solarized-light-button-head-neutral   : #afb262,
+
+  solarized-light-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-light-line-head-chosen      : rgba(#859900, 0.37),
+  solarized-light-button-head-chosen    : #94993d,
+
+  solarized-light-header-origin-neutral : rgba(#2878c9, 0.37),
+  solarized-light-line-origin-neutral   : rgba(#2878c9, 0.15),
+  solarized-light-button-origin-neutral : #60a1bf,
+
+  solarized-light-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-light-line-origin-chosen    : rgba(#2878c9, 0.37),
+  solarized-light-button-origin-chosen  : #2482b2,
+
+  solarized-light-header-not-chosen     : rgba(#839496, 0.37),
+  solarized-light-line-not-chosen       : rgba(#839496, 0.2),
+
+  solarized-dark-header-head-neutral   : rgba(#859900, 0.35),
+  solarized-dark-line-head-neutral     : rgba(#859900, 0.15),
+  solarized-dark-button-head-neutral   : #376b20,
+
+  solarized-dark-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-dark-line-head-chosen      : rgba(#859900, 0.35),
+  solarized-dark-button-head-chosen    : #39800d,
+
+  solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35),
+  solarized-dark-line-origin-neutral   : rgba(#2878c9, 0.15),
+  solarized-dark-button-origin-neutral : #086799,
+
+  solarized-dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-dark-line-origin-chosen    : rgba(#2878c9, 0.35),
+  solarized-dark-button-origin-chosen  : #0082cc,
+
+  solarized_dark_header_not_chosen     : rgba(#839496, 0.25),
+  solarized_dark_line_not_chosen       : rgba(#839496, 0.15),
+
+  none_header_head_neutral   : $gray-normal,
+  none_line_head_neutral     : $gray-normal,
+  none_button_head_neutral   : $gray-normal,
+
+  none_header_head_chosen    : $gray-darker,
+  none_line_head_chosen      : $gray-darker,
+  none_button_head_chosen    : $gray-darker,
+
+  none_header_origin_neutral : $gray-normal,
+  none_line_origin_neutral   : $gray-normal,
+  none_button_origin_neutral : $gray-normal,
+
+  none_header_origin_chosen  : $gray-darker,
+  none_line_origin_chosen    : $gray-darker,
+  none_button_origin_chosen  : $gray-darker,
+
+  none_header_not_chosen     : $gray-light,
+  none_line_not_chosen       : $gray-light
+
+);
+// scss-lint:enable ColorVariable
+
+@mixin color-scheme($color) {
+  .header.line_content,
+  .diff-line-num {
+    &.origin {
+      background-color: map-get($colors, #{$color}-header-origin-neutral);
+      border-color: map-get($colors, #{$color}-header-origin-neutral);
+
+      button {
+        background-color: map-get($colors, #{$color}-button-origin-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15);
+      }
+
+      &.selected {
+        background-color: map-get($colors, #{$color}-header-origin-chosen);
+        border-color: map-get($colors, #{$color}-header-origin-chosen);
+
+        button {
+          background-color: map-get($colors, #{$color}-button-origin-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15);
+        }
+      }
+
+      &.unselected {
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
+
+        button {
+          background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-origin-neutral);
+        }
+      }
+    }
+
+    &.head {
+      background-color: map-get($colors, #{$color}-header-head-neutral);
+      border-color: map-get($colors, #{$color}-header-head-neutral);
+
+      button {
+        background-color: map-get($colors, #{$color}-button-head-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15);
+      }
+
+      &.selected {
+        background-color: map-get($colors, #{$color}-header-head-chosen);
+        border-color: map-get($colors, #{$color}-header-head-chosen);
+
+        button {
+          background-color: map-get($colors, #{$color}-button-head-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15);
+        }
+      }
+
+      &.unselected {
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
+
+        button {
+          background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-head-neutral);
+        }
+      }
+    }
+  }
+
+  .line_content {
+    &.origin {
+      background-color: map-get($colors, #{$color}-line-origin-neutral);
+
+      &.selected {
+        background-color: map-get($colors, #{$color}-line-origin-chosen);
+      }
+
+      &.unselected {
+        background-color: map-get($colors, #{$color}-line-not-chosen);
+      }
+    }
+
+    &.head {
+      background-color: map-get($colors, #{$color}-line-head-neutral);
+
+      &.selected {
+        background-color: map-get($colors, #{$color}-line-head-chosen);
+      }
+
+      &.unselected {
+        background-color: map-get($colors, #{$color}-line-not-chosen);
+      }
+    }
+  }
+}
+
+#conflicts {
+  .white {
+    @include color-scheme('white'); }
+
+  .dark {
+    @include color-scheme('dark'); }
+
+  .monokai {
+    @include color-scheme('monokai'); }
+
+  .solarized-light {
+    @include color-scheme('solarized-light'); }
+
+  .solarized-dark {
+    @include color-scheme('solarized-dark'); }
+
+  .none {
+    .line_content.header {
+      button {
+        color: $gray-900;
+      }
+    }
+  }
+
+  .diff-wrap-lines .line_content {
+    white-space: normal;
+    min-height: 19px;
+  }
+
+  .line_content.header {
+    position: relative;
+
+    button {
+      border-radius: 2px;
+      font-size: 10px;
+      position: absolute;
+      right: 10px;
+      padding: 0;
+      outline: none;
+      color: var(--white, $white);
+      width: 75px; // static width to make 2 buttons have same width
+      height: 19px;
+    }
+  }
+
+  .btn-success .fa-spinner {
+    color: var(--white, $white);
+  }
+
+  .editor-wrap {
+    &.is-loading {
+      .editor {
+        display: none;
+      }
+
+      .loading {
+        display: block;
+      }
+    }
+
+    &.saved {
+      .editor {
+        border-top: solid 2px var(--green-300, $green-300);
+      }
+    }
+
+    .editor {
+      pre {
+        height: 350px;
+        border: 0;
+        border-radius: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .loading {
+      display: none;
+    }
+  }
+
+  .discard-changes-alert {
+    background-color: var(--gray-10, $gray-10);
+    text-align: right;
+    padding: $gl-padding-top $gl-padding;
+    color: var(--gl-text-color, $gl-text-color);
+
+    .discard-actions {
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  .resolve-conflicts-form {
+    h4 {
+      margin-top: 0;
+    }
+
+    .resolve-info {
+      @media(max-width: map-get($grid-breakpoints, lg)-1) {
+        margin-bottom: $gl-padding;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
new file mode 100644
index 00000000000..5553dffac05
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -0,0 +1,96 @@
+@import 'mixins_and_variables_and_functions';
+
+.compare-versions-container {
+  min-width: 0;
+}
+
+.diff-files-holder {
+  flex: 1;
+  min-width: 0;
+  z-index: 201;
+}
+
+.diff-tree-list {
+  position: -webkit-sticky;
+  position: sticky;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
+  top: $top-pos;
+  max-height: calc(100vh - #{$top-pos});
+  z-index: 202;
+
+  .with-system-header & {
+    top: $top-pos + $system-header-height;
+  }
+
+  .with-system-header.with-performance-bar & {
+    top: $top-pos + $system-header-height + $performance-bar-height;
+  }
+
+  .with-performance-bar & {
+    $performance-bar-top-pos: $performance-bar-height + $top-pos;
+    top: $performance-bar-top-pos;
+    max-height: calc(100vh - #{$performance-bar-top-pos});
+  }
+
+  .drag-handle {
+    bottom: 16px;
+    transform: translateX(10px);
+  }
+}
+
+.tree-list-holder {
+  height: 100%;
+
+  .file-row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.tree-list-scroll {
+  max-height: 100%;
+  padding-bottom: $grid-size;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.tree-list-search {
+  flex: 0 0 34px;
+
+  .form-control {
+    padding-left: 30px;
+  }
+}
+
+.tree-list-icon {
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+
+  &,
+  svg {
+    fill: var(--gray-400, $gray-400);
+  }
+}
+
+.tree-list-clear-icon {
+  right: 10px;
+  left: auto;
+  line-height: 0;
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    .diff-tree-list {
+      position: relative;
+      top: 0;
+      // !important is required to override inline styles of resizable sidebar
+      width: 100% !important;
+    }
+
+    .tree-list-holder {
+      max-height: calc(50px + 50vh);
+      padding-right: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
new file mode 100644
index 00000000000..858e13fc558
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -0,0 +1,254 @@
+@import 'mixins_and_variables_and_functions';
+
+$status-box-line-height: 26px;
+
+.issues-sortable-list .str-truncated {
+  max-width: 90%;
+}
+
+.milestones {
+  padding: $gl-padding-8;
+  margin-top: $gl-padding-8;
+  border-radius: $border-radius-default;
+  background-color: var(--gray-100, $gray-100);
+
+  .milestone {
+    border: 0;
+    padding: $gl-padding-top $gl-padding;
+    border-radius: $border-radius-default;
+    background-color: var(--white, $white);
+
+    &:not(:last-child) {
+      margin-bottom: $gl-padding-4;
+    }
+
+    h4 {
+      font-weight: $gl-font-weight-bold;
+    }
+
+    .progress {
+      width: 100%;
+      height: 6px;
+      margin-bottom: $gl-padding-4;
+    }
+
+    .milestone-progress,
+    .milestone-release-links {
+      a {
+        color: var(--blue-600, $blue-600);
+      }
+    }
+
+    .status-box {
+      font-size: $tooltip-font-size;
+      margin-top: 0;
+      margin-right: $gl-padding-4;
+      line-height: $status-box-line-height;
+
+      @include media-breakpoint-down(xs) {
+        line-height: unset;
+        padding: $gl-padding-4 $gl-input-padding;
+      }
+    }
+  }
+}
+
+.milestone-content {
+  .issues-count {
+    margin-right: 17px;
+    float: right;
+    width: 105px;
+  }
+
+  .issuable-row {
+    span {
+      a {
+        color: var(--gray-900, $gray-900);
+        word-wrap: break-word;
+      }
+
+      .gl-label-link {
+        color: inherit;
+      }
+    }
+  }
+
+  .card-header {
+    line-height: $line-height-base;
+    padding: 14px 16px;
+    display: flex;
+
+    .title {
+      flex: 1;
+      flex-grow: 2;
+    }
+
+    .counter {
+      flex: 0;
+      padding-left: 16px;
+    }
+  }
+}
+
+.milestone-sidebar {
+  .milestone-progress {
+    .title {
+      padding-top: 5px;
+    }
+
+    .progress {
+      height: 6px;
+      margin: 0;
+    }
+
+    .sidebar-collapsed-icon {
+      clear: both;
+      padding: 15px 5px 5px;
+
+      .progress {
+        margin: 5px 0;
+      }
+    }
+  }
+
+  .collapsed-milestone-date {
+    font-size: 12px;
+  }
+
+  .milestone-date {
+    display: block;
+  }
+
+  .date-separator {
+    line-height: 5px;
+  }
+
+  .remaining-days strong {
+    font-weight: $gl-font-weight-normal;
+  }
+
+  .milestone-stat {
+    float: left;
+    margin-right: 14px;
+  }
+
+  .milestone-stat:last-child {
+    margin-right: 0;
+  }
+
+  .right-sidebar-expanded & {
+    .gutter-toggle {
+      margin-bottom: $sidebar-milestone-toggle-bottom-margin;
+    }
+  }
+
+  .right-sidebar-collapsed & {
+    .milestone-progress {
+      padding-top: 0;
+    }
+
+    .reference {
+      border-top: 1px solid $border-gray-normal;
+    }
+  }
+}
+
+.milestone-issues-list,
+.milestone-merge_requests-list {
+  .issuable-detail {
+    display: block;
+    margin-top: 7px;
+
+    .issue-link {
+      display: inline-block;
+    }
+
+    .issuable-number {
+      color: var(--gray-500, $gray-500);
+      margin-right: 5px;
+    }
+
+    .avatar {
+      float: none;
+    }
+
+    > a:not(:last-of-type) {
+      margin-right: 5px;
+    }
+  }
+}
+
+.milestone-detail {
+  border-bottom: 1px solid var(--border-color, $border-color);
+}
+
+@include media-breakpoint-down(xs) {
+  .milestone-actions {
+    @include clearfix();
+    padding-top: $gl-vert-padding;
+
+    .btn:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.milestone-page-header {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .status-box {
+    margin-top: 0;
+    order: 1;
+  }
+
+  .milestone-buttons {
+    margin-left: auto;
+    order: 2;
+
+    .verbose {
+      display: none;
+    }
+  }
+
+  .header-text-content {
+    order: 3;
+    width: 100%;
+  }
+
+  @include media-breakpoint-up(xs) {
+    .milestone-buttons .verbose {
+      display: inline;
+    }
+
+    .header-text-content {
+      order: 2;
+      width: auto;
+    }
+
+    .milestone-buttons {
+      order: 3;
+    }
+  }
+}
+
+.issuable-row {
+  background-color: var(--white, $white);
+}
+
+.milestone-popover-instructions-list {
+  padding-left: 2em;
+
+  > li {
+    padding-left: 1em;
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .milestone-banner-text,
+  .milestone-banner-link {
+    display: inline;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
new file mode 100644
index 00000000000..8e7be629481
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -0,0 +1,484 @@
+@import 'mixins_and_variables_and_functions';
+@import './pipeline_mixins';
+
+/**
+ * Pipeline Page Bundle
+ *
+ * Styles used to render a single pipeline page.
+ *
+ * Includes its tabs:
+ *
+ * - [data-page='projects:pipelines:show']
+ * - [data-page='projects:pipelines:dag']
+ * - [data-page='projects:pipelines:builds']
+ * - [data-page='projects:pipelines:failures']
+ * - [data-page='projects:pipelines:tests']
+ * - ...
+ */
+
+.tab-pane {
+  .ci-table {
+    thead th {
+      border-top: 0;
+    }
+  }
+}
+
+.build-failures {
+  .build-state {
+    padding: 20px 2px;
+
+    .build-name {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .stage {
+      color: $gl-text-color-secondary;
+      font-weight: $gl-font-weight-normal;
+      vertical-align: middle;
+    }
+  }
+
+  .build-log {
+    border: 0;
+    line-height: initial;
+  }
+
+  .build-trace-row td {
+    border-top: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-top: 0;
+  }
+
+  .build-trace {
+    width: 100%;
+    text-align: left;
+    margin-top: $gl-padding;
+  }
+
+  .build-name {
+    width: 196px;
+
+    a {
+      font-weight: $gl-font-weight-bold;
+      color: $gl-text-color;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .build-actions {
+    width: 70px;
+    text-align: right;
+  }
+
+  .build-stage {
+    width: 140px;
+  }
+
+  .ci-status-icon-failed {
+    padding: 10px 0 10px 12px;
+    width: 12px + 24px; // padding-left + svg width
+  }
+
+  .build-icon svg {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+  }
+
+  .build-state,
+  .build-trace-row {
+    > td:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    td:empty {
+      display: none;
+    }
+
+    .ci-table {
+      margin-top: 2 * $gl-padding;
+    }
+
+    .build-trace-container {
+      padding-top: $gl-padding;
+      padding-bottom: $gl-padding;
+    }
+
+    .build-trace {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+}
+
+.pipeline-tab-content {
+  display: flex;
+  width: 100%;
+  min-height: $dropdown-max-height-lg;
+  background-color: $gray-light;
+  padding: $gl-padding 0;
+  overflow: auto;
+}
+
+// Pipeline graph, used at
+// app/assets/javascripts/pipelines/components/graph/graph_component.vue
+.pipeline-graph {
+  white-space: nowrap;
+  transition: max-height 0.3s, padding 0.3s;
+
+  .stage-column-list,
+  .builds-container > ul {
+    padding: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  .stage-column {
+    display: inline-block;
+    vertical-align: top;
+
+    &.left-margin {
+      &:not(:first-child) {
+        margin-left: 44px;
+
+        .left-connector {
+          @include flat-connector-before;
+        }
+      }
+    }
+
+    &.no-margin {
+      margin: 0;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    // when downstream pipelines are present, the last stage isn't the last column
+    &:last-child:not(.has-downstream) {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child::after {
+          border: 0;
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child)::after {
+          border: 0;
+        }
+        // Remove opposite curve
+        .curve::before {
+          display: none;
+        }
+      }
+    }
+
+    // when upstream pipelines are present, the first stage isn't the first column
+    &:first-child:not(.has-upstream) {
+      .build {
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child)::before {
+          border: 0;
+        }
+        // Remove opposite curve
+        .curve::after {
+          display: none;
+        }
+      }
+    }
+
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -31px;
+        border-top: 2px solid $border-color;
+      }
+
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
+
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
+    }
+  }
+
+  .stage-name {
+    margin: 0 0 15px 10px;
+    font-weight: $gl-font-weight-bold;
+    width: 176px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 2.2em;
+  }
+
+  .build {
+    position: relative;
+    width: 186px;
+    margin-bottom: 10px;
+    white-space: normal;
+
+    .ci-job-dropdown-container {
+      // override dropdown.scss
+      .dropdown-menu li button {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
+    // ensure .build-content has hover style when action-icon is hovered
+    .ci-job-dropdown-container:hover .build-content {
+      @extend .build-content:hover;
+    }
+
+    .ci-status-icon svg {
+      height: 24px;
+      width: 24px;
+    }
+
+    .dropdown-menu-toggle {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .build-content {
+      @include build-content();
+    }
+
+    a.build-content:hover,
+    button.build-content:hover {
+      background-color: $gray-darker;
+      border: 1px solid $dropdown-toggle-active-border-color;
+    }
+
+    // Connect first build in each stage with right horizontal line
+    &:first-child {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 48%;
+        right: -48px;
+        border-top: 2px solid $border-color;
+        width: 48px;
+        height: 1px;
+      }
+    }
+
+    // Connect each build (except for first) with curved lines
+    &:not(:first-child) {
+      &::after,
+      &::before {
+        content: '';
+        top: -49px;
+        position: absolute;
+        border-bottom: 2px solid $border-color;
+        width: 25px;
+        height: 69px;
+      }
+
+      // Right connecting curves
+      &::after {
+        right: -25px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 0 20px;
+      }
+
+      // Left connecting curves
+      &::before {
+        left: -25px;
+        border-left: 2px solid $border-color;
+        border-radius: 0 0 0 20px;
+      }
+    }
+
+    // Connect second build to first build with smaller curved line
+    &:nth-child(2) {
+      &::after,
+      &::before {
+        height: 29px;
+        top: -9px;
+      }
+
+      .curve {
+        display: block;
+      }
+    }
+  }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      border-radius: 100%;
+      display: block;
+      padding: 0;
+      line-height: 0;
+
+      svg {
+        fill: $gl-text-color-secondary;
+      }
+
+      .spinner {
+        top: 2px;
+      }
+
+      &.play {
+        svg {
+          left: 1px;
+          top: 1px;
+        }
+      }
+    }
+  }
+
+  .stage-action svg {
+    left: 1px;
+    top: -2px;
+  }
+}
+
+// Triggers the dropdown in the big pipeline graph
+.dropdown-counter-badge {
+  font-weight: 100;
+  font-size: 15px;
+  position: absolute;
+  right: 13px;
+  top: 8px;
+}
+
+.split-report-section {
+  border-bottom: 1px solid var(--gray-50, $gray-50);
+
+  .report-block-container {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .space-children,
+  .space-children > span {
+    display: flex;
+    align-self: center;
+  }
+
+  .media {
+    align-items: center;
+    padding: 10px;
+    line-height: 20px;
+
+    /*
+    This fixes the wrapping div of the icon in the report header.
+    Apparently the borderless status icons are half the size of the status icons with border.
+    This means we have to double the size of the wrapping div for borderless icons.
+    */
+    .space-children:first-child {
+      width: 32px;
+      height: 32px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  .code-text {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.big-pipeline-graph-dropdown-menu {
+  @include pipeline-graph-dropdown-menu();
+  width: 195px;
+  min-width: 195px;
+  left: 100%;
+  top: -10px;
+  box-shadow: 0 1px 5px $black-transparent;
+
+  /**
+   * Top arrow in the dropdown in the big pipeline graph
+   */
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: 18px;
+  }
+
+  &::before {
+    left: -6px;
+    margin-top: 3px;
+    border-width: 7px 5px 7px 0;
+    border-right-color: $border-color;
+  }
+
+  &::after {
+    left: -5px;
+    border-width: 10px 7px 10px 0;
+    border-right-color: $white;
+  }
+}
+
+.codequality-report {
+  .media {
+    padding: $gl-padding;
+  }
+
+  .media-body {
+    flex-direction: row;
+  }
+
+  .report-block-container {
+    height: auto !important;
+  }
+}
+
+.test-reports-table {
+  .build-trace {
+    @include build-trace();
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
new file mode 100644
index 00000000000..6ff07017d2e
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -0,0 +1,195 @@
+@import 'mixins_and_variables_and_functions';
+@import './pipeline_mixins';
+
+/**
+ * Pipelines Bundle: Pipeline lists and Mini Pipelines
+ */
+
+// Pipelines list
+// Should affect pipelines table components rendered by:
+// - app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+
+.pipelines {
+  .badge {
+    margin-bottom: 3px;
+  }
+
+  .pipeline-actions {
+    min-width: 170px; //Guarantees buttons don't break in several lines.
+
+    .btn-default {
+      color: $gl-text-color-secondary;
+    }
+
+    .btn.btn-retry:hover,
+    .btn.btn-retry:focus {
+      border-color: $dropdown-toggle-active-border-color;
+      background-color: $white-normal;
+    }
+
+    svg path {
+      fill: $gl-text-color-secondary;
+    }
+
+    .dropdown-menu {
+      max-height: $dropdown-max-height;
+      overflow-y: auto;
+    }
+
+    .dropdown-toggle,
+    .dropdown-menu {
+      color: $gl-text-color-secondary;
+
+      .fa {
+        color: $gl-text-color-secondary;
+        font-size: 14px;
+      }
+    }
+
+    .btn-group.open .btn-default {
+      background-color: $white-normal;
+      border-color: $border-white-normal;
+    }
+
+    .btn .text-center {
+      display: inline;
+    }
+
+    .tooltip {
+      white-space: nowrap;
+    }
+  }
+
+  .pipeline-tags .label-container {
+    white-space: normal;
+  }
+}
+
+// Mini Pipelines
+
+.stage-cell {
+  .mini-pipeline-graph-dropdown-toggle {
+    svg {
+      height: $ci-action-icon-size;
+      width: $ci-action-icon-size;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      z-index: 2;
+      overflow: visible;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        top: -2px;
+        left: -2px;
+      }
+    }
+  }
+
+  .stage-container {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    height: $ci-action-icon-size;
+    margin: 3px 0;
+
+    + .stage-container {
+      margin-left: 6px;
+    }
+
+    // Hack to show a button tooltip inline
+    button.has-tooltip + .tooltip {
+      min-width: 105px;
+    }
+
+    // Bootstrap way of showing the content inline for anchors.
+    a.has-tooltip {
+      white-space: nowrap;
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: '';
+        width: 7px;
+        position: absolute;
+        right: -7px;
+        top: 11px;
+        border-bottom: 2px solid $border-color;
+      }
+    }
+
+    //delete when all pipelines are updated to new size
+    &.mr-widget-pipeline-stages {
+      + .stage-container {
+        margin-left: 4px;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          width: 4px;
+          right: -4px;
+          top: 11px;
+        }
+      }
+    }
+  }
+}
+
+// Dropdown button in mini pipeline graph
+button.mini-pipeline-graph-dropdown-toggle {
+  @include mini-pipeline-item();
+}
+
+// Action icons inside dropdowns:
+// mini graph in pipelines table
+// mini graph in MR widget pipeline
+// mini graph in Commit widget pipeline
+.mini-pipeline-graph-dropdown-menu {
+  @include pipeline-graph-dropdown-menu();
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: -6px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    border-width: 0 5px 6px;
+
+    @include media-breakpoint-down(sm) {
+      left: 100%;
+      margin-left: -12px;
+    }
+  }
+
+  &::before {
+    border-width: 0 5px 5px;
+    border-bottom-color: $border-color;
+  }
+
+  &::after {
+    margin-top: 1px;
+    border-bottom-color: $white;
+  }
+
+  /**
+   * Center dropdown menu in mini graph
+   */
+  .dropdown &.dropdown-menu {
+    transform: translate(-80%, 0);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      transform: translate(-50%, 0);
+      right: auto;
+      left: 50%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss
new file mode 100644
index 00000000000..5a9dd454970
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/reports.scss
@@ -0,0 +1,94 @@
+@import 'mixins_and_variables_and_functions';
+
+.mr-widget-grouped-section {
+  .report-block-container {
+    max-height: 170px;
+    overflow: auto;
+  }
+
+  .report-block-list-issue-parent {
+    padding: $gl-padding-top $gl-padding;
+    border-top: 1px solid $border-color;
+  }
+}
+
+.report-block-container {
+  border-top: 1px solid $border-color;
+  padding: $gl-padding - 2;
+  background-color: $gray-light;
+
+  // Clean MR widget CSS
+  line-height: 20px;
+}
+
+.report-block-list {
+  list-style: none;
+  padding: 0 1px;
+  margin: 0;
+}
+
+.report-block-list-icon {
+  display: flex;
+
+  &.failed svg {
+    color: var(--red-500, $red-500);
+  }
+
+  &.success svg {
+    color: var(--green-500, $green-500);
+  }
+
+  &.neutral svg {
+    color: var(--gray-500, $gray-500);
+  }
+
+  .ci-status-icon {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.report-block-list-issue {
+  display: flex;
+}
+
+.is-dismissed .report-block-list-issue-description,
+.is-dismissed .vulnerability-name-button {
+  text-decoration: line-through;
+}
+
+.report-block-list-issue-description-text::after {
+  content: '\00a0';
+}
+
+.report-block-list-issue-description {
+  align-content: space-around;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  display: flex;
+  align-self: center;
+}
+
+.report-block {
+  .break-link {
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+}
+
+.report-block-issue-code {
+  width: 600px;
+}
+
+.modal-security-report-dast {
+  .modal-dialog {
+    max-width: $modal-lg;
+  }
+
+  // This is temporary till we get the new modals hooked up
+  &.modal-hide-footer .modal-footer {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/terminal.scss b/app/assets/stylesheets/page_bundles/terminal.scss
new file mode 100644
index 00000000000..627baf96d6f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/terminal.scss
@@ -0,0 +1,3 @@
+#terminal > div {
+  min-height: 450px;
+}
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
new file mode 100644
index 00000000000..eb34e7f3876
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -0,0 +1,159 @@
+@import 'mixins_and_variables_and_functions';
+
+.title .edit-wiki-header {
+  width: 780px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-right: 7px;
+}
+
+.wiki-page-header {
+  position: relative;
+
+  .wiki-breadcrumb {
+    border-bottom: 1px solid var(--gray-50, $gray-50);
+    padding: 11px 0;
+  }
+
+  .wiki-page-title {
+    margin: 0;
+    font-size: 22px;
+  }
+
+  .wiki-last-edit-by {
+    display: block;
+    color: var(--gray-500, $gray-500);
+
+    strong {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+  }
+
+  .light {
+    font-weight: $gl-font-weight-normal;
+    color: var(--gray-500, $gray-500);
+  }
+
+  .git-clone-holder {
+    .input-group-prepend,
+    .input-group-append {
+      background-color: transparent;
+    }
+  }
+
+  button.sidebar-toggle {
+    position: absolute;
+    right: 0;
+    top: 11px;
+    display: block;
+  }
+
+  &.has-sidebar-toggle .git-access-header {
+    padding-right: $sidebar-toggle-width;
+  }
+
+  @include media-breakpoint-up(md) {
+    &.has-sidebar-toggle {
+      padding-right: 0;
+    }
+
+    button.sidebar-toggle {
+      display: none;
+    }
+  }
+}
+
+.wiki-git-access {
+  margin: $gl-padding 0;
+
+  h3 {
+    font-size: 19px;
+    font-weight: $gl-font-weight-normal;
+    margin: $gl-padding 0;
+  }
+}
+
+.right-sidebar.wiki-sidebar {
+  padding: 0;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .sidebar-container {
+    padding: $gl-padding 0;
+    padding-right: 100px;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .blocks-container {
+    padding: 0 $gl-padding;
+  }
+
+  a {
+    color: var(--gray-400, $gray-400);
+
+    &:hover,
+    &.active {
+      text-decoration: none;
+
+      span {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .active > a {
+    color: var(--black, $black);
+  }
+
+  ul.wiki-pages,
+  ul.wiki-pages li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul.wiki-pages li {
+    margin: 5px 0 10px;
+  }
+
+  ul.wiki-pages ul {
+    padding-left: 15px;
+  }
+
+  .wiki-sidebar-header {
+    padding: 0 $gl-padding $gl-padding;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}
+
+ul.wiki-pages-list.content-list {
+  a {
+    color: var(--blue-600, $blue-600);
+  }
+
+  ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 15px;
+
+    li {
+      padding: 5px 0;
+    }
+  }
+}
+
+.empty-state-wiki .text-content {
+  max-width: 490px; // Widen to allow for the Confluence button
+}
+
+.wiki-form .markdown-area {
+  max-height: none;
+}