From 40c34392e1fcf6361dc6c605ff5f196b2e34d3b6 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Thu, 22 Sep 2022 20:53:31 +0300
Subject: [PATCH] change(cards): style items listing using css variables
 independent of item classes due to parent classes

---
 src/components/UniversalCard/CardMeta.jsx |  2 +-
 src/less/listing-cards.less               | 45 +++++++++++++++++++++--
 src/less/listing-cards.variables          |  1 +
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/less/listing-cards.variables

diff --git a/src/components/UniversalCard/CardMeta.jsx b/src/components/UniversalCard/CardMeta.jsx
index a44e2694..a1f87dd6 100644
--- a/src/components/UniversalCard/CardMeta.jsx
+++ b/src/components/UniversalCard/CardMeta.jsx
@@ -17,7 +17,7 @@ const CardMeta = (props) => {
         <span className="text-left">{head_title || item['@type']}</span>
       )}
       {showDate && (
-        <span className="text-right">
+        <span className="text-right date">
           {formatDate({
             date: EffectiveDate,
             format: {
diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less
index 0894355a..6c778bf5 100644
--- a/src/less/listing-cards.less
+++ b/src/less/listing-cards.less
@@ -2,10 +2,12 @@
 @type: 'extra';
 @element: 'custom';
 
+@import 'listing-cards.variables';
+
 @import (multiple, reference, optional) '../../theme.config';
 
 .category {
-  font-size: 12px;
+  font-size: @categoryFontSize;
 }
 
 .description {
@@ -64,17 +66,18 @@ each(range(5), {
 .u-item.listing-item {
   a,
   a p {
-    color: #3d5265;
+    color: var(--text-color, #3d5265);
   }
 }
 
+
 .listing-item {
   padding-bottom: 16px;
   border-bottom: 1px solid #bcbec0;
   margin-bottom: 32px;
 
   img {
-    width: auto;
+    width: auto !important;
     max-width: 350px !important;
     margin-right: 25px;
   }
@@ -83,6 +86,9 @@ each(range(5), {
   .listing-header {
     margin-bottom: 8px;
   }
+  .meta .date {
+    margin-left: auto;
+  }
 
   // defaults in Volto
   .slot-top {
@@ -95,6 +101,39 @@ each(range(5), {
   }
 }
 
+// listing theme styling alongside inverse options
+.has--theme--primary {
+  --text-color: var(--text-color--primary, #FFF);
+  background-color: var(--background-color, @primaryColor);
+  color: var(--text-color, #FFF);
+}
+.has--theme--secondary {
+  --text-color: var(--text-color--secondary, #FFF);
+  background-color: var(--background-color, @secondaryColor);
+  color: var(--text-color--secondary, #FFF);
+}
+.has--theme--tertiary {
+  --text-color: var(--text-color--tertiary, #FFF);
+  background-color: var(--background-color, @tertiaryColor);
+  color: var(--text-color);
+}
+.has--inverted--:not(.has--theme--) {
+  --text-color: #FFF;
+  --theme-padding: 32px 1.5rem;
+}
+.has--inverted--true {
+  --text-color--primary: @primaryColor;
+  --text-color--secondary: @secondaryColor;
+  --text-color--tertiary: @tertiaryColor;
+  --theme-padding: 32px 0;
+  --background-color: #FFF;
+}
+
+.u-item.listing-item {
+    padding: var(--theme-padding, 32px 1rem);
+    margin: 0;
+}
+
 .ui.card.u-card {
   .description {
     display: -webkit-box;
diff --git a/src/less/listing-cards.variables b/src/less/listing-cards.variables
new file mode 100644
index 00000000..6090d550
--- /dev/null
+++ b/src/less/listing-cards.variables
@@ -0,0 +1 @@
+@categoryFontSize: 12px;
\ No newline at end of file