Revert "Merge branch '322680-prepare-the-styling-basis' into 'master'"

This reverts merge request !62254

app/assets/stylesheets/framework.scss

@@ -39,7 +39,7 @@
 @import 'framework/selects';
 @import 'framework/sidebar';
 @import 'framework/contextual_sidebar_header';
-@import 'framework/contextual_sidebar_refactoring/contextual_sidebar';
+@import 'framework/contextual_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';

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

@@ -175,6 +175,10 @@
   overflow: auto;
 }
 
+.with-performance-bar .nav-sidebar {
+  top: $header-height + $performance-bar-height;
+}
+
 .sidebar-sub-level-items {
   display: none;
   padding-bottom: 8px;

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

-body:not(.sidebar-refactoring) {
-  @import 'contextual_sidebar_base';
-}
-
-body.sidebar-refactoring {
-  @import 'contextual_sidebar_variant';
-}

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;
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
-
-    .collapse-text,
-    .icon-chevron-double-lg-left {
-      display: none;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
-    }
-  }
-}
-
-.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 {
-    width: $contextual-sidebar-collapsed-width;
-
-    .nav-sidebar-inner-scroll {
-      overflow-x: hidden;
-    }
-
-    .badge.badge-pill:not(.fly-out-badge),
-    .nav-item-name {
-      @include gl-sr-only;
-    }
-
-    .sidebar-top-level-items > li > a {
-      min-height: 45px;
-    }
-
-    .fly-out-top-item {
-      display: block;
-    }
-
-    .avatar-container {
-      margin: 0 auto;
-    }
-  }
-
-  &.sidebar-collapsed-desktop {
-    @include collapse-contextual-sidebar;
-  }
-
-  &.sidebar-expanded-mobile {
-    left: 0;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  ul {
-    padding-left: 0;
-    list-style: none;
-  }
-
-  li {
-    white-space: nowrap;
-
-    a {
-      transition: padding $sidebar-transition-duration;
-      display: flex;
-      align-items: center;
-      padding: 12px $gl-padding;
-      color: $gl-text-color-secondary;
-    }
-
-    .nav-item-name {
-      flex: 1;
-    }
-
-    &.active {
-      > a {
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    left: (-$contextual-sidebar-width);
-  }
-
-  .nav-icon-container {
-    display: flex;
-    margin-right: 8px;
-  }
-
-  .fly-out-top-item {
-    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;
-      @include collapse-contextual-sidebar-content;
-    }
-  }
-}
-
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-
-  > li {
-    a {
-      padding: 8px 16px 8px 40px;
-
-      &:hover,
-      &:focus {
-        background: $link-active-background;
-        color: $gl-text-color;
-      }
-    }
-
-    &.active {
-      a {
-        &,
-        &:hover,
-        &:focus {
-          background: $link-active-background;
-        }
-      }
-    }
-  }
-}
-
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-
-  > li {
-    > a {
-      @include media-breakpoint-up(sm) {
-        margin-right: 1px;
-      }
-
-      &:hover {
-        color: $gl-text-color;
-      }
-    }
-
-    &.is-showing-fly-out {
-      > a {
-        margin-right: 1px;
-      }
-
-      .sidebar-sub-level-items {
-        @include media-breakpoint-up(sm) {
-          position: fixed;
-          top: 0;
-          left: 0;
-          min-width: 150px;
-          margin-top: -1px;
-          padding: 4px 1px;
-          background-color: $white;
-          box-shadow: 2px 1px 3px $dropdown-shadow-color;
-          border: 1px solid $gray-darker;
-          border-left: 0;
-          border-radius: 0 3px 3px 0;
-
-          &::before {
-            content: '';
-            position: absolute;
-            top: -30px;
-            bottom: -30px;
-            left: -10px;
-            right: -30px;
-            z-index: -1;
-          }
-
-          &.is-above {
-            margin-top: 1px;
-          }
-
-          .divider {
-            height: 1px;
-            margin: 4px -1px;
-            padding: 0;
-            background-color: $dropdown-divider-bg;
-          }
-
-          > .active {
-            box-shadow: none;
-
-            > a {
-              background-color: transparent;
-            }
-          }
-
-          a {
-            padding: 8px 16px;
-            color: $gl-text-color;
-
-            &:hover,
-            &:focus {
-              background-color: $gray-darker;
-            }
-          }
-        }
-      }
-    }
-
-    .badge.badge-pill {
-      background-color: $inactive-badge-background;
-      color: $gl-text-color-secondary;
-    }
-
-    &.active {
-      background: $link-active-background;
-
-      > a {
-        margin-left: 4px;
-        // Subtract width of left border on active element
-        padding-left: $gl-padding-12;
-      }
-
-      .badge.badge-pill {
-        font-weight: $gl-font-weight-bold;
-      }
-
-      .sidebar-sub-level-items:not(.is-fly-out-only) {
-        display: block;
-      }
-    }
-
-    &.active > a:hover,
-    &.is-over > a {
-      background-color: $link-hover-background;
-    }
-  }
-}
-
-// Collapsed nav
-
-.toggle-sidebar-button,
-.close-nav-button {
-  @include side-panel-toggle;
-}
-
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: $contextual-sidebar-width - 1px;
-  border-top: 1px solid $border-color;
-
-  svg {
-    margin-right: 8px;
-  }
-
-  .icon-chevron-double-lg-right {
-    display: none;
-  }
-}
-
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.sidebar-collapsed-desktop {
-  @include collapse-contextual-sidebar-content;
-}
-
-.fly-out-top-item {
-  > a {
-    display: flex;
-  }
-
-  .fly-out-badge {
-    margin-left: 8px;
-  }
-}
-
-.fly-out-top-item-name {
-  flex: 1;
-}
-
-// Mobile nav
-
-.close-nav-button {
-  display: none;
-}
-
-@include media-breakpoint-down(sm) {
-  .close-nav-button {
-    display: flex;
-  }
-
-  .toggle-sidebar-button {
-    display: none;
-  }
-
-  .mobile-overlay {
-    display: none;
-
-    &.mobile-nav-open {
-      display: block;
-      position: fixed;
-      background-color: $black-transparent;
-      height: 100%;
-      width: 100%;
-      z-index: $zindex-dropdown-menu;
-    }
-  }
-}

