Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

17 files changed, 94 insertions, 77 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index a7623b65539..662f7f52d61 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -274,7 +274,9 @@
   // `position:absolute`
   &::after {
     content: '\a0';
+    display: block !important;
     width: 1em;
+    color: transparent;
   }
 
   .reaction-control-icon {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index b51fec925cb..d1fa1187703 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -196,10 +196,6 @@
     @include btn-orange;
   }
 
-  &.btn-close {
-    @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
-  }
-
   &.btn-danger {
     @include btn-red;
   }
@@ -216,6 +212,7 @@
     color: $gray-700;
   }
 
+  // deprecated class
   &.btn-text-field {
     width: 100%;
     text-align: left;
@@ -436,32 +433,27 @@
 }
 
 // All disabled buttons, regardless of color, type, etc
-%disabled {
-  background-color: $gray-light;
-  border-color: $gray-100;
-  color: $gl-text-color-disabled;
-  opacity: 1;
-  text-decoration: none;
-  cursor: default;
-
-  &.cursor-not-allowed {
-    cursor: not-allowed;
-  }
-
-  i {
-    color: $gl-text-color-disabled;
-  }
-}
-
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn,
 .dropdown-toggle[disabled],
 [disabled].dropdown-menu-toggle {
-  @extend %disabled;
-
+  &,
   &:hover {
-    @extend %disabled;
+    background-color: $gray-light;
+    border-color: $gray-100;
+    color: $gl-text-color-disabled;
+    opacity: 1;
+    text-decoration: none;
+    cursor: default;
+
+    &.cursor-not-allowed {
+      cursor: not-allowed;
+    }
+
+    i {
+      color: $gl-text-color-disabled;
+    }
   }
 
   &.btn-link {
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index e30caeb1dfb..bd15022eadf 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -1035,7 +1035,6 @@ table.code {
     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;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f56d8f2c2a9..bdde6c7b313 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -34,7 +34,14 @@
     overflow-y: auto;
 
     &.dropdown-extended-height {
-      max-height: 400px;
+      $extended-max-height: 400px;
+
+      max-height: $extended-max-height;
+
+      // See comment below for explanation
+      .gl-new-dropdown-inner {
+        max-height: $extended-max-height - 2px;
+      }
     }
 
     @include media-breakpoint-down(xs) {
@@ -46,6 +53,15 @@
       overflow-y: initial;
       max-height: initial;
     }
+
+    // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner`
+    // as `$dropdown-max-height`, but the `max-height` rule above forces
+    // the parent `.dropdown-menu` to be _slightly_ too small because of
+    // the 1px borders. The workaround below overrides the @gitlab/ui style
+    // to avoid a double scroll bar.
+    .gl-new-dropdown-inner {
+      max-height: $dropdown-max-height - 2px;
+    }
   }
 
   .dropdown-toggle,
@@ -1093,3 +1109,11 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: $gl-dropdown-width-wide;
   }
 }
