Merge branch '322680-at-root' into 'master'

Remove excessive specificity in refactoring of left-hand panel with the flag OFF

See merge request gitlab-org/gitlab!62556

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

-.page-with-contextual-sidebar {
-  transition: padding-left $sidebar-transition-duration;
-
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding-left: $contextual-sidebar-width;
-  }
-
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-    padding: 10px 0 15px;
-  }
-}
-
-.page-with-icon-sidebar {
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-}
-
-.settings-avatar {
-  background-color: $white;
-
-  svg {
-    fill: $gl-text-color-secondary;
-    margin: auto;
-  }
-}
-
 @mixin collapse-contextual-sidebar-content {
 
   @include context-header-collapsed;
@@ -61,25 +30,7 @@
   }
 }
 
-.nav-sidebar {
-  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-  position: fixed;
-  z-index: 600;
-  width: $contextual-sidebar-width;
-  top: $header-height;
-  bottom: 0;
-  left: 0;
-  background-color: $gray-light;
-  box-shadow: inset -1px 0 0 $border-color;
-  transform: translate3d(0, 0, 0);
-
-  &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-      box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-    }
-  }
-
-  @mixin collapse-contextual-sidebar {
+@mixin collapse-contextual-sidebar {
   width: $contextual-sidebar-collapsed-width;
 
   .nav-sidebar-inner-scroll {
@@ -102,6 +53,56 @@
   .avatar-container {
     margin: 0 auto;
   }
+}
+
+@at-root {
+  .page-with-contextual-sidebar {
+    transition: padding-left $sidebar-transition-duration;
+
+    @include media-breakpoint-up(md) {
+      padding-left: $contextual-sidebar-collapsed-width;
+    }
+
+    @include media-breakpoint-up(xl) {
+      padding-left: $contextual-sidebar-width;
+    }
+
+    .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+      padding: 10px 0 15px;
+    }
+  }
+
+  .page-with-icon-sidebar {
+    @include media-breakpoint-up(md) {
+      padding-left: $contextual-sidebar-collapsed-width;
+    }
+  }
+
+  .settings-avatar {
+    background-color: $white;
+
+    svg {
+      fill: $gl-text-color-secondary;
+      margin: auto;
+    }
+  }
+
+  .nav-sidebar {
+    transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
+    position: fixed;
+    z-index: 600;
+    width: $contextual-sidebar-width;
+    top: $header-height;
+    bottom: 0;
+    left: 0;
+    background-color: $gray-light;
+    box-shadow: inset -1px 0 0 $border-color;
+    transform: translate3d(0, 0, 0);
+
+    &:not(.sidebar-collapsed-desktop) {
+      @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
+        box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
+      }
     }
 
     &.sidebar-collapsed-desktop {
@@ -167,15 +168,15 @@
         @include collapse-contextual-sidebar-content;
       }
     }
-}
+  }
 
-.nav-sidebar-inner-scroll {
+  .nav-sidebar-inner-scroll {
     height: 100%;
     width: 100%;
     overflow: auto;
-}
+  }
 
-.sidebar-sub-level-items {
+  .sidebar-sub-level-items {
     display: none;
     padding-bottom: 8px;
 
@@ -200,9 +201,9 @@
         }
       }
     }
-}
+  }
 
-.sidebar-top-level-items {
+  .sidebar-top-level-items {
     margin-bottom: 60px;
 
     > li {
@@ -305,17 +306,17 @@
         background-color: $link-hover-background;
       }
     }
-}
+  }
 
-// Collapsed nav
+  // Collapsed nav
 
-.toggle-sidebar-button,
-.close-nav-button {
+  .toggle-sidebar-button,
+  .close-nav-button {
     @include side-panel-toggle;
-}
+  }
 
-.toggle-sidebar-button,
-.close-nav-button {
+  .toggle-sidebar-button,
+  .close-nav-button {
     position: fixed;
     bottom: 0;
     width: $contextual-sidebar-width - 1px;
@@ -328,18 +329,18 @@
     .icon-chevron-double-lg-right {
       display: none;
     }
-}
+  }
 
-.collapse-text {
+  .collapse-text {
     white-space: nowrap;
     overflow: hidden;
-}
+  }
 
-.sidebar-collapsed-desktop {
+  .sidebar-collapsed-desktop {
     @include collapse-contextual-sidebar-content;
-}
+  }
 
-.fly-out-top-item {
+  .fly-out-top-item {
     > a {
       display: flex;
     }
@@ -347,19 +348,19 @@
     .fly-out-badge {
       margin-left: 8px;
     }
-}
+  }
 
-.fly-out-top-item-name {
+  .fly-out-top-item-name {
     flex: 1;
-}
+  }
 
-// Mobile nav
+  // Mobile nav
 
-.close-nav-button {
+  .close-nav-button {
     display: none;
-}
+  }
 
-@include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(sm) {
     .close-nav-button {
       display: flex;
     }
@@ -380,4 +381,6 @@
         z-index: $zindex-dropdown-menu;
       }
     }
+  }
 }
+

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

-.page-with-contextual-sidebar {
-  transition: padding-left $sidebar-transition-duration;
-
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding-left: $contextual-sidebar-width;
-  }
-
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-    padding: 10px 0 15px;
-  }
-}
-
-.page-with-icon-sidebar {
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-}
-
-.settings-avatar {
-  background-color: $white;
-
-  svg {
-    fill: $gl-text-color-secondary;
-    margin: auto;
-  }
-}
-
 @mixin collapse-contextual-sidebar-content {
 
   @include context-header-collapsed;
@@ -61,25 +30,7 @@
   }
 }
 
-.nav-sidebar {
-  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-  position: fixed;
-  z-index: 600;
-  width: $contextual-sidebar-width;
-  top: $header-height;
-  bottom: 0;
-  left: 0;
-  background: linear-gradient($purple-200, $orange-200);
-  box-shadow: inset -1px 0 0 $border-color;
-  transform: translate3d(0, 0, 0);
-
-  &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-      box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-    }
-  }
-
-  @mixin collapse-contextual-sidebar {
+@mixin collapse-contextual-sidebar {
   width: $contextual-sidebar-collapsed-width;
 
   .nav-sidebar-inner-scroll {
@@ -102,6 +53,55 @@
   .avatar-container {
     margin: 0 auto;
   }
+}
+
+.page-with-contextual-sidebar {
+  transition: padding-left $sidebar-transition-duration;
+
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+
+  @include media-breakpoint-up(xl) {
+    padding-left: $contextual-sidebar-width;
+  }
+
+  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+    padding: 10px 0 15px;
+  }
+}
+
+.page-with-icon-sidebar {
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+}
+
+.settings-avatar {
+  background-color: $white;
+
+  svg {
+    fill: $gl-text-color-secondary;
+    margin: auto;
+  }
+}
+
+.nav-sidebar {
+  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
+  position: fixed;
+  z-index: 600;
+  width: $contextual-sidebar-width;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient($purple-200, $orange-200);
+  box-shadow: inset -1px 0 0 $border-color;
+  transform: translate3d(0, 0, 0);
+
+  &:not(.sidebar-collapsed-desktop) {
+    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
+      box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
+    }
   }
 
   &.sidebar-collapsed-desktop {
@@ -381,3 +381,4 @@
     }
   }
 }
+

app/assets/stylesheets/performance_bar.scss

@@ -137,5 +137,5 @@
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $header-height + $performance-bar-height !important;
+  top: $header-height + $performance-bar-height;
 }