merge_conflicts.scss 7.89 KB
Newer Older
1 2
// Disabled to use the color map for creating color schemes
// scss-lint:disable ColorVariable
3 4 5
$colors: (
  white_header_head_neutral   : #e1fad7,
  white_line_head_neutral     : #effdec,
6
  white_button_head_neutral   : #9adb84,
Sean McGivern's avatar
Sean McGivern committed
7

8 9
  white_header_head_chosen    : #baf0a8,
  white_line_head_chosen      : #e1fad7,
10
  white_button_head_chosen    : #52c22d,
11

12 13
  white_header_origin_neutral : #e0f0ff,
  white_line_origin_neutral   : #f2f9ff,
14
  white_button_origin_neutral : #87c2fa,
15

16 17
  white_header_origin_chosen  : #add8ff,
  white_line_origin_chosen    : #e0f0ff,
18
  white_button_origin_chosen  : #268ced,
19

20
  white_header_not_chosen     : #f0f0f0,
21
  white_line_not_chosen       : $gray-light,
22 23


Douwe Maan's avatar
Douwe Maan committed
24 25
  dark_header_head_neutral   : rgba(#3f3, .2),
  dark_line_head_neutral     : rgba(#3f3, .1),
26
  dark_button_head_neutral   : #40874f,
27

Douwe Maan's avatar
Douwe Maan committed
28 29
  dark_header_head_chosen    : rgba(#3f3, .33),
  dark_line_head_chosen      : rgba(#3f3, .2),
30
  dark_button_head_chosen    : #258537,
31

32 33 34
  dark_header_origin_neutral : rgba(#2878c9, .4),
  dark_line_origin_neutral   : rgba(#2878c9, .3),
  dark_button_origin_neutral : #2a5c8c,
35

36 37 38
  dark_header_origin_chosen  : rgba(#2878c9, .6),
  dark_line_origin_chosen    : rgba(#2878c9, .4),
  dark_button_origin_chosen  : #1d6cbf,
39

40 41
  dark_header_not_chosen     : rgba(#fff, .25),
  dark_line_not_chosen       : rgba(#fff, .1),
42 43


44 45
  monokai_header_head_neutral   : rgba(#a6e22e, .25),
  monokai_line_head_neutral     : rgba(#a6e22e, .1),
46
  monokai_button_head_neutral   : #376b20,
47

48 49
  monokai_header_head_chosen    : rgba(#a6e22e, .4),
  monokai_line_head_chosen      : rgba(#a6e22e, .25),
50
  monokai_button_head_chosen    : #39800d,
51

52 53 54
  monokai_header_origin_neutral : rgba(#60d9f1, .35),
  monokai_line_origin_neutral   : rgba(#60d9f1, .15),
  monokai_button_origin_neutral : #38848c,
55

56 57 58
  monokai_header_origin_chosen  : rgba(#60d9f1, .5),
  monokai_line_origin_chosen    : rgba(#60d9f1, .35),
  monokai_button_origin_chosen  : #3ea4b2,
59

60 61
  monokai_header_not_chosen     : rgba(#76715d, .24),
  monokai_line_not_chosen       : rgba(#76715d, .1),
62 63


64 65 66
  solarized_light_header_head_neutral   : rgba(#859900, .37),
  solarized_light_line_head_neutral     : rgba(#859900, .2),
  solarized_light_button_head_neutral   : #afb262,
67

68 69 70
  solarized_light_header_head_chosen    : rgba(#859900, .5),
  solarized_light_line_head_chosen      : rgba(#859900, .37),
  solarized_light_button_head_chosen    : #94993d,
71

72 73 74
  solarized_light_header_origin_neutral : rgba(#2878c9, .37),
  solarized_light_line_origin_neutral   : rgba(#2878c9, .15),
  solarized_light_button_origin_neutral : #60a1bf,
75

76 77
  solarized_light_header_origin_chosen  : rgba(#2878c9, .6),
  solarized_light_line_origin_chosen    : rgba(#2878c9, .37),
78
  solarized_light_button_origin_chosen  : #2482b2,
79

80 81
  solarized_light_header_not_chosen     : rgba(#839496, .37),
  solarized_light_line_not_chosen       : rgba(#839496, .2),
82 83


84 85 86
  solarized_dark_header_head_neutral   : rgba(#859900, .35),
  solarized_dark_line_head_neutral     : rgba(#859900, .15),
  solarized_dark_button_head_neutral   : #376b20,
87

88 89 90
  solarized_dark_header_head_chosen    : rgba(#859900, .5),
  solarized_dark_line_head_chosen      : rgba(#859900, .35),
  solarized_dark_button_head_chosen    : #39800d,
91

92 93
  solarized_dark_header_origin_neutral : rgba(#2878c9, .35),
  solarized_dark_line_origin_neutral   : rgba(#2878c9, .15),
94
  solarized_dark_button_origin_neutral : #086799,
95

96 97 98
  solarized_dark_header_origin_chosen  : rgba(#2878c9, .6),
  solarized_dark_line_origin_chosen    : rgba(#2878c9, .35),
  solarized_dark_button_origin_chosen  : #0082cc,
99

100 101
  solarized_dark_header_not_chosen     : rgba(#839496, .25),
  solarized_dark_line_not_chosen       : rgba(#839496, .15)
102
);
103
// scss-lint:enable ColorVariable
104 105


106
@mixin color-scheme($color) {
107 108
  .header.line_content,
  .diff-line-num {
109 110
    &.origin {
      background-color: map-get($colors, #{$color}_header_origin_neutral);
111 112 113 114 115 116 117
      border-color: map-get($colors, #{$color}_header_origin_neutral);

      button {
        background-color: map-get($colors, #{$color}_button_origin_neutral);
        border-color: darken(map-get($colors, #{$color}_button_origin_neutral), 15);
      }

118 119
      &.selected {
        background-color: map-get($colors, #{$color}_header_origin_chosen);
120 121 122 123 124 125
        border-color: map-get($colors, #{$color}_header_origin_chosen);

        button {
          background-color: map-get($colors, #{$color}_button_origin_chosen);
          border-color: darken(map-get($colors, #{$color}_button_origin_chosen), 15);
        }
126
      }
127

128 129
      &.unselected {
        background-color: map-get($colors, #{$color}_header_not_chosen);
130 131 132 133 134 135
        border-color: map-get($colors, #{$color}_header_not_chosen);

        button {
          background-color: lighten(map-get($colors, #{$color}_button_origin_neutral), 15);
          border-color: map-get($colors, #{$color}_button_origin_neutral);
        }
136 137
      }
    }
138

139 140
    &.head {
      background-color: map-get($colors, #{$color}_header_head_neutral);
141 142 143 144 145 146 147
      border-color: map-get($colors, #{$color}_header_head_neutral);

      button {
        background-color: map-get($colors, #{$color}_button_head_neutral);
        border-color: darken(map-get($colors, #{$color}_button_head_neutral), 15);
      }

148 149
      &.selected {
        background-color: map-get($colors, #{$color}_header_head_chosen);
150 151 152 153 154 155
        border-color: map-get($colors, #{$color}_header_head_chosen);

        button {
          background-color: map-get($colors, #{$color}_button_head_chosen);
          border-color: darken(map-get($colors, #{$color}_button_head_chosen), 15);
        }
156
      }
157

158 159
      &.unselected {
        background-color: map-get($colors, #{$color}_header_not_chosen);
160 161 162 163 164 165
        border-color: map-get($colors, #{$color}_header_not_chosen);

        button {
          background-color: lighten(map-get($colors, #{$color}_button_head_neutral), 15);
          border-color: map-get($colors, #{$color}_button_head_neutral);
        }
166 167
      }
    }
168 169
  }

170 171 172
  .line_content {
    &.origin {
      background-color: map-get($colors, #{$color}_line_origin_neutral);
173

174 175
      &.selected {
        background-color: map-get($colors, #{$color}_line_origin_chosen);
176
      }
177

178 179
      &.unselected {
        background-color: map-get($colors, #{$color}_line_not_chosen);
180 181
      }
    }
182

183 184
    &.head {
      background-color: map-get($colors, #{$color}_line_head_neutral);
185

186 187
      &.selected {
        background-color: map-get($colors, #{$color}_line_head_chosen);
188
      }
189

190 191
      &.unselected {
        background-color: map-get($colors, #{$color}_line_not_chosen);
192 193 194
      }
    }
  }
195
}
196

197

198
#conflicts {
199

200 201
  .white {
    @include color-scheme('white')
202 203
  }

204 205
  .dark {
    @include color-scheme('dark')
206 207 208
  }

  .monokai {
209 210
    @include color-scheme('monokai')
  }
211

212 213
  .solarized-light {
    @include color-scheme('solarized_light')
214 215
  }

216 217 218
  .solarized-dark {
    @include color-scheme('solarized_dark')
  }
219 220 221 222

  .diff-wrap-lines .line_content {
    white-space: normal;
    min-height: 19px;
223 224
  }

225 226 227 228
  .line_content.header {
    position: relative;

    button {
229
      border-radius: 2px;
230 231
      font-size: 10px;
      position: absolute;
232
      right: 10px;
233
      padding: 0;
234 235
      outline: none;
      color: $white-light;
236 237
      width: 75px; // static width to make 2 buttons have same width
      height: 19px;
238 239
    }
  }
240 241

  .btn-success .fa-spinner {
242
    color: $white-light;
243
  }
244 245 246 247 248 249 250

  .editor-wrap {
    &.is-loading {
      .editor {
        display: none;
      }

251
      .loading {
252 253 254 255 256 257
        display: block;
      }
    }

    &.saved {
      .editor {
258
        border-top: solid 2px $green-300;
259 260
      }
    }
261

262
    .editor {
263 264 265 266 267 268
      pre {
        height: 350px;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
      }
269 270
    }

271
    .loading {
272 273 274
      display: none;
    }
  }
275 276

  .discard-changes-alert {
277
    background-color: $gray-light;
278 279 280 281 282 283 284 285 286
    text-align: right;
    padding: $gl-padding-top $gl-padding;
    color: $gl-text-color;

    .discard-actions {
      display: inline-block;
      margin-left: 10px;
    }
  }
287 288 289 290

  .resolve-conflicts-form {
    padding-top: $gl-padding;
  }
291
}