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

Add a loading state to Cart i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4980) 

* Add a loading state to Cart i2

We use CSS and the is-loading class to hide empty state and show regular state

* Lint cart/style.scss
This commit is contained in:
Raluca Stan 2021-10-25 16:31:12 +01:00 committed by GitHub
parent 2408e34faa
commit 357a1265cb
1 changed files with 77 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ table.wc-block-cart-items {
width: 100%; width: 100%;
.wc-block-cart-items__header { .wc-block-cart-items__header {
@include font-size(smaller); @include font-size( smaller );
text-transform: uppercase; text-transform: uppercase;
.wc-block-cart-items__header-image { .wc-block-cart-items__header-image {
@ -51,7 +51,7 @@ table.wc-block-cart-items {
.wc-block-cart-item__quantity { .wc-block-cart-item__quantity {
.wc-block-cart-item__remove-link { .wc-block-cart-item__remove-link {
@include link-button; @include link-button;
@include font-size(smaller); @include font-size( smaller );
text-transform: none; text-transform: none;
white-space: nowrap; white-space: nowrap;
@ -62,7 +62,7 @@ table.wc-block-cart-items {
max-width: max-content; max-width: max-content;
} }
.wc-block-cart-item__total { .wc-block-cart-item__total {
@include font-size(regular); @include font-size( regular );
text-align: right; text-align: right;
line-height: inherit; line-height: inherit;
} }
@ -179,7 +179,7 @@ table.wc-block-cart-items {
display: none; display: none;
} }
.wc-block-cart-items__row { .wc-block-cart-items__row {
@include with-translucent-border(0 0 1px); @include with-translucent-border( 0 0 1px );
display: grid; display: grid;
grid-template-columns: 80px 132px; grid-template-columns: 80px 132px;
padding: $gap 0; padding: $gap 0;
@ -219,14 +219,14 @@ table.wc-block-cart-items {
margin-bottom: 3em; margin-bottom: 3em;
.wc-block-cart-items { .wc-block-cart-items {
@include with-translucent-border(0 0 1px); @include with-translucent-border( 0 0 1px );
th { th {
padding: 0.25rem $gap 0.25rem 0; padding: 0.25rem $gap 0.25rem 0;
white-space: nowrap; white-space: nowrap;
} }
td { td {
@include with-translucent-border(1px 0 0); @include with-translucent-border( 1px 0 0 );
padding: $gap 0 $gap $gap; padding: $gap 0 $gap $gap;
vertical-align: top; vertical-align: top;
} }
@ -251,7 +251,7 @@ table.wc-block-cart-items {
.wc-block-cart__totals-title { .wc-block-cart__totals-title {
@include text-heading(); @include text-heading();
@include font-size(smaller); @include font-size( smaller );
display: block; display: block;
font-weight: 600; font-weight: 600;
padding: 0.25rem 0; padding: 0.25rem 0;
@ -271,3 +271,73 @@ table.wc-block-cart-items {
padding: $gap 0 0; padding: $gap 0 0;
} }
} }
.wp-block-woocommerce-cart.is-loading {
.wp-block-woocommerce-empty-cart-block {
display: none;
}
.wp-block-woocommerce-filled-cart-block {
display: flex;
flex-wrap: wrap;
margin: 0 auto $gap;
position: relative;
}
.wp-block-woocommerce-cart-items-block {
box-sizing: border-box;
margin: 0;
padding-right: percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
width: 65%;
min-height: 10em;
}
.wp-block-woocommerce-cart-line-items-block {
min-height: 15em;
display: block;
@include placeholder();
}
.wp-block-woocommerce-cart-totals-block {
box-sizing: border-box;
margin: 0;
padding-left: percentage(math.div($gap-large, 1060px));
width: 35%;
min-height: 12em;
}
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-express-payment-block,
.wp-block-woocommerce-proceed-to-checkout-block,
.wp-block-woocommerce-cart-accepted-payment-methods-block {
min-height: 3em;
display: block;
@include placeholder();
margin: 0 0 1em 0;
}
.wp-block-woocommerce-cart-order-summary-block {
height: 20em;
}
}
// Skeleton is shown before mobile classes are appended.
@media only screen and ( max-width: 700px ) {
.wp-block-woocommerce-cart.is-loading {
padding-top: $gap;
.wp-block-woocommerce-filled-cart-block {
flex-direction: column;
margin: 0 auto $gap;
}
.wp-block-woocommerce-cart-items-block {
padding: 0;
width: 100%;
}
.wp-block-woocommerce-cart-totals-block {
padding: 0;
width: 100%;
}
}
}