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

294 lines
5.1 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.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;
}
table.wc-block-cart-items th:first-child,
table.wc-block-cart-items td:first-child {
padding-left: 0;
}
table.wc-block-cart-items th:last-child,
table.wc-block-cart-items td:last-child {
padding-right: 0;
}
.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-item__remove-link {
@include link-button;
color: $core-grey-dark-400;
font-size: 14px;
line-height: 12px;
margin-top: 0.5em;
// 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;
}
.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 {
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-items td {
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.wc-block-cart-item__remove-link {
display: none;
}
.wc-block-cart-item__total {
// We position this td cell relative so we can use position: absolute for trash icon at top.
position: relative;
}
.wc-block-cart-item__remove-icon {
display: inline-block;
position: absolute;
top: $gap;
right: 0;
}
.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__total {
vertical-align: bottom;
}
.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__remove-link {
display: block;
}
.wc-block-cart-item__remove-icon {
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;
}
}