.wc-block-cart { color: $core-grey-dark-600; .wc-block-cart__item-count { float: right; } .wc-block-cart__shipping-calculator { white-space: nowrap; } .wc-block-cart__change-address-button { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: inherit; font-family: inherit; font-weight: inherit; display: inline; font-weight: inherit; letter-spacing: inherit; margin: 0; padding: 0; text-decoration: underline; text-transform: none; vertical-align: middle; &:hover, &:focus, &:active { background: transparent; opacity: 0.8; } } // Added extra class and label for specificity. fieldset.wc-block-cart__shipping-options-fieldset { background-color: transparent; margin: 0; padding: 0; border: 0; } .wc-block-cart__shipping-options { .wc-block-radio-control__label, .wc-block-radio-control__description, .wc-block-radio-control__secondary-label, .wc-block-radio-control__secondary-description { flex-basis: 100%; text-align: left; } .wc-block-radio-control__option { padding-left: $gap-large; &:last-child { border-bottom: none; } } .wc-block-radio-control__input { left: 0; margin: 0; } } } table.wc-block-cart-items, table.wc-block-cart-items th, table.wc-block-cart-items td { // Override Storefront theme gray table background. background: none !important; // Remove borders on default themes. border: 0; } table.wc-block-cart-items { table-layout: fixed; width: 100%; border-bottom: 1px solid $core-grey-light-600; th { padding: 0.5rem $gap 0.5rem 0; white-space: nowrap; border-collapse: collapse; } td { border-top: 1px solid $core-grey-light-600; padding: $gap $gap $gap 0; vertical-align: top; border-collapse: collapse; } th:last-child, td:last-child { padding-right: 0; } .wc-block-cart-items__header { text-transform: uppercase; .wc-block-cart-items__header-image { width: 100px; } .wc-block-cart-items__header-product { visibility: hidden; min-width: 300px; } .wc-block-cart-items__header-quantity { width: 116px; } .wc-block-cart-items__header-total { width: 100px; text-align: right; } } .wc-block-cart-items__row { .wc-block-cart-item__image img { width: 100%; margin: 0; } .wc-block-cart-item__quantity { .wc-block-cart-item__remove-link { @include link-button; color: $core-grey-dark-400; font-size: 12px; line-height: 12px; margin-top: 0.5em; text-transform: none; white-space: nowrap; // Temporary - this is not yet a link or "link button". // May not be needed when remove is hooked up to API properly. text-decoration: underline; } .wc-block-cart-item__remove-icon { @include link-button; color: $core-grey-dark-400; fill: currentColor; position: absolute; top: $gap; right: 0; display: none; } } .wc-block-cart-item__total { text-align: right; font-size: 16px; line-height: 19px; .wc-block-formatted-money-amount { display: block; } } } } // Loading placeholder state. .wc-block-cart--is-loading { th span, h2 span { @include placeholder(); @include force-content(); min-width: 84px; display: inline-block; } h2 span { min-width: 33%; } .wc-block-cart-items { .wc-block-cart-items__row { .wc-block-product-price, .wc-block-product-metadata, .wc-block-cart-item__image > *, .wc-block-quantity-selector { @include placeholder(); } .wc-block-product-name { @include placeholder(); @include force-content(); min-width: 84px; display: inline-block; } .wc-block-product-metadata { margin-top: 0.25em; min-width: 8em; } .wc-block-cart-item__remove-link, .wc-block-cart-item__remove-icon { visibility: hidden; } .wc-block-cart-item__image a { display: block; } .wc-block-cart-item__total { > span, > div { display: none; } .wc-block-product-price { @include force-content(); display: block; } } } } .wc-block-cart__sidebar .components-card { @include placeholder(); @include force-content(); min-height: 460px; } } .wc-block-cart--skeleton { display: none; } .is-loading + .wc-block-cart--skeleton { display: flex; } // Mobile styles. @include breakpoint( "<782px" ) { .wc-block-cart { .wc-block-sidebar { .wc-block-cart__totals-title { display: none; } } } table.wc-block-cart-items { td { padding: 0; border: 0; } .wc-block-cart-items__header { display: none; } .wc-block-cart-item__remove-link { display: none; } .wc-block-cart-items__row { display: grid; grid-template-columns: 80px 132px; border-top: 1px solid $core-grey-light-600; padding: $gap 0; position: relative; .wc-block-cart-item__image { grid-column-start: 1; grid-row-start: 1; padding-right: $gap; } .wc-block-cart-item__product { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; justify-self: stretch; padding-bottom: $gap; } .wc-block-cart-item__quantity { grid-column-start: 2; grid-row-start: 2; vertical-align: bottom; padding-right: $gap; .wc-block-cart-item__remove-link { display: none; } .wc-block-cart-item__remove-icon { display: block; } } .wc-block-cart-item__total { grid-column-start: 3; grid-row-start: 2; align-self: center; .wc-block-formatted-money-amount { display: inline-block; } .wc-block-sale-badge { display: none; } } } } // Submit button is sticky to bottom of screen on mobile. .wc-block-cart__submit-container { background: $white; bottom: 0; box-shadow: 0 -10px 20px 10px transparentize($core-grey-light-700, 0.5); left: 0; padding: $gap; position: fixed; width: 100%; z-index: 1; } } .wc-block-cart-coupon-list { list-style: none; margin: 0; padding: 0; }