Use mixin to create color schemes.

Some SCSS Foo in action! :boom:

1 files changed, 112 insertions, 275 deletions

diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 80d26d4d2b1..af5f778cb7e 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,334 +1,171 @@
-$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;