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 the component and styling for the Warning Message for Payment Method items

Browse source
This commit is contained in:
Daniel Dudzic 2025-02-25 12:01:52 +01:00
parent 7e3463394a
commit 07e1e3b2d2
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
5 changed files with 159 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -80,6 +80,11 @@
align-items: center;
margin-top: auto;
}
.ppcp--method-toggle-wrapper {
display: flex;
align-items: center;
}
}
}
@ -140,7 +145,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
z-index: 8;
border-radius: var(--container-border-radius);
pointer-events: auto;
opacity: 0;
@ -157,10 +162,110 @@
@include font(13, 20, 500);
color: $color-text-tertiary;
position: relative;
z-index: 51;
z-index: 9;
border: none;
a {
text-decoration: none;
}
}
/* Warning message */
.ppcp--method-warning {
position: relative;
display: inline-flex;
cursor: help;
svg {
fill: currentColor;
color: $color-warning;
}
/* Add invisible bridge to prevent gap between icon and popover */
&::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 15px;
background-color: transparent;
}
// Popover bubble
.ppcp--method-warning-message {
position: absolute;
bottom: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray-200;
border-radius: 4px;
z-index: 9;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
pointer-events: none;
&::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 12px;
height: 12px;
background: $color-white;
border-right: 1px solid $color-gray-200;
border-bottom: 1px solid $color-gray-200;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.01);
transform: rotate(45deg);
margin-top: -6px;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.ppcp--method-notice-list {
margin-bottom: 0;
}
}
&:hover .ppcp--method-warning-message,
& .ppcp--method-warning-message:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
// For RTL support
html[dir="rtl"] .ppcp--method-warning {
&::before {
left: auto;
right: 50%;
transform: translateX(50%);
}
.ppcp--method-warning-message {
left: auto;
right: 50%;
transform: translateX(50%);
&::after {
left: auto;
right: 50%;
margin-right: -6px;
margin-left: 0;
}
}
}