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; - } } }