From 98391b60c69a8f38ff38b0acd951337d4d974df5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 25 Mar 2022 14:40:47 +0100
Subject: [PATCH] Use CSS vars to match linter

---
 .../pagination_component/pagination_component.scss     | 10 +++++-----
 .../search_input_component/search_input_component.scss |  4 ++--
 .../selector_component/selector_component.scss         |  8 ++++----
 .../super_selector_component.scss                      |  8 ++++----
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/components/pagination_component/pagination_component.scss b/app/components/pagination_component/pagination_component.scss
index d862ede35f..437e0a55d1 100644
--- a/app/components/pagination_component/pagination_component.scss
+++ b/app/components/pagination_component/pagination_component.scss
@@ -16,7 +16,7 @@ nav {
 
       &.inactive {
         cursor: default;
-        color: #999;
+        color: $disabled-dark;
       }
     }
 
@@ -52,15 +52,15 @@ nav {
       }
 
       .pagination-gap {
-        color: #999;
+        color: $disabled-dark;
       }
 
       .pagination-page {
-        color: #6788A2;
+        color: $color-4;
         cursor: pointer;
         &.active {
-          border-top: 3px solid #5498DA;
-          color: #5498DA;
+          border-top: 3px solid $spree-blue;
+          color: $spree-blue;
           cursor: default;
         }
       }
diff --git a/app/components/search_input_component/search_input_component.scss b/app/components/search_input_component/search_input_component.scss
index bc21b72088..add821dd34 100644
--- a/app/components/search_input_component/search_input_component.scss
+++ b/app/components/search_input_component/search_input_component.scss
@@ -1,5 +1,5 @@
 .search-input {
-  border: 1px solid #d2d2d2;
+  border: 1px solid $disabled-light;
   height: 3em;
   display: flex;
   line-height: 3em;
@@ -17,7 +17,7 @@
     padding-right: 10px;
     padding-left: 5px;
     cursor: pointer;
-    color: #6788A2;
+    color: $color-4;
   }
 
 }
diff --git a/app/components/selector_component/selector_component.scss b/app/components/selector_component/selector_component.scss
index 7660e6ceb4..fbfc76b9f6 100644
--- a/app/components/selector_component/selector_component.scss
+++ b/app/components/selector_component/selector_component.scss
@@ -2,7 +2,7 @@
   position: relative;
 
   .selector-main {
-    border: 1px solid #d2d2d2;
+    border: 1px solid $disabled-light;
     height: 3em;
     position: relative;
 
@@ -30,7 +30,7 @@
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
-        border-top: 5px solid #d2d2d2;
+        border-top: 5px solid $disabled-light;
       }
     }
   }
@@ -42,7 +42,7 @@
     z-index: 1;
     background-color: white;
     margin-top: -1px;
-    border: 1px solid #d2d2d2;
+    border: 1px solid $disabled-light;
 
     .selector-items {
       overflow-y: auto;
@@ -51,7 +51,7 @@
       .selector-item {
         padding-left: 10px;
         padding-right: 10px;
-        border-bottom: 1px solid #d2d2d2;
+        border-bottom: 1px solid $disabled-light;
         position: relative;
         height: 3em;
         line-height: 3em;
diff --git a/app/components/super_selector_component/super_selector_component.scss b/app/components/super_selector_component/super_selector_component.scss
index 8e5c2e31fe..88f9e6c5f2 100644
--- a/app/components/super_selector_component/super_selector_component.scss
+++ b/app/components/super_selector_component/super_selector_component.scss
@@ -20,8 +20,8 @@
     display: flex;
 
     .super-selector-selected-item {
-      border: 1px solid #cee1f4;
-      background-color: #eff5fc;
+      border: 1px solid $pale-blue;
+      background-color: $spree-light-blue;
       border-radius: 20px;
       height: 2em;
       padding-left: 10px;
@@ -37,11 +37,11 @@
 
   .selector-wrapper {
     .super-selector-search {
-      border-bottom: 1px solid #d2d2d2;
+      border-bottom: 1px solid $disabled-light;
       padding: 10px 5px;
 
       input {
-        border: 1px solid #d2d2d2;
+        border: 1px solid $disabled-light;
         box-sizing: border-box;
         border-radius: 4px;
         width: 100%;