Merge branch '322680-dark-mode' into 'master'

Updated sidepanel in Dark mode [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!64182

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss

@@ -13,13 +13,49 @@ $top-level-item-color: $purple-900;
   box-shadow: none;
 }
 
+&.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  box-shadow: none;
+  border: 1px solid $border-color;
+}
+
+&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
+  color: $white;
+}
+
 &.gl-dark .nav-sidebar li a,
 &.gl-dark .toggle-sidebar-button .collapse-text,
 &.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
 &.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
 &.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title {
+&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+  color: $gray-darkest;
+}
+
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+  @include gl-mt-0;
+}
+
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
+&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
+  background: $white;
   color: $gray-darkest;
+
+  &::before {
+    border-right-color: $white;
+  }
+}
+
+&.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  background-color: $white;
 }
 
 &.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
@@ -183,7 +219,7 @@ $top-level-item-color: $purple-900;
 
       .avatar.s32 {
         @extend .rect-avatar.s32;
-        color: $gray-900;
+        //color: $gray-900;
         box-shadow: $avatar-box-shadow;
       }
     }
@@ -226,7 +262,7 @@ $top-level-item-color: $purple-900;
     color: $white;
 
     @if $has-sub-items {
-      @include gl-mt-n2;
+      @include gl-mt-0;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     } @else {
@@ -244,13 +280,13 @@ $top-level-item-color: $purple-900;
         content: '';
         display: block;
         top: 50%;
-        left: $gl-spacing-scale-3/-2;
-        margin-top: -$gl-spacing-scale-3;
+        left: -$gl-spacing-scale-2;
+        margin-top: -$gl-spacing-scale-2;
         width: 0;
         height: 0;
-        border-top: $gl-spacing-scale-3 solid transparent;
-        border-bottom: $gl-spacing-scale-3 solid transparent;
-        border-right: $gl-spacing-scale-3 solid $black;
+        border-top: $gl-spacing-scale-2 solid transparent;
+        border-bottom: $gl-spacing-scale-2 solid transparent;
+        border-right: $gl-spacing-scale-2 solid $black;
       }
     }
   }
@@ -356,6 +392,8 @@ $top-level-item-color: $purple-900;
   }
 
   a.has-sub-items + .sidebar-sub-level-items {
+    @include gl-mt-n2;
+
     .fly-out-top-item {
       @include fly-out-top-item($has-sub-items: true);
     }

app/assets/stylesheets/startup/startup-dark.scss

@@ -1240,6 +1240,18 @@ input {
 body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
   box-shadow: none;
 }
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  box-shadow: none;
+  border: 1px solid #404040;
+}
+body.sidebar-refactoring.gl-dark
+  .sidebar-top-level-items
+  .context-header
+  a
+  .avatar-container.rect-avatar
+  .avatar.s32 {
+  color: #333;
+}
 body.sidebar-refactoring.gl-dark .nav-sidebar li a,
 body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
 body.sidebar-refactoring.gl-dark
@@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark
   .nav-sidebar-inner-scroll
   > div.context-header
   a
-  .sidebar-context-title {
+  .sidebar-context-title,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  color: #c4c4c4;
+}
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-top: 0;
+}
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  background: #333;
   color: #c4c4c4;
 }
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  border-right-color: #333;
+}
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  background-color: #333;
+}
 body.sidebar-refactoring.ui-indigo
   .nav-sidebar
   li.active:not(.fly-out-top-item)
@@ -1482,12 +1576,18 @@ body.sidebar-refactoring
   display: block;
   top: 50%;
   left: -0.25rem;
-  margin-top: -0.5rem;
+  margin-top: -0.25rem;
   width: 0;
   height: 0;
-  border-top: 0.5rem solid transparent;
-  border-bottom: 0.5rem solid transparent;
-  border-right: 0.5rem solid #fff;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+  border-right: 0.25rem solid #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items {
+  margin-top: -0.25rem;
 }
 body.sidebar-refactoring
   .nav-sidebar
