From 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 18 Feb 2021 10:34:06 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-9-stable-ee

---
 app/assets/stylesheets/_page_specific_files.scss   |   1 -
 .../components/batch_comments/review_bar.scss      |   2 +-
 .../design_management/design_list_item.scss        |   5 -
 app/assets/stylesheets/framework.scss              |   1 -
 app/assets/stylesheets/framework/awards.scss       |   2 +-
 app/assets/stylesheets/framework/buttons.scss      |  23 ---
 app/assets/stylesheets/framework/carousel.scss     | 202 ---------------------
 .../stylesheets/framework/ci_variable_list.scss    |  10 -
 app/assets/stylesheets/framework/common.scss       |   2 +-
 .../stylesheets/framework/contextual_sidebar.scss  |   2 +-
 app/assets/stylesheets/framework/diffs.scss        |   4 -
 app/assets/stylesheets/framework/dropdowns.scss    |  24 +--
 .../stylesheets/framework/feature_highlight.scss   |  51 +-----
 app/assets/stylesheets/framework/files.scss        |  38 ++--
 app/assets/stylesheets/framework/filters.scss      |   9 +
 app/assets/stylesheets/framework/header.scss       |  24 +--
 app/assets/stylesheets/framework/icons.scss        |  48 +----
 app/assets/stylesheets/framework/mixins.scss       |   7 -
 app/assets/stylesheets/framework/sidebar.scss      |   2 +-
 app/assets/stylesheets/framework/tables.scss       |   3 -
 app/assets/stylesheets/framework/typography.scss   |   7 +-
 app/assets/stylesheets/framework/variables.scss    |  23 ++-
 app/assets/stylesheets/mailer.scss                 |  23 ++-
 .../page_bundles/_ide_theme_overrides.scss         |  22 ++-
 .../stylesheets/page_bundles/_pipeline_mixins.scss |   6 +-
 ...application_settings_metrics_and_profiling.scss |   3 +
 .../stylesheets/page_bundles/admin/jobs_index.scss |   5 +
 app/assets/stylesheets/page_bundles/boards.scss    |  41 +++++
 app/assets/stylesheets/page_bundles/ide.scss       |  65 ++++++-
 app/assets/stylesheets/page_bundles/import.scss    |  29 ---
 .../stylesheets/page_bundles/jira_connect.scss     |   6 -
 .../stylesheets/page_bundles/merge_requests.scss   |   1 -
 .../stylesheets/page_bundles/oncall_schedules.scss |  12 --
 app/assets/stylesheets/page_bundles/pipelines.scss |  11 +-
 app/assets/stylesheets/page_bundles/signup.scss    |   4 +
 app/assets/stylesheets/pages/admin.scss            |  18 --
 app/assets/stylesheets/pages/commits.scss          |   5 -
 app/assets/stylesheets/pages/editor.scss           |  13 --
 app/assets/stylesheets/pages/groups.scss           |   1 -
 app/assets/stylesheets/pages/issuable.scss         |  13 +-
 app/assets/stylesheets/pages/issues.scss           |  28 +--
 app/assets/stylesheets/pages/labels.scss           |   2 +-
 app/assets/stylesheets/pages/login.scss            |   3 +-
 app/assets/stylesheets/pages/merge_requests.scss   |  20 +-
 app/assets/stylesheets/pages/note_form.scss        |   6 +-
 app/assets/stylesheets/pages/notes.scss            |  58 +-----
 app/assets/stylesheets/pages/profile.scss          |  20 +-
 app/assets/stylesheets/pages/projects.scss         |  18 +-
 app/assets/stylesheets/pages/tree.scss             |   4 +-
 app/assets/stylesheets/startup/startup-dark.scss   |   2 +-
 .../stylesheets/startup/startup-general.scss       |   3 +-
 app/assets/stylesheets/startup/startup-signin.scss |   5 +-
 app/assets/stylesheets/utilities.scss              |  16 +-
 53 files changed, 313 insertions(+), 640 deletions(-)
 delete mode 100644 app/assets/stylesheets/framework/carousel.scss
 create mode 100644 app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
 create mode 100644 app/assets/stylesheets/page_bundles/admin/jobs_index.scss
 delete mode 100644 app/assets/stylesheets/pages/admin.scss

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 42d15635566..20ff78d32d3 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,4 +1,3 @@
-@import './pages/admin';
 @import './pages/branches';
 @import './pages/ci_projects';
 @import './pages/clusters';
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
index 76bf7ac81e8..d769ea73101 100644
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   background: $white;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
   border-top: 1px solid $border-color;
   padding-left: $contextual-sidebar-width;
diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss
index b7f6b2026fe..09af4da37e9 100644
--- a/app/assets/stylesheets/components/design_management/design_list_item.scss
+++ b/app/assets/stylesheets/components/design_management/design_list_item.scss
@@ -8,11 +8,6 @@
     top: 10px;
   }
 
-  .design-event {
-    top: $gl-padding;
-    right: $gl-padding;
-  }
-
   .card-body {
     height: 230px;
   }
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e40b95cdce6..7931f4deea0 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -15,7 +15,6 @@
 @import 'framework/badges';
 @import 'framework/calendar';
 @import 'framework/callout';
-@import 'framework/carousel';
 @import 'framework/common';
 @import 'framework/dropdowns';
 @import 'framework/files';
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index d9ad4992458..a7623b65539 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -14,7 +14,7 @@
   top: 0;
   margin-top: 3px;
   padding: $gl-padding;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   width: $award-emoji-width;
   font-size: 14px;
   background-color: $white;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 182c58c3931..b51fec925cb 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -95,8 +95,6 @@
 
   &:active,
   &.active {
-    box-shadow: $gl-btn-active-background;
-
     background-color: $dark;
     border-color: $border-dark;
     color: $color;
@@ -348,14 +346,6 @@
   }
 }
 
