Merge branch 'implement-new-gitlab-colors' into 'master'

Add new GitLab colors

After this merge request all css must use variables for colours.

![7Od6vP7usJ__1_](https://gitlab.com/gitlab-org/gitlab-ce/uploads/01dd327770f25c76448a5860a76e34c9/7Od6vP7usJ__1_.png)
 
cc @skyruler 

See merge request !1542

5 files changed, 146 insertions, 127 deletions

diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index befd63832d5..eb9a2966389 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -23,15 +23,67 @@ $gl-gray: #7f8fa4;
 $gl-padding: 16px;
 $gl-avatar-size: 46px;
 
+/*
+ * Color schema
+ */
+
+$white-light: #FFFFFF;
+$white-normal: #DCE0E5;
+$white-dark: #E4E7ED;
+
+$gray-light: #F0F2F5;
+$gray-normal: #DCE0E5;
+$gray-dark: #E4E7ED;
+
+$green-light: #31AF64;
+$green-normal: #2FAA60;
+$green-dark: #2CA05B;
+
+$blue-light: #2EA8E5;
+$blue-normal: #2D9FD8;
+$blue-dark: #2897CE;
+
+$orange-light: #FC6443;
+$orange-normal: #E75E40;
+$orange-dark: #CE5237;
+
+$red-light: #F43263;
+$red-normal: #E52C5A;
+$red-dark: #D22852;
+
+$border-white-light: #E3E7EC;
+$border-white-normal: #D6DAE2;
+$border-white-dark: #C6CACF;
+
+$border-gray-light: #DCE0E5;
+$border-gray-normal: #D6DAE2;
+$border-gray-dark: #C6CACF;
+
+$border-green-light: #2FAA60;
+$border-green-normal: #2CA05B;
+$border-green-dark: #279654;
+
+$border-blue-light: #2D9FD8;
+$border-blue-normal: #2897CE;
+$border-blue-dark: #258DC1;
+
+$border-orange-light: #ED5C3D;
+$border-orange-normal: #CE5237;
+$border-orange-dark: #C14E35;
+
+$border-red-light: #E52C5A;
+$border-red-normal: #D22852;
+$border-red-dark: #CA264F;
+
 
 /*
  * State colors:
  */
-$gl-primary: #446e9b;
-$gl-success: #44c679;
-$gl-info: #00aaff;
-$gl-warning: #EB9532;
-$gl-danger: #d9534f;
+$gl-primary: $blue-normal;
+$gl-success: $green-normal;
+$gl-info: $blue-normal;
+$gl-warning: $orange-normal;
+$gl-danger: $red-normal;
 
 /*
  * Commit Diff Colors
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 62922e6a330..11acbe3adfa 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,6 +1,5 @@
 @mixin btn-default {
   @include border-radius(2px);
-
   border-width: 1px;
   border-style: solid;
   text-transform: uppercase;
@@ -10,150 +9,62 @@
   padding: 11px 16px;
   letter-spacing: .4px;
 
-  &:hover {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  &:focus {
-    border-width: 1px;
-    border-style: solid;
-  }
-
+  &:focus,
   &:active {
+    outline: none;
     @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-    border-width: 1px;
-    border-style: solid;
   }
 }
 
 @mixin btn-middle {
+  @include btn-default;
   @include border-radius(2px);
-
-  border-width: 1px;
-  border-style: solid;
-  text-transform: uppercase;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
   padding: 11px 24px;
-  letter-spacing: .4px;
-
-  &:hover {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  &:focus {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  &:active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-    border-width: 1px;
-    border-style: solid;
-  }
 }
 
+@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
+  background-color: $light;
+  border-color: $border-light;
+  color: $color;
 
-@mixin btn-green {
-  background-color: #28b061;
-  border: 1px solid #26a65c;
-  color: #fff;
-
-  &:hover {
-    background-color: #26ab5d;
-    border: 1px solid #229954;
-    color: #fff;
-  }
-
+  &:hover,
   &:focus {
-    background-color: #26ab5d;
-    border: 1px solid #229954;
-    color: #fff;
+    background-color: $normal;
+    border-color: $border-normal;
+    color: $color;
   }
 
   &:active {
     @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
 
-    background-color: #23a158 !important;
-    border: 1px solid #229954 !important;
-    color: #fff !important;
+    background-color: $dark;
+    border-color: $border-dark;
+    color: $color;
   }
 }
 
-@mixin btn-gray {
-  background-color: #f0f2f5;
-  border-color: #dce0e5;
-  color: #313236;
-
-  &:hover {
-    border-color:#dce0e5;
-    background-color: #ebeef2;
-    color: #313236;
-  }
-
-  &:focus {
-    border-color: #dce0e5;
-    background-color: #ebeef2;
-    color: #313236;
-  }
-
-  &:active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-
-    color: #313236 !important;
-    border-color: #c6cacf !important;
-    background-color: #e4e7ed !important;
-  }
+@mixin btn-green {
+  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF);
 }
 
-@mixin btn-white {
-  background-color: #fff;
-  border-color: #dce0e5;
-  color: #313236;
-
-  &:hover {
-    border-color:#dce0e5;
-    background-color: #f0f2f5;
-    color: #313236;
-  }
-
-  &:focus {
-    border-color: #dce0e5;
-    background-color: #f0f2f5;
-    color: #313236;
-  }
-
-  &:active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+@mixin btn-blue {
+  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF);
+}
 
-    color: #313236 !important;
-    border-color: #c6cacf !important;
-    background-color: #e4e7ed !important;
-  }
+@mixin btn-orange {
+  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF);
 }
 
 @mixin btn-red {
-  background-color: #f72e60;
-  border-color: #ee295a;
-
-  &:hover {
-    background-color: #e82757;
-    border-color: #e32555;
-  }
+  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF);
+}
 
-  &:focus {
-    background-color: #e82757;
-    border-color: #e32555;
-  }
+@mixin btn-gray {
+  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236);
+}
 
-  &:active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-    background-color: #d42450 !important;
-    border-color: #e12554 !important;
-  }
+@mixin btn-white {
+  @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236);
 }
 
 .btn {
@@ -172,6 +83,15 @@
     @include btn-gray;
   }
 
+  &.btn-primary,
+  &.btn-info {
+    @include btn-blue;
+  }
+
+  &.btn-warning {
+    @include btn-orange;
+  }
+
   &.btn-danger,
   &.btn-remove,
   &.btn-red {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index de2ae93df37..4e121b95d13 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,5 +1,6 @@
 .commits-compare-switch{
-  @extend .btn;
+  @include btn-default;
+  @include btn-white;
   background: image-url("switch_icon.png") no-repeat center center;
   text-indent: -9999px;
   float: left;
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 7c89457ace3..2169a821fb2 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -15,6 +15,8 @@
     %li
       = link_to 'Tables', '#tables'
     %li
+      = link_to 'Nav', '#nav'
+    %li
       = link_to 'Buttons', '#buttons'
     %li
       = link_to 'Panels', '#panels'
@@ -30,17 +32,32 @@
   %h2#blocks Blocks
 
   %h3
-    %code .well
+    %code .gray-content-block
+
 
 
-  .well
-    %h4 Something
+  .gray-content-block.middle-block
+    %h4 Normal block inside content
+    = lorem
+
+  .gray-content-block.second-block
+    %h4 Second block
     = lorem
 
 
   %h2#lists Lists
 
   %h3
+    %code .content-list
+  %ul.content-list
+    %li
+      One item
+    %li
+      One item
+    %li
+      One item
+
+  %h3
     %code .well-list
   %ul.well-list
     %li
@@ -102,11 +119,40 @@
           %td the Bird
           %td @twitter
 
+  %h2#navs Navigation
+
+  %h3
+    %code .center-top-menu
+  .example
+    %ul.center-top-menu
+      %li.active
+        %a Open
+      %li
+        %a Closed
+
+  %h3
+    %code .btn-group.btn-group-next
+  .example
+    %div.btn-group.btn-group-next
+      %a.btn.active Open
+      %a.btn Closed
+
+
+  %h3
+    %code .nav.nav-tabs
+  .example
+    %ul.nav.nav-tabs
+      %li.active
+        %a Open
+      %li
+        %a Closed
+
 
   %h2#buttons Buttons
 
   .example
     %button.btn.btn-default{:type => "button"} Default
+    %button.btn.btn-gray{:type => "button"} Gray
     %button.btn.btn-primary{:type => "button"} Primary
     %button.btn.btn-success{:type => "button"} Success
     %button.btn.btn-info{:type => "button"} Info
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 58d8478744e..e7ac7a0eaa4 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -34,7 +34,7 @@
     = render "projects/merge_requests/widget/show.html.haml"
 
     - if @merge_request.open? && @merge_request.can_be_merged?
-      .light
+      .light.append-bottom-20
         You can also accept this merge request manually using the
         = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"