From 9c8c7c7e15b0c90fe6b6503ac05ea20717e40464 Mon Sep 17 00:00:00 2001
From: Kristina Lim <kristinalim.ph@gmail.com>
Date: Mon, 27 Aug 2018 03:25:09 +0800
Subject: [PATCH] Clean up SCSS as suggested by scss-lint

---
 .../pages/product_image_upload_modal.css.scss | 18 ++++++++-------
 .../stylesheets/admin/variables.css.scss      |  3 +++
 app/assets/stylesheets/darkswarm/all.scss     |  1 +
 .../darkswarm/base/colors.css.scss            |  4 ++++
 .../stylesheets/darkswarm/modals.css.scss     |  2 +-
 .../darkswarm/pages/login_modal.css.scss      | 22 +++++++++----------
 6 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 app/assets/stylesheets/darkswarm/base/colors.css.scss

diff --git a/app/assets/stylesheets/admin/pages/product_image_upload_modal.css.scss b/app/assets/stylesheets/admin/pages/product_image_upload_modal.css.scss
index ab576304388..4dffade73ef 100644
--- a/app/assets/stylesheets/admin/pages/product_image_upload_modal.css.scss
+++ b/app/assets/stylesheets/admin/pages/product_image_upload_modal.css.scss
@@ -1,17 +1,19 @@
+@import '../variables';
+
 .reveal-modal.product-image-upload {
   width: 300px;
-  a.close-reveal-modal {
+
+  .close-reveal-modal {
+    color: $modal-close-button-color;
     font-size: 23px;
-    color: #de6060;
-    right: 0.45rem;
-    top: 0.35rem;
+    right: .45rem;
+    top: .35rem;
+
     :hover {
-      color: #bf4545;
+      color: $modal-close-button-hover-color;
     }
   }
-  div.image-preview {
-    //float: left;
-  }
+
   label {
     margin-top: 20px;
   }
diff --git a/app/assets/stylesheets/admin/variables.css.scss b/app/assets/stylesheets/admin/variables.css.scss
index c7f904a38a3..f8c12e0d4d0 100644
--- a/app/assets/stylesheets/admin/variables.css.scss
+++ b/app/assets/stylesheets/admin/variables.css.scss
@@ -10,3 +10,6 @@ $medium-grey: #919191;
 $pale-blue: #cee1f4;
 
 $admin-table-border: $pale-blue;
+
+$modal-close-button-color: #de6060;
+$modal-close-button-hover-color: #bf4545;
diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss
index 7c27103b177..b3f5433d8e3 100644
--- a/app/assets/stylesheets/darkswarm/all.scss
+++ b/app/assets/stylesheets/darkswarm/all.scss
@@ -9,6 +9,7 @@
 @import 'foundation';
 @import 'foundation-icons';
 
+@import 'base/*';
 @import '*';
 @import 'pages/*';
 
diff --git a/app/assets/stylesheets/darkswarm/base/colors.css.scss b/app/assets/stylesheets/darkswarm/base/colors.css.scss
new file mode 100644
index 00000000000..4b36b9cb9b8
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/base/colors.css.scss
@@ -0,0 +1,4 @@
+$modal-background-color: #efefef;
+$modal-content-background-color: #fff;
+$modal-alert-link-color: #fff;
+$modal-alert-link-hover-color: rgba(255, 255, 255, .7);
diff --git a/app/assets/stylesheets/darkswarm/modals.css.scss b/app/assets/stylesheets/darkswarm/modals.css.scss
index ed90ba7004c..734d388acf2 100644
--- a/app/assets/stylesheets/darkswarm/modals.css.scss
+++ b/app/assets/stylesheets/darkswarm/modals.css.scss
@@ -28,8 +28,8 @@ dialog
 
   // Medium and up - when modal IS NOT full screen
   @media only screen and (min-width: 641px) {
-    top: 5%;
     max-height: 90%;
+    top: 5%;
   }
 }
 
diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
index 80687c645f4..3a9d3854410 100644
--- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
+++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
@@ -1,25 +1,25 @@
+@import '../base/colors';
+
 // Styling for login modal to style tabs
 .reveal-modal.login-modal {
-  border-bottom-color: #efefef;
+  border-bottom-color: $modal-background-color;
 }
 
 .login-modal {
-  background: #efefef;
+  background: $modal-background-color;
 
   .tabs-content {
-    background: #fff;
+    background: $modal-content-background-color;
     padding-top: 10px;
   }
 
-  .alert-box {
-    a {
-      color: white;
-      text-decoration: underline;
+  .alert-box a {
+    color: $modal-alert-link-color;
+    text-decoration: underline;
 
-      &:hover {
-        color: rgba(255, 255, 255, 0.7);
-        text-decoration: underline;
-      }
+    &:hover {
+      color: $modal-alert-link-hover-color;
+      text-decoration: underline;
     }
   }
 }