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

230 lines
3.9 KiB
SCSS

.wc-block-cart__sidebar {
border: 1px solid $core-grey-light-600;
border-width: 1px 0;
min-width: 15rem;
padding-bottom: $gap-largest;
}
.wc-block-cart__item-count {
float: right;
}
table.wc-block-cart-items th,
table.wc-block-cart-items td {
// Override Storefront theme gray table background.
background: none !important;
}
table.wc-block-cart-items th {
padding: 0.5rem $gap;
white-space: nowrap;
}
table.wc-block-cart-items td {
border-top: 1px solid $core-grey-light-600;
padding: $gap;
}
table.wc-block-cart-items {
border-bottom: 1px solid $core-grey-light-600;
}
.wc-block-cart-items__header {
display: none;
text-transform: uppercase;
}
.wc-block-cart-items__header-quantity,
.wc-block-cart-item__quantity {
width: 132px;
}
.wc-block-cart-items__header-total,
.wc-block-cart-item__total {
text-align: right;
}
.wc-block-cart-item__product-wrapper {
display: flex;
flex-direction: row;
// Fixes a Safari-specific issue - product images display stretched vertically (full image height).
// https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari
align-items: flex-start;
}
.wc-block-cart-item__product img {
max-width: $cart-image-width;
}
.wc-block-cart-item__product-details {
margin-left: $gap;
}
.wc-block-cart-item__product-name {
color: $core-grey-dark-600;
font-size: 16px;
}
.wc-block-cart-item__low-stock-badge {
display: inline-block;
background-color: $white;
border-radius: 3px;
border: 1px solid $black;
color: $black;
font-size: 12px;
padding: 0 1em;
text-transform: uppercase;
white-space: nowrap;
}
.wc-block-cart-item__product-metadata {
color: $core-grey-dark-400;
font-size: 12px;
}
.wc-block-cart-item__quantity {
display: none;
}
.wc-block-cart-item__quantity-stacked {
display: block;
}
.wc-block-cart-item__total {
vertical-align: bottom;
font-size: 16px;
line-height: 19px;
}
.wc-block-cart-item__full-price {
color: $core-grey-dark-400;
text-decoration: line-through;
}
.wc-block-cart-item__line-total {
color: $black;
margin-left: 0.5em;
}
.wc-block-cart-item__discount-badge {
background-color: $core-grey-dark-600;
border-radius: 3px;
color: $white;
font-size: 12px;
padding: 0 1em;
text-transform: uppercase;
white-space: nowrap;
}
.wc-block-cart__totals-footer {
color: #000;
font-size: 1.25em;
> .wc-block-totals-table-item__label {
font-weight: normal;
}
}
// Added extra class and label for specificity.
.wc-block-cart fieldset.wc-block-cart__shipping-options-fieldset {
background-color: transparent;
margin: 0;
padding: 0;
}
.wc-block-cart__shipping-options {
.wc-block-radio-control__label {
flex-basis: 100%;
line-height: 16px;
}
.wc-block-radio-control__description {
flex-basis: 100%;
}
.wc-block-radio-control__option {
padding-left: $gap-large;
&:last-child {
border-bottom: none;
}
}
.wc-block-radio-control__input {
left: 0;
top: $gap;
}
}
@include breakpoint( "<782px" ) {
.wc-block-cart__totals-title {
display: none;
}
.wc-block-cart-item__line-total,
.wc-block-cart-item__full-price {
// inline on mobile, so line prices are aligned vertically
display: inline-block;
}
.wc-block-cart-item__discount-badge {
display: none;
}
}
@include breakpoint( ">782px" ) {
.wc-block-cart__sidebar {
max-width: 374px;
}
.wc-block-cart {
display: flex;
}
.wc-block-cart__main {
flex-grow: 4;
margin-right: 3em;
}
.wc-block-cart__sidebar {
flex-grow: 1;
}
.wc-block-cart-items {
table-layout: fixed;
}
.wc-block-cart-items__header {
display: table-row;
}
.wc-block-cart-items__header-product {
width: 60%;
}
.wc-block-cart-item__quantity {
display: table-cell;
}
.wc-block-cart-item__quantity-stacked {
display: none;
}
.wc-block-cart-item__total {
vertical-align: top;
}
.wc-block-cart-item__line-total,
.wc-block-cart-item__full-price {
display: block;
}
.wc-block-cart-item__full-price {
margin-right: 0;
}
.wc-block-cart-item__discount-badge {
display: inline-block;
}
}