woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

🔀 Merge branch 'trunk'

Browse source 
# Conflicts:
#	modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcFlow.js
#	modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js
This commit is contained in:
Philipp Stracker 2025-02-04 15:59:07 +01:00
commit 0894d9e691
No known key found for this signature in database
34 changed files with 1130 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

107
modules/ppcp-settings/resources/css/components/screens/_settings.scss
View file

@ -15,12 +15,44 @@
}
// Todo List and Feature Items
.ppcp-r-todo-items {
display: flex;
flex-direction: column;
}
.ppcp-r-todo-item {
position: relative;
display: flex;
align-items: center;
gap: 18px;
width: 100%;
border-bottom: 1px solid $color-gray-300;
padding-bottom: 16px;
padding-top: 16px;
opacity: 1;
transform: translateY(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:first-child, &.is-dismissing:first-child + .ppcp-r-todo-item {
padding-top: 0;
}
&:last-child,
&:not(.is-dismissing):has(+ .is-dismissing:last-child) {
border-bottom: none;
padding-bottom: 0;
}
&.is-dismissing {
opacity: 0;
transform: translateY(-4px);
height: 0;
margin: 0;
padding: 0;
border: 0;
.ppcp-r-todo-item__inner {
height: 0;
padding: 0;
margin: 0;
}
}
&:hover {
cursor: pointer;
@ -32,15 +64,6 @@
}
}
&:not(:last-child) {
border-bottom: 1px solid $color-gray-400;
padding-bottom: 16px;
}
&:not(:first-child) {
padding-top: 16px;
}
&.is-completed {
.ppcp-r-todo-item__icon {
border-style: solid;
@ -68,17 +91,46 @@
&__inner {
position: relative;
height: auto;
overflow: hidden;
display: flex;
align-items: center;
gap: 18px;
width: 100%;
padding-right: 36px;
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
&__close {
margin-left: auto;
&__dismiss {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: $color-gray-400;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
&:hover {
cursor: pointer;
color: $color-blueberry;
background-color: $color-gray-100;
color: $color-gray-700;
}
.dashicons {
font-size: 14px;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
}
@ -104,6 +156,7 @@
border-radius: 50%;
width: 24px;
height: 24px;
flex-shrink: 0;
}
}
@ -180,3 +233,23 @@
gap: 48px;
}
.ppcp-highlight {
animation: ppcp-highlight-fade 2s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid $color-blueberry;
border-radius: var(--container-border-radius);
position: relative;
z-index: 1;
}
@keyframes ppcp-highlight-fade {
0%, 20% {
background-color: rgba($color-blueberry, 0.08);
border-color: $color-blueberry;
border-width: 1px;
}
100% {
background-color: transparent;
border-color: $color-gray-300;
border-width: 1px;
}
}