From 5155ef48c5384b650fc77a942e2dc5fd111be7eb Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Wed, 11 Sep 2024 18:16:27 -0700 Subject: [PATCH 1/2] fix: add styles for the terms and conditions box --- src/modal-checkout/checkout.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index f6fb19717..e28c0f271 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -508,6 +508,29 @@ color: var(--newspack-ui-color-neutral-60, colors.$newspack-ui-color-neutral-60); } + // Terms and Conditions section + .woocommerce-terms-and-conditions { + background: var(--newspack-ui-color-neutral-5, #f7f7f7); + border-color: var(--newspack-ui-color-border, #ddd); + box-shadow: none; + margin-top: var(--newspack-ui-spacer-5, 24px); + padding: var(--newspack-ui-spacer-5, 24px); + + + p.form-row { + margin-top: var(--newspack-ui-spacer-5, 24px); + + label { + display: flex; + gap: 0; // We can't use the default label gap because there are multiple elements. + margin: 0; + } + + input { + margin: 2px var(--newspack-ui-spacer-base, 8px) 0 0; + } + } + } + // Buttons - adjust spacing #place-order { margin-bottom: 0; From f69ce95f8f6cf66dd5dd5bcefa6f2d865a366570 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Wed, 11 Sep 2024 18:40:20 -0700 Subject: [PATCH 2/2] fix: reworking the terms checkbox styles --- src/modal-checkout/checkout.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index e28c0f271..e1310830a 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -520,13 +520,16 @@ margin-top: var(--newspack-ui-spacer-5, 24px); label { - display: flex; - gap: 0; // We can't use the default label gap because there are multiple elements. + display: block; margin: 0; + padding: 0 0 0 calc(var(--newspack-ui-spacer-4, 20px) + var(--newspack-ui-spacer-base, 8px)); // This is hacky but lets us pair the checkbox width + gap of normal checkboxes. + position: relative; } input { + inset: 0 auto auto 0; margin: 2px var(--newspack-ui-spacer-base, 8px) 0 0; + position: absolute; } } }