Merge branch 'ee-remove-old-nav-styles' into 'master'

Port of remove-old-nav-styles to EE

See merge request gitlab-org/gitlab-ee!3004

app/assets/stylesheets/framework.scss

@@ -31,10 +31,12 @@
 @import "framework/modal";
 @import "framework/media_object";
 @import "framework/nav";
+@import "framework/new-nav";
 @import "framework/pagination";
 @import "framework/panels";
 @import "framework/selects";
 @import "framework/sidebar";
+@import "framework/new-sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/timeline";

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -254,6 +254,10 @@ body {
         .search-icon {
           color: $theme-gray-200;
         }
+
+        .search-input {
+          color: $gl-text-color;
+        }
       }
       .location-badge {

app/assets/stylesheets/framework/mixins.scss

@@ -144,3 +144,39 @@
 @mixin green-status-color {
   @include status-color($green-50, $green-500, $green-700);
 }
+
+@mixin fade($gradient-direction, $gradient-color) {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 2;
+  position: absolute;
+  bottom: 12px;
+  width: 43px;
+  height: 30px;
+  transition-duration: .3s;
+  -webkit-transform: translateZ(0);
+  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
+
+  &.scrolling {
+    visibility: visible;
+    opacity: 1;
+    transition-duration: .3s;
+  }
+
+  .fa {
+    position: relative;
+    top: 5px;
+    font-size: 18px;
+  }
+}
+
+@mixin scrolling-links() {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

app/assets/stylesheets/framework/nav.scss

-@mixin fade($gradient-direction, $gradient-color) {
-  visibility: hidden;
-  opacity: 0;
-  z-index: 2;
-  position: absolute;
-  bottom: 12px;
-  width: 43px;
-  height: 30px;
-  transition-duration: .3s;
-  -webkit-transform: translateZ(0);
-  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
-
-  &.scrolling {
-    visibility: visible;
-    opacity: 1;
-    transition-duration: .3s;
-  }
-
-  .fa {
-    position: relative;
-    top: 5px;
-    font-size: 18px;
-  }
-}
-@mixin scrolling-links() {
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  display: flex;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
 .nav-links {
   display: flex;

app/assets/stylesheets/new_nav.scss → app/assets/stylesheets/framework/new-nav.scss

@@ -295,75 +295,6 @@ header.navbar-gitlab-new {
   margin-top: 4px;
 }
-.search {
-  margin: 4px 8px 0;
-
-  form {
-    height: 32px;
-    border: 0;
-    border-radius: $border-radius-default;
-    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-
-  &.search-active form {
-    box-shadow: none;
-
-    .search-input {
-      color: $gl-text-color;
-      transition: color ease-in-out 0.15s;
-    }
-
-    .search-input::placeholder {
-      color: $gl-text-color-tertiary;
-    }
-
-    .search-input-wrap {
-      .search-icon,
-      .clear-icon {
-        color: $gl-text-color-tertiary;
-        transition: color ease-in-out 0.15s;
-      }
-    }
-  }
-
-  .search-input {
-    color: $white-light;
-    background: none;
-    transition: color ease-in-out 0.15s;
-  }
-
-  .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
-  }
-
-  .location-badge {
-    font-size: 12px;
-    margin: -4px 4px -4px -4px;
-    line-height: 25px;
-    padding: 4px 8px;
-    border-radius: 2px 0 0 2px;
-    height: 32px;
-    transition: border-color ease-in-out 0.15s;
-  }
-
-  &.search-active {
-    .location-badge {
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
-
-    .search-input-wrap {
-      .clear-icon {
-        color: $white-light;
-      }
-    }
-  }
-}
-
 .breadcrumbs {
   display: flex;
   min-height: 48px;

app/assets/stylesheets/framework/variables.scss

@@ -6,6 +6,7 @@ $gutter_width: 290px;
 $gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
+$default-transition-duration: .15s;
 /*
  * Color schema

app/assets/stylesheets/pages/search.scss

@@ -28,9 +28,7 @@ input[type="checkbox"]:hover {
 }
 .search {
-  margin-right: 10px;
-  margin-left: 10px;
-  margin-top: ($header-height - 35) / 2;
+  margin: 4px 8px 0;
   form {
     @extend .form-control;
@@ -38,15 +36,23 @@ input[type="checkbox"]:hover {
     padding: 4px;
     width: $search-input-width;
     line-height: 24px;
+    height: 32px;
+    border: 0;
+    border-radius: $border-radius-default;
+    transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration;
     &:hover {
-      border-color: lighten($dropdown-input-focus-border, 20%);
-      box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+      box-shadow: none;
     }
   }
-  .location-text {
-    font-style: normal;
+  .location-badge {
+    font-size: 12px;
+    margin: -4px 4px -4px -4px;
+    line-height: 25px;
+    padding: 4px 8px;
+    border-radius: $border-radius-default 0 0 $border-radius-default;
+    transition: border-color ease-in-out $default-transition-duration;
   }
   .search-input {
@@ -56,41 +62,26 @@ input[type="checkbox"]:hover {
     margin-left: 5px;
     line-height: 25px;
     width: 98%;
+    color: $white-light;
+    background: none;
+    transition: color ease-in-out $default-transition-duration;
   }
-  .location-badge {
-    line-height: 25px;
-    padding: 0 5px;
-    border-radius: $border-radius-default;
-    font-size: 14px;
-    font-style: normal;
-    color: $note-disabled-comment-color;
-    display: inline-block;
-    background-color: $gray-normal;
-    vertical-align: top;
-    cursor: default;
+  .search-input::placeholder {
+    transition: color ease-in-out $default-transition-duration;
   }
   .search-input-container {
-    display: -webkit-flex;
     display: flex;
     position: relative;
   }
   .search-input-wrap {
-    // Fallback if flexbox is not supported
-    display: inline-block;
-  }
-
-  .search-input-wrap {
-    width: 100%;
-
     .search-icon,
     .clear-icon {
       position: absolute;
       right: 5px;
       top: 0;
-      color: $location-icon-color;
       &::before {
         font-family: FontAwesome;
@@ -101,7 +92,7 @@ input[type="checkbox"]:hover {
     .search-icon {
       @extend .fa-search;
-      transition: color 0.15s;
+      transition: color $default-transition-duration;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
@@ -148,21 +139,32 @@ input[type="checkbox"]:hover {
     form {
       @extend .form-control:focus;
       border-color: $dropdown-input-focus-border;
-      box-shadow: 0 0 4px $search-input-focus-shadow-color;
-    }
-    .location-badge {
-      transition: all 0.15s;
-      background-color: $location-badge-active-bg;
-      color: $white-light;
-    }
-    .search-input-wrap {
-      i {
-        color: $layout-link-gray;
+      box-shadow: none;
+
+      .search-input-wrap {
+        .search-icon,
+        .clear-icon {
+          color: $gl-text-color-tertiary;
+          transition: color ease-in-out $default-transition-duration;
+        }
+      }
+      .search-input {
+        color: $gl-text-color;
+        transition: color ease-in-out $default-transition-duration;
+      }
+      .search-input::placeholder {
+        color: $gl-text-color-tertiary;
       }
     }
+    .location-badge {
+      transition: all $default-transition-duration;
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
+    }
+
     .dropdown-menu {
       transition-duration: 100ms, 75ms;
       transition-delay: 75ms, 100ms;

app/views/admin/audit_logs/index.html.haml

 - @no_container = true
 - page_title 'Audit Log'
-= render 'admin/monitoring/head'
 %div{ class: container_class }
   .todos-filters

app/views/admin/background_jobs/show.html.haml

 - @no_container = true
 - page_title "Background Jobs"
-= render 'admin/monitoring/head'
 %div{ class: container_class }
   %h3.page-title Background Jobs

app/views/admin/cohorts/index.html.haml

 - breadcrumb_title "Cohorts"
 - @no_container = true
-= render "admin/dashboard/head"
 %div{ class: container_class }
   - if @cohorts

app/views/admin/conversational_development_index/show.html.haml

 - @no_container = true
 - page_title 'ConvDev Index'
-= render 'admin/monitoring/head'
-
 .container
   - if show_callout?('convdev_intro_callout_dismissed')
     = render 'callout'

app/views/admin/dashboard/_head.html.haml

-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-        = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
-          = link_to admin_root_path, title: 'Overview' do
-            %span
-              Overview
-        = nav_link(controller: [:admin, :projects]) do
-          = link_to admin_projects_path, title: 'Projects' do
-            %span
-              Projects
-        = nav_link(controller: :users) do
-          = link_to admin_users_path, title: 'Users' do
-            %span
-              Users
-        = nav_link(controller: :groups) do
-          = link_to admin_groups_path, title: 'Groups' do
-            %span
-              Groups
-        = nav_link path: 'builds#index' do
-          = link_to admin_jobs_path, title: 'Jobs' do
-            %span
-              Jobs
-        = nav_link path: ['runners#index', 'runners#show'] do
-          = link_to admin_runners_path, title: 'Runners' do
-            %span
-              Runners
-        = nav_link path: 'cohorts#index' do
-          = link_to admin_cohorts_path, title: 'Cohorts' do
-            %span
-              Cohorts
-        = nav_link(controller: :conversational_development_index) do
-          = link_to admin_conversational_development_index_path, title: 'ConvDev Index' do
-            %span
-              ConvDev Index

app/views/admin/dashboard/index.html.haml

 - @no_container = true
 - breadcrumb_title "Dashboard"
-= render "admin/dashboard/head"
 %div{ class: container_class }
   - if @license

app/views/admin/groups/index.html.haml

 - @no_container = true
 - page_title "Groups"
-= render "admin/dashboard/head"
 %div{ class: container_class }
   .top-area

app/views/admin/health_check/show.html.haml

 - @no_container = true
 - page_title _('Health Check')
 - no_errors = @errors.blank? && @failing_storage_statuses.blank?
-= render 'admin/monitoring/head'
 %div{ class: container_class }
   %h3.page-title= page_title

app/views/admin/jobs/index.html.haml

 - breadcrumb_title "Jobs"
 - @no_container = true
-= render "admin/dashboard/head"
 %div{ class: container_class }

app/views/admin/logs/show.html.haml

 - @no_container = true
 - page_title "Logs"
-= render 'admin/monitoring/head'
 %div{ class: container_class }
   %ul.nav-links.log-tabs

app/views/admin/monitoring/_head.html.haml

-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-        = nav_link(controller: :system_info) do
-          = link_to admin_system_info_path, title: 'System Info' do
-            %span
-              System Info
-        = nav_link(controller: :background_jobs) do
-          = link_to admin_background_jobs_path, title: 'Background Jobs' do
-            %span
-              Background Jobs
-        = nav_link(controller: :logs) do
-          = link_to admin_logs_path, title: 'Logs' do
-            %span
-              Logs
-        = nav_link(controller: :health_check) do
-          = link_to admin_health_check_path, title: 'Health Check' do
-            %span
-              Health Check
-        = nav_link(controller: :requests_profiles) do
-          = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
-            %span
-              Requests Profiles
-        = render 'admin/monitoring/ee/nav'

app/views/admin/projects/index.html.haml

@@ -2,7 +2,6 @@
 - page_title "Projects"
 - params[:visibility_level] ||= []
-= render "admin/dashboard/head"
 %div{ class: container_class }
   .top-area