New colorful design of sidebar

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

6 files changed, 93 insertions, 83 deletions

diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss
index 216f25cdcd5..feff931156c 100644
--- a/app/assets/stylesheets/base/mixins.scss
+++ b/app/assets/stylesheets/base/mixins.scss
@@ -50,13 +50,6 @@
   @include box-shadow(0 0 0 3px #f1f1f1);
 }
 
-@mixin header-font {
-  color: $style_color;
-  font-size: 16px;
-  line-height: 44px;
-  font-weight: normal;
-}
-
 @mixin md-typography {
   font-size: 15px;
   line-height: 1.5;
diff --git a/app/assets/stylesheets/generic/nav_sidebar.scss b/app/assets/stylesheets/generic/nav_sidebar.scss
index 3bcb7b81333..36552083851 100644
--- a/app/assets/stylesheets/generic/nav_sidebar.scss
+++ b/app/assets/stylesheets/generic/nav_sidebar.scss
@@ -6,7 +6,6 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-right: 1px solid $border-color;
   }
 }
 
@@ -38,28 +37,10 @@
 }
 
 .nav-sidebar li {
-  &.active a {
-    color: $text-color;
-    background: #FFF !important;
-    font-weight: bold;
-    border: 1px solid #EEE;
-    border-right: 1px solid transparent;
-    border-left: 3px solid $style_color;
-
-    &.no-highlight {
-      background: none !important;
-      border: none;
-    }
-
-    i {
-      color: $text-color;
-    }
-  }
 }
 
 .nav-sidebar li {
   &.separate-item {
-    border-top: 1px solid $border-color;
     padding-top: 10px;
     margin-top: 10px;
   }
@@ -75,8 +56,6 @@
 
     &:hover {
       text-decoration: none;
-      color: $text-color;
-      background: $border-color;
     }
 
     &:active, &:focus {
@@ -158,9 +137,6 @@
   left: 198px;
   font-size: 13px;
   background: transparent;
-  color: black;
-  border-left: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
 }
 
 .collapse-nav a:hover {
diff --git a/app/assets/stylesheets/pages/header.scss b/app/assets/stylesheets/pages/header.scss
index dde19b801f8..22b6ac8f339 100644
--- a/app/assets/stylesheets/pages/header.scss
+++ b/app/assets/stylesheets/pages/header.scss
@@ -11,9 +11,23 @@ header {
     width: 100%;
 
     .navbar-inner {
+      background: #FFF;
+      border-bottom: 1px solid #DDD;
       filter: none;
 
+      .title {
+        color: #555;
+
+        a {
+          color: #555;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
       .nav > li > a {
+        color: #666;
         font-size: 14px;
         line-height: 32px;
         padding: 6px 10px;
@@ -100,10 +114,8 @@ header {
 
     a {
       float: left;
-      padding: 5px 0;
       height: 46px;
-      width: 52px;
-      text-align: center;
+      width: 100%;
 
       img {
         width: 36px;
@@ -124,8 +136,11 @@ header {
     position: relative;
     float: left;
     margin: 0;
-    margin-left: 5px;
-    @include header-font;
+    margin-left: 25px;
+    font-size: 18px;
+    line-height: 44px;
+    font-weight: normal;
+
     @include str-truncated(37%);
   }
 
@@ -164,9 +179,10 @@ header {
       padding-left: 25px;
       font-size: 13px;
       @include border-radius(3px);
-      border: 1px solid #c6c6c6;
+      border: 1px solid #DDD;
       box-shadow: none;
       @include transition(all 0.15s ease-in 0s);
+      background-color: #f5f5f5;
     }
   }
 }
diff --git a/app/assets/stylesheets/themes/dark-theme.scss b/app/assets/stylesheets/themes/dark-theme.scss
index b7b22a8724e..c3502cb46fc 100644
--- a/app/assets/stylesheets/themes/dark-theme.scss
+++ b/app/assets/stylesheets/themes/dark-theme.scss
@@ -2,60 +2,101 @@
   header {
     &.navbar-gitlab {
       .navbar-inner {
-        background: $color;
-
         .navbar-toggle {
           color: #FFF;
         }
 
         .app_logo, .navbar-toggle {
+          a {
+            color: $color-light;
+          }
+          background-color: $color-darker;
+
           &:hover {
-            background-color: $color-darker;
+            background-color: $color-dark;
+            a {
+              color: #FFF;
+            }
           }
         }
 
         .app_logo {
-          background-color: $color-dark;
-        }
-
-        .title {
-          color: #FFF;
+          @media (max-width: $screen-md-max) {
+            width: 52px;
+            h3 {
+              display: none;
+            }
+          }
+          border-bottom: 1px solid transparent;
+          margin-bottom: -1px;
 
           a {
-            color: #FFF;
-            &:hover {
-              text-decoration: underline;
+            padding: 5px 8px;
+
+            img {
+              float: left;
+            }
+
+            h3 {
+              width: 158px;
+              float: left;
+              margin: 0;
+              margin-left: 20px;
+              font-size: 18px;
+              line-height: 34px;
+              font-weight: normal;
             }
           }
         }
+      }
+    }
+  }
 
-        .search {
-          .search-input {
-            background-color: $color-light;
-            background-color: rgba(255, 255, 255, 0.5);
-            border: 1px solid $color-light;
+  .page-with-sidebar {
+    background: $color-darker;
 
-            &:focus {
-              background-color: white;
-            }
-          }
+    .collapse-nav a {
+      color: #FFF;
+      background: $color;
+    }
+
+    .sidebar-wrapper {
+      background: $color-darker;
+      border-right: 1px solid $color-darker;
+    }
+
+    .nav-sidebar li {
+      a {
+        color: $color-light;
+
+        &:hover, &:focus, &:active {
+          background: $color-dark;
         }
 
-        .search-input::-webkit-input-placeholder {
-          color: #666;
+        i {
+          color: $color-light;
         }
 
-        .nav > li > a {
+        .count {
           color: $color-light;
+          background: $color-dark;
+        }
+      }
 
-          &:hover, &:focus, &:active {
-            background: none;
-            color: #FFF;
-          }
+      &.separate-item {
+        border-top: 1px solid $color;
+      }
+
+      &.active a {
+        color: #FFF;
+        font-weight: bold;
+
+        &.no-highlight {
+          border: none;
         }
 
-        .search-input {
-          border-color: $color-light;
+        i {
+          color: #FFF
         }
       }
     }
diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss
index 097d5c5b73c..03d98b00d49 100644
--- a/app/assets/stylesheets/themes/ui_basic.scss
+++ b/app/assets/stylesheets/themes/ui_basic.scss
@@ -7,23 +7,6 @@
   header {
     &.navbar-gitlab {
       .navbar-inner {
-        background: #F1F1F1;
-        border-bottom: 1px solid #DDD;
-
-        .title {
-          color: #555;
-
-          a {
-            color: #555;
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
-
-        .nav > li > a {
-          color: $style_color;
-        }
       }
     }
   }
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index d58582c107a..6851dd64df5 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -4,6 +4,7 @@
       %div.app_logo
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
           = brand_header_logo
+          %h3 GitLab
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}