diff --git a/assets/js/blocks/cart-checkout/cart/style.scss b/assets/js/blocks/cart-checkout/cart/style.scss index 245141feff7..82e65f9dac9 100644 --- a/assets/js/blocks/cart-checkout/cart/style.scss +++ b/assets/js/blocks/cart-checkout/cart/style.scss @@ -29,7 +29,7 @@ table.wc-block-cart-items { width: 100%; .wc-block-cart-items__header { - @include font-size(smaller); + @include font-size( smaller ); text-transform: uppercase; .wc-block-cart-items__header-image { @@ -51,7 +51,7 @@ table.wc-block-cart-items { .wc-block-cart-item__quantity { .wc-block-cart-item__remove-link { @include link-button; - @include font-size(smaller); + @include font-size( smaller ); text-transform: none; white-space: nowrap; @@ -62,7 +62,7 @@ table.wc-block-cart-items { max-width: max-content; } .wc-block-cart-item__total { - @include font-size(regular); + @include font-size( regular ); text-align: right; line-height: inherit; } @@ -179,7 +179,7 @@ table.wc-block-cart-items { display: none; } .wc-block-cart-items__row { - @include with-translucent-border(0 0 1px); + @include with-translucent-border( 0 0 1px ); display: grid; grid-template-columns: 80px 132px; padding: $gap 0; @@ -219,14 +219,14 @@ table.wc-block-cart-items { margin-bottom: 3em; .wc-block-cart-items { - @include with-translucent-border(0 0 1px); + @include with-translucent-border( 0 0 1px ); th { padding: 0.25rem $gap 0.25rem 0; white-space: nowrap; } td { - @include with-translucent-border(1px 0 0); + @include with-translucent-border( 1px 0 0 ); padding: $gap 0 $gap $gap; vertical-align: top; } @@ -251,7 +251,7 @@ table.wc-block-cart-items { .wc-block-cart__totals-title { @include text-heading(); - @include font-size(smaller); + @include font-size( smaller ); display: block; font-weight: 600; padding: 0.25rem 0; @@ -271,3 +271,73 @@ table.wc-block-cart-items { 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%; + } + } +}