Merge pull request #374 from thec4aa/develop

Feat: Grid Layouts and New Donation Form
thec4aa · Oct 29, 2024 · 8e233be · 8e233be
2 parents edf4313 + 646938f
commit 8e233be
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/src/css/_04-content.scss b/src/css/_04-content.scss
@@ -285,6 +285,61 @@ article.type-people .entry-content .wp-block-advanced-columns-column__inner figu
     margin: 0px auto 1rem
 }
 
+// Styles for the Formidable Donate Form 
+
+#frm_field_2359_container {
+    .frm_opt_container {
+      position: relative;
+
+      div.frm_radio {
+        label {
+          background: var(--color-brandBlack);
+          color: var(--color-brandWhite);
+          font: 500 1.3rem var(--font-sans);
+
+          &:has(input:checked) {
+            background: var(--color-brandBlue) !important;
+          }
+        }
+
+        div.frm_label_button_container {
+          padding: 1rem;
+        }
+
+        // Checked state
+        input[type="radio"]:checked + div {
+          background: var(--color-brandBlue) !important;
+        }
+      }
+
+      // Red button specific styles
+      #frm_radio_2359-3 {
+        label:not(:has(input:checked)) {
+          background: var(--color-brandRed);
+        }
+      }
+
+      // "Other" input field
+      #field_donation-amount2-other_6-otext {
+        padding: 0 .5rem;
+        position: absolute;
+        margin-top: 0.5rem;
+        width: calc(33.33% - 20px);
+        box-sizing: border-box;
+      }
+
+      // Hover states
+      > div:hover {
+        label, div {
+          background: var(--color-brandBlue) !important;
+        }
+      }
+    }
+  }
+
+
+
+
 // Column the kindful donate form is within (othewise it breaks out)
 .wp-block-advanced-columns-column-87c3489bae2ca26ab55c8eb81adda0d3 {
     min-width: 360px;

diff --git a/theme.json b/theme.json
@@ -403,7 +403,11 @@
         },
         "layout": {
             "contentSize": "840px",
-            "wideSize": "1100px"
+            "wideSize": "1100px",
+            "default": {
+                "type": "grid"
+            },
+            "allowSizingOnChildren": true
         },
         "lightbox": {
             "allowEditing": true,