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 11

💄 Improve the (broken) UI in the Styling-tab

Browse source
This commit is contained in:
Philipp Stracker 2025-01-15 19:41:46 +01:00
parent 55d1fd3699
commit 85794e77ce
No known key found for this signature in database
7 changed files with 198 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

1
modules/ppcp-settings/resources/css/components/_reusable.scss
View file

@ -4,6 +4,7 @@
@import './reusable-components/busy-state';
@import './reusable-components/button';
@import './reusable-components/fields';
@import './reusable-components/hstack';
@import './reusable-components/navigation';
@import './reusable-components/onboarding-header';
@import './reusable-components/payment-method-icons';

20
modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss Normal file
View file

@ -0,0 +1,20 @@
.components-flex {
display: flex;
-webkit-box-align: stretch;
align-items: stretch;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
.components-h-stack {
flex-direction: row;
justify-content: flex-start;
gap: 32px;
}
// Fix layout for checkboxes inside a flex-stack.
.components-checkbox-control >.components-base-control__field > .components-flex {
flex-direction: row;
gap: 12px;
}
}

51
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
View file

@ -27,6 +27,16 @@ $width-settings-panel: 422px;
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid var(--color-separators);
&:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom-style: none;
}
}
.components-radio-control__option {
min-width: 100px;
}
}
@ -65,46 +75,7 @@ $width-settings-panel: 422px;
color: $color-black;
}
}
.components-flex {
gap: 12px;
}
}
&__payment-method-checkboxes {
display: flex;
flex-direction: column;
gap: 24px;
}
}
.ppcp-r {
&__horizontal-control {
.components-flex {
flex-direction: row;
justify-content: flex-start;
gap: 32px;
}
.components-radio-control {
&__option {
gap: 12px;
input {
margin: 0;
}
label {
@include font(13, 20, 400);
color: $color-black;
}
}
input {
margin: 0;
}
}
}
// */
//*/
}