SCSS colors into variables

5 files changed, 31 insertions, 26 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 98fe794d362..c2defd31884 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -217,3 +217,9 @@ $notes-light-color: #8e8e8e;
 $notes-action-color: #c3c3c3;
 $notes-role-color: #8e8e8e;
 $notes-role-border-color: #e4e4e4;
+
+$note-disabled-comment-color: #b2b2b2;
+$note-form-border-color: #e5e5e5;
+$note-toolbar-color: #959494;
+
+$zen-control-hover-color: #111;
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 951d794916b..f870ea0d87f 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,7 +40,7 @@
 }
 
 .zen-control-full {
-  color: #959494;
+  color: $note-toolbar-color;
 
   &:hover {
     color: $gl-link-color;
@@ -57,6 +57,6 @@
   font-size: 36px;
 
   &:hover {
-    color: #111;
+    color: $zen-control-hover-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b080490f75e..1c6a4208974 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -195,24 +195,6 @@
   line-height: 31px;
 }
 
-.disabled-comment {
-  margin-left: -$gl-padding-top;
-  margin-right: -$gl-padding-top;
-  background-color: $gray-light;
-  border-radius: $border-radius-base;
-  border: 1px solid $border-gray-normal;
-  color: #b2b2b2;
-  line-height: 200px;
-
-  .disabled-comment-text {
-    line-height: normal;
-  }
-
-  a {
-    color: $gl-link-color;
-  }
-}
-
 .builds {
   .table-holder {
     overflow-x: scroll;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index c829ffa330d..a909776b437 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -58,17 +58,17 @@
 .common-note-form {
   .md-area {
     padding: $gl-padding-top $gl-padding;
-    border: 1px solid #e5e5e5;
+    border: 1px solid $note-form-border-color;
     border-radius: $border-radius-base;
 
     &.is-focused {
-      border-color: #3b99fc;
+      border-color: $focus-border-color;
       box-shadow: 0 0 2px rgba(#000, .2),
-                  0 0 4px rgba(#3b99fc, .5);
+                  0 0 4px rgba($focus-border-color, .4);
 
       .comment-toolbar,
       .nav-links {
-        border-color: #3b99fc;
+        border-color: $focus-border-color;
       }
     }
   }
@@ -139,6 +139,7 @@
 
 .comment-toolbar {
   padding-top: $gl-padding-top;
+  color: $note-toolbar-color;
   border-top: 1px solid $border-color;
 }
 
@@ -146,7 +147,6 @@
   padding: 0;
   background: none;
   border: 0;
-  color: #959494;
   font-size: 14px;
   line-height: 16px;
 
@@ -176,7 +176,6 @@
 }
 
 .toolbar-text {
-  color: #959494;
   font-size: 14px;
   line-height: 16px;
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 46a0724603e..a9f88d2ccfd 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -287,3 +287,21 @@ ul.notes {
     }
   }
 }
+
+.disabled-comment {
+  margin-left: -$gl-padding-top;
+  margin-right: -$gl-padding-top;
+  background-color: $gray-light;
+  border-radius: $border-radius-base;
+  border: 1px solid $border-gray-normal;
+  color: $note-disabled-comment-color;
+  line-height: 200px;
+
+  .disabled-comment-text {
+    line-height: normal;
+  }
+
+  a {
+    color: $gl-link-color;
+  }
+}