woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

💄 Adjust SCSS to address new component hierarchy

Browse source
This commit is contained in:
Philipp Stracker 2024-10-28 17:57:05 +01:00
parent 2bf9832844
commit 0f523d7aae
No known key found for this signature in database
6 changed files with 18 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ppcp-settings/resources/css/_variables.scss
View file

@ -17,11 +17,13 @@ $color-gradient-dark: #001435;
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
$max-width-onboarding: 1024px;
$max-width-onboarding-content: 662px;
$max-width-settings: 938px;
#ppcp-settings-container {
--max-width-settings: #{$max-width-settings};
--max-width-onboarding: #{$max-width-onboarding};
--max-width-onboarding-content: #{$max-width-onboarding-content};
--max-tabbar-width: var(--max-width-settings);
--max-container-width: var(--max-width-settings);
}

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

@ -1,9 +1,13 @@
.ppcp-r {
&-container {
max-width: var(--max-container-width, none);
margin-left: auto;
margin-right: auto;
}
&-inner-container {
width: 652px;
max-width: 100%;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
box-sizing: border-box;
}

2
modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss
View file

@ -2,7 +2,7 @@
--wp-components-color-accent: #{$color-blueberry};
--wp-admin-border-width-focus: 3px;
max-width: var(--max-tabbar-width);
max-width: var(--max-container-width);
margin: 0 auto;
transition: max-width 0.2s;

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

@ -2,6 +2,11 @@
@import './onboarding/step-business';
@import './onboarding/step-products';
.ppcp-r-tabs.onboarding {
--max-tabbar-width: var(--max-width-onboarding);
.ppcp-r-tabs.onboarding,
.ppcp-r-container--onboarding {
--max-container-width: var(--max-width-onboarding);
.ppcp-r-inner-container {
max-width: var(--max-width-onboarding-content);
}
}

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

@ -1,6 +1,5 @@
.ppcp-r-page-business {
.ppcp-r-inner-container {
width: 622px;
padding-bottom: 84px;
@media screen and (max-width: 480px) {
padding-bottom: 42px;

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

@ -20,7 +20,6 @@
.ppcp-r-page-products {
.ppcp-r-inner-container {
width: 622px;
padding-bottom: 48px;
@media screen and (max-width: 480px) {
padding-bottom: 24px;