From 2f3afeb02905f4f20854b4e7abd499467702570c Mon Sep 17 00:00:00 2001
From: Mohammadjavad Raadi <raadi@bitsnbytes.ir>
Date: Tue, 7 May 2019 18:30:48 +0430
Subject: [PATCH] Refactors SASS themeable style discussed at #2539 (#2735) [ci
 skip]

* Refactored classified_listings.scss themeable style
---
 .../stylesheets/classified_listings.scss      | 160 +++++++++++++-----
 1 file changed, 120 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/classified_listings.scss b/app/assets/stylesheets/classified_listings.scss
index 7691fffb5..ae2236fdb 100644
--- a/app/assets/stylesheets/classified_listings.scss
+++ b/app/assets/stylesheets/classified_listings.scss
@@ -59,10 +59,16 @@
       position: relative;
       input {
         font-size: 0.8em;
-        color: $black;
-        color: var(--theme-color, $black);
-        background: $light-gray;
-        background: var(--theme-container-accent-background, $light-gray);
+        @include themeable(
+          color, 
+          theme-color, 
+          $black
+        );
+        @include themeable(
+          background, 
+          theme-container-accent-background, 
+          $light-gray
+        );
         border-radius: 100px;
         padding: 3px 14px;
         border: 1px solid $light-medium-gray;
@@ -119,10 +125,22 @@
     margin: 60px auto 0px;
     width: 100%;
     max-width: 580px;
-    @include themeable(background, theme-container-background, white);
+    @include themeable(
+      background, 
+      theme-container-background,
+      white
+    );
     box-sizing: border-box;
-    @include themeable(border, theme-border, 1px solid $light-medium-gray);
-    box-shadow: var(--theme-container-box-shadow, 2px 2px 8px darken($light-medium-gray, 5%));
+    @include themeable(
+      border, 
+      theme-border, 
+      1px solid $light-medium-gray
+    );
+    @include themeable(
+      box-shadow, 
+      theme-container-box-shadow, 
+      2px 2px 8px darken($light-medium-gray, 5%)
+    );
     @media screen and (min-width: 580px) {
       border-radius: 8px;
       margin: 100px auto 20px;
@@ -131,7 +149,11 @@
       box-sizing: border-box;
     }
     header {
-      @include themeable(background, theme-container-accent-background, #f2f7fc);
+      @include themeable(
+        background, 
+        theme-container-accent-background, 
+      #f2f7fc
+      );
       padding: 25px 22px;
       border-top-left-radius: 8px;
       border-top-right-radius: 8px;
@@ -150,7 +172,11 @@
     }
     h2 {
       font-size: 1.45em;
-      @include themeable(color, theme-color, #32325d);
+      @include themeable(
+        color, 
+        theme-color, 
+      #32325d
+      );
       margin: 0px;
     }
     .classified-errors {
@@ -173,10 +199,16 @@
       padding: 10px 7px;
       border-radius: 3px;
       border: 1px solid $light-medium-gray;
-      background: white;
-      background: var(--theme-container-accent-background, $light-gray);
-      color: $black;
-      color: var(--theme-color, $black);
+      @include themeable(
+        background, 
+        theme-container-accent-background, 
+        $light-gray
+      );
+      @include themeable(
+        color, 
+        theme-color, 
+        $black
+      );
       &[type="checkbox"] {
         width: 100px;
       }
@@ -187,10 +219,16 @@
       padding: 5px;
       font-size: 17px;
       border-radius: 3px;
-      background: $light-gray;
-      background: var(--theme-container-accent-background, $light-gray);
-      color: $black;
-      color: var(--theme-color, $black);
+      @include themeable(
+        background, 
+        theme-container-accent-background, 
+        $light-gray
+      );
+      @include themeable(
+        color, 
+        theme-color, 
+        $black
+      );
       border: 1px solid $light-medium-gray;
     }
     select {
@@ -201,8 +239,11 @@
       cursor: pointer;
       font-size: 0.8em;
       padding: 8px 0px;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
     }
     input[type="submit"] {
       border: 0px;
@@ -218,8 +259,11 @@
       max-width: 90%;
       margin: 35px auto;
       display: block;
-      box-shadow: 2px 2px 4px darken($light-medium-gray, 5%);
-      box-shadow: var(--theme-container-box-shadow, 2px 2px 8px darken($light-medium-gray, 5%));  
+      @include themeable(
+        box-shadow, 
+        theme-container-box-shadow, 
+        2px 2px 8px darken($light-medium-gray, 5%)
+      );
     }
     .listings-current-credits {
       position: fixed;
@@ -240,7 +284,11 @@
       a {
         text-decoration: underline;
         display: inline-block;
-        @include themeable(color, theme-anchor-color, $bold-blue);
+        @include themeable(
+          color, 
+          theme-anchor-color, 
+          $bold-blue
+        );
       }
       @media screen and (min-width: 580px) {
         font-size: 1.1em;
@@ -251,7 +299,11 @@
     }
     p {
       font-size: 0.8em;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
     }
   }
 }
@@ -266,16 +318,26 @@
   padding: 5px;
   font-size: 17px;
   border-radius: 3px;
-  background: white;
+  @include themeable(
+    background, 
+    theme-container-background, 
+    white
+  );
   margin-top: 10px;
-  background: var(--theme-container-background, white);
-  color: $black;
-  color: var(--theme-color, $black);
+  @include themeable(
+    color, 
+    theme-color, 
+    $black
+  );
   border: 1px solid $light-medium-gray;
 }
 
 .listingform__tagsoptions {
-  @include themeable(border, theme-border, 1px solid $light-medium-gray);
+  @include themeable(
+    border, 
+    theme-border, 
+    1px solid $light-medium-gray
+  );
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
@@ -318,13 +380,19 @@
   text-overflow: ellipsis;
   font-size: 0.9em;
   break-inside: avoid;
-  background: white;
-  background: var(--theme-container-background, white);
+  @include themeable(
+    background, 
+    theme-container-background, 
+    white
+  );
   h3 {
     margin: 0px;
     padding: 9px 15px;
-    background: lighten($light-medium-gray, 8%);
-    background: var(--theme-container-accent-background, lighten($light-medium-gray, 8%));
+    @include themeable(
+      background, 
+      theme-container-accent-background, 
+      lighten($light-medium-gray, 8%)
+    );
     border-bottom: 1px solid $light-medium-gray;
     font-size: 16px;
     a { @include themeable(color, theme-color, $black); }
@@ -346,10 +414,16 @@
   .single-classified-listing-tags {
     padding: 10px 15px;
     a {
-      color: $dark-medium-gray;
-      color: var(--theme-secondary-color, $dark-medium-gray);
-      background: $light-medium-gray;
-      background: var(--theme-container-accent-background, $light-medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $dark-medium-gray
+      );
+      @include themeable(
+        background, 
+        theme-container-accent-background, 
+        $light-medium-gray
+      );
       display: inline-block;
       margin: 2px;
       padding: 2px 7px;
@@ -360,12 +434,18 @@
   }
   .single-classified-listing-author-info {
     font-size: 0.69em;
-    color: $medium-gray;
-    color: var(--theme-secondary-color, $medium-gray);
+    @include themeable(
+      color, 
+      theme-secondary-color, 
+      $medium-gray
+    );
     padding: 0px 15px 4px;
     a {
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
       display: inline-block;
       &.classified-listing-edit-button {
         margin-left: 4px;