Clean up SCSS as suggested by scss-lint

openfoodfoundation · Aug 27, 2018 · 2074195 · 2074195
1 parent 8b66181
commit 2074195
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 20 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+$modal-background-color: #efefef;
+$modal-content-background-color: #ffffff;
+$modal-alert-link-color: #ffffff;
+$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
@@ -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
@@ -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;
     }
   }
 }