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; $colors: (
$white_line_head_neutral : #effdec; white_header_head_neutral : #e1fad7,
$white_button_head_neutral : #9ADB84; white_line_head_neutral : #effdec,
white_button_head_neutral : #9ADB84,
$white_header_head_chosen : #baf0a8; white_header_head_chosen : #baf0a8,
$white_line_head_chosen : #e1fad7; white_line_head_chosen : #e1fad7,
$white_button_head_chosen : #52C22D; white_button_head_chosen : #52C22D,
$white_header_origin_neutral : #e0f0ff; white_header_origin_neutral : #e0f0ff,
$white_line_origin_neutral : #f2f9ff; white_line_origin_neutral : #f2f9ff,
$white_button_origin_neutral : #87C2FA; white_button_origin_neutral : #87C2FA,
$white_header_origin_chosen : #add8ff; white_header_origin_chosen : #add8ff,
$white_line_origin_chosen : #e0f0ff; white_line_origin_chosen : #e0f0ff,
$white_button_origin_chosen : #268CED; white_button_origin_chosen : #268CED,
$white_header_not_chosen : #F0F0F0; white_header_not_chosen : #F0F0F0,
$white_line_not_chosen : #f9f9f9; 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_header_head_chosen : rgba(#33FF33, .33),
$dark_line_head_neutral : rgba(#33FF33, .1); dark_line_head_chosen : rgba(#33FF33, .2),
$dark_button_head_neutral : #40874F; dark_button_head_chosen : #258537,
$dark_header_head_chosen : rgba(#33FF33, .33); dark_header_origin_neutral : rgba(#2878c9, .4),
$dark_line_head_chosen : rgba(#33FF33, .2); dark_line_origin_neutral : rgba(#2878c9, .3),
$dark_button_head_chosen : #258537; dark_button_origin_neutral : #2a5c8c,
$dark_header_origin_neutral : rgba(#2878c9, .4); dark_header_origin_chosen : rgba(#2878c9, .6),
$dark_line_origin_neutral : rgba(#2878c9, .3); dark_line_origin_chosen : rgba(#2878c9, .4),
$dark_button_origin_neutral : #2a5c8c; dark_button_origin_chosen : #1d6cbf,
$dark_header_origin_chosen : rgba(#2878c9, .6); dark_header_not_chosen : rgba(#FFF, .25),
$dark_line_origin_chosen : rgba(#2878c9, .4); dark_line_not_chosen : rgba(#FFF, .1),
$dark_button_origin_chosen : #1d6cbf;
$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); monokai_header_origin_neutral : rgba(#60D9F1, .35),
$solarized_light_line_head_neutral : rgba(#859900, .2); monokai_line_origin_neutral : rgba(#60D9F1, .15),
$solarized_light_button_head_neutral : #afb262; monokai_button_origin_neutral : #38848C,
$solarized_light_header_head_chosen : rgba(#859900, .5); monokai_header_origin_chosen : rgba(#60D9F1, .5),
$solarized_light_line_head_chosen : rgba(#859900, .37); monokai_line_origin_chosen : rgba(#60D9F1, .35),
$solarized_light_button_head_chosen : #94993d; monokai_button_origin_chosen : #3EA4B2,
$solarized_light_header_origin_neutral : rgba(#2878C9, .37); monokai_header_not_chosen : rgba(#FFF, .24),
$solarized_light_line_origin_neutral : rgba(#2878C9, .15); monokai_line_not_chosen : rgba(#FFF, .1),
$solarized_light_button_origin_neutral : #60A1BF;
$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_header_head_neutral : rgba(#859900, .37),
$solarized_light_line_not_chosen : rgba(#FFF, .2); 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_light_header_origin_chosen : rgba(#2878C9, .6),
$solarized_dark_line_head_neutral : rgba(#859900, .15); solarized_light_line_origin_chosen : rgba(#2878C9, .37),
$solarized_dark_button_head_neutral : #376b20; solarized_light_button_origin_chosen : #2482b2,
$solarized_dark_header_head_chosen : rgba(#859900, .5); solarized_light_header_not_chosen : rgba(#FFF, .37),
$solarized_dark_line_head_chosen : rgba(#859900, .35); solarized_light_line_not_chosen : rgba(#FFF, .2),
$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_header_head_neutral : rgba(#859900, .35),
$solarized_dark_line_origin_chosen : rgba(#2878C9, .35); solarized_dark_line_head_neutral : rgba(#859900, .15),
$solarized_dark_button_origin_chosen : #0082CC; solarized_dark_button_head_neutral : #376b20,
$solarized_dark_header_not_chosen : rgba(#FFF, .25); solarized_dark_header_head_chosen : rgba(#859900, .5),
$solarized_dark_line_not_chosen : rgba(#FFF, .15); 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); solarized_dark_header_not_chosen : rgba(#FFF, .25),
$monokai_line_head_neutral : rgba(#A6E22E, .1); solarized_dark_line_not_chosen : rgba(#FFF, .15)
$monokai_button_head_neutral : #376b20; );
$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); @mixin color-scheme($color) {
$monokai_line_origin_neutral : rgba(#60D9F1, .15); .header.line_content, .diff-line-num {
$monokai_button_origin_neutral : #38848C; &.origin {
background-color: map-get($colors, #{$color}_header_origin_neutral);
$monokai_header_origin_chosen : rgba(#60D9F1, .5); &.selected {
$monokai_line_origin_chosen : rgba(#60D9F1, .35); background-color: map-get($colors, #{$color}_header_origin_chosen);
$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;
}
} }
&.head { &.unselected {
background-color: $white_header_head_neutral; background-color: map-get($colors, #{$color}_header_not_chosen);
&.selected {
background-color: $white_header_head_chosen;
}
&.unselected {
background-color: $white_header_not_chosen;
}
} }
} }
&.head {
.line_content { background-color: map-get($colors, #{$color}_header_head_neutral);
&.origin { &.selected {
background-color: $white_line_origin_neutral; background-color: map-get($colors, #{$color}_header_head_chosen);
&.selected {
background-color: $white_line_origin_chosen;
}
&.unselected {
background-color: $white_line_not_chosen;
}
} }
&.head { &.unselected {
background-color: $white_line_head_neutral; background-color: map-get($colors, #{$color}_header_not_chosen);
&.selected {
background-color: $white_line_head_chosen;
}
&.unselected {
background-color: $white_line_not_chosen;
}
} }
} }
} }
.line_content {
.dark { &.origin {
.header.line_content, .diff-line-num { background-color: map-get($colors, #{$color}_line_origin_neutral);
&.origin { &.selected {
background-color: $dark_header_origin_neutral; background-color: map-get($colors, #{$color}_line_origin_chosen);
&.selected {
background-color: $dark_header_origin_chosen;
}
&.unselected {
background-color: $dark_header_not_chosen;
}
} }
&.head { &.unselected {
background-color: $dark_header_head_neutral; background-color: map-get($colors, #{$color}_line_not_chosen);
&.selected {
background-color: $dark_header_head_chosen;
}
&.unselected {
background-color: $dark_header_not_chosen;
}
} }
} }
&.head {
.line_content { background-color: map-get($colors, #{$color}_line_head_neutral);
&.origin { &.selected {
background-color: $dark_line_origin_neutral; background-color: map-get($colors, #{$color}_line_head_chosen);
&.selected {
background-color: $dark_line_origin_chosen;
}
&.unselected {
background-color: $dark_line_not_chosen;
}
} }
&.head { &.unselected {
background-color: $dark_line_head_neutral; background-color: map-get($colors, #{$color}_line_not_chosen);
&.selected {
background-color: $dark_line_head_chosen;
}
&.unselected {
background-color: $dark_line_not_chosen;
}
} }
} }
} }
}
.solarized-light { #conflicts {
.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;
}
}
}
.line_content { .white {
&.origin { @include color-scheme('white')
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;
}
}
}
} }
.dark {
.solarized-dark { @include color-scheme('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;
}
}
}
} }
.monokai { .monokai {
.header.line_content, .diff-line-num { @include color-scheme('monokai')
&.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;
}
}
}
.line_content { .solarized-light {
&.origin { @include color-scheme('solarized_light')
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-dark {
@include color-scheme('solarized_dark')
}
.diff-wrap-lines .line_content { .diff-wrap-lines .line_content {
white-space: normal; 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