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 ba835be commit 1e1841a
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 1e1841a

Please sign in to comment.