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

Merge branch 'trunk' into PCP-3917-things-to-do-next-component-functionality

Browse source
This commit is contained in:
Emili Castells Guasch 2025-01-02 16:29:44 +01:00
commit 4d4ab689f5
121 changed files with 5004 additions and 3431 deletions
Download patch file Download diff file Expand all files Collapse all files

22
modules/ppcp-settings/resources/css/components/_app.scss Normal file
View file

@ -0,0 +1,22 @@
/**
* Global app-level styles
*/
.ppcp-r-app.loading {
height: 400px;
width: 400px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
text-align: center;
.ppcp-r-spinner-overlay {
display: flex;
flex-direction: column;
justify-content: center;
}
.ppcp-r-spinner-overlay__message {
transform: translate(0, 32px)
}
}

10
modules/ppcp-settings/resources/css/components/reusable-components/_busy-state.scss Normal file
View file

@ -0,0 +1,10 @@
.ppcp-r-busy-wrapper {
position: relative;
&.ppcp--is-loading {
pointer-events: none;
user-select: none;
--spinner-overlay-color: #fff4;
}
}

108
modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
View file

@ -1,48 +1,102 @@
%button-style-default {
background-color: var(--button-background);
color: var(--button-color);
box-shadow: inset 0 0 0 1px var(--button-border-color);
}
%button-style-hover {
background-color: var(--button-hover-background);
color: var(--button-hover-color);
box-shadow: inset 0 0 0 1px var(--button-hover-border-color);
}
%button-style-disabled {
background-color: var(--button-disabled-background);
color: var(--button-disabled-color);
box-shadow: inset 0 0 0 1px var(--button-disabled-border-color);
}
%button-shape-pill {
border-radius: 50px;
padding: 15px 32px;
height: auto;
}
button.components-button, a.components-button {
&.is-primary, &.is-secondary {
&:not(:disabled) {
background-color: $color-black;
}
/* default theme */
--button-color: var(--color-gray-900);
--button-background: transparent;
--button-border-color: transparent;
&:disabled {
color: $color-gray-700;
}
--button-hover-color: var(--button-color);
--button-hover-background: var(--button-background);
--button-hover-border-color: var(--button-border-color);
border-radius: 50px;
padding: 15px 32px;
height: auto;
--button-disabled-color: var(--color-gray-500);
--button-disabled-background: transparent;
--button-disabled-border-color: transparent;
/* style the button template */
&:not(:disabled) {
@extend %button-style-default;
}
&:hover {
@extend %button-style-hover;
}
&:disabled {
@extend %button-style-disabled;
}
/*
----------------------------------------------
Customize variants using the theming variables
*/
&.is-primary,
&.is-secondary {
@extend %button-shape-pill;
}
&.is-primary {
@include font(14, 18, 900);
&:not(:disabled) {
background-color: $color-blueberry;
color: $color-white;
}
--button-color: #{$color-white};
--button-background: #{$color-blueberry};
--button-disabled-color: #{$color-gray-100};
--button-disabled-background: #{$color-gray-500};
}
&.is-secondary:not(:disabled) {
border-color: $color-blueberry;
background-color: $color-white;
color: $color-blueberry;
&.is-secondary {
--button-color: #{$color-blueberry};
--button-background: #{$color-white};
--button-border-color: #{$color-blueberry};
&:hover {
background-color: $color-white;
background: none;
}
--button-disabled-color: #{$color-gray-600};
--button-disabled-background: #{$color-gray-100};
--button-disabled-border-color: #{$color-gray-400};
}
&.is-tertiary {
color: $color-blueberry;
&:hover {
color: $color-gradient-dark;
}
--button-color: #{$color-blueberry};
--button-hover-color: #{$color-gradient-dark};
&:focus:not(:disabled) {
border: none;
box-shadow: none;
}
}
&.small-button {
@include small-button;
}
}
.ppcp--is-loading {
button.components-button, a.components-button {
@extend %button-style-disabled;
}
}

8
modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss
View file

@ -57,6 +57,14 @@
&__content {
display: flex;
position: relative;
pointer-events: none;
*:not(a){
pointer-events: none;
}
a {
pointer-events: all;
}
}
&__title {

6
modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss
View file

@ -31,10 +31,4 @@
&__toggled-content {
margin-top: 24px;
}
&.ppcp--is-loading {
pointer-events: none;
--spinner-overlay-color: #fff4;
}
}

1
modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss
View file

@ -12,5 +12,6 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}

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

@ -11,10 +11,6 @@
}
// Todo List and Feature Items
.ppcp-r-tab-overview-todo {
margin: 0 0 48px 0;
}
.ppcp-r-todo-item {
position: relative;
display: flex;
@ -109,6 +105,8 @@
span {
font-weight: 500;
}
margin-top:24px;
}
}
@ -239,6 +237,10 @@
}
// Settings Card and Block Styles
.ppcp-r-settings-card {
margin: 0 0 48px 0;
}
.ppcp-r-settings-card__content {
> .ppcp-r-settings-block {
&:not(:last-child) {

6
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
View file

@ -20,12 +20,6 @@
margin: 0 0 24px 0;
}
.ppcp-r-toggle-block__toggled-content > button{
@include small-button;
color: $color-white;
border: none;
}
.client-id-error {
color: #cc1818;
margin: -16px 0 24px;