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

Implement the rest of the welcome step

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-10-23 08:56:47 +02:00
parent 02ba0b1d48
commit 32bf8a76ec
No known key found for this signature in database
GPG key ID: D005973F231309F6
46 changed files with 933 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,22 @@
button.components-button {
&.is-primary, &.is-secondary {
background-color: $color-blueberry;
border-radius: 2px;
padding: 14px 17px;
height: auto;
&:hover {
background: $gradient-header;
}
}
&.is-primary {
@include font(13, 16, 500);
}
&.is-secondary {
padding: 6px 12px;
@include font(13, 20, 500);
color: $color-white;
border: none;
}
}

51
modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss Normal file
View file

@ -0,0 +1,51 @@
.ppcp-r-onboarding-header{
margin: 0 0 32px 0;
&__gradient {
background: $gradient-header;
width: 100%;
height: 112px;
position: relative;
margin-bottom: 55px;
}
&__logo-wrapper {
width: 110px;
height: 110px;
background-color: $color-white;
border-radius: 110px;
position: absolute;
left: calc(50% - 55px);
bottom: -55px;
img {
width: 56px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&__content {
max-width: 426px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
&__title {
@include font(20, 28, 700);
color: $color-blue;
margin: 0 0 4px 0;
text-align: center;
}
&__description {
color: $color-gray-800;
@include font(14, 20, 400);
margin: 0;
text-align: center;
}
}

5
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss Normal file
View file

@ -0,0 +1,5 @@
.ppcp-r-payment-method-icons {
display: flex;
gap: 8px;
justify-content: center;
}

18
modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss Normal file
View file

@ -0,0 +1,18 @@
.ppcp-r-separator{
display: flex;
align-items: center;
&__line {
height: 1px;
background-color: $color-gray-600;
display: block;
width: 100%;
}
&__text {
color: $color-gray;
@include font(12, 24, 500, 0.8px);
text-transform: uppercase;
padding: 0 23px;
}
}

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

@ -0,0 +1,30 @@
.ppcp-r-toggle-block {
&__wrapper {
display: flex;
width: 100%;
gap: 12px;
}
&__switch {
.components-base-control__field > div {
display: block;
}
}
&__content-label {
@include font(14, 20, 600);
display: block;
margin: 0 0 4px 0;
color: $color-gray-900;
}
&__content-description {
@include font(13, 18, 400);
color: $color-gray-700;
margin: 0;
}
&__toggled-content {
margin-top: 24px;
}
}

18
modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss Normal file
View file

@ -0,0 +1,18 @@
.ppcp-r {
&-inner-container {
width: 620px;
max-width: 100%;
margin: 0 auto;
}
&-container {
box-shadow: $shadow-card;
max-width: 1024px;
}
&-card {
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
background-color: $color-white;
}
}

17
modules/ppcp-settings/resources/css/components/reusable-components/_text-control.scss Normal file
View file

@ -0,0 +1,17 @@
.components-base-control {
&__label {
color: $color-gray-900;
@include font(13, 16, 600);
margin: 0 0 8px 0;
text-transform: none;
}
&__input {
border: 1px solid $color-gray-700;
border-radius: 2px;
box-shadow: none;
&:focus{
border-color:$color-blueberry;
}
}
}