woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

💄 Fix the payment method item grid layout

Browse source
This commit is contained in:
Philipp Stracker 2025-01-24 17:01:03 +01:00
parent a43427ce29
commit 63185b39b7
No known key found for this signature in database
7 changed files with 39 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

50
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
View file

@ -1,58 +1,60 @@
.ppcp-r-settings-block__payment-methods {
&.ppcp-r-settings-block {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 16px;
// Grid layout.
.ppcp-r-settings-block.ppcp--grid > .ppcp--content {
--block-separator-gap: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
@media screen and (max-width: 767px) {
grid-template-columns: repeat(2, 1fr);
}
&__item {
@media screen and (max-width: 480px) {
grid-template-columns: 1fr;
}
}
// Theming & visual styles.
.ppcp-r-settings-block__payment-methods {
.ppcp-r-settings-block {
display: flex;
align-items: flex-start;
width: calc(100% / 3 - 32px / 3);
border: 1px solid $color-gray-300;
border-radius: var(--container-border-radius);
padding: 16px;
border-radius: 8px;
min-height: 200px;
@media screen and (max-width: 767px) {
width: calc(50% - 8px);
}
@media screen and (max-width: 480px) {
width: 100%;
}
&__inner {
.ppcp--method-inner {
display: flex;
flex-direction: column;
height: 100%;
}
&__title-wrapper {
.ppcp--method-title-wrapper {
display: flex;
align-items: center;
margin: 0 0 8px 0;
gap: 12px;
}
&__description {
.ppcp--method-description {
p {
@include font(13, 20, 400);
margin: 0;
color: $color-text-tertiary;
@include font(13, 20, 400);
}
margin: 0 0 12px 0;
}
&__title {
.ppcp--method-title {
@include font(13, 20, 500);
color: $color-black;
display: block;
}
&__settings {
.ppcp--method-settings {
line-height: 0;
transition: 0.2s ease-out transform;
transform: rotate(0deg);
@ -68,7 +70,7 @@
@include small-button;
}
&__footer {
.ppcp--method-footer {
display: flex;
justify-content: space-between;
align-items: center;

2
modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss
View file

@ -16,7 +16,7 @@
@media screen and (min-width: 960px) {
--card-width-header: 280px;
--card-width-content: 610px;
--card-gap: 48px;
--card-gap: 24px;
--card-layout: flex;
}