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

Merge pull request #2821 from woocommerce/PCP-3946-convert-existing-payment-methods-screen-into-the-new-design-two-columns

Browse source 
Settings UI: Migrate to two column design
This commit is contained in:
Emili Castells 2024-11-21 14:11:23 +01:00 • committed by GitHub
commit 7bf579c508
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 202 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,21 +17,35 @@
}
&-settings-card {
background-color: $color-white;
padding: 48px;
border-radius: 8px;
box-shadow: 0 2px 4px 0 #0000001A;
@media screen and (min-width: 960px) {
display: flex;
gap: 48px;
}
@media screen and (max-width: 480px) {
padding: 24px;
}
&__header {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 18px;
border-bottom: 2px solid $color-gray-700;
margin-bottom: 32px;
@media screen and (min-width: 960px) {
width: 280px;
flex-shrink: 0;
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
&__content {
@media screen and (min-width: 960px) {
flex: 1;
}
}
&__title {

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

@ -0,0 +1,7 @@
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;
}
}

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

@ -0,0 +1,8 @@
.ppcp-r-tabs.settings,
.ppcp-r-container--settings {
--max-container-width: var(--max-width-settings);
.ppcp-r-inner-container {
max-width: var(--max-container-width);
}
}