Tidy up SCSS

openfoodfoundation · Aug 21, 2018 · be0a287 · be0a287
1 parent 125f3e3
commit be0a287
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/app/assets/stylesheets/admin/product_import.css.scss b/app/assets/stylesheets/admin/product_import.css.scss
@@ -1,18 +1,22 @@
 @import "variables";
 
-div.panel-section {
+$pi-red: $warning-red;
+$pi-green: lighten($spree-green, 10%);
+$pi-orange: $bright-orange;
+$pi-blue: lighten($spree-blue, 10%);
+$pi-light-yellow: #faffaf;
 
-  .neutral {
-    color: #bfbfbf;
-  }
+// scss-lint:disable NestingDepth
+
+div.panel-section {
   .error {
-    color: $warning-red;
+    color: $pi-red;
   }
   .warning {
-    color: #ffa92e;
+    color: $bright-orange;
   }
   .success {
-    color: #86d83a;
+    color: $pi-green;
   }
   .info {
     color: #68b7c0;
@@ -98,8 +102,8 @@ div.panel-section {
           background-color: darken(#f05c51, 5%);
         }
 
-        &:hover td.not_updatable {
-          background-color: darken(#faffaf, 5%);
+        &:hover td.not-updatable {
+          background-color: darken($pi-light-yellow, 5%);
         }
 
         i {
@@ -116,17 +120,17 @@ div.panel-section {
           color: white;
         }
 
-        &.not_updatable {
-          background-color: #faffaf;
-          box-shadow: inset 0px 0px 1px #ffa92e;
+        &.not-updatable {
+          background-color: $pi-light-yellow;
+          box-shadow: inset 0 0 1px $bright-orange;
         }
       }
 
       span.not-updatable i {
         float: left;
+        font-size: 1.1em !important;
         margin-right: 0.4em;
         padding-top: 0.3em;
-        font-size: 1.1em !important;
       }
     }
 
@@ -204,7 +208,7 @@ table.import-settings {
 
   span.header-error {
     font-size: 0.85em;
-    color: $warning-red;
+    color: $pi-red;
   }
 
   .select2-search {
@@ -235,10 +239,10 @@ table.import-settings {
     }
 
     i.fa-check-circle {
-      color: #86d83a;
+      color: $pi-green;
     }
     i.fa-info-circle {
-      color: #68b7c0;
+      color: $pi-blue;
     }
   }
 
@@ -312,7 +316,7 @@ div.progress-bar {
 
   span.progress-track{
     display: block;
-    background: #b7ea53;
+    background: lighten($pi-green, 10%);
     height: 100%;
     border-radius: 0.3em;
     box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
@@ -343,7 +347,7 @@ div.progress-bar {
 
   span.category {
     display: inline-block;
-    background-color: lighten($spree-blue, 10%);
+    background-color: $pi-blue;
     color: white;
     padding: 0.3em 0.6em;
     margin: 0 0.4em 0.5em 0;

diff --git a/app/assets/stylesheets/admin/variables.css.scss b/app/assets/stylesheets/admin/variables.css.scss
@@ -6,6 +6,7 @@ $spree-light-blue: #eff5fc;
 
 $warning-red: #da5354;
 $warning-orange: #da7f52;
+$bright-orange: #ffa92e;
 $medium-grey: #919191;
 $pale-blue: #cee1f4;
 

diff --git a/app/views/admin/product_import/_entries_table.html.haml b/app/views/admin/product_import/_entries_table.html.haml
@@ -10,7 +10,7 @@
         %i{ng: {class: "{'fa fa-warning error': (count(entry.errors) > 0), 'fa fa-check-circle success': (count(entry.errors) == 0)}"}}
       %td
         {{line_number}}
-      %td{ng: {repeat: "(attribute, value) in entry.attributes", class: "{'invalid': attribute_invalid(attribute, line_number), 'not_updatable': attribute_not_updatable(attribute, line_number)}"}}
+      %td{ng: {repeat: "(attribute, value) in entry.attributes", class: "{'invalid': attribute_invalid(attribute, line_number), 'not-updatable': attribute_not_updatable(attribute, line_number)}"}}
         %span{ng: {show: "!attribute_not_updatable(attribute, line_number)"}}
           {{value}}
         %span.not-updatable{'ofn-with-tip' => t('.not_updatable'), ng: {show: "attribute_not_updatable(attribute, line_number)"}}