style marketplace suggestions list banner

This commit is contained in:
haszari 2019-02-13 14:49:28 +13:00
parent e7adedb262
commit 165a462fa2
4 changed files with 27 additions and 5 deletions

View File

@ -1 +1 @@
.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:right;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center}
.marketplace-list-banner h2{color:#555}.marketplace-list-banner td{vertical-align:middle}.marketplace-list-banner td.marketplace-list-linkout{text-align:left;padding-left:3em}@media screen and (max-width:782px){.marketplace-list-banner{display:none}}.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:right;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center}

View File

@ -1 +1 @@
.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:left;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center}
.marketplace-list-banner h2{color:#555}.marketplace-list-banner td{vertical-align:middle}.marketplace-list-banner td.marketplace-list-linkout{text-align:right;padding-right:3em}@media screen and (max-width:782px){.marketplace-list-banner{display:none}}.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:left;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center}

View File

@ -3,6 +3,28 @@
* Styling for in-product marketplace suggestions.
*/
.marketplace-list-banner {
h2 {
color: #555;
}
td {
vertical-align: middle;
}
td.marketplace-list-linkout {
text-align: right;
padding-right: 3em;
}
}
@media screen and (max-width: 782px) {
.marketplace-list-banner {
display: none;
}
}
.marketplace-suggestions-container {
text-align: center;

View File

@ -61,9 +61,9 @@
{
slug: 'products-list-enhancements-category',
context: 'products-list-inline',
content: '<tr><td></td>' +
'<td colspan="6"><h2>Looking to optimize your product pages?</h2></td>' +
'<td colspan="4">' +
content: '<tr class="marketplace-list-banner"><td></td>' +
'<td colspan="5"><h2>Looking to optimize your product pages?</h2></td>' +
'<td class="marketplace-list-linkout" colspan="4">' +
'<a class="button" href="https://woocommerce.com/product-category/woocommerce-extensions/product-extensions/">' +
'Explore enhancements</a></td></tr>'
}