Add new GitLab colors

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

Add new GitLab colors
057b1c31 · Dmitriy Zaporozhets · d4892e41 · 057b1c31 · 057b1c31 · 057b1c31
Unverified Commit 057b1c31 authored 9 years ago by Dmitriy Zaporozhets
--- 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

--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
 @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 {

--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
 .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;

--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -107,6 +107,7 @@
  
  .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

--- 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"