diff --git a/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml b/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml
index 6789ace243b84..fad3ed621cff9 100644
--- a/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml
+++ b/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml
@@ -20,7 +20,7 @@
$showWishlist = true;
$showCompare = true;
$showCart = true;
- $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
+ $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
?>
@@ -48,57 +48,55 @@
= $block->escapeHtml($_item->getName()) ?>
- getProductPriceHtml($_item, $type);
- ?>
-
= $block->getReviewsSummaryHtml($_item, $templateType) ?>
-
+ getProductPriceHtml($_item, $type); ?>
-
-
-
- isSaleable()): ?>
- getTypeInstance()->isPossibleBuyFromList($_item)): ?>
-
+
+
+
+
+ isSaleable()): ?>
+ getTypeInstance()->isPossibleBuyFromList($_item)): ?>
+
+
+ helper('Magento\Framework\Data\Helper\PostHelper');
+ $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
+ ?>
+
+
- helper('Magento\Framework\Data\Helper\PostHelper');
- $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
- ?>
-
+ getIsSalable()): ?>
+
= $block->escapeHtml(__('In stock')) ?>
+
+
= $block->escapeHtml(__('Out of stock')) ?>
+
-
- getIsSalable()): ?>
-
= $block->escapeHtml(__('In stock')) ?>
-
-
= $block->escapeHtml(__('Out of stock')) ?>
+
+
+
+
-
-
-
-
+
+
+
diff --git a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less
index 42b1bf2d0cc09..7181606090ccb 100644
--- a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less
+++ b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less
@@ -23,6 +23,15 @@
}
.block.widget {
+ .products-grid .product-item {
+ margin-left: 2%;
+ width: calc(~'(100% - 2%)/2');
+
+ &:nth-child(2n + 1) {
+ margin-left: 0;
+ }
+ }
+
.product-item-info {
width: auto;
}
@@ -60,6 +69,15 @@
.page-layout-3columns .block.widget .products-grid .product-item {
width: 100%/3;
}
+
+ .page-layout-1column .block.widget .products-grid .product-item {
+ margin-left: 2%;
+ width: calc(~'(100% - 4%)/3');
+
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
+ }
}
//
@@ -82,7 +100,16 @@
}
.page-layout-1column .block.widget .products-grid .product-item {
- width: 100%/4;
+ margin-left: 2%;
+ width: calc(~'(100% - 6%)/4');
+
+ &:nth-child(3n + 1) {
+ margin-left: 2%;
+ }
+
+ &:nth-child(4n + 1) {
+ margin-left: 0;
+ }
}
.page-layout-3columns .block.widget .products-grid .product-item {
@@ -96,11 +123,11 @@
}
.page-layout-1column .block.widget .products-grid .product-item {
- margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
- width: 100%/6;
+ margin-left: 2%;
+ width: calc(~'(100% - 8%)/5');
&:nth-child(4n + 1) {
- margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
+ margin-left: 2%;
}
&:nth-child(5n + 1) {
diff --git a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less
index 951ca89a07988..b7af69fd5ca82 100644
--- a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less
+++ b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less
@@ -29,15 +29,23 @@
.product {
&-items {
+ font-size: 0;
&:extend(.abs-reset-list all);
}
&-item {
+ font-size: 1.4rem;
vertical-align: top;
.products-grid & {
display: inline-block;
- width: 100%/2;
+ margin-left: 2%;
+ padding: 0;
+ width: calc(~'(100% - 2%) / 2');
+ }
+
+ &:nth-child(2n + 1) {
+ margin-left: 0;
}
&:extend(.abs-add-box-sizing all);
@@ -63,13 +71,26 @@
}
&-actions {
+ font-size: 0;
+
+ > * {
+ font-size: 1.4rem;
+ }
.actions-secondary {
+ display: inline-block;
+ font-size: 1.4rem;
+ vertical-align: middle;
+ white-space: nowrap;
> button.action {
.lib-button-reset();
}
> .action {
+ line-height: 35px;
+ text-align: center;
+ width: 35px;
+
&:extend(.abs-actions-addto-gridlist all);
&:before {
margin: 0;
@@ -80,6 +101,10 @@
}
}
}
+
+ .actions-primary {
+ display: inline-block;
+ }
}
&-description {
@@ -191,19 +216,6 @@
}
}
- .column.main {
- .product {
- &-items {
- margin-left: -@indent__base;
- }
-
- &-item {
- padding-left: @indent__base;
- }
- }
-
- }
-
.price-container {
.price {
.lib-font-size(14);
@@ -302,18 +314,10 @@
}
.actions-primary + .actions-secondary {
- display: table-cell;
- padding-left: 5px;
- white-space: nowrap;
- width: 50%;
> * {
white-space: normal;
}
}
-
- .actions-primary {
- display: table-cell;
- }
}
}
}
@@ -329,7 +333,13 @@
.page-products.page-layout-3columns {
.products-grid {
.product-item {
- width: 100%/3;
+ margin-left: 2%;
+ padding: 0;
+ width: calc(~'(100% - 4%) / 3');
+
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
}
}
}
@@ -343,7 +353,13 @@
.page-products {
.products-grid {
.product-item {
- width: 100%/3;
+ margin-left: 2%;
+ padding: 0;
+ width: calc(~'(100% - 4%) / 3');
+
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
}
}
}
@@ -394,9 +410,13 @@
}
.product-item {
- margin-left: calc(~'(100% - 4 * 23.233%) / 3');
+ margin-left: 2%;
padding: 0;
- width: 23.233%;
+ width: calc(~'(100% - 6%) / 4');
+
+ &:nth-child(3n + 1) {
+ margin-left: 2%;
+ }
&:nth-child(4n + 1) {
margin-left: 0;
diff --git a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less
index 3cb3d4af53189..d477c08fc9553 100644
--- a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less
+++ b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less
@@ -18,7 +18,7 @@
@product-name-link__text-decoration__visited: @link__hover__text-decoration;
@product-item__hover__background-color: @color-white;
-@product-item__hover__box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3);
+@product-item__hover__box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3);
@product-price__muted__color: @color-gray40;
@@ -34,15 +34,22 @@
.product {
&-items {
+ font-size: 0;
&:extend(.abs-reset-list all);
}
&-item {
+ font-size: 1.4rem;
vertical-align: top;
.products-grid & {
display: inline-block;
- width: 100%/2.04;
+ margin-left: 2%;
+ width: calc(~'(100% - 2%)/2');
+ }
+
+ &:nth-child(2n + 1) {
+ margin-left: 0;
}
&:extend(.abs-add-box-sizing all);
@@ -68,8 +75,17 @@
}
&-actions {
+ font-size: 0;
+
+ > * {
+ font-size: 1.4rem;
+ }
.actions-secondary {
+ display: inline-block;
+ font-size: 1.4rem;
+ vertical-align: middle;
+
> button.action {
.lib-button-reset();
}
@@ -79,12 +95,19 @@
&:before {
margin: 0;
}
+ line-height: 35px;
+ text-align: center;
+ width: 35px;
span {
&:extend(.abs-visually-hidden all);
}
}
}
+
+ .actions-primary {
+ display: inline-block;
+ }
}
&-description {
@@ -291,7 +314,7 @@
border: 1px solid @color-gray-light2;
border-top: none;
left: 0;
- margin: 9px 0 0 -1px;
+ margin: 10px 0 0 -1px;
padding: 0 9px 9px;
position: absolute;
right: -1px;
@@ -307,13 +330,13 @@
}
.actions-primary + .actions-secondary {
- display: table-cell;
- padding-left: 10px;
+ display: inline-block;
vertical-align: middle;
- width: 50%;
> .action {
- margin-right: 10px;
+ line-height: 35px;
+ text-align: center;
+ width: 35px;
&:last-child {
margin-right: 0;
@@ -322,7 +345,7 @@
}
.actions-primary {
- display: table-cell;
+ display: inline-block;
}
}
@@ -363,7 +386,7 @@
.products-grid {
.product-item {
margin-bottom: @indent__base;
- width: 100%/3.04;
+ width: 100%/3;
}
}
@@ -374,10 +397,24 @@
.page-products.page-layout-3columns {
.products-grid {
.product-item {
- width: 100%/3.04;
+ margin-left: 2%;
+ width: calc(~'(100% - 4%) / 3');
+
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
}
}
}
+
+ .block.widget .products-grid .product-item,
+ .page-layout-1column .block.widget .products-grid .product-item,
+ .page-layout-3columns .block.widget .products-grid .product-item {
+ .product-item-inner {
+ box-shadow: 3px 6px 4px 0 rgba(0, 0, 0, .3);
+ margin: 9px 0 0 -1px;
+ }
+ }
}
//
@@ -388,7 +425,12 @@
.page-products {
.products-grid {
.product-item {
- width: 100%/3.04;
+ margin-left: 2%;
+ width: calc(~'(100% - 4%) / 3');
+
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
}
}
}
@@ -441,9 +483,13 @@
}
.product-item {
- margin-left: calc(~'(100% - 4 * 24.439%) / 3');
+ margin-left: 2%;
padding: 5px;
- width: 24.09%;
+ width: calc(~'(100% - 6%)/4');
+
+ &:nth-child(3n + 1) {
+ margin-left: 2%;
+ }
&:nth-child(4n + 1) {
margin-left: 0;