From 2d5165979f13a96f7af6c8f0d93c4e9bf1e46541 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Fri, 5 Jun 2015 18:49:00 +0200
Subject: Fix css alignment in header. Use scss variable

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
 app/assets/stylesheets/base/layout.scss     |  2 +-
 app/assets/stylesheets/base/variables.scss  |  2 ++
 app/assets/stylesheets/generic/header.scss  | 23 ++++++++++-------------
 app/assets/stylesheets/generic/sidebar.scss |  6 +++---
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index 62c11b06368..690d89a5c16 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -4,7 +4,7 @@ html {
   &.touch .tooltip { display: none !important; }
 
   body {
-    padding-top: 46px;
+    padding-top: $header-height;
   }
 }
 
diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index 3d7868fb7d2..08f153dfbc9 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -12,6 +12,8 @@ $code_font_size: 13px;
 $code_line_height: 1.5;
 $border-color: #E5E5E5;
 $background-color: #f5f5f5;
+$header-height: 50px;
+
 
 /*
  * State colors:
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 3e738929a78..a97671d0f06 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -2,8 +2,6 @@
  *  Application Header
  *
  */
-$header-height: 46px;
-
 header {
   &.navbar-empty {
     background: #FFF;
@@ -18,7 +16,7 @@ header {
   &.navbar-gitlab {
     z-index: 100;
     margin-bottom: 0;
-    min-height: 40px;
+    min-height: $header-height;
     border: none;
     width: 100%;
 
@@ -31,15 +29,14 @@ header {
       .nav > li > a {
         color: #888;
         font-size: 14px;
-        line-height: 19px;
         padding: 0;
         background-color: #f5f5f5;
-        margin: 9px 0;
+        margin: ($header-height - 28) / 2 0;
         margin-left: 10px;
         border-radius: 40px;
-        height: 26px;
-        width: 26px;
-        line-height: 26px;
+        height: 28px;
+        width: 28px;
+        line-height: 28px;
         text-align: center;
 
         &:hover, &:focus, &:active {
@@ -71,15 +68,15 @@ header {
       float: left;
       height: $header-height;
       width: 100%;
-      padding: 5px 8px;
+      padding: ($header-height - 36 ) / 2 8px;
 
       h3 {
         width: 158px;
         float: left;
         margin: 0;
-        margin-left: 20px;
+        margin-left: 14px;
         font-size: 18px;
-        line-height: 34px;
+        line-height: $header-height - 14;
         font-weight: normal;
       }
 
@@ -106,7 +103,7 @@ header {
       margin: 0;
       margin-left: 35px;
       font-size: 18px;
-      line-height: 44px;
+      line-height: $header-height;
       font-weight: bold;
       color: #444;
 
@@ -124,7 +121,7 @@ header {
   .search {
     margin-right: 10px;
     margin-left: 10px;
-    margin-top: 8px;
+    margin-top: ($header-height - 28) / 2;
 
     form {
       margin: 0;
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index 69bddc6f59e..0cbb996f4e8 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -86,7 +86,7 @@
     .nav-sidebar {
       margin-top: 29px;
       position: fixed;
-      top: 45px;
+      top: $header-height;
       width: $sidebar_width;
     }
   }
@@ -105,7 +105,7 @@
     .nav-sidebar {
       margin-top: 29px;
       position: fixed;
-      top: 45px;
+      top: $header-height;
       width: $sidebar_collapsed_width;
 
       li a {
@@ -144,7 +144,7 @@
 
 .collapse-nav a {
   position: fixed;
-  top: 46px;
+  top: $header-height;
   left: 198px;
   font-size: 13px;
   background: transparent;
-- 
cgit v1.2.1