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

Fix Gutenberg modal conflict around CSS specificity (#50387) 

* Increase specificity for modal frame styling

* Add changelog

* Address other modals within product form
This commit is contained in:
louwie17 2024-08-07 04:29:36 -03:00 committed by GitHub
parent f147bd9764
commit 7fd864d234
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-50058_gb_modal_conflict Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Increase specificity of modal styling to avoid Gutenberg styling conflicts.

8
packages/js/product-editor/src/components/add-products-modal/style.scss
View File

@ -1,5 +1,5 @@
.woocommerce-add-products-modal,
.woocommerce-reorder-products-modal {
.components-modal__frame.woocommerce-add-products-modal,
.components-modal__frame.woocommerce-reorder-products-modal {
@include breakpoint(">600px") {
width: calc(100% - 32px);
}
@ -11,7 +11,9 @@
width: 50%;
}
}
}
.woocommerce-add-products-modal,
.woocommerce-reorder-products-modal {
&__input-suffix {
margin-right: $grid-unit-15;
}

4
packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss
View File

@ -1,5 +1,7 @@
.woocommerce-new-attribute-modal {
.components-modal__frame.woocommerce-new-attribute-modal {
min-width: 75%;
}
.woocommerce-new-attribute-modal {
.components-notice.is-info {
margin-left: 0;
margin-right: 0;

4
packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
View File

@ -1,6 +1,8 @@
.woocommerce-product-custom-fields__create-modal {
.components-modal__frame.woocommerce-product-custom-fields__create-modal {
min-width: 75%;
}
.woocommerce-product-custom-fields__create-modal {
[role="table"] {
width: 100%;

2
packages/js/product-editor/src/components/modal-editor/style.scss
View File

@ -1,6 +1,6 @@
$modal-editor-height: 60px;
.woocommerce-modal-editor {
.components-modal__frame.woocommerce-modal-editor {
width: 100%;
height: 100%;
max-height: calc( 100% - 40px );

6
packages/js/product-editor/src/components/tags-field/create-tag-modal.scss
View File

@ -1,6 +1,8 @@
.woocommerce-create-new-tag-modal {
min-width: 650px;
overflow: visible;
&__wrapper {
min-width: 590px;
overflow: visible;
}
&__buttons {
margin-top: $gap-larger;