Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

16 files changed, 156 insertions, 291 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
deleted file mode 100644
index 0ada5fabde9..00000000000
--- a/app/assets/stylesheets/framework/blank.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}
-
-.experiment-new-project-page-blank-state {
-  @include media-breakpoint-down(md) {
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .blank-state-icon {
-    min-width: 215px;
-  }
-}
-
-$experiment-new-project-indigo-700: #41419f;
-
-.experiment-new-project-page-blank-state-title {
-  color: $experiment-new-project-indigo-700;
-}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d1fa1187703..603d28a8395 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -337,7 +337,7 @@
 
 .btn-loading {
   &:not(.disabled) {
-    .spinner {
+    .gl-spinner {
       display: none;
     }
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 652ffd79ab3..a7ce19ffc69 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -93,6 +93,9 @@
 
 .tab-content {
   overflow: visible;
+  @include media-breakpoint-down(sm) {
+    isolation: isolate;
+  }
 }
 
 pre {
@@ -266,12 +269,6 @@ img.emoji {
   height: 220px;
 }
 
-.description-block {
-  @extend .light-well;
-  @extend .light;
-  margin-bottom: 10px;
-}
-
 .footer-links {
   margin-bottom: 20px;
 
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index c5467c304ec..14d1a0663d0 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -429,30 +429,6 @@
   display: none;
 }
 
-.toggle-mobile-nav {
-  display: none;
-  background-color: transparent;
-  border: 0;
-  padding: 6px 16px;
-  margin: 0 0 0 -15px;
-  height: 46px;
-  color: $gl-text-color;
-
-  @include media-breakpoint-down(sm) {
-    display: flex;
-    align-items: center;
-
-    i {
-      font-size: 18px;
-    }
-
-    + .breadcrumbs-links {
-      padding-left: $gl-padding;
-      border-left: 1px solid $gl-text-color-quaternary;
-    }
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .close-nav-button {
     display: flex;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index bc7a31c112f..a07e0b48cff 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -670,10 +670,6 @@ table.code {
   float: right;
 }
 
-.files-changed {
-  border-bottom: 0;
-}
-
 .merge-request-details .file-content.image_file img {
   max-height: 50vh;
 }
@@ -733,7 +729,7 @@ table.code {
 }
 
 .files {
-  .diff-file:last-child {
+  .diff-file:not(.is-virtual-scrolling):last-child {
     margin-bottom: 0;
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ff42cd836da..894eddbe1a7 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -147,7 +147,7 @@
     position: absolute;
   }
 
-  .spinner {
+  .gl-spinner {
     position: absolute;
     top: 9px;
     right: 8px;
@@ -266,15 +266,6 @@
     }
   }
 
-  .shortcut-mappings {
-    display: none;
-  }
-
-  &.shortcuts .shortcut-mappings {
-    display: inline-block;
-    margin-right: 5px;
-  }
-
   ul {
     margin: 0;
     padding: 0;
@@ -848,12 +839,56 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 .frequent-items-dropdown-container {
   display: flex;
   flex-direction: row;
-  width: 500px;
-  height: 354px;
+  height: $grid-size * 40;
+
+  &.with-deprecated-styles {
+    width: 500px;
+    height: 354px;
+
+    .section-header,
+    .frequent-items-list-container li.section-empty {
+      padding: 0 $gl-padding;
+    }
+
+    .search-input-container {
+      position: relative;
+      padding: 4px $gl-padding;
+
+      .search-icon {
+        position: absolute;
+        top: 13px;
+        right: 25px;
+        color: $gray-300;
+      }
+    }
+
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
+      width: 100%;
+      height: auto;
+      flex: 1;
+
+      .frequent-items-dropdown-sidebar,
+      .frequent-items-dropdown-content {
+        width: 100%;
+      }
+
+      .frequent-items-dropdown-sidebar {
+        border-bottom: 1px solid $border-color;
+        border-right: 0;
+      }
+    }
+
+    .frequent-items-list-container {
+      width: auto;
+      height: auto;
+      padding-bottom: 0;
+    }
+  }
 
   .frequent-items-dropdown-sidebar,
   .frequent-items-dropdown-content {
-    padding: 8px 0;
+    @include gl-pt-3;
   }
 
   .loading-animation {
@@ -870,32 +905,13 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: 70%;
   }
 
-  @include media-breakpoint-down(xs) {
-    flex-direction: column;
-    width: 100%;
-    height: auto;
-    flex: 1;
-
-    .frequent-items-dropdown-sidebar,
-    .frequent-items-dropdown-content {
-      width: 100%;
-    }
-
-    .frequent-items-dropdown-sidebar {
-      border-bottom: 1px solid $border-color;
-      border-right: 0;
-    }
-  }
-
   .section-header,
   .frequent-items-list-container li.section-empty {
-    padding: 0 $gl-padding;
     color: $gl-text-color-secondary;
     font-size: $gl-font-size;
   }
 
   .frequent-items-list-container {
-    height: 304px;
     padding: 8px 0;
     overflow-y: auto;
 
@@ -908,36 +924,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     }
   }
 
-  .search-input-container {
-    position: relative;
-    padding: 4px $gl-padding;
-
-    .search-icon {
-      position: absolute;
-      top: 13px;
-      right: 25px;
-      color: $gray-300;
-    }
-  }
-
   .section-header {
     font-weight: 700;
     margin-top: 8px;
   }
-
-  @include media-breakpoint-down(xs) {
-    .frequent-items-list-container {
-      width: auto;
-      height: auto;
-      padding-bottom: 0;
-    }
-  }
 }
 
 .frequent-items-list-item-container {
   .frequent-items-item-avatar-container,
   .frequent-items-item-metadata-container {
-    float: left;
+    flex-shrink: 0;
   }
 
   .frequent-items-item-metadata-container {
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 78995c6e4f5..05b53e0c3d8 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -11,7 +11,7 @@
 
   &::before {
     content: '';
-    @include spinner(32px, 3px);
+    @include spinner-deprecated(32px, 3px);
     @include gl-absolute;
     @include gl-z-index-1;
   }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 432be7d0b3f..7566a533911 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,3 +1,5 @@
+$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important;
+
 .navbar-gitlab {
   padding: 0 16px;
   z-index: $header-zindex;
@@ -254,6 +256,7 @@
       }
     }
 
+    .top-nav-toggle,
     > button {
       background: transparent;
       border: 0;
@@ -605,3 +608,60 @@
 
   @include media-breakpoint-down(xs) { margin-right: 3px; }
 }
+
+.toggle-mobile-nav {
+  display: none;
+  background-color: transparent;
+  border: 0;
+  padding: 6px 16px;
+  margin: 0 0 0 -15px;
+  height: 46px;
+  color: $gl-text-color;
+
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 18px;
+    }
+
+    + .breadcrumbs-links {
+      padding-left: $gl-padding;
+      border-left: 1px solid $gl-text-color-quaternary;
+    }
+  }
+}
+
+.top-nav-container-view {
+  .gl-new-dropdown & .gl-search-box-by-type {
+    @include gl-m-0;
+  }
+
+  .frequent-items-list-item-container > a:hover {
+    background-color: $top-nav-hover-bg;
+  }
+}
+
+.top-nav-toggle {
+  .dropdown-icon {
+    @include gl-mr-3;
+  }
+
+  .dropdown-chevron {
+    top: 0;
+  }
+}
+
+.top-nav-menu-item {
+  color: var(--indigo-900, $theme-indigo-900) !important;
+
+  &.active,
+  &:hover {
+    background-color: $top-nav-hover-bg;
+  }
+
+  .gl-icon {
+    color: inherit !important;
+  }
+}
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 4d5032ac674..8baf70da0c6 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -5,16 +5,7 @@
  */
 
 .status-box {
-
-  /* Extra small devices (phones, less than 768px) */
-  /* No media query since this is the default in Bootstrap */
-  padding: 5px 11px;
-  margin-top: 4px;
-  /* Small devices (tablets, 768px and up) */
-  @include media-breakpoint-up(sm) {
-    padding: 0 $gl-btn-padding;
-    margin-top: 5px;
-  }
+  padding: 0 $gl-btn-padding;
 
   border-radius: $border-radius-default;
   display: block;
diff --git a/app/assets/stylesheets/framework/kbd.scss b/app/assets/stylesheets/framework/kbd.scss
new file mode 100644
index 00000000000..05991bc16fd
--- /dev/null
+++ b/app/assets/stylesheets/framework/kbd.scss
@@ -0,0 +1,15 @@
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: $gl-font-size-monospace-sm;
+  line-height: 10px;
+  color: var(--gray-700, $gray-700);
+  vertical-align: middle;
+  background-color: var(--gray-10, $gray-10);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gray-100, $gray-100) var(--gray-100, $gray-100) var(--gray-200, $gray-200);
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 var(--gray-200, $gray-200) inset;
+}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index df2ba718c72..a3e8b2c245c 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -146,7 +146,7 @@ ul.content-list {
       > .btn,
       > .btn-group,
       > .dropdown.inline {
-        margin-right: $gl-padding-top;
+        margin-right: $grid-size;
         display: inline-block;
         margin-top: 3px;
         margin-bottom: 4px;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 27b7cac2df5..f904ef11f5b 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -182,6 +182,11 @@
         width: 100%;
       }
 
+      /* This resets the width of the control so that the search button doesn't wrap */
+      .gl-search-box-by-click .form-control {
+        width: 1%;
+      }
+
       .dropdown-menu-toggle {
         margin-bottom: 0;
       }
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index c8eadce5c51..afd2e7ff757 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -1,16 +1,20 @@
-@mixin spinner-color($color) {
+/**
+* Do not use these spinner mixins. Rely on GitLab UI
+* GlLoadingIcon component instead.
+*/
+@mixin spinner-color-deprecated($color) {
   border-color: rgba($color, 0.25);
   border-top-color: $color;
 }
 
-@mixin spinner-size($size, $border-width) {
+@mixin spinner-size-deprecated($size, $border-width) {
   width: $size;
   height: $size;
   border-width: $border-width;
   @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width}));
 }
 
-@keyframes spinner-rotate {
+@keyframes spinner-rotate-deprecated {
   0% {
     transform: rotate(0);
   }
@@ -20,47 +24,16 @@
   }
 }
 
-@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) {
+@mixin spinner-deprecated($size: 16px, $border-width: 2px, $color: $gray-700) {
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
-  animation-name: spinner-rotate;
+  animation-name: spinner-rotate-deprecated;
   animation-duration: 0.6s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   border-style: solid;
   display: inline-flex;
-  @include spinner-size($size, $border-width);
-  @include spinner-color($color);
-}
-
-.spinner {
-  @include spinner;
-
-  &.spinner-md {
-    @include spinner-size(32px, 3px);
-  }
-
-  &.spinner-lg {
-    @include spinner-size(64px, 4px);
-  }
-
-  &.spinner-dark {
-    @include spinner-color($gray-700);
-  }
-
-  &.spinner-light {
-    @include spinner-color($white);
-  }
-}
-
-.btn {
-  .spinner,
-  .gl-spinner {
-    vertical-align: text-bottom;
-  }
-}
-
-.spin {
-  animation: spinner-rotate 2s infinite linear;
+  @include spinner-size-deprecated($size, $border-width);
+  @include spinner-color-deprecated($color);
 }
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 1504f3ee50f..9b38e842635 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -50,6 +50,12 @@
 
   img.avatar {
     margin-right: $gl-padding;
+
+    @include media-breakpoint-down(sm) {
+      width: $gl-spacing-scale-6;
+      height: $gl-spacing-scale-6;
+      margin-right: $gl-padding-8;
+    }
   }
 
   .controls {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 648ae29e212..603b05efe10 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -81,22 +81,6 @@
     word-break: keep-all;
   }
 
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: $gray-700;
-    vertical-align: middle;
-    background-color: $gray-10;
-    border-width: 1px;
-    border-style: solid;
-    border-color: $gray-100 $gray-100 $gray-200;
-    border-image: none;
-    border-radius: 3px;
-    box-shadow: 0 -1px 0 $gray-200 inset;
-  }
-
   h1 {
     font-size: 1.75em;
     font-weight: $gl-font-weight-bold;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 18aa0d3013d..bfb21d7112b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -283,6 +283,8 @@ $indigo-700: #4b4ba3;
 $indigo-800: #393982;
 $indigo-900: #292961;
 $indigo-950: #1a1a40;
+// To do this variant right for darkmode, we need to create a variable for it.
+$indigo-900-alpha-008: rgba($indigo-900, 0.08);
 
 $theme-blue-50: #f4f8fc;
 $theme-blue-100: #e6edf5;