Add latest changes from gitlab-org/gitlab@master

3 files changed, 89 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
index 58438df8295..ece81fde078 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
@@ -1,25 +1,41 @@
 //
+// VARIABLES
+//
+
+$top-level-item-color: $purple-900;
+
+//
 // TEMPORARY OVERRIDES
 // Needed while we serve both *_base and *_variant stylesheets
-// TODO: These have to be removed during the feature flag rollout
+// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
 //
 &.gl-dark .nav-sidebar li.active {
   box-shadow: none;
 }
 
 &.gl-dark .nav-sidebar li a,
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.toggle-sidebar-button .icon-chevron-double-lg-right {
+&.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 {
   color: $gray-darkest;
 }
 
+&.ui-indigo .nav-sidebar li.active > a {
+  color: $top-level-item-color;
+}
+
+&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
+  fill: $top-level-item-color;
+}
+
 .nav-sidebar {
   box-shadow: none;
 
   li.active {
     background-color: transparent;
-    box-shadow: none;
+    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
   }
 }
 
@@ -137,6 +153,48 @@
   }
 }
 
+@mixin context-header {
+  $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
+
+  @include gl-p-2;
+  @include gl-mb-2;
+
+  .avatar-container {
+    @include gl-font-weight-normal;
+    flex: none;
+    box-shadow: $avatar-box-shadow;
+
+    &.rect-avatar {
+      @include gl-border-none;
+
+      .avatar.s32 {
+        @extend .rect-avatar.s32;
+        color: $gray-900;
+        box-shadow: $avatar-box-shadow;
+      }
+    }
+  }
+
+  .sidebar-context-title {
+    color: $top-level-item-color;
+  }
+}
+
+@mixin top-level-item {
+  @include gl-px-4;
+  @include gl-py-3;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-rounded-base;
+  @include gl-w-auto;
+  transition: padding $sidebar-transition-duration;
+  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
+
+  &:hover {
+    background-color: $indigo-900-alpha-008;
+  }
+}
+
 //
 // PAGE-LAYOUT
 //
@@ -195,7 +253,7 @@
   a {
     @include gl-text-decoration-none;
     @include gl-line-height-normal;
-    color: $purple-900;
+    color: $top-level-item-color;
   }
 
   li {
@@ -206,19 +264,7 @@
     }
 
     > a {
-      @include gl-mx-2;
-      @include gl-px-4;
-      @include gl-py-3;
-      @include gl-display-flex;
-      @include gl-align-items-center;
-      @include gl-rounded-base;
-      @include gl-w-auto;
-      transition: padding $sidebar-transition-duration;
-      margin-bottom: 1px;
-
-      &:hover {
-        background-color: $indigo-900-alpha-008;
-      }
+      @include top-level-item;
     }
 
     &.active {
@@ -250,11 +296,6 @@
     display: none;
   }
 
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
     &:not(.sidebar-expanded-mobile) {
       @include collapse-contextual-sidebar;
@@ -264,14 +305,28 @@
 }
 
 .nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-auto;
+
+  > div.context-header {
+    @include gl-mt-2;
+
+    a {
+      @include top-level-item;
+      @include context-header;
+    }
+  }
 }
 
 .sidebar-top-level-items {
+  @include gl-mt-2;
   margin-bottom: 60px;
 
+  .context-header a {
+    @include context-header;
+  }
+
   > li {
     .badge.badge-pill {
       @include gl-rounded-lg;
@@ -287,8 +342,8 @@
       }
 
       .badge.badge-pill {
-        @include gl-font-weight-normal; // TODO: update in `theme_indigo.scss`
-        color: $blue-700; // TODO: update in `theme_indigo.scss`
+        @include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
+        color: $blue-700; // TODO: update in `theme_helper.scss`
       }
     }
   }
@@ -325,7 +380,7 @@
 .close-nav-button {
   @include side-panel-toggle;
   background-color: $gray-50;
-  color: $purple-900;
+  color: $top-level-item-color;
 
   .collapse-text,
   .icon-chevron-double-lg-left,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index bfb21d7112b..164bdb19447 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08);
 $sidebar-toggle-height: 60px;
 $sidebar-toggle-width: 40px;
 $sidebar-milestone-toggle-bottom-margin: 10px;
+$sidebar-avatar-size: 32px;
+$sidebar-top-item-lr-margin: 4px;
+$sidebar-top-item-tb-margin: 1px;
 
 /*
 * Buttons
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 65d47099a13..f2874e67796 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -128,6 +128,6 @@
   color: $black;
 }
 
-.with-performance-bar .nav-sidebar {
+html.with-performance-bar .nav-sidebar {
   top: $header-height + $performance-bar-height;
 }