diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
index 0afa8f42194..a318f184bc9 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
@@ -27,8 +27,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
} = cartItem;
const currency = getCurrency( prices );
- const regularPrice = parseInt( prices.regular_price, 10 );
- const purchasePrice = parseInt( prices.price, 10 );
const linePrice = Dinero( {
amount: parseInt( prices.raw_prices.price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
@@ -40,7 +38,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
return (
@@ -61,13 +59,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
value={ linePrice }
/>
-
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
index 300b16c1e8e..dbdce77ab04 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
@@ -13,6 +13,12 @@
}
}
+.wc-block-checkout__main {
+ fieldset.wc-block-checkout-step:first-child {
+ margin-top: $gap-small;
+ }
+}
+
.wc-block-checkout__sidebar {
.wc-block-order-summary {
border: none;
@@ -49,20 +55,32 @@
.wc-block-order-summary-item {
display: table-row;
+ > div {
+ border-bottom: 1px solid $core-grey-light-600;
+ }
+ &:last-child {
+ > div {
+ border-bottom: none;
+ }
+ }
}
.wc-block-order-summary-item__image,
.wc-block-order-summary-item__description {
- border-bottom: 1px solid $core-grey-light-600;
display: table-cell;
- padding-top: $gap;
vertical-align: top;
}
.wc-block-order-summary-item__image {
- width: 72px;
+ width: #{$gap-large * 2};
+ padding-top: $gap;
padding-bottom: $gap;
position: relative;
+
+ > img {
+ width: #{$gap-large * 2};
+ max-width: #{$gap-large * 2};
+ }
}
.wc-block-order-summary-item__quantity {
@@ -78,29 +96,32 @@
min-height: 22px;
position: absolute;
justify-content: center;
- right: -11px;
- top: #{$gap - 11px};
min-width: 22px;
+ right: -10px;
+ margin: -10px 0 0 0;
}
.wc-block-order-summary-item__description {
- padding-left: $gap;
+ padding-left: $gap-large;
+ padding-top: $gap;
+ line-height: $gap-large;
+
+ .wc-block-product-metadata {
+ line-height: $gap;
+ margin-top: #{ ( $gap-large - $gap ) / 2 };
+ }
}
.wc-block-order-summary-item__header {
display: flex;
+ flex-wrap: wrap;
}
.wc-block-product-name {
flex-grow: 1;
- margin-right: 0.5em;
// Required by IE11.
flex-basis: 0;
}
-
- .wc-block-order-summary-item__prices {
- font-size: 0.875em;
- }
}
.wc-block-component-express-checkout-continue-rule {
@@ -336,25 +357,5 @@
.wc-block-order-summary__row {
padding: 0 $gap;
}
-
- .wc-block-order-summary-item:last-child {
- .wc-block-order-summary-item__image,
- .wc-block-order-summary-item__description {
- border-bottom: none;
- }
- }
-
- .wc-block-order-summary-item__image {
- width: 48px;
-
- // Required by IE11.
- > img {
- width: 48px;
- }
- }
-
- .wc-block-order-summary-item__description {
- padding-left: $gap-small;
- }
}
}