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

Allow customer account block to center align (https://github.com/woocommerce/woocommerce-blocks/pull/9750) 

* Allow customer account block to center align

* Convert to using Flexbox

* Use mixins to DRY

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
This commit is contained in:
Roy Ho 2023-06-22 05:41:06 -07:00 committed by GitHub
parent ce253c24ec
commit a81a8b830d
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/woocommerce-blocks/assets/js/blocks/customer-account/editor.scss
View File

@ -1,4 +1,19 @@
@import "./style";
.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.alignright {
@include flex-justify-content(flex-end);
}
.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.alignleft {
@include flex-justify-content(flex-start);
}
.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.aligncenter {
@include flex-justify-content(center);
}
.wc-block-editor-customer-account { .wc-block-editor-customer-account {
display: flex;
padding: em($gap-smaller) em($gap-smaller); padding: em($gap-smaller) em($gap-smaller);
} }

19
plugins/woocommerce-blocks/assets/js/blocks/customer-account/style.scss
View File

@ -1,4 +1,23 @@
@mixin flex-justify-content($justification) {
float: none;
justify-content: $justification;
}
.is-layout-constrained > .wp-block-woocommerce-customer-account.alignright {
@include flex-justify-content(flex-end);
}
.is-layout-constrained > .wp-block-woocommerce-customer-account.alignleft {
@include flex-justify-content(flex-start);
}
.is-layout-constrained > .wp-block-woocommerce-customer-account.aligncenter {
@include flex-justify-content(center);
}
.wp-block-woocommerce-customer-account { .wp-block-woocommerce-customer-account {
display: flex;
a { a {
text-decoration: none !important; text-decoration: none !important;
align-items: center; align-items: center;