Skip to content

G
gitlab-ce
Commit a2374758 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

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
parents c7894521 dc400a74
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 127 deletions
app/assets/stylesheets/base/variables.scss
View file @ a2374758
......@@ -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
......
app/assets/stylesheets/generic/buttons.scss
View file @ a2374758
@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 {
......
app/assets/stylesheets/pages/commits.scss
View file @ a2374758
.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;
......
app/views/help/ui.html.haml
View file @ a2374758
......@@ -14,6 +14,8 @@
= link_to 'Lists', '#lists'
%li
= link_to 'Tables', '#tables'
%li
= link_to 'Nav', '#nav'
%li
= link_to 'Buttons', '#buttons'
%li
......@@ -30,16 +32,31 @@
%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
......@@ -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
......
app/views/projects/merge_requests/_show.html.haml
View file @ a2374758
......@@ -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"
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7