Variations - Remove separator between buttons and empty state screen (#38123)

* Remove separator between buttons and empty state screen

* Add changelog

* Fix separator style
This commit is contained in:
Fernando Marichal 2023-05-09 12:43:25 -03:00 committed by GitHub
parent 4c9bcbc30e
commit 765a87a741
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 23 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Variations - Remove separator between buttons and empty state screen

View File

@ -1071,27 +1071,38 @@ $default-line-height: 18px;
} }
} }
.add-variation-container { #variable_product_options_inner {
@extend %container-defaults; > .toolbar:not(.expand-close-hidden) {
flex-direction: column; border-bottom: 1px solid #eee;
justify-content: center;
align-items: center;
gap: 24px;
position: relative;
.arrow-image-wrapper {
position: absolute;
top: 10px;
left: 87px;
} }
.add-variation-container {
p {
@extend %centered-text;
}
&.hidden {
display: none; display: none;
} }
&.no-variations {
> .toolbar:not(.expand-close-hidden) {
border-bottom: none;
}
.add-variation-container {
display: flex;
@extend %container-defaults;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
position: relative;
.arrow-image-wrapper {
position: absolute;
top: 10px;
left: 87px;
}
p {
@extend %centered-text;
}
}
}
} }
} }
@ -5505,13 +5516,15 @@ img.help_tip {
* WooCommerce meta boxes * WooCommerce meta boxes
*/ */
.wc-metaboxes-wrapper { .wc-metaboxes-wrapper {
:not(#variable_product_options_inner) {
.toolbar:not(.expand-close-hidden) {
border-bottom: 1px solid #eee;
}
}
.toolbar { .toolbar {
margin: 0 !important; margin: 0 !important;
border-top: 1px solid white; border-top: 1px solid white;
padding: 9px 12px !important; padding: 9px 12px !important;
&:not(.expand-close-hidden) {
border-bottom: 1px solid #eee;
}
&:first-child { &:first-child {
border-top: 0; border-top: 0;

View File

@ -1331,10 +1331,14 @@ jQuery( function ( $ ) {
'.woocommerce_variations' '.woocommerce_variations'
); );
if ( parseInt( wrapper.attr( 'data-total' ) ) > 0 ) { if ( parseInt( wrapper.attr( 'data-total' ) ) > 0 ) {
$( '.add-variation-container' ).addClass( 'hidden' ); $( '#variable_product_options_inner' ).removeClass(
'no-variations'
);
$( '#field_to_edit' ).removeClass( 'hidden' ); $( '#field_to_edit' ).removeClass( 'hidden' );
} else { } else {
$( '.add-variation-container' ).removeClass( 'hidden' ); $( '#variable_product_options_inner' ).addClass(
'no-variations'
);
$( '#field_to_edit' ).addClass( 'hidden' ); $( '#field_to_edit' ).addClass( 'hidden' );
} }
}, },