1@import 'mixins_and_variables_and_functions';
2@import '../highlight/conflict_colors';
3
4@mixin color-scheme($color) {
5  .header.line_content,
6  .diff-line-num {
7    &.origin {
8      background-color: map-get($conflict-colors, #{$color}-header-origin-neutral);
9      border-color: map-get($conflict-colors, #{$color}-header-origin-neutral);
10
11      button {
12        background-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
13        border-color: darken(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
14      }
15
16      &.selected {
17        background-color: map-get($conflict-colors, #{$color}-header-origin-chosen);
18        border-color: map-get($conflict-colors, #{$color}-header-origin-chosen);
19
20        button {
21          background-color: map-get($conflict-colors, #{$color}-button-origin-chosen);
22          border-color: darken(map-get($conflict-colors, #{$color}-button-origin-chosen), 15);
23        }
24      }
25
26      &.unselected {
27        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
28        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);
29
30        button {
31          background-color: lighten(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
32          border-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
33        }
34      }
35    }
36
37    &.head {
38      background-color: map-get($conflict-colors, #{$color}-header-head-neutral);
39      border-color: map-get($conflict-colors, #{$color}-header-head-neutral);
40
41      button {
42        background-color: map-get($conflict-colors, #{$color}-button-head-neutral);
43        border-color: darken(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
44      }
45
46      &.selected {
47        background-color: map-get($conflict-colors, #{$color}-header-head-chosen);
48        border-color: map-get($conflict-colors, #{$color}-header-head-chosen);
49
50        button {
51          background-color: map-get($conflict-colors, #{$color}-button-head-chosen);
52          border-color: darken(map-get($conflict-colors, #{$color}-button-head-chosen), 15);
53        }
54      }
55
56      &.unselected {
57        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
58        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);
59
60        button {
61          background-color: lighten(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
62          border-color: map-get($conflict-colors, #{$color}-button-head-neutral);
63        }
64      }
65    }
66  }
67
68  .line_content {
69    &.origin {
70      background-color: map-get($conflict-colors, #{$color}-line-origin-neutral);
71
72      &.selected {
73        background-color: map-get($conflict-colors, #{$color}-line-origin-chosen);
74      }
75
76      &.unselected {
77        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
78      }
79    }
80
81    &.head {
82      background-color: map-get($conflict-colors, #{$color}-line-head-neutral);
83
84      &.selected {
85        background-color: map-get($conflict-colors, #{$color}-line-head-chosen);
86      }
87
88      &.unselected {
89        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
90      }
91    }
92  }
93}
94
95#conflicts {
96  .white {
97    @include color-scheme('white'); }
98
99  .dark {
100    @include color-scheme('dark'); }
101
102  .monokai {
103    @include color-scheme('monokai'); }
104
105  .solarized-light {
106    @include color-scheme('solarized-light'); }
107
108  .solarized-dark {
109    @include color-scheme('solarized-dark'); }
110
111  .none {
112    .line_content.header {
113      button {
114        color: $gray-900;
115      }
116    }
117  }
118
119  .diff-wrap-lines .line_content {
120    white-space: normal;
121    min-height: 19px;
122  }
123
124  .line_content.header {
125    position: relative;
126
127    button {
128      border-radius: 2px;
129      font-size: 10px;
130      position: absolute;
131      right: 10px;
132      padding: 0;
133      outline: none;
134      color: var(--white, $white);
135      width: 75px; // static width to make 2 buttons have same width
136      height: 19px;
137    }
138  }
139
140  .editor-wrap {
141    &.is-loading {
142      .editor {
143        display: none;
144      }
145
146      .loading {
147        display: block;
148      }
149    }
150
151    &.saved {
152      .editor {
153        border-top: solid 2px var(--green-300, $green-300);
154      }
155    }
156
157    .editor {
158      pre {
159        height: 350px;
160        border: 0;
161        border-radius: 0;
162        margin-bottom: 0;
163      }
164    }
165
166    .loading {
167      display: none;
168    }
169  }
170
171  .discard-changes-alert {
172    background-color: var(--gray-10, $gray-10);
173    text-align: right;
174    padding: $gl-padding-top $gl-padding;
175    color: var(--gl-text-color, $gl-text-color);
176  }
177}
178