Re-group scss variables

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1 files changed, 47 insertions, 21 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 211ead7319d..61b52136c67 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,45 +1,71 @@
-$row-hover: #f4f8fe;
+/*
+ * Layout
+ */
+$sidebar_collapsed_width: 62px;
+$sidebar_width: 230px;
+$gutter_collapsed_width: 62px;
+$gutter_width: 290px;
+$gutter_inner_width: 258px;
+
+/*
+ * UI elements
+ */
+$border-color: #efeff1;
+$table-border-color: #eef0f2;
+$background-color: #faf9f9;
+
+/*
+ * Text
+ */
+$secondary-text: #555;
+$placeholder-color: #8f8f8f;
 $gl-text-color: #54565b;
 $gl-text-green: #4a2;
 $gl-text-red: #d12f19;
 $gl-text-orange: #d90;
 $gl-header-color: #323232;
 $gl-link-color: #333c48;
+$gl-gray: #5a5a5a;
 $md-text-color: #444;
 $md-link-color: #3084bb;
-$progress-color: #c0392b;
-$gl-font-size: 15px;
+
+/*
+ * Lists
+ */
+$list-title-color: #333;
+$list-text-color: #555;
 $list-font-size: 15px;
-$sidebar_collapsed_width: 62px;
-$sidebar_width: 230px;
-$gutter_collapsed_width: 62px;
-$gutter_width: 290px;
-$gutter_inner_width: 258px;
-$avatar_radius: 50%;
+
+
+/*
+ * Code
+ */
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #efeff1;
-$table-border-color: #eef0f2;
-$background-color: #faf9f9;
-$header-height: 58px;
-$fixed-layout-width: 1280px;
-$gl-gray: #5a5a5a;
+
+/*
+ * Padding
+ */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
+
+/*
+ * Misc
+ */
+$row-hover: #f4f8fe;
+$progress-color: #c0392b;
+$gl-font-size: 15px;
+$avatar_radius: 50%;
+$header-height: 58px;
+$fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
-$secondary-text: #7f8fa4;
 $error-exclamation-point: #e62958;
 $border-radius-default: 3px;
-$list-title-color: #333;
-$list-text-color: #555;
-
 $btn-transparent-color: #8f8f8f;
-
 $ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
-
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;