Merge pull request #28343 from woocommerce/update/twenty-twenty-one-home-page-css

Add home page compatibility for Twenty Twenty-One theme
This commit is contained in:
Christopher Allford 2020-11-24 13:45:45 -08:00 committed by GitHub
commit c3a940be6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 11 deletions

View File

@ -249,7 +249,6 @@ a.button {
}
#main {
.woocommerce-error,
.woocommerce-info {
font-family: $headings;
@ -1935,13 +1934,52 @@ a.reset_variations {
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
box-sizing: border-box;
word-break: break-word;
min-width: 12vw;
&.columns-2 {
li.product {
width: calc(100% / 2 - 16px) !important;
}
}
&.columns-3 {
li.product {
width: calc(100% / 3 - 16px) !important;
}
}
&.columns-4 {
li.product {
width: calc(100% / 4 - 16px) !important;
}
}
&.columns-5 {
li.product {
width: calc(100% / 5 - 16px) !important;
}
}
&.columns-6 {
li.product {
width: calc(100% / 6 - 16px) !important;
}
}
li.product {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 5em;
margin: 0 8px 16px 8px;
box-sizing: border-box;
img.attachment-woocommerce_thumbnail {
height: auto !important;
@ -1951,11 +1989,18 @@ a.reset_variations {
li.product-category {
a {
text-align: center;
text-align: left;
text-decoration: none;
h2.woocommerce-loop-category__title {
margin-top: 0.4rem;
font-family: $headings;
font-size: 3rem;
font-size: 1rem;
.count {
background-color: transparent;
color: $body-color;
}
}
}
}
@ -1981,7 +2026,9 @@ a.reset_variations {
ul.products[class*=columns-] {
li.product {
width: auto;
width: auto !important;
margin-left: auto;
margin-right: auto;
}
}
}
@ -1993,18 +2040,13 @@ a.reset_variations {
.woocommerce-page {
ul.products[class*=columns-] {
justify-content: center;
li.product {
width: 50%;
}
li.product:nth-of-type(2n+1) {
padding: 0 2vw 3em 0;
}
li.product:nth-of-type(2n) {
padding: 0 0 3em 2vw;
}
}
.onsale {
@ -2254,6 +2296,18 @@ a.reset_variations {
}
}
/**
* Home page
*/
.home #main {
[class*="woocommerce columns-"] {
word-break: break-word;
max-width: var(--responsive--aligndefault-width);
margin-left: auto;
margin-right: auto;
}
}
/**
* Shop page
*/