Merge branch 'refactor-header' into 'master'

UI: refactor header css

See merge request !1591

25 files changed, 114 insertions, 239 deletions

diff --git a/app/assets/images/logo-black.png b/app/assets/images/logo-black.png
deleted file mode 100644
index 49cdc16cacd..00000000000
--- a/app/assets/images/logo-black.png
+++ /dev/null
diff --git a/app/assets/images/logo-white.png b/app/assets/images/logo-white.png
index 2299153caba..917bcfcb7e7 100644
--- a/app/assets/images/logo-white.png
+++ b/app/assets/images/logo-white.png
diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index e255cbcada8..26b4d04106e 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -86,7 +86,7 @@ header {
 
   .container {
     width: 100% !important;
-    padding-left: 0px;
+    padding: 0px;
   }
 
   /**
@@ -100,18 +100,14 @@ header {
 
     a {
       float: left;
-      padding: 0px;
-      margin: 0 6px;
-
-      h1 {
-        margin: 0;
-        background: image-url('logo-black.png') no-repeat center center;
-        background-size: 32px;
-        float: left;
-        height: 46px;
-        width: 40px;
-        @include header-font;
-        text-indent: -9999px;
+      padding: 5px 0;
+      height: 46px;
+      width: 52px;
+      text-align: center;
+
+      img {
+        width: 36px;
+        height: 36px;
       }
     }
     &:hover {
@@ -134,14 +130,13 @@ header {
   }
 
   .profile-pic {
-    position: relative;
-    top: -1px;
-    padding-right: 0px !important;
+    padding: 0px !important;
+    width: 46px;
+    height: 46px;
+    margin-left: 5px;
     img {
-      width: 50px;
-      height: 50px;
-      margin: -15px;
-      margin-left: 5px;
+      width: 46px;
+      height: 46px;
     }
   }
 
@@ -174,68 +169,6 @@ header {
       @include transition(all 0.15s ease-in 0s);
     }
   }
-
-
-  /*
-   * Dark header
-   *
-   */
-  &.header-dark {
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #708090;
-        border-bottom: 1px solid #AAA;
-
-        .navbar-toggle { color: #fff; }
-
-        .nav > li > a {
-          color: #AAA;
-
-          &:hover, &:focus, &:active {
-            background: none;
-            color: #FFF;
-          }
-        }
-      }
-    }
-
-    .turbolink-spinner {
-      color: #FFF;
-    }
-
-    .search {
-      .search-input {
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-        border: 1px solid #AAA;
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: image-url('logo-white.png') no-repeat center center;
-          background-size: 32px;
-          color: #fff;
-        }
-      }
-    }
-    .title {
-      a {
-        color: #FFF;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      color: #fff;
-    }
-  }
 }
 
 .search .search-input {
diff --git a/app/assets/stylesheets/themes/dark-theme.scss b/app/assets/stylesheets/themes/dark-theme.scss
new file mode 100644
index 00000000000..b7b22a8724e
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark-theme.scss
@@ -0,0 +1,63 @@
+@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
+  header {
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: $color;
+
+        .navbar-toggle {
+          color: #FFF;
+        }
+
+        .app_logo, .navbar-toggle {
+          &:hover {
+            background-color: $color-darker;
+          }
+        }
+
+        .app_logo {
+          background-color: $color-dark;
+        }
+
+        .title {
+          color: #FFF;
+
+          a {
+            color: #FFF;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .search {
+          .search-input {
+            background-color: $color-light;
+            background-color: rgba(255, 255, 255, 0.5);
+            border: 1px solid $color-light;
+
+            &:focus {
+              background-color: white;
+            }
+          }
+        }
+
+        .search-input::-webkit-input-placeholder {
+          color: #666;
+        }
+
+        .nav > li > a {
+          color: $color-light;
+
+          &:hover, &:focus, &:active {
+            background: none;
+            color: #FFF;
+          }
+        }
+
+        .search-input {
+          border-color: $color-light;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss
index 0dad9917b55..097d5c5b73c 100644
--- a/app/assets/stylesheets/themes/ui_basic.scss
+++ b/app/assets/stylesheets/themes/ui_basic.scss
@@ -10,8 +10,15 @@
         background: #F1F1F1;
         border-bottom: 1px solid #DDD;
 
-        .app_logo {
-          background-color: #DDD;
+        .title {
+          color: #555;
+
+          a {
+            color: #555;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
         }
 
         .nav > li > a {
diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss
index 3c441a8e098..7ac6903b2e4 100644
--- a/app/assets/stylesheets/themes/ui_color.scss
+++ b/app/assets/stylesheets/themes/ui_color.scss
@@ -1,42 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Violet GitLab UI theme
  */
 .ui_color {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #548;
-        border-bottom: 1px solid #436;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #436;
-          }
-        }
-        .app_logo {
-          background-color: #325;
-        }
-        .nav > li > a {
-          color: #98C;
-        }
-        .search-input {
-          border-color: #98C;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #659;
-  }
+  @include dark-theme(#98C, #548, #436, #325);
 }
diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss
index 8df08ccaeec..9257e5f4d40 100644
--- a/app/assets/stylesheets/themes/ui_gray.scss
+++ b/app/assets/stylesheets/themes/ui_gray.scss
@@ -1,32 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Gray GitLab UI theme
  */
 .ui_gray {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #373737;
-        border-bottom: 1px solid #272727;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #272727;
-          }
-        }
-        .app_logo {
-          background-color: #222;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979797, #373737, #272727, #222222);
 }
diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss
index b08cbda6c4f..4caf5843d9b 100644
--- a/app/assets/stylesheets/themes/ui_mars.scss
+++ b/app/assets/stylesheets/themes/ui_mars.scss
@@ -1,38 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Classic GitLab UI theme
  */
 .ui_mars {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #474D57;
-        border-bottom: 1px solid #373D47;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #373D47;
-          }
-        }
-        .app_logo {
-          background-color: #24272D;
-        }
-        .nav > li > a {
-          color: #979DA7;
-        }
-        .search-input {
-          border-color: #979DA7;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979DA7, #474D57, #373D47, #24272D);
 }
diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss
index 34f39614ca4..70449882317 100644
--- a/app/assets/stylesheets/themes/ui_modern.scss
+++ b/app/assets/stylesheets/themes/ui_modern.scss
@@ -1,42 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Modern GitLab UI theme
  */
 .ui_modern {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #019875;
-        border-bottom: 1px solid #019875;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #018865;
-          }
-        }
-        .app_logo {
-          background-color: #017855;
-        }
-        .nav > li > a {
-          color: #ADC;
-        }
-        .search-input {
-          border-color: #8ba;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #019875;
-  }
+  @include dark-theme(#ADC, #019875, #018865, #017855);
 }
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index 96e5d43a369..bb8d5683807 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -14,4 +14,8 @@ module AppearancesHelper
   def brand_text
     nil
   end
+
+  def brand_header_logo
+    image_tag 'logo-white.png'
+  end
 end
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index d5928d2ed25..fc8a487ece7 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -3,7 +3,7 @@
     .container
       %div.app_logo
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
-          %h1 GITLAB
+          = brand_header_logo
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index e912fea2aee..bd6bb3c720d 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -2,10 +2,8 @@
   .navbar-inner
     .container
       %div.app_logo
-        %span.separator
         = link_to explore_root_path, class: "home" do
-          %h1 GITLAB
-        %span.separator
+          = brand_header_logo
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml
index e8751a6987e..ab84e87c300 100644
--- a/app/views/layouts/admin.html.haml
+++ b/app/views/layouts/admin.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Admin area"
-  %body{class: "#{app_theme} #{theme_type} admin", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  admin", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to("Admin area", admin_root_path)
     = render 'layouts/page', sidebar: 'layouts/nav/admin'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 49123744ffa..6bd8ac4adb8 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Dashboard"
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page }
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page }
     = render "layouts/head_panel", title: link_to("Dashboard", root_path)
     = render 'layouts/page', sidebar: 'layouts/nav/dashboard'
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index e7d875173e6..e51fd4cb820 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Error"
-  %body{class: "#{app_theme} #{theme_type} application"}
+  %body{class: "#{app_theme}  application"}
     = render "layouts/head_panel", title: "" if current_user
     .container.navless-container
       = render "layouts/flash"
diff --git a/app/views/layouts/explore.html.haml b/app/views/layouts/explore.html.haml
index 09855b222dc..2bd0b8d85c9 100644
--- a/app/views/layouts/explore.html.haml
+++ b/app/views/layouts/explore.html.haml
@@ -2,7 +2,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: page_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     - if current_user
       = render "layouts/head_panel", title: link_to(page_title, explore_root_path)
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index fa0ed317ce1..f4a6bee15f6 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: group_head_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to(@group.name, group_path(@group))
     = render 'layouts/page', sidebar: 'layouts/nav/group'
diff --git a/app/views/layouts/navless.html.haml b/app/views/layouts/navless.html.haml
index a3b55542bf7..4d0278251a6 100644
--- a/app/views/layouts/navless.html.haml
+++ b/app/views/layouts/navless.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
     .container.navless-container
diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml
index 19d6efed78e..2b5be7fc372 100644
--- a/app/views/layouts/profile.html.haml
+++ b/app/views/layouts/profile.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Profile"
-  %body{class: "#{app_theme} #{theme_type} profile", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  profile", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to("Profile", profile_path)
     = render 'layouts/page', sidebar: 'layouts/nav/profile'
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index d2c9c2a991c..0a0039dec16 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
-  %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme}  project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
     - @project_settings_nav = true
diff --git a/app/views/layouts/projects.html.haml b/app/views/layouts/projects.html.haml
index c44a40c9c12..dde0964f47f 100644
--- a/app/views/layouts/projects.html.haml
+++ b/app/views/layouts/projects.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: project_head_title
-  %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme}  project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
     = render 'layouts/page', sidebar: 'layouts/nav/project'
diff --git a/app/views/layouts/public_group.html.haml b/app/views/layouts/public_group.html.haml
index 4b69329b8fe..b9b1d03e08e 100644
--- a/app/views/layouts/public_group.html.haml
+++ b/app/views/layouts/public_group.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: group_head_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: link_to(@group.name, group_path(@group))
     = render 'layouts/page', sidebar: 'layouts/nav/group'
diff --git a/app/views/layouts/public_projects.html.haml b/app/views/layouts/public_projects.html.haml
index 027e9a53139..04fa7c84e73 100644
--- a/app/views/layouts/public_projects.html.haml
+++ b/app/views/layouts/public_projects.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: project_title(@project)
     = render 'layouts/page', sidebar: 'layouts/nav/project'
diff --git a/app/views/layouts/public_users.html.haml b/app/views/layouts/public_users.html.haml
index 3538a8b1699..71c16bd1684 100644
--- a/app/views/layouts/public_users.html.haml
+++ b/app/views/layouts/public_users.html.haml
@@ -1,6 +1,6 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
     = render 'layouts/page'
diff --git a/app/views/layouts/search.html.haml b/app/views/layouts/search.html.haml
index 177e2073a0d..f9d8db06e10 100644
--- a/app/views/layouts/search.html.haml
+++ b/app/views/layouts/search.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Search"
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: link_to("Search", search_path)
     .container.navless-container