woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss

247 lines
5.0 KiB
SCSS

.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-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: 0 0 0 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%;
}
}
}