Commit 057b1c31 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Add new GitLab colors

Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent d4892e41
...@@ -23,15 +23,67 @@ $gl-gray: #7f8fa4; ...@@ -23,15 +23,67 @@ $gl-gray: #7f8fa4;
$gl-padding: 16px; $gl-padding: 16px;
$gl-avatar-size: 46px; $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: * State colors:
*/ */
$gl-primary: #446e9b; $gl-primary: $blue-normal;
$gl-success: #44c679; $gl-success: $green-normal;
$gl-info: #00aaff; $gl-info: $blue-normal;
$gl-warning: #EB9532; $gl-warning: $orange-normal;
$gl-danger: #d9534f; $gl-danger: $red-normal;
/* /*
* Commit Diff Colors * Commit Diff Colors
......
@mixin btn-default { @mixin btn-default {
@include border-radius(2px); @include border-radius(2px);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
text-transform: uppercase; text-transform: uppercase;
...@@ -10,150 +9,62 @@ ...@@ -10,150 +9,62 @@
padding: 11px 16px; padding: 11px 16px;
letter-spacing: .4px; letter-spacing: .4px;
&:hover { &:focus,
border-width: 1px;
border-style: solid;
}
&:focus {
border-width: 1px;
border-style: solid;
}
&:active { &:active {
outline: none;
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-width: 1px;
border-style: solid;
} }
} }
@mixin btn-middle { @mixin btn-middle {
@include btn-default;
@include border-radius(2px); @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; 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 { &:hover,
background-color: #28b061;
border: 1px solid #26a65c;
color: #fff;
&:hover {
background-color: #26ab5d;
border: 1px solid #229954;
color: #fff;
}
&:focus { &:focus {
background-color: #26ab5d; background-color: $normal;
border: 1px solid #229954; border-color: $border-normal;
color: #fff; color: $color;
} }
&:active { &:active {
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
background-color: #23a158 !important; background-color: $dark;
border: 1px solid #229954 !important; border-color: $border-dark;
color: #fff !important; color: $color;
} }
} }
@mixin btn-gray { @mixin btn-green {
background-color: #f0f2f5; @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF);
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-white { @mixin btn-blue {
background-color: #fff; @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF);
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));
color: #313236 !important; @mixin btn-orange {
border-color: #c6cacf !important; @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF);
background-color: #e4e7ed !important;
}
} }
@mixin btn-red { @mixin btn-red {
background-color: #f72e60; @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF);
border-color: #ee295a; }
&:hover {
background-color: #e82757;
border-color: #e32555;
}
&:focus { @mixin btn-gray {
background-color: #e82757; @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236);
border-color: #e32555; }
}
&:active { @mixin btn-white {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236);
background-color: #d42450 !important;
border-color: #e12554 !important;
}
} }
.btn { .btn {
...@@ -172,6 +83,15 @@ ...@@ -172,6 +83,15 @@
@include btn-gray; @include btn-gray;
} }
&.btn-primary,
&.btn-info {
@include btn-blue;
}
&.btn-warning {
@include btn-orange;
}
&.btn-danger, &.btn-danger,
&.btn-remove, &.btn-remove,
&.btn-red { &.btn-red {
......
.commits-compare-switch{ .commits-compare-switch{
@extend .btn; @include btn-default;
@include btn-white;
background: image-url("switch_icon.png") no-repeat center center; background: image-url("switch_icon.png") no-repeat center center;
text-indent: -9999px; text-indent: -9999px;
float: left; float: left;
......
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
.example .example
%button.btn.btn-default{:type => "button"} Default %button.btn.btn-default{:type => "button"} Default
%button.btn.btn-gray{:type => "button"} Gray
%button.btn.btn-primary{:type => "button"} Primary %button.btn.btn-primary{:type => "button"} Primary
%button.btn.btn-success{:type => "button"} Success %button.btn.btn-success{:type => "button"} Success
%button.btn.btn-info{:type => "button"} Info %button.btn.btn-info{:type => "button"} Info
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
= render "projects/merge_requests/widget/show.html.haml" = render "projects/merge_requests/widget/show.html.haml"
- if @merge_request.open? && @merge_request.can_be_merged? - if @merge_request.open? && @merge_request.can_be_merged?
.light .light.append-bottom-20
You can also accept this merge request manually using the 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" = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment