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

Add a disabled visual state to the Payment Method component

Browse source
This commit is contained in:
Daniel Dudzic 2025-02-20 00:59:14 +01:00
parent df076e13bc
commit f2cb29e8e5
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 99 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -82,3 +82,82 @@
}
}
}
// Disabled state styling
.ppcp--method-item--disabled {
position: relative;
// Apply grayscale and disable interactions
.ppcp--method-inner {
opacity: 0.65;
filter: grayscale(0.9);
pointer-events: none;
transition: filter 0.2s ease;
}
// Override text colors
.ppcp--method-title {
color: $color-gray-600 !important;
}
.ppcp--method-description p {
color: $color-gray-500 !important;
}
.ppcp--method-disabled-message {
opacity: 0;
transform: translateY(-5px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
// Style all buttons and toggle controls
.components-button,
.components-form-toggle {
opacity: 0.5;
}
// Hover state - only blur the inner content
&:hover {
.ppcp--method-inner {
filter: blur(2px) grayscale(0.9);
}
.ppcp--method-disabled-message {
opacity: 1;
transform: translateY(0);
}
}
}
// Disabled overlay
.ppcp--method-disabled-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color-white, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
border-radius: var(--container-border-radius);
pointer-events: auto;
opacity: 0;
transition: opacity 0.2s ease;
}
.ppcp--method-item--disabled:hover .ppcp--method-disabled-overlay {
opacity: 1;
}
.ppcp--method-disabled-message {
padding: 14px 18px;
max-width: 80%;
text-align: center;
@include font(13, 20, 500);
color: $color-text-tertiary;
position: relative;
z-index: 51;
border: none;
}