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

18 files changed, 1239 insertions, 190 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 136ff82e0f8..196fb3a7088 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -112,8 +112,7 @@ a {
 }
 
 .dropdown-menu a,
-.dropdown-menu button,
-.dropdown-menu-nav a {
+.dropdown-menu button {
   transition: none;
 }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a9c1652d00d..a8cc685d880 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -417,12 +417,6 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .btn-wide-on-xs {
-    width: 100%;
-  }
-}
-
 .btn-blank {
   padding: 0;
   background: transparent;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 714ef8b2175..8dbed9c03f2 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -324,15 +324,8 @@ img.emoji {
 }
 
 .project-item-select-holder {
-  display: inline-block;
-  position: relative;
-
   .project-item-select {
-    position: absolute;
-    top: 0;
-    right: 0;
     min-width: 250px;
-    visibility: hidden;
   }
 }
 
@@ -428,7 +421,6 @@ img.emoji {
 /** COMMON SIZING CLASSES **/
 .w-0 { width: 0; }
 .w-8em { width: 8em; }
-.w-3rem { width: 3rem; }
 .w-15p { width: 15%; }
 .w-30p { width: 30%; }
 .w-60p { width: 60%; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 7004bcc121d..48252762546 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -363,20 +363,30 @@
 // Collapsed nav
 
 .toggle-sidebar-button,
-.close-nav-button {
-  width: $contextual-sidebar-width - 1px;
+.close-nav-button,
+.toggle-right-sidebar-button {
   transition: width $sidebar-transition-duration;
-  position: fixed;
   height: $toggle-sidebar-height;
-  bottom: 0;
   padding: 0 $gl-padding;
   background-color: $gray-light;
   border: 0;
-  border-top: 1px solid $border-color;
   color: $gl-text-color-secondary;
   display: flex;
   align-items: center;
 
+  &:hover {
+    background-color: $border-color;
+    color: $gl-text-color;
+  }
+}
+
+.toggle-sidebar-button,
+.close-nav-button {
+  position: fixed;
+  bottom: 0;
+  width: $contextual-sidebar-width - 1px;
+  border-top: 1px solid $border-color;
+
   svg {
     margin-right: 8px;
   }
@@ -384,11 +394,10 @@
   .icon-chevron-double-lg-right {
     display: none;
   }
+}
 
-  &:hover {
-    background-color: $border-color;
-    color: $gl-text-color;
-  }
+.toggle-right-sidebar-button {
+  border-bottom: 1px solid $border-color;
 }
 
 .collapse-text {
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
new file mode 100644
index 00000000000..c0a2350d080
--- /dev/null
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -0,0 +1,1129 @@
+// Common
+.diff-file {
+  margin-bottom: $gl-padding;
+
+  &.conflict {
+    border-top: 1px solid $border-color;
+  }
+
+  .file-title,
+  .file-title-flex-parent {
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+    box-shadow: 0 -2px 0 0 var(--white);
+    cursor: pointer;
+
+    .dropdown-menu {
+      cursor: auto;
+    }
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      .file-header-content {
+        width: 0;
+        flex: 1;
+      }
+
+      .file-actions {
+        margin-left: $gl-spacing-scale-2;
+      }
+    }
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      // The `+11` is to ensure the file header border shows when scrolled -
+      // the bottom of the compare-versions header and the top of the file header
+      $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height + 11;
+
+      position: -webkit-sticky;
+      position: sticky;
+      top: $mr-file-header-top;
+      z-index: 120;
+
+      .with-system-header & {
+        top: $mr-file-header-top + $system-header-height;
+      }
+
+      .with-system-header.with-performance-bar & {
+        top: $mr-file-header-top + $system-header-height + $performance-bar-height;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -11px;
+        width: 10px;
+        height: calc(100% + 1px);
+        background: $white;
+        pointer-events: none;
+      }
+
+      .with-performance-bar & {
+        top: $mr-file-header-top + $performance-bar-height;
+      }
+
+      &.is-commit {
+        top: $header-height + $commit-stat-summary-height;
+
+        .with-performance-bar & {
+          top: $header-height + $commit-stat-summary-height + $performance-bar-height;
+        }
+      }
+
+      &.is-compare {
+        top: $header-height + $compare-branches-sticky-header-height;
+
+        .with-performance-bar & {
+          top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: $gray-normal;
+    }
+
+    svg {
+      vertical-align: middle;
+      top: -1px;
+    }
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    &.conflict .file-title,
+    &.conflict .file-title-flex-parent {
+      top: $header-height;
+    }
+
+    .with-performance-bar &.conflict .file-title,
+    .with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height;
+    }
+
+    .with-system-header &.conflict .file-title,
+    .with-system-header &.conflict .file-title-flex-parent {
+      top: $header-height + $system-header-height;
+    }
+
+    .with-system-header.with-performance-bar &.conflict .file-title,
+    .with-system-header.with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height + $system-header-height;
+    }
+  }
+
+  .diff-content {
+    background: $white;
+    color: $gl-text-color;
+    border-radius: 0 0 3px 3px;
+
+    .unfold {
+      cursor: pointer;
+    }
+
+    .file-mode-changed {
+      padding: 10px;
+      color: $gray-500;
+    }
+
+    .suppressed-container {
+      padding: ($padding-base-vertical + 5px) $padding-base-horizontal;
+      text-align: center;
+
+      // "Changes suppressed. Click to show." link
+      .show-suppressed-diff {
+        font-size: 110%;
+        font-weight: $gl-font-weight-bold;
+      }
+    }
+
+    .diff-loading-error-block {
+      padding: $gl-padding * 2 $gl-padding;
+      text-align: center;
+    }
+  }
+
+  .image {
+    background: $gray-darker;
+    text-align: center;
+    padding: 30px;
+
+    .wrap {
+      display: inline-block;
+    }
+
+    .frame {
+      display: inline-block;
+      background-color: $white;
+      line-height: 0;
+
+      img {
+        border: 1px solid $white;
+        background-image: linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%),
+          linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%);
+        background-size: 10px 10px;
+        background-position: 0 0, 5px 5px;
+        max-width: 100%;
+      }
+
+      &.deleted {
+        border: 1px solid $deleted;
+      }
+
+      &.added {
+        border: 1px solid $added;
+      }
+    }
+
+    .image-info {
+      font-size: 12px;
+      margin: 5px 0 0;
+      color: $diff-image-info-color;
+    }
+
+    .view.swipe {
+      position: relative;
+
+      .swipe-frame {
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+
+      .swipe-wrap {
+        overflow: hidden;
+        border-right: 1px solid $gray-300;
+        position: absolute;
+        display: block;
+        top: 13px;
+        right: 7px;
+
+        &.left-oriented {
+          /* only for commit view (different swipe viewer) */
+          border-right: 0;
+          border-left: 1px solid $gray-300;
+        }
+      }
+
+      .frame {
+        top: 0;
+        right: 0;
+
+        &.old-diff {
+          /* only for commit / compare view */
+          position: absolute;
+        }
+
+        &.deleted {
+          margin: 0;
+          display: block;
+          top: 13px;
+          right: 7px;
+        }
+      }
+
+      .swipe-bar {
+        display: block;
+        height: 100%;
+        width: 15px;
+        z-index: 100;
+        position: absolute;
+        cursor: pointer;
+
+        &:hover {
+          .top-handle {
+            background-position: -15px 3px;
+          }
+
+          .bottom-handle {
+            background-position: -15px -11px;
+          }
+        }
+
+        .top-handle {
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          top: 0;
+          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
+        }
+
+        .bottom-handle {
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          bottom: 0;
+          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
+        }
+      }
+    }
+
+    //.view.swipe
+    .view.onion-skin {
+      .onion-skin-frame {
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+
+      .frame.added,
+      .frame.deleted {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+      }
+
+      .controls {
+        display: block;
+        height: 14px;
+        width: 300px;
+        z-index: 100;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -150px;
+
+        .drag-track {
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 12px;
+          height: 10px;
+          width: 276px;
+          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
+        }
+
+        .dragger {
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 14px;
+          width: 14px;
+          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
+          cursor: pointer;
+        }
+
+        .transparent {
+          display: block;
+          position: absolute;
+          top: 2px;
+          right: 0;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
+        }
+
+        .opaque {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 0;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
+        }
+      }
+    }
+
+    //.view.onion-skin
+  }
+
+  .view-modes {
+    padding: 10px;
+    text-align: center;
+    background: $gray-darker;
+
+    ul,
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+
+    li {
+      color: $diff-view-modes-color;
+      border-left: 1px solid $diff-view-modes-border;
+      padding: 0 12px 0 16px;
+      cursor: pointer;
+
+      &:first-child {
+        border-left: 0;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.active {
+        cursor: default;
+        color: $gl-text-color;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      &.disabled {
+        display: none;
+      }
+    }
+  }
+
+  .diff-file-container {
+    .frame.deleted {
+      border: 1px solid $deleted;
+      background-color: inherit;
+    }
+
+    .frame.added {
+      border: 1px solid $added;
+      background-color: inherit;
+    }
+
+    .swipe.view,
+    .onion-skin.view {
+      .swipe-wrap {
+        top: 0;
+        left: 0;
+      }
+
+      .frame.deleted {
+        top: 0;
+        right: 0;
+      }
+
+      .swipe-bar {
+        top: 0;
+
+        .top-handle {
+          top: -14px;
+          left: -7px;
+        }
+
+        .bottom-handle {
+          bottom: -14px;
+          left: -7px;
+        }
+      }
+
+      .file-container {
+        display: inline-block;
+
+        .file-content {
+          padding: 0;
+
+          img {
+            max-width: none;
+          }
+        }
+      }
+    }
+
+    .onion-skin.view .controls {
+      bottom: -25px;
+    }
+  }
+
+  .discussion-notes .discussion-notes {
+    margin-left: 0;
+    border-left: 0;
+  }
+}
+
+table.code {
+  width: 100%;
+  font-family: $monospace-font;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+
+  tr:first-of-type.line_expansion > td {
+    border-top: 0;
+  }
+
+  tr:nth-last-of-type(2).line_expansion > td {
+    border-bottom: 0;
+  }
+
+  tr.line_holder td {
+    line-height: $code-line-height;
+    font-size: $code-font-size;
+    vertical-align: top;
+
+    span {
+      white-space: break-spaces;
+
+      &.context-cell {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+
+      &.line {
+        word-wrap: break-word;
+      }
+    }
+
+    &.diff-line-num {
+      user-select: none;
+      margin: 0;
+      padding: 0 10px 0 5px;
+      border-right-width: 1px;
+      border-right-style: solid;
+      text-align: right;
+      width: 50px;
+      position: relative;
+      white-space: nowrap;
+
+      a {
+        transition: none;
+        float: left;
+        width: 100%;
+        font-weight: $gl-font-weight-normal;
+
+        &[disabled] {
+          cursor: default;
+
+          &:hover,
+          &:active {
+            text-decoration: none;
+          }
+        }
+      }
+
+      &:not(.js-unfold-bottom) a::before {
+        content: attr(data-linenumber);
+      }
+    }
+
+    &.line_content {
+      display: block;
+      margin: 0;
+      padding: 0 1.5em;
+      border: 0;
+      position: relative;
+      white-space: pre-wrap;
+
+      &.parallel {
+        display: table-cell;
+        width: 46%;
+
+        span {
+          word-break: break-all;
+        }
+      }
+
+      &.old {
+        &::before {
+          content: '-';
+          position: absolute;
+          left: 0.5em;
+        }
+
+        &.with-coverage::before {
+          left: 0;
+        }
+      }
+
+      &.new {
+        &::before {
+          content: '+';
+          position: absolute;
+          left: 0.5em;
+        }
+
+        &.with-coverage::before {
+          left: 0;
+        }
+      }
+    }
+  }
+
+  .line_holder:last-of-type {
+    td:first-child {
+      border-bottom-left-radius: $border-radius-default;
+    }
+  }
+
+  &.left-side-selected {
+    td.line_content.parallel.right-side {
+      user-select: none;
+    }
+  }
+
+  &.right-side-selected {
+    td.line_content.parallel.left-side {
+      user-select: none;
+    }
+  }
+}
+
+.diff-stats {
+  align-items: center;
+  padding: 0 1rem;
+
+  .diff-stats-group {
+    padding: 0 0.25rem;
+  }
+
+  svg.diff-stats-icon {
+    vertical-align: text-bottom;
+  }
+
+  &.is-compare-versions-header {
+    .diff-stats-group {
+      padding: 0 0.25rem;
+    }
+  }
+}
+
+.file-content .diff-file {
+  margin: 0;
+  border: 0;
+}
+
+.diff-wrap-lines .line_content {
+  white-space: pre-wrap;
+}
+
+.inline-parallel-buttons {
+  float: right;
+}
+
+.files-changed {
+  border-bottom: 0;
+}
+
+.merge-request-details .file-content.image_file img {
+  max-height: 50vh;
+}
+
+.diff-stats-summary-toggler {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  color: $blue-600;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    color: $blue-800;
+  }
+
+  .caret-icon {
+    position: relative;
+    top: 2px;
+    left: -1px;
+  }
+}
+
+// Mobile
+@media (max-width: 480px) {
+  .diff-title {
+    margin: 0;
+
+    .file-mode {
+      display: none;
+    }
+  }
+
+  .diff-controls {
+    position: static;
+    text-align: center;
+  }
+}
+
+// Bigger screens
+@media (min-width: 481px) {
+  .diff-title {
+    margin-right: 200px;
+
+    .file-mode {
+      margin-left: 10px;
+    }
+  }
+
+  .diff-controls {
+    float: right;
+    position: absolute;
+    top: 5px;
+    right: 15px;
+  }
+}
+
+.files {
+  .diff-file:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.diff-comment-avatar-holders {
+  position: absolute;
+  margin-left: -$gl-padding;
+  z-index: 100;
+  @include code-icon-size();
+
+  &:hover {
+    .diff-comment-avatar,
+    .diff-comments-more-count {
+      @for $i from 1 through 4 {
+        $x-pos: 14px;
+
+        &:nth-child(#{$i}) {
+          @if $i == 4 {
+            $x-pos: 14.5px;
+          }
+
+          transform: translateX((($i * $x-pos) - $x-pos));
+
+          &:hover {
+            transform: translateX((($i * $x-pos) - $x-pos));
+          }
+        }
+      }
+    }
+
+    .diff-comments-more-count {
+      padding-left: 2px;
+      padding-right: 2px;
+      width: auto;
+    }
+  }
+}
+
+.diff-comment-avatar,
+.diff-comments-more-count {
+  position: absolute;
+  left: 0;
+  margin-right: 0;
+  border-color: $white;
+  cursor: pointer;
+  transition: all 0.1s ease-out;
+  @include code-icon-size();
+
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      z-index: (4 - $i);
+    }
+  }
+
+  .avatar {
+    @include code-icon-size();
+  }
+}
+
+.diff-comments-more-count {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  @include code-icon-size();
+}
+
+.diff-comments-more-count,
+.diff-notes-collapse {
+  @include avatar-counter(50%);
+}
+
+.diff-notes-collapse {
+  border: 0;
+  border-radius: 50%;
+  padding: 0;
+  transition: transform 0.1s ease-out;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @include code-icon-size();
+
+  .collapse-icon {
+    height: 50%;
+    width: 100%;
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  .collapse-icon,
+  path {
+    fill: $white;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.diff-files-changed {
+  .inline-parallel-buttons {
+    position: relative;
+    z-index: 1;
+  }
+
+  .commit-stat-summary {
+    @include media-breakpoint-up(sm) {
+      margin-left: -$gl-padding;
+      padding-left: $gl-padding;
+      background-color: $white;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: $header-height;
+    background-color: $white;
+    z-index: 200;
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height;
+    }
+
+    &.is-stuck {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-top: 1px solid $white-dark;
+      border-bottom: 1px solid $white-dark;
+
+      .diff-stats-additions-deletions-expanded,
+      .inline-parallel-buttons {
+        display: none !important;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.is-stuck {
+      .diff-stats-additions-deletions-collapsed {
+        display: block !important;
+      }
+    }
+  }
+}
+
+.diff-file-changes {
+  max-width: 560px;
+  width: 100%;
+  z-index: 150;
+  min-height: $dropdown-min-height;
+  max-height: $dropdown-max-height;
+  overflow-y: auto;
+  margin-bottom: 0;
+
+  @include media-breakpoint-up(sm) {
+    left: $gl-padding;
+  }
+
+  .dropdown-input .dropdown-input-search {
+    pointer-events: all;
+  }
+
+  .diff-changed-file {
+    display: flex;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    min-width: 0;
+  }
+
+  .diff-file-changed-icon {
+    margin-top: 2px;
+  }
+
+  .diff-changed-file-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .diff-changed-file-name,
+  .diff-changed-blank-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .diff-changed-blank-file-name {
+    color: $gl-text-color-tertiary;
+    font-style: italic;
+  }
+
+  .diff-changed-file-path {
+    color: $gl-text-color-tertiary;
+  }
+
+  .diff-changed-stats {
+    margin-left: auto;
+    white-space: nowrap;
+  }
+}
+
+.diff-file-changes-path {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-container {
+  background-color: $gray-light;
+  border-top: 1px solid $white-normal;
+
+  // double jagged line divider
+  .discussion-notes + .discussion-notes::before,
+  .diff-file-discussions + .discussion-form::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 10px;
+    background-color: $white;
+    background-image: linear-gradient(45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(225deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(135deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(-45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%);
+    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  .diff-file-discussions + .discussion-form {
+    padding: $gl-padding;
+
+    &::before {
+      width: auto;
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  .notes {
+    position: relative;
+  }
+
+  .diff-notes-collapse {
+    position: absolute;
+    left: -12px;
+  }
+}
+
+.diff-file .note-container > .new-note,
+.note-container .discussion-notes.diff-discussions {
+  margin-left: 100px;
+  border-left: 1px solid $white-normal;
+}
+
+.notes.active {
+  .diff-file .note-container > .new-note,
+  .note-container .discussion-notes {
+    // Override our margin and border (set for diff tab)
+    // when user is on the discussion tab for MR
+    margin-left: inherit;
+    border-left: inherit;
+  }
+}
+
+.files:not([data-can-create-note]) .frame {
+  cursor: auto;
+}
+
+.frame.click-to-comment,
+.btn-transparent.image-diff-overlay-add-comment {
+  position: relative;
+  cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
+
+  // Retina cursor
+  // scss-lint:disable DuplicateProperty
+  cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
+  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
+
+  .comment-indicator {
+    position: absolute;
+    padding: 0;
+    width: (2px * $image-comment-cursor-left-offset);
+    height: (2px * $image-comment-cursor-top-offset);
+    color: $blue-400;
+    // center the indicator to match the top left click region
+    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
+    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.frame .badge.badge-pill,
+.image-diff-avatar-link .badge.badge-pill,
+.user-avatar-link .badge.badge-pill,
+.notes > .badge.badge-pill {
+  position: absolute;
+  background-color: $blue-400;
+  color: $white;
+  border: $white 1px solid;
+  min-height: $gl-padding;
+  padding: 5px 8px;
+  border-radius: 12px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.frame .badge.badge-pill,
+.frame .image-comment-badge,
+.frame .comment-indicator {
+  // Center align badges on the frame
+  transform: translate(-50%, -50%);
+}
+
+.image-comment-badge {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.image-diff-avatar-link,
+.user-avatar-link {
+  position: relative;
+
+  .badge.badge-pill,
+  .image-comment-badge {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.notes > .badge.badge-pill {
+  display: none;
+  left: -13px;
+}
+
+.discussion-notes {
+  min-height: 35px;
+
+  &:first-child {
+    // First child does not have the jagged borders
+    min-height: 25px;
+  }
+
+  &.collapsed {
+    background-color: $white;
+
+    .diff-notes-collapse,
+    .note,
+    .discussion-reply-holder {
+      display: none;
+    }
+
+    .notes > .badge.badge-pill {
+      display: block;
+    }
+  }
+
+  .note-edit-form {
+    margin-left: $note-icon-gutter-width;
+  }
+}
+
+.discussion-body .image .frame {
+  position: relative;
+}
+
+.discussion-collapsible {
+  margin: 0 $gl-padding $gl-padding 71px;
+
+  .notes {
+    border-radius: $border-radius-default;
+  }
+}
+
+.parallel {
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}
+
+.image-diff-overlay,
+.image-diff-overlay-add-comment {
+  top: 0;
+  left: 0;
+
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+}
+
+.diff-suggest-popover {
+  &.popover {
+    width: 250px;
+    min-width: 250px;
+    z-index: 210;
+  }
+
+  .popover-header {
+    display: none;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    @include fixed-width-container;
+    flex-direction: column;
+  }
+
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ad5864ef6d9..e8d37fcf40b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -33,8 +33,7 @@
 }
 
 .show.dropdown {
-  .dropdown-menu,
-  .dropdown-menu-nav {
+  .dropdown-menu {
     @include set-visible;
     min-height: $dropdown-min-height;
     max-height: $dropdown-max-height;
@@ -190,15 +189,6 @@
   background-color: $gray-darker;
   color: $gl-text-color;
   outline: 0;
-
-  // make sure the text color is not overridden
-  &.text-danger {
-    color: $brand-danger;
-  }
-
-  .avatar {
-    border-color: $white;
-  }
 }
 
 @mixin dropdown-link {
@@ -217,11 +207,6 @@
   text-align: left;
   width: 100%;
 
-  // make sure the text color is not overridden
-  &.text-danger {
-    color: $brand-danger;
-  }
-
   &.disable-hover {
     text-decoration: none;
   }
@@ -233,10 +218,6 @@
     @include dropdown-item-hover;
 
     text-decoration: none;
-
-    .badge.badge-pill {
-      background-color: darken($blue-50, 5%);
-    }
   }
 
   &.dropdown-menu-user-link {
@@ -258,8 +239,7 @@
   }
 }
 
-.dropdown-menu,
-.dropdown-menu-nav {
+.dropdown-menu {
   display: none;
   position: absolute;
   width: auto;
@@ -393,49 +373,56 @@
     pointer-events: none;
   }
 
-  .dropdown-menu li {
-    cursor: pointer;
+  .dropdown-menu {
+    display: none;
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
 
-    &.droplab-item-active button {
-      @include dropdown-item-hover;
-    }
+    li {
+      cursor: pointer;
 
-    > a,
-    > button {
-      display: flex;
-      margin: 0;
-      text-overflow: inherit;
-      text-align: left;
+      &.droplab-item-active button {
+        @include dropdown-item-hover;
+      }
 
-      &.btn .fa:not(:last-child) {
-        margin-left: 5px;
+      > a,
+      > button {
+        display: flex;
+        margin: 0;
+        text-overflow: inherit;
+        text-align: left;
+
+        &.btn .fa:not(:last-child) {
+          margin-left: 5px;
+        }
       }
-    }
 
-    > button.dropdown-epic-button {
-      flex-direction: column;
+      > button.dropdown-epic-button {
+        flex-direction: column;
 
-      .reference {
-        color: $gray-300;
-        margin-top: $gl-padding-4;
+        .reference {
+          color: $gray-300;
+          margin-top: $gl-padding-4;
+        }
       }
-    }
 
-    &.droplab-item-selected i {
-      visibility: visible;
-    }
+      &.droplab-item-selected i {
+        visibility: visible;
+      }
 
-    .icon {
-      visibility: hidden;
-    }
+      .icon {
+        visibility: hidden;
+      }
 
-    .description {
-      display: inline-block;
-      white-space: normal;
-      margin-left: 5px;
+      .description {
+        display: inline-block;
+        white-space: normal;
+        margin-left: 5px;
 
-      p {
-        margin-bottom: 0;
+        p {
+          margin-bottom: 0;
+        }
       }
     }
   }
@@ -447,21 +434,12 @@
   }
 }
 
-.droplab-dropdown .dropdown-menu,
-.droplab-dropdown .dropdown-menu-nav {
-  display: none;
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
 .comment-type-dropdown.show .dropdown-menu {
   display: block;
 }
 
 .filtered-search-box-input-container {
-  .dropdown-menu,
-  .dropdown-menu-nav {
+  .dropdown-menu {
     max-width: 280px;
   }
 }
@@ -850,8 +828,7 @@
   }
 
   header.navbar-gitlab .dropdown {
-    .dropdown-menu,
-    .dropdown-menu-nav {
+    .dropdown-menu {
       width: 100%;
       min-width: 100%;
     }
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 75d511d7f66..20fea7a82ca 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -1,5 +1,3 @@
-.monaco-editor.gl-editor-lite {
-  .line-numbers {
-    @include gl-pt-0;
-  }
+[id^='editor-lite-'] {
+  height: 500px;
 }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 76c6e03377c..f8710cc1346 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -50,7 +50,7 @@
       right: 15px;
       margin-left: auto;
 
-      .btn {
+      .btn:not(.btn-icon) {
         padding: 0 10px;
         font-size: 13px;
         line-height: 28px;
@@ -372,7 +372,7 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  .file-actions .btn {
+  .file-actions .btn:not(.btn-icon) {
     padding: 0 10px;
     font-size: 13px;
     line-height: 28px;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 1a394ad124b..5f56fa3be86 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -355,28 +355,45 @@
     background-color: $white;
   }
 
-  .boards-switcher {
-    margin: 0 0 10px;
+  .filtered-search-block .boards-switcher {
+    @include gl-mr-0;
+    margin-bottom: $gl-input-padding;
 
     .boards-selector-wrapper,
     .dropdown {
-      display: block;
+      @include gl-display-block;
     }
   }
 
   .filter-dropdown-container {
     > div {
-      margin: 0;
+      @include gl-m-0;
 
       > .btn {
-        margin: 0 0 10px;
-        width: 100%;
+        margin: 0 0 $gl-input-padding;
+        @include gl-w-full;
       }
     }
 
     .board-labels-toggle-wrapper {
       margin-bottom: $gl-input-padding;
     }
+
+    .board-swimlanes-toggle-wrapper {
+      @include gl-h-auto;
+      margin-bottom: $gl-input-padding;
+
+      > span,
+      > .dropdown,
+      .gl-dropdown-toggle {
+        @include gl-w-full;
+        @include gl-m-0;
+      }
+
+      > .dropdown {
+        @include gl-mt-2;
+      }
+    }
   }
 
   .boards-add-list > .btn {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index cf21c23cb17..52319d9658b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -203,18 +203,6 @@
             margin-right: 0;
           }
         }
-
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          outline: 0;
-          opacity: 1;
-          color: $white;
-
-          &.header-user-dropdown-toggle .header-user-avatar {
-            border-color: $white;
-          }
-        }
       }
 
       .header-new-dropdown-toggle {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index ec0755b1614..5623d38d66e 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -9,6 +9,7 @@
   }
 }
 
+.ci-status-icon-error,
 .ci-status-icon-failed {
   svg {
     fill: $red-500;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 61e8c0d4718..63be2bdef8e 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -215,7 +215,7 @@
   }
 
   &.build-trace-rounded {
-    border-radius: $border-radius-base;
+    border-radius: $gl-border-radius-base;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 292d57f132c..7ebc972ac37 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -28,10 +28,6 @@
         text-decoration: none;
         color: $black;
         border-bottom: 2px solid $gray-darkest;
-
-        .badge.badge-pill {
-          color: $black;
-        }
       }
     }
 
@@ -380,33 +376,11 @@
 }
 
 .project-item-select-holder.btn-group {
-  display: flex;
-  overflow: hidden;
-  float: right;
-
-  .new-project-item-link {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .new-project-item-select-button {
-    width: 32px;
+    max-width: 44px;
   }
 }
 
 .empty-state .project-item-select-holder.btn-group {
-  float: none;
-  justify-content: center;
-
-  .btn {
-    // overrides styles applied to plain `.empty-state .btn`
-    margin: 10px 0;
-    max-width: 300px;
-    width: auto;
-
-    @include media-breakpoint-down(xs) {
-      max-width: 250px;
-    }
-  }
+  max-width: 320px;
 }
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 4c1c9d15121..47184804353 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -18,18 +18,6 @@
   }
 }
 
-.snippet-form-holder .file-holder .file-title {
-  padding: 2px;
-}
-
-.markdown-snippet-copy {
-  position: fixed;
-  top: -10px;
-  left: -10px;
-  max-height: 0;
-  max-width: 0;
-}
-
 .snippet-file-content {
   border-radius: 3px;
 
@@ -49,21 +37,6 @@
   min-height: $header-height;
 }
 
-.snippet-actions {
-  @include media-breakpoint-up(sm) {
-    float: right;
-  }
-}
-
 .snippet-scope-menu .btn-success {
   margin-top: 15px;
 }
-
-.embed-snippet {
-  padding-right: 0;
-  padding-top: $gl-padding;
-
-  .embed-toggle-list li button {
-    padding: 8px 40px;
-  }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 59e83608d9d..39d9e9a77f9 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -9,11 +9,15 @@ table {
   * This is a temporary workaround until we fix the neutral
   * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
   *
-  * The overwrites here affected the security dashboard tables, when removing
-  * this code, table-th-transparent and original-text-color classes should
-  * be removed there.
+  * The overwrites here affected the following areas:
+  * - The security dashboard tables. When removing
+  *   this code, table-th-transparent and original-text-color classes should
+  *   be removed there.
+  * - The subscription seats table. When removing this code, the .seats-table
+  *   <th> and margin overrides should be removed there.
   *
   * Remove this code as soon as this happens
+  *
   */
   &.gl-table {
     @include gl-text-gray-500;
@@ -186,6 +190,7 @@ table {
     .checkbox {
       padding-left: $gl-spacing-scale-4;
       padding-right: 0;
+      width: 1px;
 
       + td,
       + th {
@@ -205,12 +210,20 @@ table {
       width: 10%;
     }
 
+    .description {
+      max-width: 0;
+    }
+
     .identifier {
       width: 16%;
     }
 
     .scanner {
-      width: 15%;
+      width: 10%;
+    }
+
+    .activity {
+      width: 5%;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8b5fa6c1b6c..c15d46d43b2 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -439,10 +439,6 @@
       content: '\f0c6';
     }
 
-    &:hover::before {
-      text-decoration: none;
-    }
-
     &.no-attachment-icon {
       &::before {
         display: none;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8cebfc430e0..f0b1e859139 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -780,7 +780,6 @@ $login-brand-holder-color: #888;
 * Projects
 */
 $project-option-descr-color: #54565b;
-$project-network-controls-color: #888;
 
 /*
  * Monitor Charts
@@ -819,7 +818,6 @@ $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
 $ci-action-dropdown-button-size: 24px;
 $ci-action-dropdown-svg-size: 12px;
-$pipelines-table-header-height: 40px;
 
 /*
 CI variable lists
@@ -868,9 +866,6 @@ $add-to-slack-popup-max-width: 400px;
 $add-to-slack-gif-max-width: 850px;
 $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
-$double-headed-arrow-width: 100px;
-$double-headed-arrow-height: 25px;
-$right-arrow-size: 16px;
 
 /*
 Popup
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 55996a074c6..d550a1faa18 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -3,7 +3,6 @@
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-  margin-bottom: $gl-padding-8;
 
   .card.card-body-segment {
     padding: $gl-padding;
@@ -29,11 +28,6 @@
 
       .ref-name {
         font-size: 12px;
-
-        &:hover {
-          text-decoration: underline;
-          color: $gl-text-color;
-        }
       }
     }