From 12f942948e84ee12fe03a8a0ac3fea71cfa97767 Mon Sep 17 00:00:00 2001 From: Rua Haszard Date: Tue, 10 Mar 2020 10:16:03 +1300 Subject: [PATCH] mobile layout fixes for cart totals (https://github.com/woocommerce/woocommerce-blocks/pull/1898) * tidy cart totals layout on mobile: - totals column is full width - reset container (card) borders and padding * increase specificity of mobile cart styles to ensure skeleton hides after load * use "not loading" && "not skeleton" approach for more readable mobile style selector --- .../cart-checkout/cart/full-cart/style.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss index 2a30e5404d7..71c47ae83d2 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss @@ -318,7 +318,7 @@ table.wc-block-cart-items { // Mobile styles. @include breakpoint( "<782px" ) { - .wc-block-cart { + .wc-block-cart:not(.wc-block-cart--is-loading):not(.wc-block-cart--skeleton) { display: block; margin: 0 0 $gap; .wc-block-cart__main { @@ -329,6 +329,21 @@ table.wc-block-cart-items { .wc-block-cart__sidebar { padding: 0; flex: none; + max-width: 100%; + + .wc-block-cart__totals-title { + display: none; + } + + // Reset (remove) totals "card" styling on mobile. + .components-card { + box-shadow: none; + border: none; + } + .components-card__body { + border: none; + padding: 0; + } } } table.wc-block-cart-items {