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

Show three Express Payments buttons in-line (https://github.com/woocommerce/woocommerce-blocks/pull/8601) 

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
This commit is contained in:
Niels Lange 2023-03-02 19:47:18 +07:00 committed by Albert Juhé Lluveras
parent 3043d55654
commit 0c4618de5a
1 changed files with 11 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
View File

@ -7,9 +7,10 @@ $border-radius: 5px;
.wc-block-components-express-payment__event-buttons {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
grid-gap: 10px;
box-sizing: border-box;
width: 100%;
padding: 0;
margin: 0;
@ -18,6 +19,7 @@ $border-radius: 5px;
> li {
margin: 0;
width: 100%;
> img {
width: 100%;
@ -25,6 +27,12 @@ $border-radius: 5px;
}
}
}
@include breakpoint("<782px") {
.wc-block-components-express-payment__event-buttons {
grid-template-columns: 1fr;
}
}
}
.wc-block-components-express-payment--checkout {
@ -85,28 +93,6 @@ $border-radius: 5px;
margin-bottom: em($gap);
}
}
.wc-block-components-express-payment__event-buttons {
> li {
box-sizing: border-box;
display: inline-block;
width: 50%;
}
> li:nth-child(even) {
padding-left: $gap-smaller;
}
> li:nth-child(odd) {
padding-right: $gap-smaller;
}
> li:only-child {
display: block;
width: 100%;
padding: 0;
}
}
}
.wc-block-components-express-payment--cart {