Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

1 files changed, 90 insertions, 57 deletions

diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index adafe719892..c5a5d1aa289 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -119,7 +119,7 @@ kbd kbd {
 .form-control {
   display: block;
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 400;
@@ -132,10 +132,6 @@ kbd kbd {
 }
 @media (prefers-reduced-motion: reduce) {
 }
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #333238;
-}
 .form-control::placeholder {
   color: #626168;
   opacity: 1;
@@ -144,18 +140,6 @@ kbd kbd {
   background-color: #fbfafd;
   opacity: 1;
 }
-.form-inline {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-}
-@media (min-width: 576px) {
-  .form-inline .form-control {
-    display: inline-block;
-    width: auto;
-    vertical-align: middle;
-  }
-}
 .btn {
   display: inline-block;
   font-weight: 400;
@@ -352,6 +336,7 @@ kbd kbd {
   border: 0;
 }
 .gl-avatar {
+  display: inline-flex;
   border-width: 1px;
   border-style: solid;
   border-color: rgba(31, 30, 36, 0.08);
@@ -566,17 +551,13 @@ strong {
 svg {
   vertical-align: baseline;
 }
-.form-control,
-.search form {
+.form-control {
   font-size: 0.875rem;
 }
 .hidden {
   display: none !important;
   visibility: hidden !important;
 }
-.hide {
-  display: none;
-}
 .badge:not(.gl-badge) {
   padding: 4px 5px;
   font-size: 12px;
@@ -597,6 +578,14 @@ svg {
 html {
   overflow-y: scroll;
 }
+.layout-page {
+  padding-top: calc(
+    var(--header-height, 48px) +
+      calc(var(--system-header-height) + var(--performance-bar-height)) +
+      var(--top-bar-height)
+  );
+  padding-bottom: var(--system-footer-height);
+}
 @media (min-width: 576px) {
   .logged-out-marketing-header {
     --header-height: 72px;
@@ -636,39 +625,40 @@ html {
   color: #535158;
   vertical-align: baseline;
 }
-.gl-font-sm {
-  font-size: 12px;
+:root {
+  --performance-bar-height: 0px;
+  --system-header-height: 0px;
+  --top-bar-height: 0px;
+  --system-footer-height: 0px;
+  --mr-review-bar-height: 0px;
 }
-.dropdown {
-  position: relative;
-}
-.dropdown-menu-toggle:active {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
+.with-top-bar {
+  --top-bar-height: 48px;
 }
-.search-input-container .dropdown-menu {
-  margin-top: 11px;
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 56px;
+  }
 }
-.dropdown-menu-toggle {
-  padding: 6px 8px 6px 10px;
-  background-color: #fff;
-  color: #333238;
-  font-size: 14px;
-  text-align: left;
-  border: 1px solid #dcdcde;
-  border-radius: 0.25rem;
-  white-space: nowrap;
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-icon-sidebar {
+    --application-bar-left: 56px;
+  }
+  .page-with-super-sidebar {
+    --application-bar-left: 256px;
+  }
+  .page-with-super-sidebar-collapsed {
+    --application-bar-left: 0px;
+  }
 }
-.dropdown-menu-toggle.no-outline {
-  outline: 0;
+.gl-font-sm {
+  font-size: 12px;
 }
-.dropdown-menu-toggle.dropdown-menu-toggle {
-  justify-content: flex-start;
-  overflow: hidden;
-  padding-right: 25px;
+.dropdown {
   position: relative;
-  text-overflow: ellipsis;
-  width: 160px;
 }
 .dropdown-menu {
   display: none;
@@ -751,11 +741,6 @@ html {
     min-width: 100%;
   }
 }
-@media (max-width: 767.98px) {
-  .dropdown-menu-toggle.dropdown-menu-toggle {
-    width: 100%;
-  }
-}
 input {
   border-radius: 0.25rem;
   color: #333238;
@@ -794,7 +779,7 @@ kbd {
   min-height: var(--header-height, 48px);
   border: 0;
   position: fixed;
-  top: 0;
+  top: calc(var(--system-header-height) + var(--performance-bar-height));
   left: 0;
   right: 0;
   border-radius: 0;
@@ -1076,11 +1061,15 @@ kbd {
 }
 .nav-sidebar {
   position: fixed;
-  bottom: 0;
+  bottom: var(--system-footer-height);
   left: 0;
   z-index: 600;
   width: 256px;
-  top: var(--header-height, 48px);
+  top: calc(
+    var(--header-height, 48px) +
+      calc(var(--system-header-height) + var(--performance-bar-height)) +
+      var(--top-bar-height)
+  );
   background-color: #fbfafd;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
@@ -1493,6 +1482,50 @@ kbd {
     display: none;
   }
 }
+.super-sidebar {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: calc(
+    var(--header-height, 48px) +
+      calc(var(--system-header-height) + var(--performance-bar-height))
+  );
+  bottom: var(--system-footer-height);
+  left: 0;
+  background-color: var(--gray-10, #fbfafd);
+  border-right: 1px solid rgba(31, 30, 36, 0.08);
+  transform: translate3d(0, 0, 0);
+  width: 256px;
+  z-index: 600;
+}
+.super-sidebar.super-sidebar-loading {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .super-sidebar.super-sidebar-loading {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+.page-with-super-sidebar {
+  padding-left: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar {
+    padding-left: 256px;
+  }
+}
+.page-with-super-sidebar-collapsed .super-sidebar {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar-collapsed {
+    padding-left: 0;
+  }
+}
 input::-moz-placeholder {
   color: #89888d;
   opacity: 1;