Merge branch '322680-refactor-stylesheet' into 'master'

Moved contextual-header styles out of the left column

See merge request gitlab-org/gitlab!62110

app/assets/stylesheets/framework.scss

@@ -38,6 +38,7 @@
 @import 'framework/secondary_navigation_elements';
 @import 'framework/selects';
 @import 'framework/sidebar';
+@import 'framework/contextual_sidebar_header';
 @import 'framework/contextual_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';

app/assets/stylesheets/framework/contextual_sidebar.scss

@@ -20,48 +20,6 @@
   }
 }
 
-.context-header {
-  position: relative;
-  margin-right: 2px;
-  width: $contextual-sidebar-width;
-
-  > a,
-  > button {
-    transition: padding $sidebar-transition-duration;
-    font-weight: $gl-font-weight-bold;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: 10px 16px 10px 10px;
-    color: $gl-text-color;
-    background-color: transparent;
-    border: 0;
-    text-align: left;
-
-    &:hover,
-    &:focus {
-      background-color: $link-hover-background;
-      color: $gl-text-color;
-      outline: 0;
-    }
-  }
-
-  .avatar-container {
-    flex: 0 0 40px;
-    background-color: $white;
-  }
-
-  .sidebar-context-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.text-secondary {
-      font-weight: normal;
-      font-size: 0.8em;
-    }
-  }
-}
-
 .settings-avatar {
   background-color: $white;
 
@@ -72,14 +30,8 @@
 }
 
 @mixin collapse-contextual-sidebar-content {
-  .context-header {
-    height: 60px;
-    width: $contextual-sidebar-collapsed-width;
 
-    a {
-      padding: 10px 4px;
-    }
-  }
+  @include context-header-collapsed;
 
   .sidebar-top-level-items > li {
     .sidebar-sub-level-items {
@@ -135,7 +87,6 @@
     }
 
     .badge.badge-pill:not(.fly-out-badge),
-    .sidebar-context-title,
     .nav-item-name {
       @include gl-sr-only;
     }

app/assets/stylesheets/framework/contextual_sidebar_header.scss

+.context-header {
+  position: relative;
+  margin-right: 2px;
+  width: $contextual-sidebar-width;
+
+  > a,
+  > button {
+    transition: padding $sidebar-transition-duration;
+    font-weight: $gl-font-weight-bold;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 10px 16px 10px 10px;
+    color: $gl-text-color;
+    background-color: transparent;
+    border: 0;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      background-color: $link-hover-background;
+      color: $gl-text-color;
+      outline: 0;
+    }
+  }
+
+  .avatar-container {
+    flex: 0 0 40px;
+    background-color: $white;
+  }
+
+  .sidebar-context-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.text-secondary {
+      font-weight: normal;
+      font-size: 0.8em;
+    }
+  }
+}
+
+@mixin context-header-collapsed {
+  .context-header {
+    height: 60px;
+    width: $contextual-sidebar-collapsed-width;
+
+    a {
+      padding: 10px 4px;
+    }
+  }
+
+  .sidebar-context-title {
+    @include gl-sr-only;
+  }
+}
+