app/assets/stylesheets/performance_bar.scss

@@ -135,7 +135,3 @@
 #modal-peek-pg-queries-content {
   color: $black;
 }
-
-.with-performance-bar .nav-sidebar {
-  top: $header-height + $performance-bar-height !important;
-}

app/helpers/nav_helper.rb

@@ -12,6 +12,7 @@ module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
     class_name << 'page-with-contextual-sidebar' if defined?(@left_sidebar) && @left_sidebar
+    class_name << 'sidebar-refactoring' if Feature.enabled?(:sidebar_refactor, current_user, default_enabled: :yaml)
     class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @left_sidebar
     class_name -= ['right-sidebar-expanded'] if defined?(@right_sidebar) && !@right_sidebar
 

app/views/layouts/_startup_css.haml

@@ -2,5 +2,4 @@
 
 %style
   = Rails.application.assets_manifest.find_sources("themes/#{user_application_theme_css_filename}.css").first.to_s.html_safe if user_application_theme_css_filename
-  - if sidebar_refactor_disabled?
-    = Rails.application.assets_manifest.find_sources("startup/startup-#{startup_filename}.css").first.to_s.html_safe
+  = Rails.application.assets_manifest.find_sources("startup/startup-#{startup_filename}.css").first.to_s.html_safe

app/views/layouts/application.html.haml

 - page_classes = page_class << @html_class
 - page_classes = page_classes.flatten.compact
-- body_classes = [user_application_theme, user_tab_width, @body_class, client_class_list]
-- body_classes << 'sidebar-refactoring' if sidebar_refactor_enabled?
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }
   = render "layouts/head"
-  %body{ class: body_classes, data: body_data }
+  %body{ class: "#{user_application_theme} #{user_tab_width} #{@body_class} #{client_class_list}", data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render 'peek/bar'