+
+// This class won't be needed once we can add a prop for this in the GitLab UI component
+// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966
+.gl-new-dropdown.gl-dropdown-menu-full-width {
+  .dropdown-menu {
+    width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index c3b287a6c3d..eda3e33a6aa 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -3,6 +3,11 @@
   @include gl-display-flex;
   @include gl-justify-content-center;
   @include gl-align-items-center;
+  @include gl-z-index-0;
+
+  > * {
+    filter: blur(5px);
+  }
 
   &::before {
     content: '';
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 13c5541da92..c5c660c1014 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -16,3 +16,26 @@ gl-emoji {
     vertical-align: baseline;
   }
 }
+
+.emoji-picker-category-header {
+  @include gl-sticky;
+  background-color: $white-transparent;
+}
+
+.emoji-picker-emoji {
+  height: 30px;
+  // Create a width that fits 9 emojis per row
+  width: 100 / 9 * 1%;
+}
+
+.emoji-picker .gl-new-dropdown .dropdown-menu {
+  width: 350px;
+}
+
+.emoji-picker-category-tab {
+  border-bottom-color: transparent;
+}
+
+.emoji-picker .gl-new-dropdown-inner > :last-child {
+  padding-bottom: 0;
+}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 07d59847829..a4af45a467c 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -265,6 +265,7 @@
   flex: 1;
   position: relative;
   min-width: 0;
+  height: 2rem;
   background-color: $input-bg;
 }
 
@@ -453,7 +454,7 @@
 .search-token-target-branch {
   .value {
     font-family: $monospace-font;
-    font-size: 13px;
+    font-size: $gl-font-size-monospace;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 6e47fef02d5..c366bf80093 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -35,7 +35,8 @@ label {
     margin: 0;
   }
 
-  &.form-check-label {
+  &.form-check-label,
+  &.custom-control-label {
     font-weight: $gl-font-weight-normal;
   }
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ffcc20b624b..fdb56a128c7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -4,7 +4,6 @@
   margin-bottom: 0;
   min-height: $header-height;
   border: 0;
-  border-bottom: 1px solid $border-color;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 28577e2801e..73a2170fc68 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -45,8 +45,7 @@
 
     a {
       font-family: $monospace-font;
-      display: flex;
-      justify-content: flex-end;
+      display: block;
       font-size: $code-font-size !important;
       white-space: nowrap;
 
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index cac3695e1a1..4f9896dd58a 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -8,9 +8,8 @@ html {
 
 body {
   // Improves readability for dyslexic users; supported only in Chrome/Safari so far
-  // scss-lint:disable PropertySpelling
   text-decoration-skip: ink;
-  // scss-lint:enable PropertySpelling
+
   &.navless {
     background-color: $white !important;
   }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b0334da6943..df2ba718c72 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -192,11 +192,6 @@ ul.content-list {
     display: flex;
     align-items: center;
     white-space: nowrap;
-
-    // Override style that allows the flex-row text to wrap.
-    &.allow-wrap {
-      white-space: normal;
-    }
   }
 
   .row-main-content {
@@ -283,12 +278,6 @@ ul.indent-list {
   to { transform: rotate(360deg); }
 }
 
-.namespace-title {
-  .tooltip-inner {
-    max-width: 350px;
-  }
-}
-
 .horizontal-list {
   padding-left: 0;
   list-style: none;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index e29e204b14f..1e2fc1445e8 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -433,7 +433,6 @@
 @mixin middle-dot-divider {
   &::after {
     // Duplicate `content` property used as a fallback
-    // scss-lint:disable DuplicateProperty
     content: '\00B7'; // middle dot fallback if browser does not support alternative content
     content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
     padding: 0 0.375rem;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 2dbeacb0f8c..ec433434573 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -130,22 +130,6 @@ body.modal-open {
 
 .issues-import-modal,
 .issuable-export-modal {
-  .modal-header {
-    justify-content: flex-start;
-
-    .import-export-svg-container {
-      flex-grow: 1;
-      height: 56px;
-      padding: $gl-btn-padding $gl-btn-padding 0;
-      text-align: right;
-
-      .illustration {
-        height: inherit;
-        width: initial;
-      }
-    }
-  }
-
   .modal-body {
     padding: 0;
 
diff --git a/app/assets/stylesheets/framework/tooltips.scss b/app/assets/stylesheets/framework/tooltips.scss
deleted file mode 100644
index edc2fb532c8..00000000000
--- a/app/assets/stylesheets/framework/tooltips.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.tooltip-inner {
-  font-size: $gl-font-size-small;
-  border-radius: $border-radius-default;
-  line-height: $gl-line-height;
-  font-weight: $gl-font-weight-normal;
-}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 496e2aba421..5624a6ea8a3 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -78,7 +78,9 @@
   code {
     font-family: $monospace-font;
     white-space: pre-wrap;
-    word-wrap: normal;
+    // Safari
+    word-wrap: break-word;
+    overflow-wrap: break-word;
     word-break: keep-all;
   }
 
@@ -344,6 +346,9 @@
     // Multi-line code blocks should scroll horizontally
     code {
       white-space: pre;
+      // Safari
+      word-wrap: normal;
+      overflow-wrap: normal;
     }
 
     &.plain-readme {
@@ -430,8 +435,7 @@
     }
   }
 
-  a[href*='/uploads/'],
-  a[href*='storage.googleapis.com/google-code-attachments/'] {
+  a.with-attachment-icon {
     &::before {
       margin-right: 4px;
 
@@ -441,6 +445,11 @@
       -webkit-font-smoothing: antialiased;
       content: '📎';
     }
+  }
+
+  a[href*='/uploads/'],
+  a[href*='storage.googleapis.com/google-code-attachments/'] {
+    @extend .with-attachment-icon;
 
     &.no-attachment-icon {
       &::before {
@@ -604,7 +613,7 @@ pre {
   display: block;
   padding: $gl-padding-8 $input-horizontal-padding;
   margin: 0 0 $gl-padding-8;
-  font-size: 13px;
+  font-size: $gl-font-size-monospace;
   word-break: break-all;
   word-wrap: break-word;
   color: $gl-text-color;
@@ -646,7 +655,7 @@ code {
  */
 textarea.js-gfm-input {
   font-family: $monospace-font;
-  font-size: 13px;
+  font-size: $gl-font-size-monospace;
 }
 
 .strikethrough {
@@ -699,13 +708,11 @@ textarea {
     opacity: 1; // FF defaults to 0.54
   }
 
-  // scss-lint:disable PseudoElement
   // support Edge vendor prefix
   &::-ms-input-placeholder {
     color: $gl-text-color-tertiary;
   }
 
-  // scss-lint:disable PseudoElement
   // support IE vendor prefix
   &:-ms-input-placeholder {
     color: $gl-text-color-tertiary;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4bf9236407f..1aa4177c902 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -443,7 +443,7 @@ $gl-avatar-size: 40px;
 $border-radius-default: 4px;
 $border-radius-small: 2px;
 $border-radius-large: 8px;
-$default-icon-size: 18px;
+$default-icon-size: 16px;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
@@ -830,8 +830,8 @@ $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
 /*
 GitLab Plans
 */
-$gl-gold-plan: #d4af37;
-$gl-silver-plan: #91a1ab;
+$gl-ultimate-plan: #d4af37;
+$gl-premium-plan: #91a1ab;
 $gl-bronze-plan: #cd7f32;
 
 /*