-.btn-build {
-  margin-left: 10px;
-
-  svg {
-    fill: $gl-text-color-secondary;
-  }
-}
-
 .clone-dropdown-btn a {
   color: $gray-700;
 
@@ -437,19 +427,6 @@
   }
 }
 
-.btn-missing {
-  color: $gl-text-color-secondary;
-  border: 1px dashed $border-gray-normal-dashed;
-  border-radius: $border-radius-default;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: $gl-text-color-secondary;
-    background-color: $white-normal;
-  }
-}
-
 // The .btn-svg class is available for legacy icon buttons to
 // preserve a 34px height and have 16x16 icons at the same time.
 // Once a button is migrated (to the current 32px height)
diff --git a/app/assets/stylesheets/framework/carousel.scss b/app/assets/stylesheets/framework/carousel.scss
deleted file mode 100644
index d51a9f9c173..00000000000
--- a/app/assets/stylesheets/framework/carousel.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-// Notes on the classes:
-//
-// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
-//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
-//    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
-//    the active slide is heading.
-// 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
-//    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
-//    is the upcoming slide in transition.
-
-.carousel {
-  position: relative;
-
-  &.pointer-event {
-    touch-action: pan-y;
-  }
-}
-
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-
-//
-// Alternate transitions
-//
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    @include transition(0s $carousel-transition-duration opacity);
-  }
-}
-
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  color: $carousel-control-color;
-  text-align: center;
-  opacity: $carousel-control-opacity;
-  @include transition($carousel-control-transition);
-
-  // Hover/focus state
-  @include hover-focus {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: $carousel-control-hover-opacity;
-  }
-}
-
-.carousel-control-prev {
-  left: 0;
-  @if $enable-gradients {
-    background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-.carousel-control-next {
-  right: 0;
-  @if $enable-gradients {
-    background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background: no-repeat 50% / 100% 100%;
-}
-
-.carousel-control-prev-icon {
-  background-image: $carousel-control-prev-icon-bg;
-}
-
-.carousel-control-next-icon {
-  background-image: $carousel-control-next-icon-bg;
-}
-
-
-// Optional indicator pips
-//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0; // override <ol> default
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-left: $carousel-control-width;
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
-    background-clip: padding-box;
-    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    border-top: $carousel-indicator-hit-area-height solid transparent;
-    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-    opacity: 0.5;
-    @include transition($carousel-indicator-transition);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-
-// Optional captions
-//
-//
-
-.carousel-caption {
-  position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
-  bottom: 20px;
-  left: (100% - $carousel-caption-width) / 2;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: $carousel-caption-color;
-  text-align: center;
-}
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index 2204b037f69..95025459cc9 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -98,13 +98,3 @@
     color: $gl-text-color-disabled;
   }
 }
-
-.group-variable-list {
-  color: $gray-500;
-
-  .table-section:not(:first-child) {
-    @include media-breakpoint-down(sm) {
-      border-top: hidden;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3b59c028437..5d182373fb1 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -110,7 +110,7 @@ pre {
 }
 
 hr {
-  margin: 24px 0;
+  margin: 1.5rem 0;
   border-top: 1px solid $gray-darker;
 }
 
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 745d469e3e8..c5467c304ec 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -471,7 +471,7 @@
       background-color: $black-transparent;
       height: 100%;
       width: 100%;
-      z-index: 300;
+      z-index: $zindex-dropdown-menu;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 499b9c00116..e30caeb1dfb 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -1136,10 +1136,6 @@ table.code {
       display: block;
     }
   }
-
-  .note-edit-form {
-    margin-left: $note-icon-gutter-width;
-  }
 }
 
 .discussion-body .image .frame {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 41fc4d3dd4e..f56d8f2c2a9 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -216,7 +216,7 @@
   position: absolute;
   width: auto;
   top: 100%;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   min-width: 240px;
   max-width: 500px;
   margin-top: $dropdown-vertical-offset;
@@ -326,7 +326,7 @@
     color: $gl-text-color-secondary;
   }
 
-  .badge.badge-pill + span:not(.badge.badge-pill) {
+  .badge.badge-pill + span:not(.badge):not(.badge-pill) {
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
@@ -497,7 +497,7 @@
   li {
     a,
     button,
-    .dropdown-item {
+    .dropdown-item:not(.open-with-link) {
       padding: 8px 40px;
       position: relative;
 
@@ -525,7 +525,7 @@
 
       &.is-active {
         /* stylelint-disable-next-line function-url-quotes */
-        background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
+        background: url(asset_path('checkmark.png')) no-repeat 14px center;
       }
     }
   }
@@ -896,7 +896,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       position: absolute;
       top: 13px;
       right: 25px;
-      color: $gray-50;
+      color: $gray-300;
     }
   }
 
@@ -1093,17 +1093,3 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: $gl-dropdown-width-wide;
   }
 }
-
-.gl-dropdown-item-deprecated-adapter {
-  .dropdown-item {
-    align-items: flex-start;
-
-    .gl-new-dropdown-item-text-primary {
-      @include gl-font-weight-bold;
-    }
-
-    .gl-new-dropdown-item-text-secondary {
-      color: inherit;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 8d411747b28..36f1b1f2903 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -1,14 +1,7 @@
 .feature-highlight {
-  position: relative;
-  margin-left: $gl-padding;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-
   &::before {
     content: '';
     display: block;
-    position: absolute;
     top: 6px;
     left: 6px;
     width: 8px;
@@ -29,56 +22,22 @@
   }
 }
 
-.feature-highlight-popover-content {
-  display: none;
-
-  hr {
-    margin: $gl-padding 0;
-  }
-
-  .btn-link {
-    svg {
-      @include btn-svg;
-
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .feature-highlight-illustration {
-    width: 100%;
-    height: 100px;
-    padding-top: 12px;
-    padding-bottom: 12px;
 
-    background-color: $indigo-50;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom: 1px solid darken($gray-normal, 8%);
-  }
-}
-
-.popover .feature-highlight-popover-content {
-  display: block;
+.feature-highlight-illustration {
+  background-color: $indigo-50;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 1px solid darken($gray-normal, 8%);
 }
 
 .feature-highlight-popover {
   width: 240px;
 
-  &.right > .arrow {
-    border-right-color: $border-color;
-  }
-
   .popover-body {
     padding: 0;
   }
 }
 
-.feature-highlight-popover-sub-content {
-  padding: $gl-padding $gl-padding-12;
-}
-
 @include keyframes(pulse-highlight) {
   0% {
     box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index fe8c27ae9b6..bda123fa7ea 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -2,6 +2,14 @@
  * File content holder
  *
  */
+.container-fluid.container-limited.limit-container-width {
+  .file-holder.readme-holder.limited-width-container .file-content {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .file-holder {
   border: 1px solid $border-color;
   border-top: 0;
@@ -17,12 +25,6 @@
 
   &.readme-holder {
     margin: $gl-padding 0;
-
-    &.limited-width-container .file-content {
-      max-width: $limited-layout-width;
-      margin-left: auto;
-      margin-right: auto;
-    }
   }
 
   .file-title {
@@ -351,23 +353,17 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  .file-actions .btn:not(.btn-icon) {
-    padding: 0 10px;
-    font-size: 13px;
-    line-height: 28px;
-    display: inline-block;
-    float: none;
-  }
-
   .file-actions .ide-edit-button {
     z-index: 2;
   }
 
-  @include media-breakpoint-down(sm) {
-    display: block;
-
+  @include media-breakpoint-down(md) {
     .file-actions {
-      margin-top: 5px;
+      margin-top: $gl-padding-8;
+
+      .btn {
+        margin-bottom: $gl-padding-8;
+      }
     }
   }
 }
@@ -442,12 +438,6 @@ span.idiff {
     .user-avatar-link.new-comment {
       position: absolute;
       margin: 40px $gl-padding 0 116px;
-
-      ~ .note-edit-form form.edit-note {
-        @include media-breakpoint-up(sm) {
-          margin-left: $note-icon-gutter-width;
-        }
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5f56fa3be86..07d59847829 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -475,6 +475,15 @@
     }
   }
 
+  .sort-dropdown-container {
+    // This property is set to have borders
+    // around sort dropdown match with filter
+    // input field.
+    .gl-button {
+      box-shadow: inset 0 0 0 1px $gray-400;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     .sort-dropdown-container {
       margin-left: 10px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 730e10114c3..ffcc20b624b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -516,28 +516,8 @@
     left: auto;
     max-height: $dropdown-max-height-lg;
 
-    li.current-user {
-      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-
-      .user-name {
-        display: block;
-      }
-
-      .user-status {
-        margin-right: 0;
-        max-width: 240px;
-        font-size: $gl-font-size-small;
-
-        gl-emoji {
-          font-size: $gl-font-size-small;
-        }
-
-        .user-status-emoji {
-          gl-emoji {
-            font-size: $gl-font-size;
-          }
-        }
-      }
+    .user-status {
+      max-width: 240px;
     }
 
     svg {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 5623d38d66e..222e10f51ad 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -3,10 +3,6 @@
   svg {
     fill: $green-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($green-500);
-  }
 }
 
 .ci-status-icon-error,
@@ -14,10 +10,6 @@
   svg {
     fill: $red-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($red-500);
-  }
 }
 
 .ci-status-icon-pending,
@@ -27,59 +19,29 @@
   svg {
     fill: $orange-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($orange-500);
-  }
-}
-
-.ci-status-icon-preparing {
-  svg {
-    fill: $gray-300;
-  }
-
-  &.add-border {
-    @include borderless-status-icon($gray-300);
-  }
 }
 
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
   }
-
-  &.add-border {
-    @include borderless-status-icon($blue-400);
-  }
 }
 
 .ci-status-icon-canceled,
-.ci-status-icon-disabled {
+.ci-status-icon-disabled,
+.ci-status-icon-scheduled,
+.ci-status-icon-manual {
   svg {
     fill: $gl-text-color;
   }
-
-  &.add-border {
-    @include borderless-status-icon($gl-text-color);
-  }
 }
 
+.ci-status-icon-preparing,
 .ci-status-icon-created,
 .ci-status-icon-skipped,
 .ci-status-icon-notfound {
   svg {
-    fill: $gray-darkest;
-  }
-
-  &.add-border {
-    @include borderless-status-icon($gray-darkest);
-  }
-}
-
-.ci-status-icon-scheduled,
-.ci-status-icon-manual {
-  svg {
-    fill: $gl-text-color;
+    fill: var(--gray-400, $gray-400);
   }
 }
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index e3d02d01496..e29e204b14f 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -354,13 +354,6 @@
   }
 }
 
-@mixin borderless-status-icon($color) {
-  svg {
-    border: 1px solid $color;
-    border-radius: 50%;
-  }
-}
-
 @mixin emoji-menu-toggle-button {
   line-height: 1;
   padding: 0;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index bef33bd2ef0..241aaad015e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -75,7 +75,7 @@
 
 .right-sidebar-expanded {
   padding-right: 0;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 89713fdbbea..92405c00c5e 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -69,9 +69,6 @@ table {
         }
       }
 
-      td {
-        border-color: $white-normal;
-      }
     }
 
     .thead-white {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 1a568bb41a5..496e2aba421 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -458,7 +458,7 @@
   h6 {
     a.anchor {
       float: left;
-      margin-left: -16px;
+      margin-left: -20px;
       text-decoration: none;
       outline: none;
 
@@ -471,6 +471,11 @@
     &:hover > a.anchor::after {
       visibility: visible;
     }
+
+    > a.anchor:focus::after {
+      visibility: visible;
+      outline: auto;
+    }
   }
 
   .big {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 674ba1a307b..4bf9236407f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -433,6 +433,7 @@ $browser-scrollbar-size: 10px;
  */
 $header-height: 40px;
 $header-zindex: 1000;
+$zindex-dropdown-menu: 300;
 $suggestion-header-height: 46px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
@@ -626,7 +627,6 @@ $search-input-xl-width: 320px;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
-$note-icon-gutter-width: 55px;
 
 /*
 * Identicon
@@ -870,6 +870,27 @@ $add-to-slack-gif-max-width: 850px;
 $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
 
+/*
+Security & Compliance Carousel
+*/
+$security-and-compliance-carousel-image-carousel-width: 1000px;
+$security-and-compliance-carousel-image-discover-button-width: 45%;
+$security-and-compliance-carousel-image-discover-buttons-max-width: 280px;
+$security-and-compliance-carousel-image-discover-footer-max-width: 500px;
+$security-and-compliance-carousel-image-discover-feedback-width: 30%;
+$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px;
+$security-and-compliance-carousel-control-icon-width: 10px;
+$security-and-compliance-carousel-control-position: -5%;
+$security-and-compliance-carousel-inner-width: 90%;
+$security-and-compliance-carousel-indicators-bottom: -20px;
+$security-and-compliance-carousel-indicators-bottom-lg: -15px;
+$security-and-compliance-carousel-indicators-dimension: 6px;
+$security-and-compliance-carousel-indicators-border-radius: 100%;
+$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+
 /*
 Popup
 */
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss
index 27c6ef20269..4f76deeb991 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailer.scss
@@ -14,13 +14,15 @@ $mailer-line-cell-bg-color: #6b4fbb;
 $mailer-wrapper-cell-bg-color: #fff;
 $mailer-wrapper-cell-border-color: #ededed;
 $mailer-header-footer-text-color: #5c5c5c;
+$full-width: 640px;
+$half-width: 320px;
 
 body {
   margin: 0 !important;
   background-color: $mailer-bg-color;
   padding: 0;
   text-align: center;
-  min-width: 640px;
+  min-width: $full-width;
   width: 100%;
   height: 100%;
   font-family: $mailer-font;
@@ -31,7 +33,7 @@ table#body {
   margin: 0;
   padding: 0;
   text-align: center;
-  min-width: 640px;
+  min-width: $full-width;
   width: 100%;
 }
 
@@ -44,6 +46,11 @@ a {
   }
 }
 
+.mail-avatar {
+  border-radius: 50%;
+  display: block;
+}
+
 .highlight {
   font-weight: 500;
 }
@@ -77,10 +84,18 @@ a {
   margin-left: 4px;
 }
 
+.half-width {
+  min-width: $half-width;
+}
+
 tr td {
   font-family: $mailer-font;
 }
 
+tr.border-top td {
+  border-top: 2px solid $gray-100;
+}
+
 tr.line td {
   font-family: $mailer-font;
   background-color: $mailer-line-cell-bg-color;
@@ -100,7 +115,7 @@ td.footer-message {
 }
 
 table.wrapper {
-  width: 640px;
+  width: $full-width;
   margin: 0 auto;
   border-collapse: separate;
   border-spacing: 0;
@@ -149,7 +164,7 @@ tr.footer td {
   }
 
   .gitlab-info-text {
-    max-width: 640px;
+    max-width: $full-width;
     margin: 0 auto;
     text-align: center;
     color: $gray-400;
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 093cba3560f..7336d555f79 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -5,7 +5,7 @@
   $bs-input-focus-border: #80bdff;
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
-  a:not(.btn):not(.gl-tab-nav-item),
+  a:not(.btn),
   .gl-button.btn-link,
   .gl-button.btn-link:hover,
   .gl-button.btn-link:focus,
@@ -34,6 +34,7 @@
   .ide-pipeline .top-bar .controllers .controllers-buttons,
   .controllers-buttons svg,
   .nav-links li a.active,
+  .gl-tabs-nav li a.gl-tab-nav-item-active,
   .md-area.is-focused {
     color: var(--ide-text-color, $gl-text-color);
   }
@@ -44,13 +45,15 @@
   }
 
   .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .gl-tabs-nav li a,
   .dropdown-menu-inner-content,
   .file-row .file-row-icon svg,
   .file-row:hover .file-row-icon svg {
     color: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) {
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar),
+  .gl-tabs-nav li {
     &:hover a,
     &.active a,
     a:hover,
@@ -61,6 +64,10 @@
         border-color: var(--ide-input-border, $gray-darkest);
       }
     }
+
+    a.gl-tab-nav-item-active {
+      box-shadow: inset 0 -2px 0 0 var(--ide-input-border, $gray-darkest);
+    }
   }
 
   .drag-handle:hover {
@@ -142,6 +149,7 @@
   .md table:not(.code) tbody td,
   .md table:not(.code) tr th,
   .nav-links:not(.quick-links),
+  .gl-tabs-nav,
   .common-note-form .md-area.is-focused .nav-links {
     border-color: var(--ide-border-color-alt, $white-dark);
   }
@@ -175,6 +183,10 @@
       border-color: var(--ide-highlight-accent, $gl-text-color);
     }
 
+    .gl-tabs-nav li a.gl-tab-nav-item-active {
+      box-shadow: inset 0 -2px 0 0 var(--ide-highlight-accent, $gl-text-color);
+    }
+
     // for other themes, suppress different avatar default colors for simplicity
     .avatar-container {
       &,
@@ -241,7 +253,6 @@
   .btn-default:not(.gl-button),
   .dropdown,
   .dropdown-menu-toggle {
-    background-color: var(--ide-input-background, $white) !important;
     color: var(--ide-input-color, $gl-text-color) !important;
     border-color: var(--ide-btn-default-border, $border-color);
   }
@@ -304,6 +315,11 @@
       border-color: var(--ide-dropdown-hover-background, $border-color);
     }
 
+    .gl-tabs-nav {
+      background-color: var(--ide-dropdown-hover-background, $white);
+      box-shadow: inset 0 -2px 0 0 var(--ide-dropdown-hover-background, $border-color);
+    }
+
     .divider {
       background-color: var(--ide-dropdown-hover-background, $gray-100);
       border-color: var(--ide-dropdown-hover-background, $gray-100);
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 72e2a45565e..0d6f360112b 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -98,7 +98,6 @@
     @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
-  &.ci-status-icon-preparing,
   &.ci-status-icon-running {
     @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
@@ -106,14 +105,15 @@
   &.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(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
+  &.ci-status-icon-preparing,
   &.ci-status-icon-created,
+  &.ci-status-icon-not-found,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+    @include mini-pipeline-graph-color(var(--white, $white), var(--gray-100, $gray-100), var(--gray-200, $gray-200), var(--gray-400, $gray-400), var(--gray-500, $gray-500), var(--gray-600, $gray-600));
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
new file mode 100644
index 00000000000..41bb6d107f1
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
@@ -0,0 +1,3 @@
+.usage-data {
+  max-height: 400px;
+}
diff --git a/app/assets/stylesheets/page_bundles/admin/jobs_index.scss b/app/assets/stylesheets/page_bundles/admin/jobs_index.scss
new file mode 100644
index 00000000000..7844cae5f87
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/admin/jobs_index.scss
@@ -0,0 +1,5 @@
+.admin-builds-table {
+  td:last-child {
+    min-width: 120px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 3d1ae3519a9..620b37914d8 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -138,6 +138,47 @@
   border: 1px solid var(--gray-100, $gray-100);
 }
 
+// to highlight columns we have animated pulse of box-shadow
+// we don't want to actually animate the box-shadow property
+// because that causes costly repaints. Instead we can add a
+// pseudo-element that is the same size as our element, then
+// animate opacity/transform to give a soothing single pulse
+.board-column-highlighted::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1;
+  box-shadow: 0 0 6px 3px $blue-200;
+  animation-name: board-column-flash-border;
+  animation-duration: 1.2s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes board-column-flash-border {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  25%,
+  75% {
+    opacity: 1;
+    transform: scale(0.99);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .board-header {
   &.has-border::before {
     border-top: 3px solid;
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index f6b9473d235..7c4d51ab677 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -97,7 +97,8 @@ $ide-commit-header-height: 48px;
     border-right: 1px solid var(--ide-border-color, $white-dark);
     border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
-    &.active {
+    &.active,
+    .gl-tab-nav-item-active {
       background-color: var(--ide-highlight-background, $white);
       border-bottom-color: transparent;
     }
@@ -114,6 +115,42 @@ $ide-commit-header-height: 48px;
       }
     }
   }
+
+  .gl-tab-content {
+    padding: 0;
+  }
+
+  .gl-tabs-nav {
+    border-width: 0;
+
+    li {
+      padding: 0 !important;
+      background: transparent !important;
+      border: 0 !important;
+
+      a {
+        display: flex;
+        align-items: center;
+        padding: $grid-size $gl-padding !important;
+        box-shadow: none !important;
+        font-weight: normal !important;
+
+        background-color: var(--ide-background-hover, $gray-normal);
+        border-right: 1px solid var(--ide-border-color, $white-dark);
+        border-bottom: 1px solid var(--ide-border-color, $white-dark);
+
+        &.gl-tab-nav-item-active {
+          background-color: var(--ide-highlight-background, $white);
+          border-color: var(--ide-border-color, $white-dark);
+          border-bottom-color: transparent;
+        }
+
+        .multi-file-tab-close svg {
+          top: 0;
+        }
+      }
+    }
+  }
 }
 
 .multi-file-tab {
@@ -605,6 +642,17 @@ $ide-commit-header-height: 48px;
       left: -1px;
     }
   }
+
+  .ide-commit-badge {
+    background-color: var(--ide-highlight-accent, $almost-black) !important;
+    color: var(--ide-highlight-background, $white) !important;
+    position: absolute;
+    left: 38px;
+    top: $gl-padding-8;
+    font-size: $gl-font-size-12;
+    padding: 2px $gl-padding-4;
+    font-weight: $gl-font-weight-bold !important;
+  }
 }
 
 .ide-activity-bar {
@@ -623,7 +671,8 @@ $ide-commit-header-height: 48px;
     height: 100%;
   }
 
-  .nav-links {
+  .nav-links,
+  .gl-tabs-nav {
     height: 30px;
   }
 
@@ -965,17 +1014,25 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-nav-form {
-  .nav-links li {
+  .nav-links li,
+  .gl-tabs-nav li {
     width: 50%;
     padding-left: 0;
     padding-right: 0;
 
     a {
       text-align: center;
+      font-size: 14px;
+      line-height: 30px;
 
-      &:not(.active) {
+      &:not(.active),
+      &:not(.gl-tab-nav-item-active) {
         background-color: var(--ide-dropdown-background, $gray-light);
       }
+
+      &.gl-tab-nav-item-active {
+        font-weight: bold;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index 5f43d5df7e3..453b810196b 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -12,35 +12,6 @@
   width: 1%;
 }
 
-.import-project-name-input {
-  border-radius: 0 $border-radius-default $border-radius-default 0;
-  position: relative;
-  left: -1px;
-  max-width: 300px;
-}
-
-.import-slash-divider {
-  background-color: $gray-lightest;
-  border: 1px solid $border-color;
-}
-
-.import-row {
-  height: 55px;
-}
-
-.import-table {
-  .import-jobs-from-col,
-  .import-jobs-to-col,
-  .import-jobs-status-col,
-  .import-jobs-cta-col {
-    border-bottom-width: 1px;
-    padding-left: $gl-padding;
-  }
-}
-
-.import-projects-loading-icon {
-  margin-top: $gl-padding-32;
-}
 
 .import-entities-target-select {
   &.disabled {
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index 231723ca4e3..25401a161da 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -79,12 +79,6 @@ $header-height: 40px;
   margin-top: 16px;
 }
 
-.heading-with-border {
-  border-bottom: 1px solid $gray-100;
-  display: inline-block;
-  padding-bottom: 16px;
-}
-
 svg {
   fill: currentColor;
 
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index be74503c21f..3263a5067ea 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -7,7 +7,6 @@
 .diff-files-holder {
   flex: 1;
   min-width: 0;
-  z-index: 201;
 }
 
 .diff-tree-list {
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index 1b190024457..a6668f00147 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -37,12 +37,6 @@
   &.gl-modal .modal-md {
     max-width: 640px;
   }
-
-  // TODO: move to gitlab/ui utilities
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/297502
-  .gl-w-fit-content {
-    width: fit-content;
-  }
 }
 
 //// Copied from roadmaps.scss - adapted for on-call schedules
@@ -91,9 +85,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
   }
 
   .timeline-header-item {
-    // container size minus left panel width divided by 2 week timeframes
-    width: calc((100% - #{$details-cell-width}) / 2);
-
     &:last-of-type .item-label {
       @include gl-border-r-0;
     }
@@ -174,9 +165,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
 
 .timeline-cell {
   @include gl-relative;
-  // width: $timeline-cell-width;
-  // container size minus left panel width divided by 2 week timeframes
-  width: calc((100% - #{$details-cell-width}) / 2);
   @include gl-bg-transparent;
   border-right: $border-style;
 
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index dbde7933a8b..ae36f7e3ac1 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -67,7 +67,8 @@
 // Mini Pipelines
 
 .stage-cell {
-  .mini-pipeline-graph-dropdown-toggle {
+  .mini-pipeline-graph-dropdown-toggle,
+  .mini-pipeline-graph-gl-dropdown-toggle {
     svg {
       height: $ci-action-icon-size;
       width: $ci-action-icon-size;
@@ -138,7 +139,13 @@
 }
 
 // Dropdown button in mini pipeline graph
-button.mini-pipeline-graph-dropdown-toggle {
+button.mini-pipeline-graph-dropdown-toggle,
+// As the `mini-pipeline-item` mixin specificity is lower
+// than the toggle of dropdown with 'variant="link"' we add
+// classes ".gl-button.btn-link" to make it more specific.
+// Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item`
+// itself could increase its specificity to simplify this selector
+button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle {
   @include mini-pipeline-item();
 }
 
diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss
index 9ed48b693b9..a207c10b04f 100644
--- a/app/assets/stylesheets/page_bundles/signup.scss
+++ b/app/assets/stylesheets/page_bundles/signup.scss
@@ -73,3 +73,7 @@
     text-decoration: none;
   }
 }
+
+.edit-profile {
+  max-width: 460px;
+}
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
deleted file mode 100644
index af1eefd7587..00000000000
--- a/app/assets/stylesheets/pages/admin.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.info-well {
-  .admin-well-statistics,
-  .admin-well-features {
-    padding-bottom: 46px;
-  }
-}
-
-.usage-data {
-  max-height: 400px;
-}
-
-[data-page='admin:jobs:index'] {
-  .admin-builds-table {
-    td:last-child {
-      min-width: 120px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 9b17da80023..7111d3d4107 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -240,11 +240,6 @@
 
 .commit,
 .generic-commit-status {
-  a,
-  button {
-    vertical-align: baseline;
-  }
-
   a {
     color: $gl-text-color;
 
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 52bd16d1a79..ef737e11799 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -74,14 +74,10 @@
     justify-content: flex-end;
   }
 
-  .encoding-selector,
   .soft-wrap-toggle {
     display: inline-block;
     vertical-align: top;
     font-family: $regular-font;
-  }
-
-  .soft-wrap-toggle {
     margin: 0 $btn-side-margin;
 
     .soft-wrap {
@@ -128,15 +124,6 @@
         margin: 3px 0;
       }
 
-      .encoding-selector {
-        display: block;
-        margin: 3px 0;
-
-        button {
-          width: 100%;
-        }
-      }
-
       @media(max-width: map-get($grid-breakpoints, md)-1) {
         clear: both;
       }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index aeda91c1714..87307fd682e 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -260,7 +260,6 @@
 }
 
 .pipeline-quota {
-  border-top: 1px solid $table-border-color;
   border-bottom: 1px solid $table-border-color;
   margin: 0 0 $gl-padding;
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e5528c25e82..a6ab5459a84 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -117,6 +117,11 @@
   }
 }
 
+.reviewer .merge-icon {
+  bottom: -3px;
+  right: -3px;
+}
+
 .right-sidebar {
   position: fixed;
   top: $header-height;
@@ -156,14 +161,6 @@
     color: inherit;
   }
 
-  // TODO remove this class once we can generate a correct hover utility from `gitlab/ui`,
-  // see here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39286#note_396767000
-  .btn-link-hover:hover {
-    * {
-      @include gl-text-blue-800;
-    }
-  }
-
   .issuable-header-text {
     margin-top: 7px;
   }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 1caf62067a6..2a8a86615f6 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -108,18 +108,6 @@ ul.related-merge-requests > li {
   }
 }
 
-.issuable-email-modal-btn {
-  padding: 0;
-  color: $blue-600;
-  background-color: transparent;
-  border: 0;
-  outline: 0;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 .email-modal-input-group {
   margin-bottom: 10px;
 
@@ -203,15 +191,9 @@ ul.related-merge-requests > li {
   }
 }
 
-.discussion-reply-holder {
-  .avatar-note-form-holder .note-edit-form {
-    display: block;
-    margin-left: $note-icon-gutter-width;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 0;
-    }
-  }
+.discussion-reply-holder,
+.note-edit-form {
+  display: block;
 }
 
 .issue-sort-dropdown {
@@ -221,6 +203,10 @@ ul.related-merge-requests > li {
 
   .reverse-sort-btn {
     color: $gl-text-color-secondary;
+
+    &.disabled {
+      color: $gl-text-color-disabled;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 4d93702f1c2..b7d05fc411a 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -120,7 +120,7 @@
 }
 
 .labels-container {
-  background-color: $gray-light;
+  background-color: $gray-100;
   border-radius: $border-radius-default;
   padding: $gl-padding $gl-padding-8;
 }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 81a70470c65..019d827798c 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -42,8 +42,7 @@
   .login-box,
   .omniauth-container {
     box-shadow: 0 0 0 1px $border-color;
-    border-bottom-right-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
+    border-radius: $border-radius;
     padding: 15px;
 
     .login-heading h3 {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b99e619cc98..a62df1258af 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -221,7 +221,7 @@ $mr-widget-min-height: 69px;
 
   .mr-widget-pipeline-graph {
     .dropdown-menu {
-      z-index: 300;
+      z-index: $zindex-dropdown-menu;
     }
   }
 
@@ -375,13 +375,14 @@ $mr-widget-min-height: 69px;
       }
 
       .text {
-        span {
-          font-weight: $gl-font-weight-bold;
-        }
-
         p {
           margin-top: $gl-padding;
         }
+
+        .highlight {
+          margin: 0 0 $gl-padding;
+          font-weight: $gl-font-weight-bold;
+        }
       }
     }
 
@@ -981,7 +982,14 @@ $mr-widget-min-height: 69px;
   }
 
   .mini-pipeline-graph-dropdown-toggle,
-  .stage-cell .mini-pipeline-graph-dropdown-toggle svg {
+  .stage-cell .mini-pipeline-graph-dropdown-toggle svg,
+  // As the `mini-pipeline-item` mixin specificity is lower
+  // than the toggle of dropdown with 'variant="link"' we add
+  // classes ".gl-button.btn-link" to make it more specific.
+  // Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item`
+  // itself could increase its specificity to simplify this selector
+  button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle,
+  .stage-cell button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle svg {
     height: $ci-action-icon-size-lg;
     width: $ci-action-icon-size-lg;
   }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 254ad96bb57..ffbfa47f9bd 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -212,8 +212,12 @@ table {
   }
 }
 
-.note-edit-form {
+// Snippets are the only non-vue form left
+.snippets.note-edit-form {
   display: none;
+}
+
+.note-edit-form {
   font-size: 14px;
 
   .md-area {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 4216091e8a9..190bdcb1efd 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1,6 +1,5 @@
 $system-note-icon-size: 32px;
 $system-note-svg-size: 16px;
-$note-form-margin-left: 72px;
 
 @mixin vertical-line($left) {
   &::before {
@@ -54,16 +53,6 @@ $note-form-margin-left: 72px;
     &.note-form {
       margin-left: 0;
 
-      @include notes-media('min', map-get($grid-breakpoints, md)) {
-        margin-left: $note-form-margin-left;
-      }
-
-      .timeline-icon {
-        @include notes-media('min', map-get($grid-breakpoints, sm)) {
-          margin-left: -$note-icon-gutter-width;
-        }
-      }
-
       .timeline-content {
         margin-left: 0;
       }
@@ -84,36 +73,17 @@ $note-form-margin-left: 72px;
   .replies-toggle {
     background-color: $gray-light;
     padding: $gl-padding-8 $gl-padding;
-    border-top: 1px solid $gray-50;
-    border-bottom: 1px solid $gray-50;
+    border-top: 1px solid $gray-100;
+    border-bottom: 1px solid $gray-100;
 
     .collapse-replies-btn:hover {
       color: $blue-600;
     }
 
-    &.expanded {
-      span {
-        cursor: pointer;
-      }
-
-      svg {
-        position: relative;
-        top: 3px;
-      }
-    }
-
     &.collapsed {
       color: $gl-text-color-secondary;
       border-radius: 0 0 $border-radius-default $border-radius-default;
 
-      svg {
-        float: left;
-        position: relative;
-        top: $gl-padding-4;
-        margin-right: $gl-padding-8;
-        cursor: pointer;
-      }
-
       img {
         margin: -2px 4px 0 0;
       }
@@ -178,7 +148,6 @@ $note-form-margin-left: 72px;
   > li {
     display: block;
     position: relative;
-    border-bottom: 0;
 
     &.being-posted {
       pointer-events: none;
@@ -549,21 +518,6 @@ $note-form-margin-left: 72px;
 .code-commit .notes-content,
 .diff-viewer > .image ~ .note-container {
   background-color: $white;
-
-  .avatar-note-form-holder {
-    .user-avatar-link img {
-      margin: 13px $gl-padding $gl-padding;
-    }
-
-    form,
-    ~ .discussion-form-container {
-      padding: $gl-padding;
-
-      @include media-breakpoint-up(sm) {
-        margin-left: $note-icon-gutter-width;
-      }
-    }
-  }
 }
 
 .diff-viewer > .image ~ .note-container form.new-note {
@@ -953,14 +907,6 @@ $note-form-margin-left: 72px;
 .discussion-filter-container {
   .dropdown-menu {
     margin-bottom: $gl-padding-4;
-
-    @include media-breakpoint-down(md) {
-      margin-left: $btn-side-margin + $contextual-sidebar-collapsed-width;
-    }
-
-    @include media-breakpoint-down(xs) {
-      margin-left: $btn-side-margin;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 3605283245f..6a2fa2ee7a1 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -138,6 +138,13 @@
   }
 }
 
+.social-provider-btn-image {
+  > img {
+    width: 16px;
+    vertical-align: inherit;
+  }
+}
+
 .provider-btn-image {
   display: inline-block;
   padding: 5px 10px;
@@ -378,19 +385,6 @@ table.u2f-registrations,
     display: inline;
     margin-right: $gl-padding / 4;
   }
-
-  .badge-verification-status {
-    border-width: 1px;
-    border-style: solid;
-
-    &.verified {
-      @include green-status-color;
-    }
-
-    &.unverified {
-      @include status-color($gray-dark, color('gray'), $common-gray-dark);
-    }
-  }
 }
 
 .edit-user {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 7fafd28be56..8251cdb9bbb 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -571,10 +571,6 @@
         top: 0;
       }
     }
-
-    .btn-missing {
-      @extend .btn-missing;
-    }
   }
 }
 
@@ -996,6 +992,20 @@ pre.light-well {
       width: auto;
     }
   }
+
+  // Remove once gitlab/ui solution is implemented:
+  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1157
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/300405
+  .gl-search-box-by-type-input {
+    width: 100%;
+  }
+
+  // Remove once gitlab/ui solution is implemented
+  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1158
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/300405
+  .gl-new-dropdown-button-text {
+    @include str-truncated;
+  }
 }
 
 .clearable-input {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 352050f7b01..fa008a05e11 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -49,8 +49,6 @@
       position: relative;
 
       .dropdown-menu {
-        min-width: 100%;
-        width: 100%;
         left: inherit;
         right: 0;
       }
@@ -114,7 +112,7 @@
       }
 
       th {
-        border-top-color: $gray-light;
+        border: 0;
       }
 
       td {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 31a501f3a36..849749ee7c7 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -903,7 +903,7 @@ table a code {
   padding: 0;
   background-color: #4f4f4f;
 }
-.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
 }
 .dropdown-select {
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 7f6e537af8f..44da509481d 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -736,7 +736,6 @@ body {
   white-space: nowrap;
 }
 .btn:active, .btn.active {
-  box-shadow: rgba(0, 0, 0, 0.16);
   background-color: #eaeaea;
   border-color: #e3e3e3;
   color: #303030;
@@ -903,7 +902,7 @@ table a code {
   padding: 0;
   background-color: #dbdbdb;
 }
-.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
 }
 .dropdown-select {
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index af43c532b7c..4b88b94f3a6 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -1174,7 +1174,7 @@ table a code {
   padding: 0;
   background-color: #dbdbdb;
 }
-.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
 }
 .dropdown-select {
@@ -2093,8 +2093,7 @@ table.code {
 .login-page .login-box,
 .login-page .omniauth-container {
   box-shadow: 0 0 0 1px #dbdbdb;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-radius: 0.25rem;
   padding: 15px;
 }
 .login-page .login-box .nav .active a,
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index ab330ed69c6..d424dcbf8f2 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -110,7 +110,7 @@
 
 // This utility is used to force the z-index to match that of dropdown menu's
 .gl-z-dropdown-menu\! {
-  z-index: 300 !important;
+  z-index: $zindex-dropdown-menu !important;
 }
 
 .gl-flex-basis-quarter {
@@ -143,3 +143,17 @@
     flex-direction: column !important;
   }
 }
+
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1165
+.gl-xs-mb-4 {
+  @media (max-width: $breakpoint-sm) {
+    margin-bottom: $gl-spacing-scale-4;
+  }
+}
+
+// Same as above
+.gl-xs-mb-4\! {
+  @media (max-width: $breakpoint-sm) {
+    margin-bottom: $gl-spacing-scale-4 !important;
+  }
+}
-- 
cgit v1.2.1