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 HStack/VStack CSS

Browse source
This commit is contained in:
Philipp Stracker 2025-01-27 13:55:31 +01:00
parent 3dc7f090ba
commit 7f260b690d
No known key found for this signature in database
4 changed files with 30 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,6 @@
@import './reusable-components/button';
@import './reusable-components/elements';
@import './reusable-components/fields';
@import './reusable-components/hstack';
@import './reusable-components/navigation';
@import './reusable-components/onboarding-header';
@import './reusable-components/payment-method-icons';
@ -16,6 +15,7 @@
@import './reusable-components/settings-toggle-block';
@import './reusable-components/settings-wrapper';
@import './reusable-components/spinner-overlay';
@import './reusable-components/stack';
@import './reusable-components/tab-navigation';
@import './reusable-components/title-badge';
@import './reusable-components/welcome-docs';

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

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

23
modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss Normal file
View file

@ -0,0 +1,23 @@
.ppcp-r-app {
.components-flex {
display: flex;
-webkit-box-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
}
.components-flex.components-h-stack,
.ppcp--horizontal {
flex-direction: row;
align-items: center;
}
.ppcp--horizontal {
justify-content: space-between;
}
.components-flex.components-v-stack {
flex-direction: column;
justify-content: center;
}
}

6
modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss
View file

@ -5,3 +5,9 @@
overflow: hidden;
text-overflow: ellipsis;
}
// Fix layout for checkboxes inside a flex-stack.
.components-checkbox-control > .components-base-control__field > .components-flex {
flex-direction: row;
gap: 12px;
}