Adjust spacing in/between elements on the Cart and Checkout block pag…

…es (#44160) * Add spacing in Checkout block page * Add spacing in Order summary block * Update responsive styles for order summary panel * Update styles for cart and cart line items table * Update styles for order summary and cross-sells products * Remove unnecessary CSS styles from cart line items table and cart block * Remove unused CSS class from cart line items table * Fix linting errors * Add changelog * Fix changelog lint * Update quantity selector style * Increase the line-height of the set description and remove margin top from email field * Add margin-top to order summary image and express payment margin adjustment * Update styles for cart and checkout components * Fix linting error * Fix margin units in cart-cross-sells-products * Replace em with px * Add margin-top to payment method container * Update styles for Cart block for mobile screen * Update padding in cart style.scss
woocommerce · Feb 16, 2024 · 4e6476a · 4e6476a
1 parent 0bc6c37
commit 4e6476a
Show file tree

Hide file tree

Showing 18 changed files with 126 additions and 35 deletions.
diff --git a/...ocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/...ocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
@@ -31,10 +31,24 @@ table.wc-block-cart-items {
 		}
 	}
 	.wc-block-cart-items__row {
+
+		.wc-block-cart-item__wrap > *,
+		.wc-block-components-quantity-selector {
+			margin-bottom: $gap-small;
+		}
+
+		.wc-block-cart-item__wrap > *:last-child {
+			margin-bottom: 0;
+		}
+
 		.wc-block-cart-item__image img {
 			width: 100%;
 			margin: 0;
 		}
+		.wc-block-cart-item__prices {
+			line-height: 1.2;
+		}
+
 		.wc-block-cart-item__quantity {
 			.wc-block-cart-item__remove-link {
 				@include link-button();
@@ -48,14 +62,12 @@ table.wc-block-cart-items {
 		.wc-block-components-product-name {
 			display: block;
 			max-width: max-content;
+			line-height: 1.4;
 		}
 		.wc-block-cart-item__total {
 			@include font-size( regular );
 			text-align: right;
-			line-height: inherit;
-		}
-		.wc-block-components-product-metadata {
-			margin-bottom: 0.75em;
+			line-height: 1.8;
 		}
 
 		&.is-disabled {
@@ -72,6 +84,7 @@ table.wc-block-cart-items {
 	table.wc-block-cart-items {
 		td {
 			padding: 0;
+			margin: 0;
 		}
 		.wc-block-cart-items__header {
 			display: none;
@@ -99,15 +112,15 @@ table.wc-block-cart-items {
 				grid-column-end: 4;
 				grid-row-start: 1;
 				justify-self: stretch;
-				padding: 0 $gap $gap 0;
+				padding: 0;
 			}
 			.wc-block-cart-item__quantity {
 				grid-column-start: 1;
 				grid-row-start: 2;
 				vertical-align: bottom;
 				padding-right: $gap;
 				align-self: end;
-				padding-top: $gap;
+				padding-top: 0;
 			}
 			.wc-block-cart-item__total {
 				grid-row-start: 1;
@@ -128,16 +141,16 @@ table.wc-block-cart-items {
 		border-bottom: 1px solid $universal-border-light;
 
 		th {
-			padding: 0.25rem $gap 0.25rem 0;
+			padding: $gap-smaller $gap $gap-smaller 0;
 			white-space: nowrap;
 		}
 		td {
 			border-top: 1px solid $universal-border-light;
-			padding: $gap 0 $gap $gap;
+			padding: $gap-large 0 $gap-large $gap;
 			vertical-align: top;
 		}
 		th:last-child {
-			padding-right: 0;
+			padding-right: $gap;
 		}
 		td:last-child {
 			padding-right: $gap;

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
@@ -15,7 +15,6 @@
 	}
 
 	.wc-block-components-order-summary-item {
-		border-bottom: 1px solid $universal-border-light;
 		@include font-size(small);
 		display: flex;
 		padding-bottom: 1px;
@@ -53,6 +52,7 @@
 	.wc-block-components-order-summary-item__image {
 		width: #{$gap-large * 2};
 		padding-bottom: $gap;
+		margin-top: 10px;
 		position: relative;
 
 		> img {
@@ -91,7 +91,7 @@
 		p,
 		.wc-block-components-product-metadata {
 			line-height: 1.375;
-			margin-top: #{ ($gap-large - $gap) * 0.5 };
+			margin-top: $gap-smaller;
 		}
 	}
 
@@ -100,9 +100,25 @@
 		margin-left: auto;
 		text-align: right;
 	}
+	.wc-block-components-totals-item__description.wc-block-components-totals-shipping__via {
+		padding-top: $gap-smallest;
+	}
 
 
 	.wc-block-components-order-summary-item__individual-prices {
 		display: block;
+		padding-top: $gap-smaller;
+	}
+
+}
+
+.is-medium,
+.is-small,
+.is-mobile {
+	.wp-block-woocommerce-checkout-order-summary-block {
+		.wc-block-components-totals-wrapper {
+			padding-left: $gap-small;
+			padding-right: $gap-small;
+		}
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
@@ -18,7 +18,7 @@
 
 .wc-block-components-sidebar {
 	box-sizing: border-box;
-	margin: 0;
+	margin-top: $gap-smaller;
 	padding-left: math.percentage(math.div($gap-large, 1060px));
 	width: 35%;
 

diff --git a/...e-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/...e-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
@@ -111,7 +111,7 @@ $border-width: 1px;
 	align-items: center;
 	text-align: center;
 	padding: 0 $gap-large;
-	margin: $gap-large 0;
+	margin: $gap-larger 0 ( 3.5 * $grid-unit );
 
 	&::before {
 		margin-right: 10px;

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
@@ -10,6 +10,7 @@
 .wc-block-gateway-container {
 	position: relative;
 	margin-bottom: em($gap-large);
+	margin-top: $gap-smaller;
 	white-space: nowrap;
 
 	&.wc-card-number-element {
@@ -188,8 +189,6 @@
 	.wc-block-components-radio-control__option:first-child,
 	.wc-block-components-radio-control__option:last-child {
 		margin: 0;
-		padding-bottom: em($gap);
-		padding-top: em($gap);
 	}
 
 	.wc-block-components-radio-control__option-checked {
@@ -211,6 +210,10 @@
 	.wc-block-components-radio-control__option {
 		border-width: 0;
 	}
+	.wc-block-components-radio-control-accordion-option {
+		padding-bottom: $gap;
+		padding-top: $gap;
+	}
 
 	.wc-block-components-radio-control-accordion-option:first-child::after {
 		border-top-left-radius: $universal-border-radius;
@@ -261,9 +264,8 @@
 	}
 
 }
-
 .wc-block-components-radio-control-accordion-content {
-	padding: 0 $gap em($gap) $gap;
+	padding: $gap-smaller $gap;
 
 	&:empty {
 		display: none;

diff --git a/...oocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/style.scss b/...oocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/style.scss
@@ -12,10 +12,14 @@
 
 	.wp-block-woocommerce-cart-cross-sells-block {
 
+		.wp-block-heading {
+			margin-bottom: $gap-large;
+		}
+
 		.cross-sells-product {
 			display: inline-block;
 			box-sizing: content-box;
-			margin-bottom: 2em;
+			margin-bottom: $gap;
 			padding-right: 5%;
 			text-align: center;
 			vertical-align: top;
@@ -26,9 +30,16 @@
 			}
 
 			div {
+				.wc-block-components-product-image {
+					margin-bottom: $gap;
+				}
+
 				.wc-block-components-product-name {
 					font-weight: 400;
 				}
+				.wp-block-cart-cross-sells-product__product-title {
+					margin-bottom: $gap;
+				}
 
 				.wc-block-components-product-price {
 					display: block;

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss
@@ -1,4 +1,6 @@
 .wc-block-cart {
+	padding-top: $gap;
+
 	.wc-block-components-shipping-calculator {
 		white-space: nowrap;
 	}
@@ -21,7 +23,7 @@
 	table.wc-block-cart-items,
 	table.wc-block-cart-items th,
 	table.wc-block-cart-items td {
-		margin: 0 0 2em;
+		margin: 0 0 $gap * 2.5;
 	}
 }
 
@@ -89,6 +91,10 @@
 	}
 }
 
+.wc-block-components-sidebar-layout.wc-block-cart {
+	padding-top: 0;
+}
+
 .is-small,
 .is-mobile {
 	.wc-block-cart-item__total {
@@ -99,6 +105,9 @@
 	table.wc-block-cart-items {
 		margin: 0;
 	}
+	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
+		padding: 0 0 0 em($gap-huge);
+	}
 }
 
 .is-medium,
@@ -126,7 +135,7 @@
 		@include font-size( smaller );
 		display: block;
 		font-weight: 700;
-		padding: 0.25rem 0;
+		padding: $gap-smaller $gap $gap-smaller 0;
 		text-align: right;
 		text-transform: uppercase;
 
@@ -136,11 +145,28 @@
 	}
 
 	.wc-block-components-sidebar {
+		margin-top: 0;
+
 		.wc-block-components-shipping-calculator,
 		.wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
 			padding-left: $gap;
 			padding-right: $gap;
 		}
+
+		.wc-block-components-totals-item__description.wc-block-components-totals-shipping__via,
+		.wc-block-components-totals-shipping__change-address__link {
+			padding-top: $gap-smallest;
+		}
+
+		.wc-block-components-totals-shipping__options {
+			margin-top: $gap;
+		}
+		.wc-block-components-radio-control > * {
+			margin-bottom: $gap;
+		}
+		.wc-block-components-radio-control > *:last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	.wc-block-cart__payment-options {

diff --git a/...ocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss b/...ocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
@@ -38,6 +38,6 @@
 .is-large {
 	.wc-block-checkout__actions {
 		border-top: 1px solid $universal-border-light;
-		padding: em($gap-large) 0;
+		padding: $gap-larger 0;
 	}
 }
diff --git a/...s/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/style.scss b/...s/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/style.scss
@@ -1,5 +1,5 @@
 .wc-block-checkout__add-note {
-	margin: em($gap-large) 0;
+	margin: $gap-larger 0;
 }
 
 .is-mobile,

diff --git a/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
@@ -41,4 +41,15 @@
 			}
 		}
 	}
+	.wc-block-components-address-form {
+		.wc-block-components-checkbox {
+			margin-top: $gap;
+		}
+
+		.wc-block-components-text-input.wc-block-components-address-form__email {
+			&:only-child {
+				margin-top: 0;
+			}
+		}
+	}
 }
diff --git a/...mmerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss b/...mmerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss
@@ -1,5 +1,5 @@
 .wc-block-checkout__add-note {
-	margin: em($gap-large) 0;
+	margin: $gap-larger 0;
 }
 
 .is-mobile,

diff --git a/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss b/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss
@@ -1,6 +1,6 @@
 // Adjust padding and margins in the editor to improve selected block outlines.
 .wc-block-checkout__terms {
-	margin: 20px 0;
+	margin: $gap-larger 0;
 	padding-top: 4px;
 	padding-bottom: 4px;
 	display: flex;

diff --git a/...woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss b/...woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss
@@ -1,5 +1,5 @@
 .wc-block-checkout__terms {
-	margin: 1.5em 0;
+	margin: $gap-larger 0;
 
 	textarea {
 		top: -5px;

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss
@@ -1,11 +1,13 @@
 .wp-block-woocommerce-checkout {
 	margin: 0;
+	padding-top: $gap-large;
 
 	.with-scroll-to-top__scroll-point {
 		top: -96px;
 	}
 	.wc-block-components-shipping-rates-control__package {
 		border-bottom: 0;
+		margin: 0 0 1em;
 	}
 }