Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Rua Haszard 2020-03-10 10:16:03 +13:00 committed by GitHub
parent b6c0ce4299
commit 12f942948e
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -318,7 +318,7 @@ table.wc-block-cart-items {
// Mobile styles. // Mobile styles.
@include breakpoint( "<782px" ) { @include breakpoint( "<782px" ) {
.wc-block-cart { .wc-block-cart:not(.wc-block-cart--is-loading):not(.wc-block-cart--skeleton) {
display: block; display: block;
margin: 0 0 $gap; margin: 0 0 $gap;
.wc-block-cart__main { .wc-block-cart__main {
@ -329,6 +329,21 @@ table.wc-block-cart-items {
.wc-block-cart__sidebar { .wc-block-cart__sidebar {
padding: 0; padding: 0;
flex: none; 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 { table.wc-block-cart-items {