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

Commit

Permalink
Fix express button display in the Cart block
Browse files Browse the repository at this point in the history
When multiple buttons are displayed they don't appear stacked. This PR fixes a regression;
  • Loading branch information
ralucaStan committed Aug 11, 2023
1 parent 08b726c commit bb68d53
Showing 1 changed file with 24 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,42 @@ $border-radius: 5px;
.wc-block-components-express-payment {
margin: auto;
position: relative;
}

.wc-block-components-express-payment__event-buttons {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
grid-gap: 10px;
box-sizing: border-box;
width: 100%;
padding: 0;

.wc-block-components-express-payment__event-buttons {
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
text-align: center;
> li {
margin: 0;
overflow: hidden;
text-align: center;
width: 100%;

> li {
margin: 0;
> img {
width: 100%;

> img {
width: 100%;
height: 48px;
}
}
}

@include breakpoint("<782px") {
.wc-block-components-express-payment__event-buttons {
grid-template-columns: 1fr;
height: 48px;
}
}
}


.wc-block-components-express-payment--checkout {
/* stylelint-disable-next-line function-calc-no-unspaced-operator */
margin-top: calc($border-radius * 3);

.wc-block-components-express-payment__event-buttons {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
grid-gap: 10px;

@include breakpoint("<782px") {
grid-template-columns: 1fr;
}
}

.wc-block-components-express-payment__title-container {
display: flex;
flex-direction: row;
Expand Down

0 comments on commit bb68d53

Please sign in to comment.