woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

💄 Fix settings-container alignment & width

Browse source
This commit is contained in:
Philipp Stracker 2025-01-27 17:22:35 +01:00
parent 727462305b
commit 60f54d56ea
No known key found for this signature in database
3 changed files with 31 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

12
modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss
View file

@ -1,3 +1,8 @@
// Configuration for this module.
$width_container: 938px;
$width_header: 280px;
$width_gap: 24px;
/*
Styles the `SettingsCard` layout component.
@ -14,9 +19,9 @@
--card-layout: block;
@media screen and (min-width: 960px) {
--card-width-header: 280px;
--card-width-content: 610px;
--card-gap: 24px;
--card-width-header: #{$width_header};
--card-width-content: #{$width_container - $width_header - $width_gap};
--card-gap: #{$width_gap};
--card-layout: flex;
}
@ -46,6 +51,7 @@
&.ppcp--is-card {
max-width: var(--card-width-content);
border: 1px solid var(--color-gray-200);
width: 100%;
border-radius: 4px;
padding: 24px;
}

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

@ -1,28 +1,26 @@
.ppcp-r {
&-container {
max-width: var(--max-container-width, none);
margin-right: auto;
}
.ppcp-r-container {
max-width: var(--max-container-width, none);
margin: 0 auto 0 35px;
}
&-inner-container {
margin-left: auto;
margin-right: auto;
padding: 0 16px 48px;
box-sizing: content-box;
.ppcp-r-inner-container {
margin-left: auto;
margin-right: auto;
padding: 0 16px 48px;
box-sizing: content-box;
@media screen and (max-width: 480px) {
padding-bottom: 36px;
}
}
&-settings {
> * {
margin-bottom: $card-vertical-gap;
}
> *:not(:last-child) {
padding-bottom: $card-vertical-gap;
border-bottom: 1px solid $color-gray-200;
}
@media screen and (max-width: 480px) {
padding-bottom: 36px;
}
}
.ppcp-r-settings {
> * {
margin-bottom: $card-vertical-gap;
}
> *:not(:last-child) {
padding-bottom: $card-vertical-gap;
border-bottom: 1px solid $color-gray-200;
}
}

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

@ -4,7 +4,6 @@
max-width: var(--max-container-width);
transition: max-width 0.2s;
padding:0 35px;
.components-tab-panel__tabs {
box-shadow: 0 -1px 0 0 $color-gray-400 inset;