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

Improve the warning in the new UI for multiple warnings

Browse source
This commit is contained in:
Daniel Dudzic 2025-02-25 21:59:42 +01:00
parent f657676832
commit 1e7d0cfb68
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
8 changed files with 74 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -187,7 +187,7 @@
}
/* Add invisible bridge to prevent gap between icon and popover */
&::before {
&:before {
content: '';
position: absolute;
bottom: 100%;
@ -202,6 +202,9 @@
.ppcp--method-warning-message {
position: absolute;
bottom: calc(100% + 15px);
display: flex;
flex-direction: column;
gap: 10px;
left: 50%;
transform: translateX(-50%);
width: 250px;
@ -216,7 +219,7 @@
transition: opacity 0.2s ease, visibility 0.2s;
pointer-events: none;
&::after {
&:after {
content: '';
position: absolute;
top: 100%;
@ -249,6 +252,14 @@
background: inherit;
color: inherit;
}
code {
font-size: 12px;
}
ul {
list-style: inside;
}
}
&:hover .ppcp--method-warning-message,
@ -261,7 +272,7 @@
// For RTL support
html[dir="rtl"] .ppcp--method-warning {
&::before {
&:before {
left: auto;
right: 50%;
transform: translateX(50%);
@ -272,7 +283,7 @@ html[dir="rtl"] .ppcp--method-warning {
right: 50%;
transform: translateX(50%);
&::after {
&:after {
left: auto;
right: 50%;
margin-right: -6px;