@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.wc-block-grid {
text-align: center;
}
.wc-block-grid__no-products {
padding: $gap-largest;
text-align: center;
width: 100%;
.wc-block-grid__no-products-image {
max-width: 150px;
margin: 0 auto 1em;
display: block;
color: inherit;
}
.wc-block-grid__no-products-title {
display: block;
margin: 0;
font-weight: bold;
}
.wc-block-grid__no-products-description {
display: block;
margin: 0.25em 0 1em 0;
}
}
.wc-block-grid__products {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0 (-$gap/2) $gap;
background-clip: padding-box;
}
.wc-block-grid__product {
box-sizing: border-box;
padding: 0;
margin: 0;
float: none;
width: auto;
position: relative;
text-align: center;
border-left: $gap/2 solid transparent;
border-right: $gap/2 solid transparent;
border-bottom: $gap solid transparent;
list-style: none;
}
.theme-twentytwenty .wc-block-grid,
.wc-block-grid {
&.has-aligned-buttons {
.wc-block-grid__product {
display: flex;
flex-direction: column;
}
.wc-block-grid__product > :last-child {
margin-top: auto;
margin-bottom: 0;
padding-bottom: $gap-small;
}
}
@for $i from 1 to 9 {
&.has-#{$i}-columns .wc-block-grid__product {
flex: 1 0 calc(#{ 100% / $i });
max-width: 100% / $i;
}
}
// Adjust font size as more cols are added.
&.has-6-columns .wc-block-grid__product {
font-size: 0.5em;
}
&.has-6-columns.alignfull,
&.has-5-columns {
.wc-block-grid__product {
font-size: 0.58em;
}
}
&.has-5-columns.alignfull,
&.has-4-columns:not(.alignwide):not(.alignfull) {
.wc-block-grid__product {
font-size: 0.75em;
}
}
&.has-3-columns:not(.alignwide):not(.alignfull) {
font-size: 0.92em;
}
}
@include breakpoint( "<480px" ) {
.wc-block-grid {
@for $i from 2 to 9 {
&.has-#{$i}-columns {
.wc-block-grid__products {
display: block;
}
.wc-block-grid__product {
margin-left: auto;
margin-right: auto;
flex: 1 0 100%;
max-width: 100%;
padding: 0;
}
}
}
}
}
@include breakpoint( "480px-600px" ) {
.wc-block-grid {
@for $i from 2 to 9 {
&.has-#{$i}-columns {
.wc-block-grid__product {
flex: 1 0 50%;
max-width: 50%;
padding: 0;
margin: 0 0 $gap-large 0;
}
.wc-block-grid__product:nth-child(odd) {
padding-right: $gap/2;
}
.wc-block-grid__product:nth-child(even) {
padding-left: $gap/2;
.wc-block-grid__product-onsale {
left: $gap/2;
}
}
}
}
}
}