Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix the Layout for Shipping and Billing Address Forms in the Checkout Block (https://github.com/woocommerce/woocommerce-blocks/pull/11486) 

* Fix empty spaces in the address form

* Fix checkout layout for Japan and Hungary

* Added some comments in CSS
This commit is contained in:
Saad Tarhi 2023-11-10 08:07:49 +01:00 committed by GitHub
parent d881fe208d
commit 2182457673
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
View File

@ -18,11 +18,11 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow
.wc-block-components-text-input, .wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input { .wc-block-components-state-input {
flex: 0 0 calc(50% - #{$gap-smaller}); flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space
box-sizing: border-box; box-sizing: border-box;
&:nth-of-type(2), &:nth-of-type(2),
@ -33,7 +33,8 @@
.wc-block-components-address-form__company, .wc-block-components-address-form__company,
.wc-block-components-address-form__address_1, .wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2 { .wc-block-components-address-form__address_2,
.wc-block-components-country-input {
flex: 0 0 100%; flex: 0 0 100%;
} }
} }