Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes to Twenty Twenty product grid styles (https://github.com/woocommerce/woocommerce-blocks/pull/2573) 

* Remove underline from discounted prices

* Fix position of on sale badge in Twenty Twenty

* Make sure we reset styles from Core

* Fix image on sale badge not correctly positioned

* Fix sale badge alignment when they are on in the right
This commit is contained in:
Albert Juhé Lluveras 2020-06-02 09:18:34 +02:00 committed by GitHub
parent 3e0a2c580e
commit 31b5f4e00c
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/block.js
View File

@ -17,6 +17,7 @@ const ProductSaleBadge = ( { className, product, align } ) => {
return (
<div
className={ classnames(
'wc-block-component__sale-badge',
className,
alignClass,
`${ layoutStyleClassPrefix }__product-onsale`

26
plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
View File

@ -402,6 +402,10 @@
del {
opacity: 0.5;
}
ins {
text-decoration: none;
}
}
.wc-block-grid__product-rating {
@ -416,10 +420,6 @@
}
.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;
@ -427,10 +427,26 @@
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) {
position: absolute;
right: 4px;
top: 4px;
margin: 0;
padding: 1rem;
z-index: 1;
}
@media only screen and (min-width: 768px) {