.wc-block-cart { padding-top: $gap; .wc-block-components-shipping-calculator { white-space: nowrap; } .wc-block-components-address-form { .wc-block-components-text-input, .wc-block-components-country-input, .wc-block-components-state-input { &:first-of-type { margin-top: 0; } } } .wc-block-components-totals-taxes, .wc-block-components-totals-footer-item { margin: 0; } table.wc-block-cart-items, table.wc-block-cart-items th, table.wc-block-cart-items td { margin: 0 0 $gap * 2.5; } } // Loading placeholder state. .wc-block-cart--is-loading, .wc-block-mini-cart__drawer.is-loading { th span, h2 span { @include placeholder(); @include force-content(); min-width: 84px; display: inline-block; } h2 span { min-width: 33%; } .wc-block-components-product-price, .wc-block-components-product-metadata, .wc-block-components-quantity-selector { @include placeholder(); } .wc-block-components-product-name { @include placeholder(); @include force-content(); min-width: 84px; display: inline-block; } .wc-block-components-product-metadata { margin-top: 0.25em; min-width: 8em; } .wc-block-cart-item__remove-link { visibility: hidden; } .wc-block-cart-item__image > a { @include placeholder(); display: block; } .wc-block-components-product-price { @include force-content(); max-width: 3em; display: block; margin-top: 0.25em; } .wc-block-cart__sidebar .components-card { @include placeholder(); @include force-content(); min-height: 460px; } } .wc-block-components-sidebar-layout.wc-block-cart--skeleton { display: none; } .is-loading + .wc-block-components-sidebar-layout.wc-block-cart--skeleton { display: flex; } .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-direction: column; align-items: flex-end; .wc-block-components-sale-badge { margin-top: $gap-smallest; } } .wc-block-components-sidebar-layout.wc-block-cart { padding-top: 0; } .is-medium, .is-small, .is-mobile { .wc-block-cart-item__total { .wc-block-components-sale-badge { display: none; } } table.wc-block-cart-items { margin: 0; } .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option { padding-left: em($gap-huge); } } .is-medium, .is-small, .is-mobile { &.wc-block-cart { .wc-block-components-sidebar { .wc-block-cart__totals-title { display: none; } } } } .is-large.wc-block-cart { margin-bottom: 3em; .wc-block-components-radio-control__input { left: 0; margin: 0; } .wc-block-cart__totals-title { @include text-heading(); @include font-size(smaller); display: block; font-weight: 700; padding: $gap-smaller $gap $gap-smaller 0; text-align: left; text-transform: uppercase; } .wc-block-components-sidebar { margin-top: 0; .wc-block-components-shipping-calculator, .wc-block-components-shipping-rates-control__package:not( .wc-block-components-panel ) { padding-left: $gap; padding-right: $gap; } .wc-block-components-totals-item__description.wc-block-components-totals-shipping__via, .wc-block-components-totals-shipping__change-address__link { padding-top: $gap-smallest; } .wc-block-components-totals-shipping__options { margin-top: $gap; } .wc-block-components-radio-control > * { margin-bottom: $gap; } .wc-block-components-radio-control > *:last-child { margin-bottom: 0; } } .wc-block-cart__payment-options { padding: $gap 0 0; &:empty { padding: 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: math.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: math.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%; } } }