@@ -1523,7 +1623,7 @@ body.sidebar-refactoring
   font-size: 0.75rem;
   background-color: #2f2a6b;
   color: #333;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -1691,7 +1791,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #fafafa;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 body.sidebar-refactoring
@@ -1732,7 +1831,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #fafafa;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 body.sidebar-refactoring

app/assets/stylesheets/startup/startup-general.scss

@@ -1444,12 +1444,18 @@ body.sidebar-refactoring
   display: block;
   top: 50%;
   left: -0.25rem;
-  margin-top: -0.5rem;
+  margin-top: -0.25rem;
   width: 0;
   height: 0;
-  border-top: 0.5rem solid transparent;
-  border-bottom: 0.5rem solid transparent;
-  border-right: 0.5rem solid #000;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+  border-right: 0.25rem solid #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items {
+  margin-top: -0.25rem;
 }
 body.sidebar-refactoring
   .nav-sidebar
@@ -1485,7 +1491,7 @@ body.sidebar-refactoring
   font-size: 0.75rem;
   background-color: #2f2a6b;
   color: #fff;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -1653,7 +1659,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #303030;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 body.sidebar-refactoring
@@ -1694,7 +1699,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #303030;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 body.sidebar-refactoring

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -1240,6 +1240,18 @@ input {
 body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
   box-shadow: none;
 }
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  box-shadow: none;
+  border: 1px solid #404040;
+}
+body.sidebar-refactoring.gl-dark
+  .sidebar-top-level-items
+  .context-header
+  a
+  .avatar-container.rect-avatar
+  .avatar.s32 {
+  color: #333;
+}
 body.sidebar-refactoring.gl-dark .nav-sidebar li a,
 body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
 body.sidebar-refactoring.gl-dark
@@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark
   .nav-sidebar-inner-scroll
   > div.context-header
   a
-  .sidebar-context-title {
+  .sidebar-context-title,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  color: #c4c4c4;
+}
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-top: 0;
+}
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  background: #333;
   color: #c4c4c4;
 }
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring.gl-dark
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  border-right-color: #333;
+}
+body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
+  background-color: #333;
+}
 body.sidebar-refactoring.ui-indigo
   .nav-sidebar
   li.active:not(.fly-out-top-item)
@@ -1482,12 +1576,18 @@ body.sidebar-refactoring
   display: block;
   top: 50%;
   left: -0.25rem;
-  margin-top: -0.5rem;
+  margin-top: -0.25rem;
   width: 0;
   height: 0;
-  border-top: 0.5rem solid transparent;
-  border-bottom: 0.5rem solid transparent;
-  border-right: 0.5rem solid #fff;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+  border-right: 0.25rem solid #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items {
+  margin-top: -0.25rem;
 }
 body.sidebar-refactoring
   .nav-sidebar
@@ -1523,7 +1623,7 @@ body.sidebar-refactoring
   font-size: 0.75rem;
   background-color: #2f2a6b;
   color: #333;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -1691,7 +1791,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #fafafa;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 body.sidebar-refactoring
@@ -1732,7 +1831,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #fafafa;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 body.sidebar-refactoring

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -1444,12 +1444,18 @@ body.sidebar-refactoring
   display: block;
   top: 50%;
   left: -0.25rem;
-  margin-top: -0.5rem;
+  margin-top: -0.25rem;
   width: 0;
   height: 0;
-  border-top: 0.5rem solid transparent;
-  border-bottom: 0.5rem solid transparent;
-  border-right: 0.5rem solid #000;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+  border-right: 0.25rem solid #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items {
+  margin-top: -0.25rem;
 }
 body.sidebar-refactoring
   .nav-sidebar
@@ -1485,7 +1491,7 @@ body.sidebar-refactoring
   font-size: 0.75rem;
   background-color: #2f2a6b;
   color: #fff;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -1653,7 +1659,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #303030;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 body.sidebar-refactoring
@@ -1694,7 +1699,6 @@ body.sidebar-refactoring
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
-  color: #303030;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 body.sidebar-refactoring