Skip to content

G
gitlab-ce
Commit 79274844 authored by Fatih Acet's avatar Fatih Acet
Browse files
Options

Use mixin to create color schemes. 

Some SCSS Foo in action! 💥
parent c6c74a37
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 275 deletions
app/assets/stylesheets/pages/merge_conflicts.scss
View file @ 79274844
$white_header_head_neutral : #e1fad7;
$white_line_head_neutral : #effdec;
$white_button_head_neutral : #9ADB84;
$colors: (
white_header_head_neutral : #e1fad7,
white_line_head_neutral : #effdec,
white_button_head_neutral : #9ADB84,
$white_header_head_chosen : #baf0a8;
$white_line_head_chosen : #e1fad7;
$white_button_head_chosen : #52C22D;
white_header_head_chosen : #baf0a8,
white_line_head_chosen : #e1fad7,
white_button_head_chosen : #52C22D,
$white_header_origin_neutral : #e0f0ff;
$white_line_origin_neutral : #f2f9ff;
$white_button_origin_neutral : #87C2FA;
white_header_origin_neutral : #e0f0ff,
white_line_origin_neutral : #f2f9ff,
white_button_origin_neutral : #87C2FA,
$white_header_origin_chosen : #add8ff;
$white_line_origin_chosen : #e0f0ff;
$white_button_origin_chosen : #268CED;
white_header_origin_chosen : #add8ff,
white_line_origin_chosen : #e0f0ff,
white_button_origin_chosen : #268CED,
$white_header_not_chosen : #F0F0F0;
$white_line_not_chosen : #f9f9f9;
white_header_not_chosen : #F0F0F0,
white_line_not_chosen : #f9f9f9,
dark_header_head_neutral : rgba(#33FF33, .2),
dark_line_head_neutral : rgba(#33FF33, .1),
dark_button_head_neutral : #40874F,
$dark_header_head_neutral : rgba(#33FF33, .2);
$dark_line_head_neutral : rgba(#33FF33, .1);
$dark_button_head_neutral : #40874F;
dark_header_head_chosen : rgba(#33FF33, .33),
dark_line_head_chosen : rgba(#33FF33, .2),
dark_button_head_chosen : #258537,
$dark_header_head_chosen : rgba(#33FF33, .33);
$dark_line_head_chosen : rgba(#33FF33, .2);
$dark_button_head_chosen : #258537;
dark_header_origin_neutral : rgba(#2878c9, .4),
dark_line_origin_neutral : rgba(#2878c9, .3),
dark_button_origin_neutral : #2a5c8c,
$dark_header_origin_neutral : rgba(#2878c9, .4);
$dark_line_origin_neutral : rgba(#2878c9, .3);
$dark_button_origin_neutral : #2a5c8c;
dark_header_origin_chosen : rgba(#2878c9, .6),
dark_line_origin_chosen : rgba(#2878c9, .4),
dark_button_origin_chosen : #1d6cbf,
$dark_header_origin_chosen : rgba(#2878c9, .6);
$dark_line_origin_chosen : rgba(#2878c9, .4);
$dark_button_origin_chosen : #1d6cbf;
dark_header_not_chosen : rgba(#FFF, .25),
dark_line_not_chosen : rgba(#FFF, .1),
$dark_header_not_chosen : rgba(#FFF, .25);
$dark_line_not_chosen : rgba(#FFF, .1);
monokai_header_head_neutral : rgba(#A6E22E, .25),
monokai_line_head_neutral : rgba(#A6E22E, .1),
monokai_button_head_neutral : #376b20,
monokai_header_head_chosen : rgba(#A6E22E, .4),
monokai_line_head_chosen : rgba(#A6E22E, .25),
monokai_button_head_chosen : #39800d,
$solarized_light_header_head_neutral : rgba(#859900, .37);
$solarized_light_line_head_neutral : rgba(#859900, .2);
$solarized_light_button_head_neutral : #afb262;
monokai_header_origin_neutral : rgba(#60D9F1, .35),
monokai_line_origin_neutral : rgba(#60D9F1, .15),
monokai_button_origin_neutral : #38848C,
$solarized_light_header_head_chosen : rgba(#859900, .5);
$solarized_light_line_head_chosen : rgba(#859900, .37);
$solarized_light_button_head_chosen : #94993d;
monokai_header_origin_chosen : rgba(#60D9F1, .5),
monokai_line_origin_chosen : rgba(#60D9F1, .35),
monokai_button_origin_chosen : #3EA4B2,
$solarized_light_header_origin_neutral : rgba(#2878C9, .37);
$solarized_light_line_origin_neutral : rgba(#2878C9, .15);
$solarized_light_button_origin_neutral : #60A1BF;
monokai_header_not_chosen : rgba(#FFF, .24),
monokai_line_not_chosen : rgba(#FFF, .1),
$solarized_light_header_origin_chosen : rgba(#2878C9, .6);
$solarized_light_line_origin_chosen : rgba(#2878C9, .37);
$solarized_light_button_origin_chosen : #2482b2;
$solarized_light_header_not_chosen : rgba(#FFF, .37);
$solarized_light_line_not_chosen : rgba(#FFF, .2);
solarized_light_header_head_neutral : rgba(#859900, .37),
solarized_light_line_head_neutral : rgba(#859900, .2),
solarized_light_button_head_neutral : #afb262,
solarized_light_header_head_chosen : rgba(#859900, .5),
solarized_light_line_head_chosen : rgba(#859900, .37),
solarized_light_button_head_chosen : #94993d,
solarized_light_header_origin_neutral : rgba(#2878C9, .37),
solarized_light_line_origin_neutral : rgba(#2878C9, .15),
solarized_light_button_origin_neutral : #60A1BF,
$solarized_dark_header_head_neutral : rgba(#859900, .35);
$solarized_dark_line_head_neutral : rgba(#859900, .15);
$solarized_dark_button_head_neutral : #376b20;
solarized_light_header_origin_chosen : rgba(#2878C9, .6),
solarized_light_line_origin_chosen : rgba(#2878C9, .37),
solarized_light_button_origin_chosen : #2482b2,
$solarized_dark_header_head_chosen : rgba(#859900, .5);
$solarized_dark_line_head_chosen : rgba(#859900, .35);
$solarized_dark_button_head_chosen : #39800d;
solarized_light_header_not_chosen : rgba(#FFF, .37),
solarized_light_line_not_chosen : rgba(#FFF, .2),
$solarized_dark_header_origin_neutral : rgba(#2878C9, .35);
$solarized_dark_line_origin_neutral : rgba(#2878C9, .15);
$solarized_dark_button_origin_neutral : #086799;
$solarized_dark_header_origin_chosen : rgba(#2878C9, .6);
$solarized_dark_line_origin_chosen : rgba(#2878C9, .35);
$solarized_dark_button_origin_chosen : #0082CC;
solarized_dark_header_head_neutral : rgba(#859900, .35),
solarized_dark_line_head_neutral : rgba(#859900, .15),
solarized_dark_button_head_neutral : #376b20,
$solarized_dark_header_not_chosen : rgba(#FFF, .25);
$solarized_dark_line_not_chosen : rgba(#FFF, .15);
solarized_dark_header_head_chosen : rgba(#859900, .5),
solarized_dark_line_head_chosen : rgba(#859900, .35),
solarized_dark_button_head_chosen : #39800d,
solarized_dark_header_origin_neutral : rgba(#2878C9, .35),
solarized_dark_line_origin_neutral : rgba(#2878C9, .15),
solarized_dark_button_origin_neutral : #086799,
solarized_dark_header_origin_chosen : rgba(#2878C9, .6),
solarized_dark_line_origin_chosen : rgba(#2878C9, .35),
solarized_dark_button_origin_chosen : #0082CC,
$monokai_header_head_neutral : rgba(#A6E22E, .25);
$monokai_line_head_neutral : rgba(#A6E22E, .1);
$monokai_button_head_neutral : #376b20;
solarized_dark_header_not_chosen : rgba(#FFF, .25),
solarized_dark_line_not_chosen : rgba(#FFF, .15)
);
$monokai_header_head_chosen : rgba(#A6E22E, .4);
$monokai_line_head_chosen : rgba(#A6E22E, .25);
$monokai_button_head_chosen : #39800d;
$monokai_header_origin_neutral : rgba(#60D9F1, .35);
$monokai_line_origin_neutral : rgba(#60D9F1, .15);
$monokai_button_origin_neutral : #38848C;
$monokai_header_origin_chosen : rgba(#60D9F1, .5);
$monokai_line_origin_chosen : rgba(#60D9F1, .35);
$monokai_button_origin_chosen : #3EA4B2;
$monokai_header_not_chosen : rgba(#FFF, .24);
$monokai_line_not_chosen : rgba(#FFF, .1);
#conflicts {
.white {
.header.line_content, .diff-line-num {
&.origin {
background-color: $white_header_origin_neutral;
&.selected {
background-color: $white_header_origin_chosen;
}
&.unselected {
background-color: $white_header_not_chosen;
}
@mixin color-scheme($color) {
.header.line_content, .diff-line-num {
&.origin {
background-color: map-get($colors, #{$color}_header_origin_neutral);
&.selected {
background-color: map-get($colors, #{$color}_header_origin_chosen);
}
&.head {
background-color: $white_header_head_neutral;
&.selected {
background-color: $white_header_head_chosen;
}
&.unselected {
background-color: $white_header_not_chosen;
}
&.unselected {
background-color: map-get($colors, #{$color}_header_not_chosen);
}
}
.line_content {
&.origin {
background-color: $white_line_origin_neutral;
&.selected {
background-color: $white_line_origin_chosen;
}
&.unselected {
background-color: $white_line_not_chosen;
}
&.head {
background-color: map-get($colors, #{$color}_header_head_neutral);
&.selected {
background-color: map-get($colors, #{$color}_header_head_chosen);
}
&.head {
background-color: $white_line_head_neutral;
&.selected {
background-color: $white_line_head_chosen;
}
&.unselected {
background-color: $white_line_not_chosen;
}
&.unselected {
background-color: map-get($colors, #{$color}_header_not_chosen);
}
}
}
.dark {
.header.line_content, .diff-line-num {
&.origin {
background-color: $dark_header_origin_neutral;
&.selected {
background-color: $dark_header_origin_chosen;
}
&.unselected {
background-color: $dark_header_not_chosen;
}
.line_content {
&.origin {
background-color: map-get($colors, #{$color}_line_origin_neutral);
&.selected {
background-color: map-get($colors, #{$color}_line_origin_chosen);
}
&.head {
background-color: $dark_header_head_neutral;
&.selected {
background-color: $dark_header_head_chosen;
}
&.unselected {
background-color: $dark_header_not_chosen;
}
&.unselected {
background-color: map-get($colors, #{$color}_line_not_chosen);
}
}
.line_content {
&.origin {
background-color: $dark_line_origin_neutral;
&.selected {
background-color: $dark_line_origin_chosen;
}
&.unselected {
background-color: $dark_line_not_chosen;
}
&.head {
background-color: map-get($colors, #{$color}_line_head_neutral);
&.selected {
background-color: map-get($colors, #{$color}_line_head_chosen);
}
&.head {
background-color: $dark_line_head_neutral;
&.selected {
background-color: $dark_line_head_chosen;
}
&.unselected {
background-color: $dark_line_not_chosen;
}
&.unselected {
background-color: map-get($colors, #{$color}_line_not_chosen);
}
}
}
}
.solarized-light {
.header.line_content, .diff-line-num {
&.origin {
background-color: $solarized_light_header_origin_neutral;
&.selected {
background-color: $solarized_light_header_origin_chosen;
}
&.unselected {
background-color: $solarized_light_header_not_chosen;
}
}
&.head {
background-color: $solarized_light_header_head_neutral;
&.selected {
background-color: $solarized_light_header_head_chosen;
}
&.unselected {
background-color: $solarized_light_header_not_chosen;
}
}
}
#conflicts {
.line_content {
&.origin {
background-color: $solarized_light_line_origin_neutral;
&.selected {
background-color: $solarized_light_line_origin_chosen;
}
&.unselected {
background-color: $solarized_light_line_not_chosen;
}
}
&.head {
background-color: $solarized_light_line_head_neutral;
&.selected {
background-color: $solarized_light_line_head_chosen;
}
&.unselected {
background-color: $solarized_light_line_not_chosen;
}
}
}
.white {
@include color-scheme('white')
}
.solarized-dark {
.header.line_content, .diff-line-num {
&.origin {
background-color: $solarized_dark_header_origin_neutral;
&.selected {
background-color: $solarized_dark_header_origin_chosen;
}
&.unselected {
background-color: $solarized_dark_header_not_chosen;
}
}
&.head {
background-color: $solarized_dark_header_head_neutral;
&.selected {
background-color: $solarized_dark_header_head_chosen;
}
&.unselected {
background-color: $solarized_dark_header_not_chosen;
}
}
}
.line_content {
&.origin {
background-color: $solarized_dark_line_origin_neutral;
&.selected {
background-color: $solarized_dark_line_origin_chosen;
}
&.unselected {
background-color: $solarized_dark_line_not_chosen;
}
}
&.head {
background-color: $solarized_dark_line_head_neutral;
&.selected {
background-color: $solarized_dark_line_head_chosen;
}
&.unselected {
background-color: $solarized_dark_line_not_chosen;
}
}
}
.dark {
@include color-scheme('dark')
}
.monokai {
.header.line_content, .diff-line-num {
&.origin {
background-color: $monokai_header_origin_neutral;
&.selected {
background-color: $monokai_header_origin_chosen;
}
&.unselected {
background-color: $monokai_header_not_chosen;
}
}
&.head {
background-color: $monokai_header_head_neutral;
&.selected {
background-color: $monokai_header_head_chosen;
}
&.unselected {
background-color: $monokai_header_not_chosen;
}
}
}
@include color-scheme('monokai')
}
.line_content {
&.origin {
background-color: $monokai_line_origin_neutral;
&.selected {
background-color: $monokai_line_origin_chosen;
}
&.unselected {
background-color: $monokai_line_not_chosen;
}
}
&.head {
background-color: $monokai_line_head_neutral;
&.selected {
background-color: $monokai_line_head_chosen;
}
&.unselected {
background-color: $monokai_line_not_chosen;
}
}
}
.solarized-light {
@include color-scheme('solarized_light')
}
.solarized-dark {
@include color-scheme('solarized_dark')
}
.diff-wrap-lines .line_content {
white-space: normal;
......
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