Added Nav.css-refactor

9 files changed, 209 insertions, 71 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index c56a5e52684..72a3296b0f9 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -22,6 +22,9 @@
  */
 @import "font-awesome";
 
+@import "base/base-index";
+@import "nav/nav-index";
+
 
 /*
  * Styles for JS behaviors.
diff --git a/app/assets/stylesheets/base/base-index.scss b/app/assets/stylesheets/base/base-index.scss
new file mode 100644
index 00000000000..507aa5d7074
--- /dev/null
+++ b/app/assets/stylesheets/base/base-index.scss
@@ -0,0 +1,2 @@
+@import "base-variables";
+@import "base";
\ No newline at end of file
diff --git a/app/assets/stylesheets/base/base-variables.scss b/app/assets/stylesheets/base/base-variables.scss
new file mode 100644
index 00000000000..dca12511ae2
--- /dev/null
+++ b/app/assets/stylesheets/base/base-variables.scss
@@ -0,0 +1,72 @@
+$border-radius: 4px;
+$border-radius-full: 10rem;
+
+// colors
+$black: #000;
+
+$black-transparent: rgba(0, 0, 0, 0.2);
+
+$grey-950: #1f1f1f;
+$grey-900: #2e2e2e;
+$grey-800: #4f4f4f;
+$grey-700: #707070;
+$grey-600: #949494;
+$grey-500: #a7a7a7;
+$grey-400: #bababa;
+$grey-300: #ccc;
+$grey-200: #dfdfdf;
+$grey-100: #f2f2f2;
+$grey-050: #fafafa;
+
+$blue-950: #0a2744;
+$blue-900: #0f3b66;
+$blue-800: #134a81;
+$blue-700: #17599c;
+$blue-600: #1b69b6;
+$blue-500: #1f78d1;
+$blue-400: #2e87e0;
+$blue-300: #73afea;
+$blue-200: #b8d6f4;
+$blue-100: #e4f0fb;
+$blue-050: #f6fafe;
+
+$green-950: #072b15;
+$green-900: #0a4020;
+$green-800: #0e5a2d;
+$green-700: #12753a;
+$green-600: #168f48;
+$green-500: #1aaa55;
+$green-400: #37b96d;
+$green-300: #75d09b;
+$green-200: #b3e6c8;
+$green-100: #dcf5e7;
+$green-050: #f1fdf6;
+
+$orange-950: #592800;
+$orange-900: #853c00;
+$orange-800: #a35200;
+$orange-700: #c26700;
+$orange-600: #de7e00;
+$orange-500: #fc9403;
+$orange-400: #fca121;
+$orange-300: #fdbc60;
+$orange-200: #fed69f;
+$orange-100: #fff1de;
+$orange-050: #fffaf4;
+
+$red-950: #4b140b;
+$red-900: #711e11;
+$red-800: #8b2615;
+$red-700: #a62d19;
+$red-600: #c0341d;
+$red-500: #db3b21;
+$red-400: #e15139;
+$red-300: #ea8271;
+$red-200: #f2b4a9;
+$red-100: #fbe5e1;
+$red-050: #fef6f5;
+
+$white: #fff;
+
+// font-size
+$font-size: 14px;
\ No newline at end of file
diff --git a/app/assets/stylesheets/base/base.scss b/app/assets/stylesheets/base/base.scss
new file mode 100644
index 00000000000..1833d02095e
--- /dev/null
+++ b/app/assets/stylesheets/base/base.scss
@@ -0,0 +1,21 @@
+html, body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 20px;
+  box-sizing: border-box;
+  color: $grey-900;
+}
+
+*:focus {
+  outline: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/nav/nav-index.scss b/app/assets/stylesheets/nav/nav-index.scss
new file mode 100644
index 00000000000..73a9b411c65
--- /dev/null
+++ b/app/assets/stylesheets/nav/nav-index.scss
@@ -0,0 +1,3 @@
+@import "nav-variables.scss";
+@import "nav.scss";
+@import "nav-skin.scss";
\ No newline at end of file
diff --git a/app/assets/stylesheets/nav/nav-skin.scss b/app/assets/stylesheets/nav/nav-skin.scss
new file mode 100644
index 00000000000..2d506a5c639
--- /dev/null
+++ b/app/assets/stylesheets/nav/nav-skin.scss
@@ -0,0 +1,31 @@
+.nav {
+  &.nav-dark {
+    background: $nav-background-dark;
+    padding: 5px 16px;
+    .nav-menu {
+      vertical-align: middle;
+    }
+    .nav-item {
+      &.nav-item-active {
+        .nav-link {
+          background: $white;
+          color: $black;
+        }
+      }
+
+      .nav-link {
+        color: $white;
+        font-size: 12px;  
+        vertical-align: middle;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .logo {
+    display: inline-block;
+    img {
+      vertical-align: middle;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/nav/nav-variables.scss b/app/assets/stylesheets/nav/nav-variables.scss
new file mode 100644
index 00000000000..08d1d7d227a
--- /dev/null
+++ b/app/assets/stylesheets/nav/nav-variables.scss
@@ -0,0 +1 @@
+$nav-background-dark: $grey-950;
\ No newline at end of file
diff --git a/app/assets/stylesheets/nav/nav.scss b/app/assets/stylesheets/nav/nav.scss
new file mode 100644
index 00000000000..3963355dfea
--- /dev/null
+++ b/app/assets/stylesheets/nav/nav.scss
@@ -0,0 +1,6 @@
+.nav {
+  .nav-menu, .nav-item{
+    margin: 0;
+    display: inline-block;
+  }
+}
\ No newline at end of file
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 5ff6ac5fc00..2bf320f538a 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,79 +1,78 @@
 %header.navbar.navbar-gitlab
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
-  .container-fluid
-    .header-content
-      .title-container
-        %h1.title
-          = link_to root_path, title: 'Dashboard', id: 'logo' do
-            = brand_header_logo
-            %span.logo-text.hidden-xs
-              = render 'shared/logo_type.svg'
+  .header-content
+    .title-container
+      %h1.title
+        = link_to root_path, title: 'Dashboard', id: 'logo' do
+          = brand_header_logo
+          %span.logo-text.hidden-xs
+            = render 'shared/logo_type.svg'
 
-        - if current_user
-          = render "layouts/nav/dashboard"
-        - else
-          = render "layouts/nav/explore"
+      - if current_user
+        = render "layouts/nav/dashboard"
+      - else
+        = render "layouts/nav/explore"
 
-      .navbar-collapse.collapse
-        %ul.nav.navbar-nav
-          - if current_user
-            = render 'layouts/header/new_dropdown'
-          %li.hidden-sm.hidden-xs
-            = render 'layouts/search' unless current_controller?(:search)
-          %li.visible-sm-inline-block.visible-xs-inline-block
-            = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-              = sprite_icon('search', size: 16)
-          - if current_user
-            = nav_link(path: 'dashboard#issues', html_options: { class: "user-counter" }) do
-              = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = sprite_icon('issues', size: 16)
-                - issues_count = assigned_issuables_count(:issues)
-                %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
-                  = number_with_delimiter(issues_count)
-            = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
-              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = sprite_icon('git-merge', size: 16)
-                - merge_requests_count = assigned_issuables_count(:merge_requests)
-                %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
-                  = number_with_delimiter(merge_requests_count)
-            = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
-              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = sprite_icon('todo-done', size: 16)
-                %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
-                  = todos_count_format(todos_pending_count)
-            %li.header-user.dropdown
-              = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
-                = image_tag avatar_icon(current_user, 23), width: 23, height: 23, class: "header-user-avatar"
-                = sprite_icon('angle-down', css_class: 'caret-down')
-              .dropdown-menu-nav.dropdown-menu-align-right
-                %ul
-                  %li.current-user
-                    .user-name.bold
-                      = current_user.name
-                    @#{current_user.username}
-                  %li.divider
-                  %li
-                    = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
-                  %li
-                    = link_to "Settings", profile_path
-                  - if current_user
-                    %li
-                      = link_to "Help", help_path
-                  %li.divider
+    .navbar-collapse.collapse
+      %ul.nav.navbar-nav
+        - if current_user
+          = render 'layouts/header/new_dropdown'
+        %li.hidden-sm.hidden-xs
+          = render 'layouts/search' unless current_controller?(:search)
+        %li.visible-sm-inline-block.visible-xs-inline-block
+          = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+            = sprite_icon('search', size: 16)
+        - if current_user
+          = nav_link(path: 'dashboard#issues', html_options: { class: "user-counter" }) do
+            = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+              = sprite_icon('issues', size: 16)
+              - issues_count = assigned_issuables_count(:issues)
+              %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
+                = number_with_delimiter(issues_count)
+          = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
+            = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+              = sprite_icon('git-merge', size: 16)
+              - merge_requests_count = assigned_issuables_count(:merge_requests)
+              %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
+                = number_with_delimiter(merge_requests_count)
+          = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
+            = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+              = sprite_icon('todo-done', size: 16)
+              %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
+                = todos_count_format(todos_pending_count)
+          %li.header-user.dropdown
+            = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
+              = image_tag avatar_icon(current_user, 23), width: 23, height: 23, class: "header-user-avatar"
+              = sprite_icon('angle-down', css_class: 'caret-down')
+            .dropdown-menu-nav.dropdown-menu-align-right
+              %ul
+                %li.current-user
+                  .user-name.bold
+                    = current_user.name
+                  @#{current_user.username}
+                %li.divider
+                %li
+                  = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
+                %li
+                  = link_to "Settings", profile_path
+                - if current_user
                   %li
-                    = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"
-            - if session[:impersonator_id]
-              %li.impersonation
-                = link_to admin_impersonation_path, class: 'impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-                  = icon('user-secret')
-          - else
-            %li
-              %div
-                = link_to "Sign in / Register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
+                    = link_to "Help", help_path
+                %li.divider
+                %li
+                  = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"
+          - if session[:impersonator_id]
+            %li.impersonation
+              = link_to admin_impersonation_path, class: 'impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+                = icon('user-secret')
+        - else
+          %li
+            %div
+              = link_to "Sign in / Register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
 
-      %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
-        %span.sr-only Toggle navigation
-        = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right')
-        = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
+    %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
+      %span.sr-only Toggle navigation
+      = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right')
+      = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
 
 = render 'shared/outdated_browser'