Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fixes to Twenty Twenty product grid styles #2573

Merged
merged 5 commits into from Jun 2, 2020
Merged

Fixes to Twenty Twenty product grid styles #2573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
97e6bdc
Remove underline from discounted prices
Aljullu May 27, 2020
f37f2c4
Fix position of on sale badge in Twenty Twenty
Aljullu May 27, 2020
41de929
Make sure we reset styles from Core
Aljullu May 27, 2020
c17ce19
Fix image on sale badge not correctly positioned
Aljullu May 28, 2020
5bd32ce
Fix sale badge alignment when they are on in the right
Aljullu May 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/js/atomic/blocks/product/sale-badge/block.js
View file
Open in desktop
Expand Up @@ -17,6 +17,7 @@ const ProductSaleBadge = ( { className, product, align } ) => {
return (
<div
className={ classnames(
'wc-block-component__sale-badge',
className,
alignClass,
`${ layoutStyleClassPrefix }__product-onsale`
Expand Down
26 changes: 21 additions & 5 deletions assets/js/base/components/product-list/style.scss
View file
Open in desktop
Expand Up @@ -402,6 +402,10 @@
del {
opacity: 0.5;
}

ins {
text-decoration: none;
}
}

.wc-block-grid__product-rating {
Expand All @@ -416,21 +420,33 @@
}

.wc-block-grid__products .wc-block-grid__product-onsale {
position: absolute;
right: 4px;
top: 4px;
display: inline-block;
background: $twentytwenty-highlights-color;
color: #fff;
font-family: $twentytwenty-headings;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
text-transform: uppercase;
z-index: 1;
font-size: 1.5rem;
}

// Override style from WC Core that set its position to absolute.
// These rulesets can be removed once https://github.com/woocommerce/woocommerce/pull/26516 is released.
.wc-block-grid__products .wc-block-component__sale-badge {
position: static;
}
.wc-block-grid__products .wc-block-grid__product-image .wc-block-component__sale-badge {
position: absolute;
}

// These styles are not applied to the All Products atomic block, so it can be positioned normally.
.wc-block-grid__products .wc-block-grid__product-onsale:not(.wc-block-component__sale-badge) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we need to specifically target the image overlay sale badge to get it top-right. It's not working for me in Chrome:

Screen Shot 2020-05-28 at 9 24 42 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I missed that. Should be fixed in 940ab69.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dang - I'm still seeing the issue?!

Screen Shot 2020-05-29 at 3 14 45 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, my bad, I forgot they could be aligned to the left and to the center. The CSS selector I wrote was only targeting them when they were right-aligned. 🤦

Should be fixed with 20b9ea4.

position: absolute;
right: 4px;
top: 4px;
margin: 0;
padding: 1rem;
z-index: 1;
}

@media only screen and (min-width: 768px) {
Expand Down