Add latest changes from gitlab-org/gitlab@master

13 files changed, 96 insertions, 161 deletions

diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 6c14eeafc0b..7a77256398e 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -34,7 +34,7 @@
     @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: calc(#{$mr-version-controls-height} + #{$header-height} + #{$mr-tabs-height} + 11px);
+      $mr-file-header-top: calc(#{$header-height} + #{$mr-tabs-height});
 
       position: -webkit-sticky;
       position: sticky;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 12b4d3ac0cc..f8ac3adebb5 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -10,17 +10,6 @@
   right: 0;
   border-radius: 0;
 
-  .logo-text {
-    line-height: initial;
-
-    svg {
-      width: 55px;
-      height: 14px;
-      margin: 0;
-      fill: $white;
-    }
-  }
-
   .close-icon {
     display: none;
   }
@@ -71,7 +60,7 @@
         display: flex;
         align-items: center;
         padding: 2px 8px;
-        margin: 5px 2px 5px -12px;
+        margin: 4px 2px 4px -12px;
         border-radius: $border-radius-default;
       }
 
diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss
index c5feefb8c54..1845438eedb 100644
--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
@@ -9,19 +9,16 @@
 }
 
 .tanuki-logo {
-  .tanuki-left-ear,
-  .tanuki-right-ear,
-  .tanuki-nose {
+  .tanuki {
     @include tanuki-logo-colors($tanuki-red);
   }
 
-  .tanuki-left-eye,
-  .tanuki-right-eye {
+  .left-cheek,
+  .right-cheek {
     @include tanuki-logo-colors($tanuki-orange);
   }
 
-  .tanuki-left-cheek,
-  .tanuki-right-cheek {
+  .chin {
     @include tanuki-logo-colors($tanuki-yellow);
   }
 
@@ -31,98 +28,54 @@
       @include webkit-prefix(animation-iteration-count, infinite);
     }
 
-    .tanuki-left-cheek {
-      @include include-keyframes(animate-tanuki-left-cheek) {
+    .tanuki {
+      @include include-keyframes(animate-tanuki-base) {
         0%,
-        10%,
-        100% {
-          fill: lighten($tanuki-yellow, 25%);
-        }
-
-        90% {
-          fill: $tanuki-yellow;
-        }
-      }
-    }
-
-    .tanuki-left-eye {
-      @include include-keyframes(animate-tanuki-left-eye) {
-        10%,
-        80% {
-          fill: $tanuki-orange;
-        }
-
-        20%,
-        90% {
-          fill: lighten($tanuki-orange, 25%);
-        }
-      }
-    }
-
-    .tanuki-left-ear {
-      @include include-keyframes(animate-tanuki-left-ear) {
-        10%,
-        80% {
+        50% {
           fill: $tanuki-red;
         }
 
-        20%,
-        90% {
+        25% {
           fill: lighten($tanuki-red, 25%);
         }
       }
     }
 
-    .tanuki-nose {
-      @include include-keyframes(animate-tanuki-nose) {
-        20%,
-        70% {
-          fill: $tanuki-red;
-        }
-
-        30%,
-        80% {
-          fill: lighten($tanuki-red, 25%);
-        }
-      }
-    }
-
-    .tanuki-right-eye {
-      @include include-keyframes(animate-tanuki-right-eye) {
-        30%,
-        60% {
+    .right-cheek {
+      @include include-keyframes(animate-tanuki-right-cheek) {
+        25%,
+        75% {
           fill: $tanuki-orange;
         }
 
-        40%,
-        70% {
+        50% {
           fill: lighten($tanuki-orange, 25%);
         }
       }
     }
 
-    .tanuki-right-ear {
-      @include include-keyframes(animate-tanuki-right-ear) {
-        30%,
-        60% {
-          fill: $tanuki-red;
+    .chin {
+      @include include-keyframes(animate-tanuki-chin) {
+        50%,
+        100% {
+          fill: $tanuki-yellow;
         }
 
-        40%,
-        70% {
-          fill: lighten($tanuki-red, 25%);
+        75% {
+          fill: lighten($tanuki-yellow, 25%);
         }
       }
     }
 
-    .tanuki-right-cheek {
-      @include include-keyframes(animate-tanuki-right-cheek) {
-        40% {
-          fill: $tanuki-yellow;
+    .left-cheek {
+      @include include-keyframes(animate-tanuki-left-cheek) {
+        25%,
+        75% {
+          fill: $tanuki-orange;
         }
 
-        60% {
-          fill: lighten($tanuki-yellow, 25%);
+        100% {
+          fill: lighten($tanuki-orange, 25%);
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 57504124f00..a5f57cdafd2 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -933,7 +933,6 @@ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
 Merge requests
 */
 $mr-tabs-height: 48px;
-$mr-version-controls-height: 56px;
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss
index 5f50489555b..b8cbe64df38 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailer.scss
@@ -197,6 +197,5 @@ tr.footer td {
 
   .footer-logo {
     width: 90px;
-    height: 33px;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 34a3d936a67..2d66b44ed13 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -41,7 +41,7 @@ $tabs-holder-z-index: 250;
   // If they don't match, the file tree and the diff files stick
   // to the top at different heights, which is a bad-looking defect
   $diff-file-header-top: 11px;
-  $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$mr-version-controls-height} + #{$diff-file-header-top});
+  $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
 
   position: -webkit-sticky;
   position: sticky;
@@ -677,11 +677,8 @@ $tabs-holder-z-index: 250;
 }
 
 .mr-version-controls {
-  position: relative;
-  z-index: $tabs-holder-z-index + 10;
   background: var(--white, $white);
   color: var(--gl-text-color, $gl-text-color);
-  margin-top: -1px;
 
   .mr-version-menus-container {
     display: flex;
@@ -703,7 +700,7 @@ $tabs-holder-z-index: 250;
   }
 
   .content-block {
-    padding: $gl-padding;
+    padding: $gl-padding-8 $gl-padding;
     border-bottom: 0;
   }
 
@@ -721,28 +718,6 @@ $tabs-holder-z-index: 250;
   .btn {
     height: 34px;
   }
-
-  @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: calc(#{$header-height} + #{$mr-tabs-height});
-
-    .with-system-header & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
-    }
-
-    .with-system-header.with-performance-bar & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
-    }
-
-    .mr-version-menus-container {
-      flex-wrap: nowrap;
-    }
-
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
-    }
-  }
 }
 
 .mr-section-container .resize-observer > object {
diff --git a/app/assets/stylesheets/page_bundles/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss
index 8eb66e58aed..9dff3e9c99c 100644
--- a/app/assets/stylesheets/page_bundles/terms.scss
+++ b/app/assets/stylesheets/page_bundles/terms.scss
@@ -22,14 +22,6 @@
       justify-content: space-between;
       line-height: $line-height-base;
 
-      .logo-text {
-        width: 55px;
-        height: 24px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
       .navbar-collapse {
         padding-right: 0;
         flex-grow: 0;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b4fa98f6ccc..896ca5134ea 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -210,16 +210,6 @@
     }
   }
 
-  .cross-project-reference {
-    span {
-      width: 85%;
-    }
-
-    button {
-      padding: 1px 5px;
-    }
-  }
-
   .selectbox {
     display: none;
 
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index d8d0eda9478..0683123c778 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -771,15 +771,6 @@ input {
   right: 0;
   border-radius: 0;
 }
-.navbar-gitlab .logo-text {
-  line-height: initial;
-}
-.navbar-gitlab .logo-text svg {
-  width: 55px;
-  height: 14px;
-  margin: 0;
-  fill: #333;
-}
 .navbar-gitlab .close-icon {
   display: none;
 }
@@ -818,7 +809,7 @@ input {
   display: flex;
   align-items: center;
   padding: 2px 8px;
-  margin: 5px 2px 5px -12px;
+  margin: 4px 2px 4px -12px;
   border-radius: 4px;
 }
 .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
@@ -998,6 +989,16 @@ input {
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
 }
+.tanuki-logo .tanuki {
+  fill: #e24329;
+}
+.tanuki-logo .left-cheek,
+.tanuki-logo .right-cheek {
+  fill: #fc6d26;
+}
+.tanuki-logo .chin {
+  fill: #fca326;
+}
 .context-header {
   position: relative;
   margin-right: 2px;
@@ -1902,9 +1903,6 @@ body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
   background-color: var(--gray-100, #303030);
   color: var(--gray-900, #fafafa);
 }
-body.gl-dark .logo-text svg {
-  fill: var(--gl-text-color);
-}
 body.gl-dark .navbar-gitlab {
   background-color: var(--gray-50);
   box-shadow: 0 1px 0 0 var(--gray-100);
@@ -2048,6 +2046,19 @@ body.gl-dark {
 .gl-display-none {
   display: none;
 }
+@media (min-width: 992px) {
+  .gl-lg-display-none\! {
+    display: none !important;
+  }
+}
+.gl-display-flex {
+  display: flex;
+}
+@media (min-width: 992px) {
+  .gl-lg-display-flex {
+    display: flex;
+  }
+}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 61d1b055d02..18d788a141d 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -756,15 +756,6 @@ input {
   right: 0;
   border-radius: 0;
 }
-.navbar-gitlab .logo-text {
-  line-height: initial;
-}
-.navbar-gitlab .logo-text svg {
-  width: 55px;
-  height: 14px;
-  margin: 0;
-  fill: #fff;
-}
 .navbar-gitlab .close-icon {
   display: none;
 }
@@ -803,7 +794,7 @@ input {
   display: flex;
   align-items: center;
   padding: 2px 8px;
-  margin: 5px 2px 5px -12px;
+  margin: 4px 2px 4px -12px;
   border-radius: 4px;
 }
 .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
@@ -983,6 +974,16 @@ input {
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
 }
+.tanuki-logo .tanuki {
+  fill: #e24329;
+}
+.tanuki-logo .left-cheek,
+.tanuki-logo .right-cheek {
+  fill: #fc6d26;
+}
+.tanuki-logo .chin {
+  fill: #fca326;
+}
 .context-header {
   position: relative;
   margin-right: 2px;
@@ -1706,6 +1707,19 @@ svg.s16 {
 .gl-display-none {
   display: none;
 }
+@media (min-width: 992px) {
+  .gl-lg-display-none\! {
+    display: none !important;
+  }
+}
+.gl-display-flex {
+  display: flex;
+}
+@media (min-width: 992px) {
+  .gl-lg-display-flex {
+    display: flex;
+  }
+}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 751ad26ca21..de6b8e6e672 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -519,6 +519,16 @@ label.label-bold {
 .navbar-empty .brand-header-logo {
   max-height: 100%;
 }
+.tanuki-logo .tanuki {
+  fill: #e24329;
+}
+.tanuki-logo .left-cheek,
+.tanuki-logo .right-cheek {
+  fill: #fc6d26;
+}
+.tanuki-logo .chin {
+  fill: #fca326;
+}
 input::-moz-placeholder {
   color: #868686;
   opacity: 1;
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 83254fe1a52..dbb961fe71f 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -71,10 +71,13 @@
 body.gl-dark {
   @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white);
 
-  .logo-text svg {
-    fill: var(--gl-text-color);
+  .terms {
+    .logo-text {
+      fill: var(--black);
+    }
   }
 
+
   .navbar-gitlab {
     background-color: var(--gray-50);
     box-shadow: 0 1px 0 0 var(--gray-100);
diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss
index f2fdd499781..10e03fb885c 100644
--- a/app/assets/stylesheets/themes/theme_light.scss
+++ b/app/assets/stylesheets/themes/theme_light.scss
@@ -15,8 +15,8 @@ body {
       background-color: $gray-50;
       box-shadow: 0 1px 0 0 $border-color;
 
-      .logo-text svg {
-        fill: $gray-900;
+      .logo-text {
+        fill: #171321;
       }
 
       .navbar-sub-nav,