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 'temp/settings-ui'

Browse source 
# Conflicts:
#	modules/ppcp-settings/resources/css/_variables.scss
#	modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js
This commit is contained in:
Philipp Stracker 2024-12-09 11:27:41 +01:00
commit e9a37da091
No known key found for this signature in database
37 changed files with 617 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

15
modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss
View file

@ -33,5 +33,20 @@
margin: 6px 0px 0px 0px;
width: fit-content;
}
@media screen and (max-width: 480px) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-direction: column;
.ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
margin: 0px;
img:first-of-type {
margin: 0px;
}
}
}
}
}

111
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -1,64 +1,111 @@
.ppcp-r-navigation-container {
padding: 24px 48px;
position: sticky;
top: var(--wp-admin--admin-bar--height);
z-index: 10;
padding: 10px 48px;
margin: 0 -20px 48px -20px;
border-bottom: 1px solid $color-gray-300;
position: relative;
box-shadow: 0 -1px 0 0 $color-gray-300 inset;
background: var(--ppcp-color-app-bg);
transition: box-shadow 0.3s;
--wp-components-color-accent: #{$color-blueberry};
--color-text: #{$color-gray-900};
--color-disabled: #CCC;
.ppcp-r-navigation {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
button.is-primary {
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
&:not(:disabled) {
background-color: $color-blueberry;
.components-button {
@include font(13, 20, 400);
&.is-primary {
background-color: var(--wp-components-color-accent);
padding: 10px 16px;
justify-content: center;
margin: 0 0 0 12px;
border-radius: 2px;
&:disabled {
background-color: var(--color-disabled);
}
}
}
button.is-tertiary {
@include font(16, 24, 600);
color: $color-gray-900;
&:hover{
background-color:none;
background:none;
&.is-link {
color: var(--wp-components-color-accent);
text-decoration: none;
&:disabled {
color: var(--color-disabled);
}
}
&.is-title {
@include font(16, 24, 600);
color: var(--color-text);
.title {
margin-left: 18px;
}
.big {
@include font(20, 28, 400);
}
}
}
&--left {
&__link {
@include font(20, 28, 400);
color: $color-gray-900;
text-decoration: none;
padding: 0 0 0 18px;
}
align-items: center;
display: inline-flex;
}
&--right a{
@include font(13, 20, 400);
color: $color-blueberry;
text-decoration: none;
&--right {
.is-link {
padding: 10px 16px;
}
}
&--progress-bar {
position: absolute;
bottom: 0px;
bottom: 0;
left: 0;
background-color: $color-blueberry;
background-color: var(--wp-components-color-accent);
height: 4px;
transition: width 0.3s;
}
}
@media screen and (max-width: 480px) {
padding: 24px 35px;
&.is-scrolled {
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
}
@media screen and (max-width: 782px) {
padding: 10px 12px;
.ppcp-r-navigation {
flex-wrap: wrap;
row-gap: 8px;
white-space: nowrap;
&--right {
position: absolute;
right: 10px;
z-index: 10;
background: var(--ppcp-color-app-bg);
box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
}
&--progress-bar {
display: none;
height: 2px;
}
.components-button.is-title {
.title {
margin-left: 4px;
}
}
}
}

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

@ -31,5 +31,9 @@
@include font(14, 22, 400);
margin: 0 20%;
text-align: center;
@media screen and (max-width: 480px) {
margin: 0px;
}
}
}

3
modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss
View file

@ -20,8 +20,7 @@
justify-content: center;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
row-gap: 8px;
display: block;
}
}
}

18
modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss Normal file
View file

@ -0,0 +1,18 @@
body:has(.ppcp-r-container--settings),
body:has(.ppcp-r-container--onboarding) {
background-color: var(--ppcp-color-app-bg) !important;
.woocommerce-layout,
#woocommerce-layout__primary {
padding: 0 !important;
}
.notice,
.nav-tab-wrapper.woo-nav-tab-wrapper,
.woocommerce-layout__header,
.wrap.woocommerce form > h2,
#screen-meta-links {
display: none !important;
visibility: hidden;
}
}

8
modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss
View file

@ -1,8 +0,0 @@
body:has(.ppcp-r-container--onboarding) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout__header, .wrap.woocommerce form > h2, #screen-meta-links {
display: none !important;
visibility: hidden;
}
}

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

@ -1,7 +0,0 @@
body:has(.ppcp-r-container--settings) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links {
display: none !important;
}
}

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

@ -78,6 +78,7 @@
border-right: 0;
padding-right: 0;
padding-bottom: 8px;
margin: 0px;
}
}
}