change(cards): style items listing using css variables independent of…

… item classes due to parent classes
eea · Sep 22, 2022 · 40c3439 · 40c3439
1 parent 2b3b4a4
commit 40c3439
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git 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
@@ -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
@@ -0,0 +1 @@
+@categoryFontSize: 12px;