diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css index 28a7c85378a..f7b02e57072 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css @@ -1 +1 @@ -.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:right;text-align:center;margin-left:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-left:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-left:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-left:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-left:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-left:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:right;width:50%;margin-left:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-right:auto;margin-left:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{left:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-left:0}.wc-product-display-settings .settings-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-right:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-left:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 40px 8px 45px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 15px;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label .product-category-count{margin-left:10px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:0 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-right:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:-webkit-linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%);background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-left:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;left:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:right;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-left:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-right:25px;padding-left:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file +.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:right;text-align:center;margin-left:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-left:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-left:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-left:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-left:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-left:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:right;width:50%;margin-left:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-right:auto;margin-left:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{left:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-left:0}.wc-product-display-settings .settings-heading{display:flex;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-right:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:flex;align-items:center;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-left:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 40px 8px 45px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 15px 10px 0;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 10px 0 15px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-right:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-left:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;left:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:flex;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:right;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-left:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-right:25px;padding-left:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css index 95fcdbda00f..183df109183 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css @@ -1 +1 @@ -.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:left;text-align:center;margin-right:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-right:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-right:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-right:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-right:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-right:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:left;width:50%;margin-right:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-left:auto;margin-right:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{right:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-right:0}.wc-product-display-settings .settings-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-left:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-right:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 45px 8px 40px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 15px;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label .product-category-count{margin-right:10px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:0 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-left:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:-webkit-linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%);background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-right:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;right:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:left;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-right:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-left:25px;padding-right:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file +.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:left;text-align:center;margin-right:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-right:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-right:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-right:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-right:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-right:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:left;width:50%;margin-right:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-left:auto;margin-right:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{right:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-right:0}.wc-product-display-settings .settings-heading{display:flex;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-left:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:flex;align-items:center;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-right:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 45px 8px 40px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 0 10px 15px;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 15px 0 10px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-left:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-right:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;right:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:flex;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:left;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-right:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-left:25px;padding-right:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss index 188410ba47c..a4a7887641a 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss @@ -224,16 +224,12 @@ margin-top: -1px; > label { - padding: 10px 15px; + padding: 10px 0 10px 15px; background: #fff; - - .product-category-count { - margin-right: 10px; - } } &.product-category-accordion-open { - margin: 0 0 5px; + margin: -1px 0 5px; border-bottom-width: 1px; &:not(:first-child) { @@ -251,7 +247,7 @@ cursor: pointer; color: #666; margin: 0; - padding: 0; + padding: 0 15px 0 10px; border: none; border-radius: 0; background: none; diff --git a/plugins/woocommerce-blocks/assets/js/products-block.js b/plugins/woocommerce-blocks/assets/js/products-block.js index 855709006e9..14437d4c496 100644 --- a/plugins/woocommerce-blocks/assets/js/products-block.js +++ b/plugins/woocommerce-blocks/assets/js/products-block.js @@ -1189,6 +1189,8 @@ Object.defineProperty(exports, "__esModule", { var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } @@ -1232,21 +1234,24 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C /** * Handle checkbox toggle. * - * @param Event object evt + * @param Checked? boolean checked + * @param Categories array categories */ _createClass(ProductsCategorySelect, [{ key: "checkboxChange", - value: function checkboxChange(evt) { + value: function checkboxChange(checked, categories) { var selectedCategories = this.state.selectedCategories; - if (evt.target.checked && !selectedCategories.includes(parseInt(evt.target.value, 10))) { - selectedCategories.push(parseInt(evt.target.value, 10)); - } else if (!evt.target.checked) { - selectedCategories = selectedCategories.filter(function (category) { - return category !== parseInt(evt.target.value, 10); - }); + selectedCategories = selectedCategories.filter(function (category) { + return !categories.includes(category); + }); + + if (checked) { + var _selectedCategories; + + (_selectedCategories = selectedCategories).push.apply(_selectedCategories, _toConsumableArray(categories)); } this.setState({ @@ -1353,20 +1358,56 @@ var ProductCategoryList = withAPIData(function (props) { return __('No categories found'); } + var handleCategoriesToCheck = function handleCategoriesToCheck(evt, parent, categories) { + var ids = getCategoryChildren(parent, categories).map(function (category) { + return category.id; + }); + + ids.push(parent.id); + + checkboxChange(evt.target.checked, ids); + }; + + var getCategoryChildren = function getCategoryChildren(parent, categories) { + var children = []; + + categories.filter(function (category) { + return category.parent === parent.id; + }).forEach(function (category) { + children.push(category); + children.push.apply(children, _toConsumableArray(getCategoryChildren(category, categories))); + }); + + return children; + }; + + var categoryHasChildren = function categoryHasChildren(parent, categories) { + return !!getCategoryChildren(parent, categories).length; + }; + var AccordionButton = function AccordionButton(_ref3) { - var category = _ref3.category; + var category = _ref3.category, + categories = _ref3.categories; var icon = 'arrow-down-alt2'; - if (openAccordion === category) { + if (openAccordion === category.id) { icon = 'arrow-up-alt2'; } + var style = null; + + if (!categoryHasChildren(category, categories)) { + style = { + visibility: 'hidden' + }; + }; + return wp.element.createElement( "button", { onClick: function onClick() { - return accordionToggle(category); - }, type: "button", className: "product-category-accordion-toggle" }, + return accordionToggle(category.id); + }, style: style, type: "button", className: "product-category-accordion-toggle" }, wp.element.createElement(Dashicon, { icon: icon }) ); }; @@ -1393,7 +1434,9 @@ var ProductCategoryList = withAPIData(function (props) { id: 'product-category-' + category.id, value: category.id, checked: selectedCategories.includes(category.id), - onChange: checkboxChange + onChange: function onChange(evt) { + return handleCategoriesToCheck(evt, category, categories); + } }), " ", category.name, @@ -1402,7 +1445,7 @@ var ProductCategoryList = withAPIData(function (props) { { className: "product-category-count" }, category.count ), - 0 === category.parent && wp.element.createElement(AccordionButton, { category: category.id }) + 0 === category.parent && wp.element.createElement(AccordionButton, { category: category, categories: categories }) ), wp.element.createElement(CategoryTree, { categories: categories, parent: category.id }) ); diff --git a/plugins/woocommerce-blocks/assets/js/views/category-select.jsx b/plugins/woocommerce-blocks/assets/js/views/category-select.jsx index 0035b4989ab..2ee9291d987 100644 --- a/plugins/woocommerce-blocks/assets/js/views/category-select.jsx +++ b/plugins/woocommerce-blocks/assets/js/views/category-select.jsx @@ -26,15 +26,16 @@ export class ProductsCategorySelect extends React.Component { /** * Handle checkbox toggle. * - * @param Event object evt + * @param Checked? boolean checked + * @param Categories array categories */ - checkboxChange( evt ) { + checkboxChange( checked, categories ) { let selectedCategories = this.state.selectedCategories; - if ( evt.target.checked && ! selectedCategories.includes( parseInt( evt.target.value, 10 ) ) ) { - selectedCategories.push( parseInt( evt.target.value, 10 ) ); - } else if ( ! evt.target.checked ) { - selectedCategories = selectedCategories.filter( category => category !== parseInt( evt.target.value, 10 ) ); + selectedCategories = selectedCategories.filter( category => ! categories.includes( category ) ); + + if ( checked ) { + selectedCategories.push( ...categories ); } this.setState( { @@ -118,15 +119,48 @@ const ProductCategoryList = withAPIData( ( props ) => { return __( 'No categories found' ); } - const AccordionButton = ( { category } ) => { + const handleCategoriesToCheck = ( evt, parent, categories ) => { + let ids = getCategoryChildren( parent, categories ).map( category => { + return category.id; + } ); + + ids.push( parent.id ); + + checkboxChange( evt.target.checked, ids ); + }; + + const getCategoryChildren = ( parent, categories ) => { + let children = []; + + categories.filter( ( category ) => category.parent === parent.id ).forEach( function( category ) { + children.push( category ); + children.push( ...getCategoryChildren( category, categories ) ); + } ); + + return children; + }; + + const categoryHasChildren = ( parent, categories ) => { + return !! getCategoryChildren( parent, categories ).length; + }; + + const AccordionButton = ( { category, categories } ) => { let icon = 'arrow-down-alt2'; - if ( openAccordion === category ) { + if ( openAccordion === category.id ) { icon = 'arrow-up-alt2'; } + let style = null; + + if ( ! categoryHasChildren( category, categories ) ) { + style = { + visibility: 'hidden', + }; + }; + return ( - ); @@ -144,11 +178,11 @@ const ProductCategoryList = withAPIData( ( props ) => { id={ 'product-category-' + category.id } value={ category.id } checked={ selectedCategories.includes( category.id ) } - onChange={ checkboxChange } + onChange={ ( evt ) => handleCategoriesToCheck( evt, category, categories ) } /> { category.name } { category.count } { 0 === category.parent && - + }