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

fix/8651: Use body background color as the Cart block sticky footer background color (https://github.com/woocommerce/woocommerce-blocks/pull/9103) 

* Use body background color as the Cart block sticky footer background color

* Reduce the opacity of box-shadow.

* Fix the Proceed to Checkout button cut off.
This commit is contained in:
Dharmesh Patel 2023-04-19 22:45:10 +05:30 committed by GitHub
parent 7dcb7768b2
commit 32f43e3d84
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
View File

@ -86,6 +86,9 @@ const Block = ( {
</Button>
);
// Get the body background color to use as the sticky container background color.
const backgroundColor = getComputedStyle( document.body ).backgroundColor;
return (
<div className={ classnames( 'wc-block-cart__submit', className ) }>
{ positionReferenceElement }
@ -95,7 +98,10 @@ const Block = ( {
</div>
{ /* If the positionReferenceElement is below the viewport, display the sticky container. */ }
{ positionRelativeToViewport === 'below' && (
<div className="wc-block-cart__submit-container wc-block-cart__submit-container--sticky">
<div
className="wc-block-cart__submit-container wc-block-cart__submit-container--sticky"
style={ { backgroundColor } }
>
{ submitContainerContents }
</div>
) }

3
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
View File

@ -30,10 +30,11 @@
position: fixed;
width: 100%;
z-index: 9999;
box-sizing: border-box;
&::before {
box-shadow: 0 -10px 20px 10px currentColor;
color: color.adjust($gray-400, $alpha: -0.5);
color: color.adjust($gray-400, $alpha: -0.7);
content: "";
height: 100%;
left: 0;