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 remote-tracking branch 'origin/temp/settings-ui' into PCP-3976-make-the-wizard-responsive

Browse source
This commit is contained in:
Narek Zakarian 2024-12-05 15:13:50 +04:00
commit 8d6182da91
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
19 changed files with 468 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

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;
}
}
}
}

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;
}
}