Use sass variabled for backgroung and border colors

9 files changed, 33 insertions, 25 deletions

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index ea230646a89..ce82ad80318 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -716,8 +716,8 @@ $panel-border-radius:            0;
 // $panel-footer-bg:             #f5f5f5
 
 $panel-default-text:          $text-color;
-// $panel-default-border:        #ddd
-// $panel-default-heading-bg:    #f5f5f5
+$panel-default-border:        $border-color;
+$panel-default-heading-bg:    $background-color;
 
 // $panel-primary-text:          #fff
 // $panel-primary-border:        $brand-primary
diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index 54af78ee082..4e2c64aa132 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -1,6 +1,5 @@
 $style_color: #474D57;
 $hover: #FFF3EB;
-$box_bg: #F9F9F9;
 $gl-link-color: #446e9b;
 $nprogress-color: #c0392b;
 $gl-font-size: 14px;
@@ -9,6 +8,8 @@ $sidebar_width: 230px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
+$border-color: #dce4ec;
+$background-color: #ECF0F1;
 
 /*
  * State colors:
diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss
index dca6b957d24..91220a856ac 100644
--- a/app/assets/stylesheets/generic/files.scss
+++ b/app/assets/stylesheets/generic/files.scss
@@ -3,7 +3,7 @@
  *
  */
 .file-holder {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
   margin-bottom: 1em;
 
   table {
@@ -11,8 +11,9 @@
   }
 
   .file-title {
-    background: #EEE;
-    border-bottom: 1px solid #CCC;
+    position: relative;
+    background: $background-color;
+    border-bottom: 1px solid $border-color;
     text-shadow: 0 1px 1px #fff;
     margin: 0;
     text-align: left;
@@ -20,8 +21,9 @@
 
     .file-actions {
       float: right;
-      position: relative;
-      top: -5px;
+      position: absolute;
+      top: 5px;
+      right: 15px;
 
       .btn {
         padding: 0px 10px;
@@ -113,7 +115,7 @@
       ol {
         margin-left: 40px;
         padding: 10px 0;
-        border-left: 1px solid #CCC;
+        border-left: 1px solid $border-color;
         margin-bottom: 0;
         background: white;
         li {
diff --git a/app/assets/stylesheets/generic/highlight.scss b/app/assets/stylesheets/generic/highlight.scss
index 0f8225d6823..2e13ee842e0 100644
--- a/app/assets/stylesheets/generic/highlight.scss
+++ b/app/assets/stylesheets/generic/highlight.scss
@@ -57,7 +57,7 @@
 .note-text .code {
   border: none;
   box-shadow: none;
-  background: $box_bg;
+  background: $background-color;
   padding: 1em;
   overflow-x: auto;
 
diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss
index af0ecb192d6..c13a685a528 100644
--- a/app/assets/stylesheets/generic/selects.scss
+++ b/app/assets/stylesheets/generic/selects.scss
@@ -2,7 +2,7 @@
 .select2-container, .select2-container.select2-drop-above {
   .select2-choice {
     background: #FFF;
-    border-color: #BBB;
+    border-color: #CCC;
     padding: 6px 14px;
     line-height: 1.42857143;
     height: auto;
diff --git a/app/assets/stylesheets/generic/tables.scss b/app/assets/stylesheets/generic/tables.scss
index 71a7d4abaee..a66e45577de 100644
--- a/app/assets/stylesheets/generic/tables.scss
+++ b/app/assets/stylesheets/generic/tables.scss
@@ -9,7 +9,7 @@ table {
       th {
         font-weight: normal;
         font-size: 15px;
-        border-bottom: 1px solid #CCC !important;
+        border-bottom: 1px solid $border-color !important;
       }
       td {
         border-color: #F1F1F1 !important;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 54311a68852..5a9f93dc03d 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1,25 +1,30 @@
 .diff-file {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
   margin-bottom: 1em;
 
   .diff-header {
-    @extend .clearfix;
-    background: #EEE;
-    border-bottom: 1px solid #CCC;
-    padding: 5px 5px 5px 10px;
+    position: relative;
+    background: $background-color;
+    border-bottom: 1px solid $border-color;
+    padding: 10px 15px;
     color: #555;
     z-index: 10;
 
     > span {
+      @include str-truncated(65%);
       font-family: $monospace_font;
-      line-height: 2;
     }
 
     .diff-btn-group {
       float: right;
+      position: absolute;
+      top: 5px;
+      right: 15px;
 
       .btn {
-        background-color: #FFF;
+        padding: 0px 10px;
+        font-size: 13px;
+        line-height: 28px;
       }
     }
 
@@ -87,7 +92,7 @@
       background: #F5F5F5;
       color: rgba(0,0,0,0.3);
       padding: 0px 5px;
-      border-right: 1px solid #ccc;
+      border-right: 1px solid $border-color;
       text-align: right;
       min-width: 35px;
       max-width: 50px;
@@ -136,7 +141,7 @@
         background: #ffecec;
       }
       &.matched {
-        color: #ccc;
+        color: $border-color;
         background: #fafafa;
       }
       &.parallel {
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 3d878d1e528..c3b10d144e1 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -1,11 +1,11 @@
 .project-network {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
 
   .controls {
     color: #888;
     font-size: 14px;
     padding: 5px;
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid $border-color;
     background: #EEE;
   }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 9bd34b7376f..6babb824f3c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -123,10 +123,10 @@
 }
 
 .mr-state-widget {
-  background: $box_bg;
+  background: $background-color;
   margin-bottom: 20px;
   color: #666;
-  border: 1px solid #EEE;
+  border: 1px solid $border-color;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 
   .ci_widget {