From 4dcd468f7fcdd682ea0b5b9b35526869e022199d Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Fri, 31 Jan 2025 11:19:36 -0500
Subject: [PATCH] Adding petition attribute styles for the Petition overview
 (CFM-324)

---
 app/webroot/css/co-base.css       | 42 +++++++++++++++++++++++++++++++
 app/webroot/css/co-responsive.css | 32 +++++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 5b23433d8..da5956d45 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -62,6 +62,11 @@ h3 {
   line-height: 1.4em;
   margin: 1em 0 0.5em;
 }
+h4 {
+  font-size: 1.1em;
+  line-height: 1.1em;
+  margin: 1em 0 0.5em;
+}
 a {
   color: var(--cmg-color-link);
   text-decoration: none;
@@ -2073,6 +2078,43 @@ ul.form-list li.petition-enrollee-items .petition-inline-value,
 ul.form-list li.petition-enrollee-items .petition-inline-value a {
   font-family: var(--cmg-font-semibold);
 }
+.petition-attrs {
+  padding: 0;
+}
+.petition-attrs h3 {
+  padding: 0.75em;
+  margin: 0;
+  font-size: 1.2em;
+  background-color: var(--cmg-color-bg-002);
+}
+.petition-attrs h4 {
+  margin: 0 0 0.25em;
+}
+.petition-attrs > ul {
+  padding: 0;
+  border: 0.75em solid var(--cmg-color-bg-002);
+  border-top: none;
+}
+.petition-attrs > ul > li {
+  padding: 0.75em;
+  border: none;
+}
+ul.petition-attrs-subset {
+  padding: 0;
+  border: 1px solid var(--cmg-color-bg-005);
+  border-top: none;
+}
+ul.petition-attrs-subset li {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  border: none;
+  border-top: 1px solid var(--cmg-color-bg-005);
+  gap: 1em;
+  padding: 0.1em 0.5em;
+}
+.petition-attrs-subset-label {
+  color: var(--cmg-color-txt-soft);
+}
 /* GENERAL */
 .hidden,
 .invisible,
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 893e94b33..0f8a15fa4 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -95,6 +95,18 @@
   .cm-modal .modal-dialog {
     max-width: 90vw;
   }
+  /* PETITIONS */
+  ul#view_Petitions.form-list .field {
+    align-items: start;
+  }
+  .petition-attrs h3 {
+    padding: 0.75em 1em 0;
+  }
+  .petition-attrs > ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border: 1em solid var(--cmg-color-bg-002);
+  }
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
     display: grid;
@@ -540,6 +552,26 @@
     flex-direction: row;
     gap: 3em;
   }
+  ul.petition-attrs-subset {
+    display: flex;
+    flex-wrap: wrap;
+    border: none; 
+    border-right: 1px solid var(--cmg-color-bg-005);
+  }
+  ul.petition-attrs-subset li {
+    grid-template-columns: unset;
+    grid-template-rows: 1fr 1fr;
+    border-left: 1px solid var(--cmg-color-bg-005);
+    gap: 0;
+    padding: 0.1em 0.5em;
+    border-top: 1px solid var(--cmg-color-bg-005);
+    border-bottom: 1px solid var(--cmg-color-bg-005);
+    border-right: none;
+    flex-grow: 1;
+  }
+  .petition-attrs-subset-label {
+    font-size: 0.8em;
+  }
   /* FOOTER */
   #co-footer {
     position: static;