woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss

85 lines
1.4 KiB
SCSS
Raw Normal View History

// 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);
2024-10-29 12:39:44 +01:00
}
@media screen and (max-width: 480px) {
grid-template-columns: 1fr;
}
}
// Theming & visual styles.
.ppcp-r-settings-block__payment-methods {
.ppcp-r-settings-block {
2024-11-21 11:38:01 +01:00
display: flex;
align-items: flex-start;
border: 1px solid $color-gray-300;
border-radius: var(--container-border-radius);
padding: 16px;
min-height: 200px;
2024-10-29 12:39:44 +01:00
.ppcp--method-inner {
display: flex;
flex-direction: column;
height: 100%;
}
2024-10-29 12:39:44 +01:00
.ppcp--method-title-wrapper {
display: flex;
align-items: center;
margin: 0 0 8px 0;
gap: 12px;
}
.ppcp--method-description {
p {
@include font(13, 20, 400);
margin: 0;
color: $color-text-tertiary;
}
2024-11-21 11:38:01 +01:00
margin: 0 0 12px 0;
2024-11-21 11:38:01 +01:00
}
.ppcp--method-title {
@include font(13, 20, 500);
color: $color-black;
display: block;
}
2024-11-21 11:38:01 +01:00
.ppcp--method-settings {
2025-01-24 17:06:15 +01:00
padding: 0;
transition: 0.2s ease-out transform;
transform: rotate(0deg);
zoom: 1.005;
&:hover {
transform: rotate(45deg);
}
}
.ppcp--method-icon {
width: 30px;
height: 30px;
}
button.is-secondary {
@include small-button;
}
.ppcp--method-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
2024-11-21 11:38:01 +01:00
}
2024-10-29 12:39:44 +01:00
}