feat(newspack-ui): add variation and coupon styles

Automattic · Feb 1, 2024 · d19043b · d19043b
1 parent c6c774d
commit d19043b
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 2 deletions.
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -38,6 +38,74 @@
 			}
 		}
 	}
+	&__modal-variation {
+		.newspack-ui {
+			&__modal {
+				&__content {
+					padding: 24px;
+					overflow: auto;
+					border-radius: 5px;
+					h3 {
+						font-size: 16px;
+						margin: 0;
+					}
+					p {
+						font-size: 0.8em;
+					}
+				}
+			}
+
+			&__options {
+				list-style: none;
+				display: flex;
+				flex-wrap: wrap;
+				gap: 16px;
+				margin: 0;
+				padding: 0;
+
+				&__item {
+					border: 1px solid #ddd;
+					border-radius: 6px;
+					text-align: center;
+					flex: 1 1 100%;
+					@media ( min-width: 600px ) {
+						flex: 1 1 30%;
+						max-width: calc( 33.3333% - 10px );
+						&:first-child:nth-last-child( 2 ),
+						&:first-child:nth-last-child( 2 ) ~ li {
+							flex: 1 1 40%;
+							max-width: calc( 50% - 10px );
+						}
+					}
+					.summary {
+						font-size: 14px;
+						padding: 12px;
+						border-bottom: 1px solid #ddd;
+						bdi {
+							display: block;
+							font-weight: 600;
+							font-size: 32px;
+						}
+					}
+					.variation {
+						padding: 12px;
+						font-size: 14px;
+						line-height: 1.5;
+						border-bottom: 1px solid #ddd;
+						font-weight: 600;
+					}
+					form {
+						padding: 12px;
+						button {
+							display: block;
+							width: 100%;
+							font-size: 14px;
+						}
+					}
+				}
+			}
+		}
+	}
 	&__modal {
 		// CSS Variables - update button background, with fallbacks to the Newspack UI defaults
 		--newspack-ui-color-button-bg: var( --newspack-ui-color-primary, var( --newspack-ui-color-gray-900 ) );

diff --git a/assets/newspack-ui/scss/elements/forms/_index.scss b/assets/newspack-ui/scss/elements/forms/_index.scss
@@ -39,13 +39,17 @@
 	}
 
 	// Form response inline error text.
-	&__inline-error {
-		color: var( --newspack-ui-color-alert-red );
+	&__inline-error,
+	&__inline-info {
 		font-size: var( --newspack-ui-font-size-small );
 		line-height: var( --newspack-ui-line-height-small );
 		margin: var( --newspack-ui-spacer-base ) 0 var( --newspack-ui-spacer-5 );
 		a {
 			text-decoration: underline;
 		}
 	}
+
+	&__inline-error {
+		color: var( --newspack-ui-color-alert-red );
+	}
 }
diff --git a/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss b/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss
@@ -15,4 +15,79 @@
 			display: block;
 		}
 	}
+
+	// Override checkout form heading.
+	.woocommerce .order-details-summary {
+		// Top margin not needed in newspack ui modal.
+		h2 {
+			margin-top: 0;
+		}
+	}
+
+	// Override checkout and billing form headings spacing.
+	.woocommerce-billing-fields h3,
+	.woocommerce-additional-fields h3,
+	.woocommerce-checkout h3,
+	.woocommerce-form-coupon h3 {
+		font-size: var(--newspack-ui-font-size-medium);
+		margin: 1rem 0 !important;
+	}
+
+	// Override checkout payment method box.
+	.wc_payment_method .payment_box {
+		padding: 1rem 0 0;
+
+		ul.wc-saved-payment-methods {
+			li {
+				margin-bottom: 16px;
+
+				input {
+					margin-right: 8px;
+				}
+			}
+		}
+
+		fieldset {
+			margin-bottom: 8px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			p.form-row {
+				display: flex;
+				align-items: center;
+
+				input {
+					margin-right: 8px;
+				}
+
+				label {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+
+	// Override theme hiding of radio checkbox.
+	.wc_payment_method input.input-radio[name="payment_method"] {
+		display: grid;
+	}
+
+	.woocommerce-form-coupon {
+		p:first-of-type {
+			display: flex;
+			align-items: center;
+			margin: var(--newspack-ui-spacer-2) 0;
+
+			input {
+				margin-right: 8px;
+			}
+
+			button {
+				margin-bottom: 0;
+			}
+		}
+	}
+
 }