From 08b6a7fa8b9f10b0c73ff9c4cebc08e048b8d7a3 Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Tue, 17 Nov 2015 12:45:16 +0200 Subject: [PATCH 1/7] MAGETWO-45095: Product base images aren't centered in Wish List on Storefront - Formatting and sorting --- .../web/css/source/module/_listings.less | 425 ++++++++++-------- .../web/css/source/module/_listings.less | 341 +++++++------- 2 files changed, 407 insertions(+), 359 deletions(-) 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 23ef879b1f6c4..018a0afdf2ed1 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 @@ -20,230 +20,228 @@ // // -// Common -//-------------------------------------- +// Common +// _____________________________________________ & when (@media-common = true) { - -// Product Lists -.products { - margin: @indent__l 0; -} - -.product { - &-items { - &:extend(.abs-reset-list all); + // Product Lists + .products { + margin: @indent__l 0; } - &-item { - vertical-align: top; - .products-grid & { - width: 100%/2; - display: inline-block; - } - &:extend(.abs-add-box-sizing all); - - &-name { - &:extend(.abs-product-link all); - display: block; - margin: @indent__xs 0; - word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + + .product { + &-items { + &:extend(.abs-reset-list all); } + &-item { + vertical-align: top; + .products-grid & { + width: 100%/2; + display: inline-block; + } + &:extend(.abs-add-box-sizing all); - &-info { - width: 152px; - max-width: 100%; - .page-products & { - width: 240px; + &-name { + &:extend(.abs-product-link all); + display: block; + margin: @indent__xs 0; + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; } - } - &-actions { - display: none; - .actions-secondary { - > .action { - &:extend(.abs-actions-addto-gridlist all); - &:before { - margin: 0; - } - span { - &:extend(.abs-visually-hidden all); + &-info { + width: 152px; + max-width: 100%; + .page-products & { + width: 240px; + } + } + + &-actions { + display: none; + .actions-secondary { + > .action { + &:extend(.abs-actions-addto-gridlist all); + &:before { + margin: 0; + } + span { + &:extend(.abs-visually-hidden all); + } } } } - } - &-description { - margin: @indent__m 0; - } - .product-reviews-summary { - .rating-summary { - margin: 0 4px 0 0; + &-description { + margin: @indent__m 0; } - .reviews-actions { - margin-top: 5px; - text-transform: lowercase; - font-size: @font-size__s; + .product-reviews-summary { + .rating-summary { + margin: 0 4px 0 0; + } + .reviews-actions { + font-size: @font-size__s; + margin-top: 5px; + text-transform: lowercase; + } } - } - .price-box { - margin: @indent__s 0 @indent__m; - .price { - .lib-font-size(14); - font-weight: bold; - } - .price-label { - font-size: @font-size__s; - &:after { - content: ":"; + .price-box { + margin: @indent__s 0 @indent__m; + .price { + .lib-font-size(14); + font-weight: bold; + } + .price-label { + font-size: @font-size__s; + &:after { + content: ':'; + } } } - } - .special-price, - .minimal-price { - .price { - .lib-font-size(14); - font-weight: bold; - } - .price-wrapper { - display: inline-block; + .special-price, + .minimal-price { + .price { + .lib-font-size(14); + font-weight: bold; + } + .price-wrapper { + display: inline-block; + } + .price-including-tax + .price-excluding-tax { + display: block; + } } - .price-including-tax + .price-excluding-tax { + + .special-price { display: block; } - } - .special-price { - display: block; - } - - .old-price { - .price { - font-weight: @font-weight__regular; + .old-price { + .price { + font-weight: @font-weight__regular; + } } - } - .minimal-price { - .price-container { - display: block; + .minimal-price { + .price-container { + display: block; + } } - } - .minimal-price-link { - margin-top: 5px; - .price-label { - .lib-css(color, @link__color); - .lib-font-size(14); - } - .price { - font-weight: @font-weight__regular; + .minimal-price-link { + margin-top: 5px; + .price-label { + .lib-css(color, @link__color); + .lib-font-size(14); + } + .price { + font-weight: @font-weight__regular; + } } - } - .minimal-price-link, - .price-excluding-tax, - .price-including-tax { - white-space: nowrap; - display: block; - } + .minimal-price-link, + .price-excluding-tax, + .price-including-tax { + display: block; + white-space: nowrap; + } - .price-from, - .price-to { - margin: 0; - } + .price-from, + .price-to { + margin: 0; + } - .tocompare { - .lib-icon-font-symbol( + .tocompare { + .lib-icon-font-symbol( @icon-compare-empty - ); - } + ); + } - .tocart { - white-space: nowrap; + .tocart { + white-space: nowrap; + } } } -} -.column.main { - .product { - &-items { - margin-left: -20px; - } - &-item { - padding-left: 20px; + .column.main { + .product { + &-items { + margin-left: -20px; + } + &-item { + padding-left: 20px; + } } } -} - -.price-container { - .price { - .lib-font-size(14); - } - .price-including-tax + .price-excluding-tax, - .weee { - margin-top: 5px; - } - - .price-including-tax + .price-excluding-tax, - .weee, - .price-including-tax + .price-excluding-tax .price, - .weee .price, - .weee + .price-excluding-tax:before, - .weee + .price-excluding-tax .price { - .lib-font-size(11); - } + .price-container { + .price { + .lib-font-size(14); + } - .weee { - &:before { - content: "("attr(data-label) ": "; + .price-including-tax + .price-excluding-tax, + .weee { + margin-top: 5px; } - &:after { - content: ")"; + + .price-including-tax + .price-excluding-tax, + .weee, + .price-including-tax + .price-excluding-tax .price, + .weee .price, + .weee + .price-excluding-tax:before, + .weee + .price-excluding-tax .price { + .lib-font-size(11); } - + .price-excluding-tax { + + .weee { &:before { - content: attr(data-label) ": "; + content: '('attr(data-label) ': '; + } + &:after { + content: ')'; + } + + .price-excluding-tax { + &:before { + content: attr(data-label) ': '; + } } } } -} -.products-list { - .product { - &-item { - display: table; - width: 100%; + .products-list { + .product { + &-item { + display: table; + width: 100%; - &-info { - display: table-row; - } - &-photo { - width: 1%; - padding: 0 @indent__l @indent__l 0; - vertical-align: top; - display: table-cell; - } - &-details { - vertical-align: top; - display: table-cell; + &-info { + display: table-row; + } + &-photo { + display: table-cell; + padding: 0 @indent__l @indent__l 0; + vertical-align: top; + width: 1%; + } + &-details { + display: table-cell; + vertical-align: top; + } } } + .product-image-wrapper { + &:extend(.abs-reset-image-wrapper all); + } } - .product-image-wrapper { - &:extend(.abs-reset-image-wrapper all); - } -} - } // // Mobile -// --------------------------------------------- +// _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .products-list .product { @@ -273,50 +271,95 @@ } .actions-primary + .actions-secondary { display: table-cell; - width: 50%; padding-left: 5px; white-space: nowrap; + width: 50%; > * { white-space: normal; } > .action { } } - .actions-primary { display: table-cell; } + .actions-primary { + display: table-cell; + } } } } - .products-grid .product-item { width: 100%/3 } - .page-layout-1column .products-grid .product-item { width: 100%/3 } - .page-layout-3columns .products-grid .product-item { width: 100%/3 } - .page-products .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/3 } + .products-grid .product-item { + width: 100%/3; + } + + .page-layout-1column .products-grid .product-item { + width: 100%/3; + } + + .page-layout-3columns .products-grid .product-item { + width: 100%/3; + } + + .page-products .products-grid .product-item { + width: 100%/3; + } + + .page-products.page-layout-1column .products-grid .product-item { + width: 100%/3; + } + + .page-products.page-layout-3columns .products-grid .product-item { + width: 100%/3; + } } // // Desktop -// --------------------------------------------- +// _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { - .page-products .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/4 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/2 } + .page-products .products-grid .product-item { + width: 100%/3; + } + + .page-products.page-layout-1column .products-grid .product-item { + width: 100%/4; + } + + .page-products.page-layout-3columns .products-grid .product-item { + width: 100%/2; + } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { - .products-grid .product-item { width: 100%/5 } - .page-layout-1column .products-grid .product-item { width: 100%/6 } - .page-layout-3columns .products-grid .product-item { width: 100%/4 } - .page-products .products-grid .product-items { margin: 0; } + .products-grid .product-item { + width: 100%/5; + } + + .page-layout-1column .products-grid .product-item { + width: 100%/6; + } + + .page-layout-3columns .products-grid .product-item { + width: 100%/4; + } + + .page-products .products-grid .product-items { + margin: 0; + } + .page-products .products-grid .product-item { - width: 23.233%; margin-left: calc(~"(100% - 4 * 23.233%) / 3"); padding: 0; + width: 23.233%; &:nth-child(4n+1) { margin-left: 0; } } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/5 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 } + + .page-products.page-layout-1column .products-grid .product-item { + width: 100%/5; + } + + .page-products.page-layout-3columns .products-grid .product-item { + width: 100%/4; + } } 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 909549d36b2ce..55b61309bf5b4 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 @@ -20,199 +20,200 @@ // // -// Common -//-------------------------------------- +// Common +// _____________________________________________ & when (@media-common = true) { - -// Product Lists -.products { - margin: @indent__l 0; -} -.product { - &-items { - &:extend(.abs-reset-list all); + // Product Lists + .products { + margin: @indent__l 0; } - &-item { - vertical-align: top; - .products-grid & { - width: 100%/2; - display: inline-block; - } - &:extend(.abs-add-box-sizing all); - - &-name { - &:extend(.abs-product-link all); - display: block; - margin: @indent__xs 0; - word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + .product { + &-items { + &:extend(.abs-reset-list all); } + &-item { + vertical-align: top; + .products-grid & { + width: 100%/2; + display: inline-block; + } + &:extend(.abs-add-box-sizing all); - &-info { - width: 152px; - max-width: 100%; - .page-products & { - width: 240px; + &-name { + &:extend(.abs-product-link all); + display: block; + margin: @indent__xs 0; + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; } - } - &-actions { - display: none; - .actions-secondary { - > .action { - &:extend(.abs-actions-addto all); - &:before { - margin: 0; - } - span { - &:extend(.abs-visually-hidden all); + &-info { + max-width: 100%; + width: 152px; + .page-products & { + width: 240px; + } + } + + &-actions { + display: none; + .actions-secondary { + > .action { + &:extend(.abs-actions-addto all); + &:before { + margin: 0; + } + span { + &:extend(.abs-visually-hidden all); + } } } } - } - &-description { - margin: @indent__m 0; - } - .product-reviews-summary { - .rating-summary { - margin: 0 4px 0 0; + &-description { + margin: @indent__m 0; } - .reviews-actions { - margin-top: 5px; - text-transform: lowercase; - font-size: @font-size__s; + .product-reviews-summary { + .rating-summary { + margin: 0 4px 0 0; + } + .reviews-actions { + font-size: @font-size__s; + margin-top: 5px; + text-transform: lowercase; + } } - } - .price-box { - margin: @indent__s 0 @indent__m; - .price { - font-weight: bold; - } - .price-label { - font-size: @font-size__s; - .lib-css(color, @text__color__muted); + .price-box { + margin: @indent__s 0 @indent__m; + .price { + font-weight: bold; + } + .price-label { + .lib-css(color, @text__color__muted); + font-size: @font-size__s; + } } - } - .old-price { - margin: @indent__xs 0; - .price { - font-weight: normal; + .old-price { + margin: @indent__xs 0; + .price { + font-weight: normal; + } } - } - .minimal-price { - .price-container { - display: block; + .minimal-price { + .price-container { + display: block; + } } - } - .minimal-price-link { - margin-top: @indent__xs; - } + .minimal-price-link { + margin-top: @indent__xs; + } - .price-from, - .price-to { - margin: 0; - } + .price-from, + .price-to { + margin: 0; + } - .tocompare { - .lib-icon-font-symbol( + .tocompare { + .lib-icon-font-symbol( @icon-compare-full - ); - } - .tocart { - white-space: nowrap; - border-radius: 0; - .lib-font-size(13px); - line-height: 1; - padding-top: @indent__s; - padding-bottom: @indent__s; + ); + } + .tocart { + .lib-font-size(13px); + border-radius: 0; + line-height: 1; + padding-bottom: @indent__s; + padding-top: @indent__s; + white-space: nowrap; + } } } -} -.column.main { - .product { - &-items { - margin-left: -20px; - } - &-item { - padding-left: 20px; + .column.main { + .product { + &-items { + margin-left: -20px; + } + &-item { + padding-left: 20px; + } } } -} - -.price-container { - .price { - .lib-font-size(14); - } - .price-including-tax + .price-excluding-tax, - .weee { - margin-top: 5px; - } - - .price-including-tax + .price-excluding-tax, - .weee, - .price-including-tax + .price-excluding-tax .price, - .weee .price, - .weee + .price-excluding-tax:before, - .weee + .price-excluding-tax .price { - .lib-font-size(11); - } + .price-container { + .price { + .lib-font-size(14); + } - .weee { - &:before { - content: "("attr(data-label) ": "; + .price-including-tax + .price-excluding-tax, + .weee { + margin-top: 5px; } - &:after { - content: ")"; + + .price-including-tax + .price-excluding-tax, + .weee, + .price-including-tax + .price-excluding-tax .price, + .weee .price, + .weee + .price-excluding-tax:before, + .weee + .price-excluding-tax .price { + .lib-font-size(11); } - + .price-excluding-tax { + + .weee { &:before { - content: attr(data-label) ": "; + content: '(' attr(data-label) ': '; + } + &:after { + content: ')'; + } + + .price-excluding-tax { + &:before { + content: attr(data-label) ': '; + } } } } -} -.products-list { - .product { - &-item { - display: table; - width: 100%; + .products-list { + .product { + &-item { + display: table; + width: 100%; - &-info { - display: table-row; - } - &-photo { - width: 1%; - padding: 0 @indent__l @indent__l 0; - vertical-align: top; - display: table-cell; - } - &-details { - vertical-align: top; - display: table-cell; + &-info { + display: table-row; + } + + &-photo { + display: table-cell; + padding: 0 @indent__l @indent__l 0; + vertical-align: top; + width: 1%; + } + + &-details { + display: table-cell; + vertical-align: top; + } } } - } - .product-image-wrapper { - &:extend(.abs-reset-image-wrapper all); - } -} + .product-image-wrapper { + &:extend(.abs-reset-image-wrapper all); + } + } } // -// Mobile -//-------------------------------------- +// Mobile +// _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .products-list .product { @@ -231,14 +232,16 @@ .products-grid & { &:hover, &.active { - margin: -10px; - padding: 9px; - border: 1px solid @color-gray-light2; @_shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3); + + .lib-css(background, @color-white); .lib-css(box-shadow, @_shadow); + border: 1px solid @color-gray-light2; + margin: -10px; + padding: 9px; position: relative; z-index: 2; - .lib-css(background, @color-white); + .product-item-inner { display: block; } @@ -247,17 +250,18 @@ } .product-item-inner { .products-grid & { - position: absolute; - left: 0; - right: -1px; - z-index: 2; + @_shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3); + .lib-css(background, @color-white); - padding: 0 9px 9px 9px; - margin: 9px 0 0 -1px; + .lib-css(box-shadow, @_shadow); border: 1px solid @color-gray-light2; border-top: none; - @_shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3); - .lib-css(box-shadow, @_shadow); + left: 0; + margin: 9px 0 0 -1px; + padding: 0 9px 9px 9px; + position: absolute; + right: -1px; + z-index: 2; } } @@ -268,8 +272,8 @@ } .actions-primary + .actions-secondary { display: table-cell; - width: 50%; padding-left: 10px; + width: 50%; > .action { margin-right: 10px; &:last-child { @@ -277,7 +281,9 @@ } } } - .actions-primary { display: table-cell; } + .actions-primary { + display: table-cell; + } } .products-grid { @@ -307,9 +313,8 @@ } // -// -// Desktop -//-------------------------------------- +// Desktop +// _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .page-products .products-grid .product-item { width: 100%/3 } @@ -322,9 +327,9 @@ .page-layout-3columns .products-grid .product-item { width: 100%/4 } .page-products .products-grid .product-items { margin: 0; } .page-products .products-grid .product-item { - width: 24.439%; margin-left: calc(~"(100% - 4 * 24.439%) / 3"); padding: 0; + width: 24.439%; &:nth-child(4n+1) { margin-left: 0; } From 106385057e5f5c81b9dc90ce7feae185cdc0af7f Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Wed, 18 Nov 2015 13:44:54 +0200 Subject: [PATCH 2/7] MAGETWO-45095: Product base images aren't centered in Wish List on Storefront --- .../web/css/source/module/_listings.less | 126 ++++++++++++------ .../web/css/source/_module.less | 1 - .../web/css/source/module/_listings.less | 122 ++++++++++++++--- .../web/css/source/_module.less | 7 +- 4 files changed, 185 insertions(+), 71 deletions(-) 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 018a0afdf2ed1..631d52e144ac4 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 @@ -291,24 +291,16 @@ width: 100%/3; } - .page-layout-1column .products-grid .product-item { - width: 100%/3; - } - - .page-layout-3columns .products-grid .product-item { - width: 100%/3; - } - - .page-products .products-grid .product-item { - width: 100%/3; - } - - .page-products.page-layout-1column .products-grid .product-item { - width: 100%/3; - } - - .page-products.page-layout-3columns .products-grid .product-item { - width: 100%/3; + .page-products, + .page-layout-1column, + .page-layout-3columns, + .page-products.page-layout-1column, + .page-products.page-layout-3columns { + .products-grid { + .product-item { + width: 100%/3; + } + } } } @@ -317,49 +309,95 @@ // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { - .page-products .products-grid .product-item { - width: 100%/3; + .page-products { + .products-grid { + .product-item { + width: 100%/3; + } + } } - .page-products.page-layout-1column .products-grid .product-item { - width: 100%/4; + .page-products.page-layout-1column { + .products-grid { + .product-item { + width: 100%/4; + } + } } - .page-products.page-layout-3columns .products-grid .product-item { - width: 100%/2; + .page-products.page-layout-3columns { + .products-grid { + .product-item { + width: 100%/2; + } + } } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { - .products-grid .product-item { - width: 100%/5; + .products-grid { + .product-item { + width: 100%/5; + } } - .page-layout-1column .products-grid .product-item { - width: 100%/6; + .page-layout-1column { + .products-grid { + .product-item { + width: 100%/6; + } + } } - .page-layout-3columns .products-grid .product-item { - width: 100%/4; + .page-layout-3columns { + .products-grid { + .product-item { + width: 100%/4; + } + } } - .page-products .products-grid .product-items { - margin: 0; - } + .page-products { + .products-grid { + .product-items { + margin: 0; + } + .product-item { + margin-left: calc(~"(100% - 4 * 23.233%) / 3"); + padding: 0; + width: 23.233%; - .page-products .products-grid .product-item { - margin-left: calc(~"(100% - 4 * 23.233%) / 3"); - padding: 0; - width: 23.233%; - &:nth-child(4n+1) { - margin-left: 0; + &:nth-child(4n+1) { + margin-left: 0; + } + } } } - .page-products.page-layout-1column .products-grid .product-item { - width: 100%/5; - } + .page-products { + &.page-layout-1column { + .products-grid { + .product-item { + margin-left: 0; + width: 100%/5; + } + } + } + + &.page-layout-3columns { + .products-grid { + .product-item { + margin-left: 1%; + width: 32.667%; - .page-products.page-layout-3columns .products-grid .product-item { - width: 100%/4; + &:nth-child(3n) { + margin-left: 1%; + } + + &:nth-child(3n+1) { + margin-left: 0; + } + } + } + } } } diff --git a/app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/_module.less index 49720b30a2cf6..b279d55a41e8a 100644 --- a/app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/_module.less @@ -231,7 +231,6 @@ .products-grid { .product-item { margin-bottom: @indent__base; - width: 50%; } .product-item-actions { margin: 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 55b61309bf5b4..f9b9ad930a493 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 @@ -300,16 +300,22 @@ .products-grid { .product-item { - width: 100%/3; margin-bottom: @indent__base; + width: 100%/3; } } - .page-layout-1column .products-grid .product-item { width: 100%/3 } - .page-layout-3columns .products-grid .product-item { width: 100%/3 } - .page-products .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/3 } + .page-products, + .page-layout-1column, + .page-layout-3columns, + .page-products.page-layout-1column, + .page-products.page-layout-3columns { + .products-grid { + .product-item { + width: 100%/3; + } + } + } } // @@ -317,23 +323,97 @@ // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { - .page-products .products-grid .product-item { width: 100%/3 } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/4 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/2 } + .page-products { + .products-grid { + .product-item { + width: 100%/3; + } + } + } + + .page-products.page-layout-1column { + .products-grid { + .product-item { + width: 100%/4; + } + } + } + + .page-products.page-layout-3columns { + .products-grid { + .product-item { + width: 100%/2; + } + } + } } + .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { - .products-grid .product-item { width: 100%/5 } - .page-layout-1column .products-grid .product-item { width: 100%/6 } - .page-layout-3columns .products-grid .product-item { width: 100%/4 } - .page-products .products-grid .product-items { margin: 0; } - .page-products .products-grid .product-item { - margin-left: calc(~"(100% - 4 * 24.439%) / 3"); - padding: 0; - width: 24.439%; - &:nth-child(4n+1) { - margin-left: 0; + + .products-grid { + .product-item { + width: 100%/5; + } + } + + .page-layout-1column { + .products-grid { + .product-item { + width: 100%/6; + } + } + } + + .page-layout-3columns { + .products-grid { + .product-item { + width: 100%/4; + } + } + } + + .page-products { + .products-grid { + .product-items { + margin: 0; + } + .product-item { + margin-left: calc(~"(100% - 4 * 24.439%) / 3"); + padding: 0; + width: 24.439%; + + &:nth-child(4n+1) { + margin-left: 0; + } + } + } + } + + .page-products { + &.page-layout-1column { + .products-grid { + .product-item { + margin-left: 0; + width: 100%/5; + } + } + } + + &.page-layout-3columns { + .products-grid { + .product-item { + margin-left: 1%; + width: 32.667%; + + &:nth-child(3n) { + margin-left: 1%; + } + + &:nth-child(3n+1) { + margin-left: 0; + } + } + } } } - .page-products.page-layout-1column .products-grid .product-item { width: 100%/5 } - .page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 } } diff --git a/app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less index 595ba043af612..2298b56791497 100644 --- a/app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less @@ -244,10 +244,6 @@ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .wishlist-index-index { .products-grid { - .product-item { - margin-bottom: 20px; - width: 50%; - } .product-item-actions { margin: 0; } @@ -344,9 +340,10 @@ } .product-item { margin-bottom: @indent__base; - margin-left: calc(~"(100% - 4 * 24%) / 3"); + margin-left: calc(~"(100% - 4 * 24.439%) / 3"); padding: 0; width: 24.439%; + &:nth-child(4n+1) { margin-left: 0; } From 48d9643a0188807cca645e969c7752e60a7b174f Mon Sep 17 00:00:00 2001 From: Oleksandr Dubovyk Date: Fri, 20 Nov 2015 10:48:42 +0200 Subject: [PATCH 3/7] MAGETWO-44131: Sometimes "Estimate Shipping & Tax" section overlaps Newsletter Subscription form in Shopping Cart --- .../view/frontend/web/js/view/cart/totals.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js b/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js index c47f9e20ddb29..62688826376e3 100644 --- a/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js +++ b/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js @@ -6,14 +6,24 @@ define( [ 'uiComponent', - 'Magento_Checkout/js/model/totals' + 'Magento_Checkout/js/model/totals', + 'Magento_Checkout/js/model/shipping-service' ], - function (Component, totalsService) { + function (Component, totalsService, shippingService) { 'use strict'; return Component.extend({ - isLoading: totalsService.isLoading + isLoading: totalsService.isLoading, + initialize: function () { + this._super(); + totalsService.totals.subscribe(function() { + window.dispatchEvent(new Event('resize')); + }); + shippingService.getShippingRates().subscribe(function() { + window.dispatchEvent(new Event('resize')); + }); + } }); } ); From edac73c7a1c8c59a5de86e396e541e9b0464e2bf Mon Sep 17 00:00:00 2001 From: Oleksandr Dubovyk Date: Fri, 27 Nov 2015 12:11:29 +0200 Subject: [PATCH 4/7] MAGETWO-44131: Sometimes "Estimate Shipping & Tax" section overlaps Newsletter Subscription form in Shopping Cart --- .../Checkout/view/frontend/web/js/view/cart/totals.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js b/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js index 62688826376e3..6ea1a78315499 100644 --- a/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js +++ b/app/code/Magento/Checkout/view/frontend/web/js/view/cart/totals.js @@ -2,7 +2,6 @@ * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ -/*global define*/ define( [ 'uiComponent', @@ -15,12 +14,16 @@ define( return Component.extend({ isLoading: totalsService.isLoading, + + /** + * @override + */ initialize: function () { this._super(); - totalsService.totals.subscribe(function() { + totalsService.totals.subscribe(function () { window.dispatchEvent(new Event('resize')); }); - shippingService.getShippingRates().subscribe(function() { + shippingService.getShippingRates().subscribe(function () { window.dispatchEvent(new Event('resize')); }); } From 04c2b67498a4f8281f4fc1355711a4ace37b6dc1 Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Wed, 2 Dec 2015 14:12:18 +0200 Subject: [PATCH 5/7] MAGETWO-45095: Product base images aren't centered in Wish List on Storefront --- .../web/css/source/module/_listings.less | 25 +++++++++---------- .../web/css/source/module/_listings.less | 11 ++++---- 2 files changed, 18 insertions(+), 18 deletions(-) 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 6989adc68b4c2..552619f69cc84 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 @@ -38,8 +38,8 @@ vertical-align: top; .products-grid & { - width: 100%/2; display: inline-block; + width: 100%/2; } &:extend(.abs-add-box-sizing all); @@ -56,8 +56,8 @@ } &-info { - width: 152px; max-width: 100%; + width: 152px; .page-products & { width: 240px; @@ -102,7 +102,7 @@ .price { .lib-font-size(14); - font-weight: bold; + font-weight: @font-weight__bold; } .price-label { @@ -117,7 +117,7 @@ .minimal-price { .price { .lib-font-size(14); - font-weight: bold; + font-weight: @font-weight__bold; } .price-wrapper { @@ -165,6 +165,11 @@ white-space: nowrap; } + .price-from, + .price-to { + margin: 0; + } + .tocompare { .lib-icon-font-symbol( @icon-compare-empty @@ -180,11 +185,11 @@ .column.main { .product { &-items { - margin-left: -20px; + margin-left: -@indent__base; } &-item { - padding-left: 20px; + padding-left: @indent__base; } } @@ -197,7 +202,7 @@ .price-including-tax + .price-excluding-tax, .weee { - margin-top: 5px; + margin-top: @indent__xs; } .price-including-tax + .price-excluding-tax, @@ -280,9 +285,6 @@ margin-bottom: @indent__l; } - &-info { - } - &-actions { display: block; @@ -298,9 +300,6 @@ > * { white-space: normal; } - - > .action { - } } .actions-primary { 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 3792df8075312..455372d3a4548 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 @@ -28,6 +28,7 @@ .products { margin: @indent__l 0; } + .product { &-items { &:extend(.abs-reset-list all); @@ -37,8 +38,8 @@ vertical-align: top; .products-grid & { - width: 100%/2; display: inline-block; + width: 100%/2; } &:extend(.abs-add-box-sizing all); @@ -100,7 +101,7 @@ margin: @indent__s 0 @indent__m; .price { - font-weight: bold; + font-weight: @font-weight__bold; } .price-label { @@ -152,11 +153,11 @@ .column.main { .product { &-items { - margin-left: -20px; + margin-left: -@indent__base; } &-item { - padding-left: 20px; + padding-left: @indent__base; } } } @@ -168,7 +169,7 @@ .price-including-tax + .price-excluding-tax, .weee { - margin-top: 5px; + margin-top: @indent__xs; } .price-including-tax + .price-excluding-tax, From eefb9cb1b464d66025b48783d02645b8c02129f8 Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Thu, 3 Dec 2015 12:01:02 +0200 Subject: [PATCH 6/7] MAGETWO-46052: Wish Lists UI issues --- .../web/css/source/_module.less | 102 ++---------------- .../web/css/source/module/_listings.less | 47 +++++--- .../web/css/source/_module.less | 97 +---------------- .../Magento/luma/web/css/source/_extends.less | 4 + 4 files changed, 50 insertions(+), 200 deletions(-) diff --git a/app/design/frontend/Magento/blank/Magento_MultipleWishlist/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_MultipleWishlist/web/css/source/_module.less index dbb862b95b8a7..6280c42f5eadb 100644 --- a/app/design/frontend/Magento/blank/Magento_MultipleWishlist/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_MultipleWishlist/web/css/source/_module.less @@ -30,21 +30,21 @@ @_dropdown-split-list-min-width: 200px ); vertical-align: middle; + &:extend(.abs-dropdown-items-new all); .items { text-align: left; - } - - .items .item:last-child { - background: @color-gray-darken1; + .item { + &:last-child { + background: @color-gray-darken1; - &:hover { - .lib-css(background, @dropdown-list-item__hover); + &:hover { + .lib-css(background, @dropdown-list-item__hover); + } + } } } - &:extend(.abs-dropdown-items-new all); - .table-comparison &, .product-items & { > .action { @@ -93,9 +93,6 @@ margin-bottom: @indent__s; > .action { - &.split { - } - &.toggle { padding: 4px @indent__xs; } @@ -134,22 +131,13 @@ font-weight: @font-weight__semibold; &:extend(.abs-colon all); } - - &-current { - } } + &-items { &:extend(.abs-reset-list all); - - &.active { - } } } - &-add.item { - .action { - } - } // Wish list name &-title { margin-bottom: @indent__s; @@ -158,21 +146,12 @@ font-weight: @font-weight__light; margin-right: @indent__s; } - - .action.edit { - } - } - // Wish list info - &-info { } &-notice { .lib-css(color, @text__color__muted); display: inline-block; margin-right: @indent__base; - - &.private { - } } // Wish list toolbar @@ -185,9 +164,6 @@ &-select { margin-right: @indent__base; } - - &-actions { - } } // Wish list toolbar actions &-dropdown.move { @@ -299,12 +275,6 @@ .wishlist-name { &:extend(.abs-toggling-title-mobile all); - - &-label { - } - - &-current { - } } &-items { @@ -352,8 +322,6 @@ strong { .lib-font-size(26); } - .action.edit { - } } // Wish list info @@ -361,27 +329,12 @@ margin-bottom: 15px; } - &-notice { - &.private { - } - } - // Wish list toolbar &-toolbar { &-select, &-actions { margin-bottom: 15px; } - - &-select { - } - - &-actions { - } - } - - // Wish list toolbar actions - &-dropdown.move { } } } @@ -460,18 +413,6 @@ vertical-align: top; white-space: nowrap; width: 5%; - - span { - } - - &.active { - } - - &-label { - } - - &-current { - } } &-items { @@ -479,9 +420,6 @@ padding-right: 160px; vertical-align: top; - &.active { - } - .item { display: inline-block; margin-right: @indent__s; @@ -514,9 +452,6 @@ strong { .lib-font-size(40); } - - .action.edit { - } } // Wish list info @@ -524,28 +459,9 @@ float: left; } - &-notice { - &.private { - } - } - // Wish list toolbar &-toolbar { float: right; - - &-select, - &-actions { - } - - &-select { - } - - &-actions { - } - } - - // Wish list toolbar actions - &-dropdown.move { } } } 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 6ed95e12580d7..094d7a3a34975 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 @@ -17,6 +17,9 @@ @product-name-link__text-decoration__hover: @link__hover__text-decoration; @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); + // // @@ -252,14 +255,13 @@ .products-grid & { &:hover, &.active { + .lib-css(background, @product-item__hover__background-color); + .lib-css(box-shadow, @product-item__hover__box-shadow); + border: 1px solid @color-gray-light2; margin: -10px; padding: 9px; - border: 1px solid @color-gray-light2; - @_shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3); - .lib-css(box-shadow, @_shadow); position: relative; z-index: 2; - .lib-css(background, @color-white); .product-item-inner { display: block; @@ -270,17 +272,16 @@ .product-item-inner { .products-grid & { - position: absolute; + .lib-css(background, @product-item__hover__background-color); + .lib-css(box-shadow, @product-item__hover__box-shadow); + border: 1px solid @color-gray-light2; + border-top: none; left: 0; + margin: 9px 0 0 -1px; + padding: 0 9px 9px; + position: absolute; right: -1px; z-index: 2; - .lib-css(background, @color-white); - padding: 0 9px 9px 9px; - margin: 9px 0 0 -1px; - border: 1px solid @color-gray-light2; - border-top: none; - @_shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3); - .lib-css(box-shadow, @_shadow); } } @@ -308,6 +309,28 @@ .actions-primary { display: table-cell; } } + .page-products { + .products-grid { + .product-item-inner { + &:before { + .lib-css(background, @product-item__hover__background-color); + content: ''; + height: 3px; + left: 0; + position: absolute; + top: -2px; + width: 100%; + z-index: 1; + } + } + } + + .product-item-actions { + position: relative; + z-index: 2; + } + } + .products-grid { .product-item-info { &:not(:hover) { diff --git a/app/design/frontend/Magento/luma/Magento_MultipleWishlist/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_MultipleWishlist/web/css/source/_module.less index 3facd56f726e8..424bbebe93040 100644 --- a/app/design/frontend/Magento/luma/Magento_MultipleWishlist/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_MultipleWishlist/web/css/source/_module.less @@ -31,13 +31,12 @@ ); margin-right: 5%; vertical-align: middle; + &:extend(.abs-dropdown-items-new all); .items { padding: 6px 0; } - &:extend(.abs-dropdown-items-new all); - > .action { &:extend(.abs-action-button-as-link all); @@ -50,6 +49,7 @@ &:before { margin: 0; + width: 18px; } } @@ -81,14 +81,6 @@ } } - .product-info-main &, - .block-bundle-summary & { - > .action { - &.split { - } - } - } - .cart.table-wrapper & { vertical-align: baseline; @@ -176,20 +168,6 @@ font-weight: @font-weight__semibold; &:extend(.abs-colon all); } - - &-current { - } - } - - &-items { - &:extend(.abs-reset-list all); - &.active { - } - } - } - - &-add.item { - .action { } } @@ -201,13 +179,6 @@ font-weight: @font-weight__light; margin-right: @indent__s; } - - .action.edit { - } - } - - // Wish list info - &-info { } &-notice { @@ -235,9 +206,6 @@ &-select { margin-right: @indent__base; } - - &-actions { - } } // Wish list toolbar actions @@ -354,12 +322,6 @@ .wishlist-name { .lib-font-size(16); &:extend(.abs-toggling-title-mobile all); - - &-label { - } - - &-current { - } } &-items { @@ -408,9 +370,6 @@ strong { .lib-font-size(26); } - - .action.edit { - } } // Wish list info @@ -418,27 +377,12 @@ margin-bottom: 15px; } - &-notice { - &.private { - } - } - // Wish list toolbar &-toolbar { &-select, &-actions { margin-bottom: 15px; } - - &-select { - } - - &-actions { - } - } - - // Wish list toolbar actions - &-dropdown.move { } } } @@ -510,18 +454,6 @@ vertical-align: top; white-space: nowrap; width: 5%; - - span { - } - - &.active { - } - - &-label { - } - - &-current { - } } &-items { @@ -529,9 +461,6 @@ padding-right: 160px; vertical-align: top; - &.active { - } - .item { display: inline-block; margin-right: @indent__s; @@ -564,9 +493,6 @@ strong { .lib-font-size(40); } - - .action.edit { - } } // Wish list info @@ -574,28 +500,9 @@ float: left; } - &-notice { - &.private { - } - } - // Wish list toolbar &-toolbar { float: right; - - &-select, - &-actions { - } - - &-select { - } - - &-actions { - } - } - - // Wish list toolbar actions - &-dropdown.move { } } } diff --git a/app/design/frontend/Magento/luma/web/css/source/_extends.less b/app/design/frontend/Magento/luma/web/css/source/_extends.less index 9504d51f713eb..1cdaf21ec2cb1 100644 --- a/app/design/frontend/Magento/luma/web/css/source/_extends.less +++ b/app/design/frontend/Magento/luma/web/css/source/_extends.less @@ -740,6 +740,10 @@ .lib-css(color, @addto-hover-color); text-decoration: none; } + + &:before { + width: 18px; + } } // From 6662509294021abc94f62f3367714e5df89d8404 Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Thu, 3 Dec 2015 14:28:59 +0200 Subject: [PATCH 7/7] MAGETWO-45910: Bottom padding is missed on Search results Storefront page --- .../web/css/source/_module.less | 279 ++++++++-------- .../web/css/source/_module.less | 304 +++++++++--------- 2 files changed, 300 insertions(+), 283 deletions(-) diff --git a/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less index 480856ba0d522..be76545590540 100644 --- a/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less @@ -3,33 +3,36 @@ // * See COPYING.txt for license details. // */ -@autocomplete-background: @color-white; -@autocomplete-border: 1px solid @form-element-input__border-color; -@autocomplete-item-border: 1px solid @color-gray90; -@autocomplete-item-hover: @color-gray91; -@autocomplete-item-amount-color: @color-gray60; +// +// Variables +// _____________________________________________ + +@autocomplete__background-color: @color-white; +@autocomplete__border: 1px solid @form-element-input__border-color; +@autocomplete-item__border: 1px solid @color-gray90; +@autocomplete-item__hover__color: @color-gray91; +@autocomplete-item-amount__color: @color-gray60; // -// Common -//-------------------------------------- +// Common +// _____________________________________________ & when (@media-common = true) { + .block-search { + margin-bottom: 0; -.block-search { - margin-bottom: 0; - - .block { - &-title { - display: none; + .block { + &-title { + display: none; + } } - } - .block-content { - margin-bottom: 0; - } + .block-content { + margin-bottom: 0; + } - .label { - .lib-icon-font( + .label { + .lib-icon-font( @_icon-font-content: @icon-search, @_icon-font-size: 35px, @_icon-font-line-height: 33px, @@ -37,144 +40,148 @@ @_icon-font-color-hover: @minicart-icons-color-hover, @_icon-font-color-active: @minicart-icons-color-hover, @_icon-font-text-hide: true - ); - display: inline-block; - float: right; + ); + display: inline-block; + float: right; - &.active { - + .control { - input { - position: static; + &.active { + + .control { + input { + position: static; + } } } } - } - .action.search { - display: none; - } + .action.search { + display: none; + } - .control { - border-top: 1px solid @border-color__base; - clear: both; - margin: 0 -@layout__width-xs-indent -1px; - padding: 0 @layout__width-xs-indent; - } + .control { + border-top: 1px solid @border-color__base; + clear: both; + margin: 0 -@layout__width-xs-indent -1px; + padding: 0 @layout__width-xs-indent; + } - input { - left: -300%; - position: absolute; - margin: 15px 0; + input { + left: -300%; + margin: 15px 0; + position: absolute; + } + + .nested { + display: none; + } } - .nested { + .search-autocomplete { + &:extend(.abs-add-box-sizing all); display: none; - } -} + margin-top: -15px; + overflow: hidden; + position: absolute; + z-index: 3; -.search-autocomplete { - display: none; - position: absolute; - z-index: 3; - overflow: hidden; - margin-top: -15px; - &:extend(.abs-add-box-sizing all); - - ul { - .lib-list-reset-styles(); - - li { - &:not(:empty) { - .lib-css(background, @autocomplete-background); - .lib-css(border, @autocomplete-border); - border-top: 0; - } + ul { + .lib-list-reset-styles(); - .lib-css(border-top, @autocomplete-item-border); - cursor: pointer; - margin: 0; - padding: @indent__xs @indent__xl @indent__xs @indent__s; - position: relative; - text-align: left; - white-space: normal; + li { + .lib-css(border-top, @autocomplete-item__border); + cursor: pointer; + margin: 0; + padding: @indent__xs @indent__xl @indent__xs @indent__s; + position: relative; + text-align: left; + white-space: normal; + + &:not(:empty) { + border-top: 0; + .lib-css(border, @autocomplete__border); + .lib-css(background, @autocomplete__background-color); + } - &:first-child { - border-top: none; - } + &:first-child { + border-top: none; + } - &:hover, - &.selected { - .lib-css(background, @autocomplete-item-hover); - } + &:hover, + &.selected { + .lib-css(background, @autocomplete-item__hover__color); + } - .amount { - .lib-css(color, @autocomplete-item-amount-color); - position: absolute; - right: 7px; - top: @indent__xs; + .amount { + .lib-css(color, @autocomplete-item-amount__color); + position: absolute; + right: 7px; + top: @indent__xs; + } } } } -} -.form.search.advanced { - .fields.range { - .field { - &:first-child { - position: relative; + .form.search.advanced { + .fields.range { + .field { + &:first-child { + position: relative; + + .control { + padding-right: 25px; + + &:after { + content: ' \2013 '; + display: inline-block; + position: absolute; + right: 0; + text-align: center; + top: 6px; + width: 25px; + } + } + } - .control { - padding-right: 25px; + &:last-child { + position: relative; - &:after { - content: ' \2013 '; - display: inline-block; - text-align: center; - width: 25px; + div.mage-error[generated] { + left: 0; position: absolute; - right: 0; - top: 6px; + top: 32px; } } - } - - &:last-child { - position: relative; - div.mage-error[generated] { - position: absolute; - top: 32px; - left: 0; + &.with-addon { + .control { + padding-right: 45px; + } } } + } - &.with-addon { - .control { - padding-right: 45px; + .group.price { + .addon { + .addafter { + background: none; + border: 0; + padding-top: 6px; + position: absolute; + right: 0; + top: 0; } } } } - - .group.price { - .addon { - .addafter { - background: none; - border: 0; - padding-top: 6px; - position: absolute; - right: 0; - top: 0; - } - } + + .search.summary { + margin-bottom: @indent__s; } } -} - // -// Mobile -//-------------------------------------- +// Mobile +// _____________________________________________ + .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .block-search { .block-content { @@ -190,13 +197,14 @@ } // -// Desktop -//-------------------------------------- +// Desktop +// _____________________________________________ + .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .block-search { - position: relative; float: right; padding-left: 15px; + position: relative; width: 250px; z-index: 4; @@ -217,32 +225,31 @@ } input { - position: static; - padding-right: 35px; - margin: 0; .lib-input-placeholder(@form-element-input-placeholder__color); + margin: 0; + padding-right: 35px; + position: static; } .action.search { - position: absolute; display: inline-block; - right: 10px; - top: 0; - z-index: 1; .lib-button-icon( - @_icon-font-content: @icon-search, - @_icon-font-text-hide: true, - @_icon-font-color: @header-icons-color + @_icon-font-content: @icon-search, + @_icon-font-text-hide: true, + @_icon-font-color: @header-icons-color ); .lib-button-reset(); + padding: @indent__xs 0; + position: absolute; + right: 10px; + top: 0; + z-index: 1; &:focus { &:before { .lib-css(color, @color-gray20); } } - - padding: @indent__xs 0; } } diff --git a/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less index 299122c0c97d6..99e59ebe09fef 100644 --- a/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less @@ -3,33 +3,36 @@ // * See COPYING.txt for license details. // */ -@autocomplete-background: @color-white; -@autocomplete-border: 1px solid @form-element-input__border-color; -@autocomplete-item-border: 1px solid @color-gray90; -@autocomplete-item-hover: @color-gray91; -@autocomplete-item-amount-color: @color-gray60; +// +// Variables +// _____________________________________________ + +@autocomplete__background-color: @color-white; +@autocomplete__border: 1px solid @form-element-input__border-color; +@autocomplete-item__border: 1px solid @color-gray90; +@autocomplete-item__hover__color: @color-gray91; +@autocomplete-item-amount__color: @color-gray60; // -// Common -//-------------------------------------- +// Common +// _____________________________________________ & when (@media-common = true) { + .block-search { + margin-bottom: 0; -.block-search { - margin-bottom: 0; - - .block { - &-title { - display: none; + .block { + &-title { + display: none; + } } - } - .block-content { - margin-bottom: 0; - } + .block-content { + margin-bottom: 0; + } - .label { - .lib-icon-font( + .label { + .lib-icon-font( @_icon-font-content: @icon-search, @_icon-font-size: 22px, @_icon-font-line-height: 28px, @@ -38,158 +41,164 @@ @_icon-font-color-hover: @minicart-icons-color-hover, @_icon-font-color-active: @minicart-icons-color-hover, @_icon-font-text-hide: true - ); - display: inline-block; - float: right; + ); + display: inline-block; + float: right; - &.active { - + .control { - input { - position: static; + &.active { + + .control { + input { + position: static; + } } } } - } - .action.search { - display: none; - } + .action.search { + display: none; + } - .control { - border-top: 1px solid @border-color__base; - clear: both; - margin: 0 -@layout__width-xs-indent -1px; - padding: 0 @layout__width-xs-indent; - } + .control { + border-top: 1px solid @border-color__base; + clear: both; + margin: 0 -@layout__width-xs-indent -1px; + padding: 0 @layout__width-xs-indent; + } - input { - left: -300%; - position: absolute; - margin: 15px 0; - } + input { + left: -300%; + margin: 15px 0; + position: absolute; + } - .nested { - display: none; + .nested { + display: none; + } } -} -.search-autocomplete { - display: none; - position: absolute; - z-index: 3; - overflow: hidden; - margin-top: -15px; - &:extend(.abs-add-box-sizing all); - - ul { - .lib-list-reset-styles(); - &:not(:empty) { - .lib-css(background, @autocomplete-background); - .lib-css(border, @autocomplete-border); - border-top: 0; - } + .search-autocomplete { + display: none; + margin-top: -15px; + overflow: hidden; + position: absolute; + z-index: 3; + &:extend(.abs-add-box-sizing all); - li { - .lib-css(border-top, @autocomplete-item-border); - cursor: pointer; - padding: @indent__xs @indent__xl @indent__xs @indent__s; - margin: 0; - position: relative; - text-align: left; - white-space: normal; + ul { + .lib-list-reset-styles(); - &:first-child { - border-top: none; + &:not(:empty) { + .lib-css(background, @autocomplete__background-color); + .lib-css(border, @autocomplete__border); + border-top: 0; } - &:hover, - &.selected { - .lib-css(background, @autocomplete-item-hover); - } + li { + .lib-css(border-top, @autocomplete-item__border); + cursor: pointer; + margin: 0; + padding: @indent__xs @indent__xl @indent__xs @indent__s; + position: relative; + text-align: left; + white-space: normal; + + &:first-child { + border-top: none; + } - .amount { - .lib-css(color, @autocomplete-item-amount-color); - position: absolute; - right: 7px; - top: @indent__xs; + &:hover, + &.selected { + .lib-css(background, @autocomplete-item__hover__color); + } + + .amount { + .lib-css(color, @autocomplete-item-amount__color); + position: absolute; + right: 7px; + top: @indent__xs; + } } } } -} -.form.search.advanced { - &:extend(.abs-forms-general-desktop all); - .fields.range { - .field { - &:first-child { - position: relative; + .form.search.advanced { + &:extend(.abs-forms-general-desktop all); + + .fields.range { + .field { + &:first-child { + position: relative; + + .control { + padding-right: 25px; + + &:after { + content: ' \2013 '; + display: inline-block; + position: absolute; + right: 0; + text-align: center; + top: 6px; + width: 25px; + } + } + } - .control { - padding-right: 25px; + &:last-child { + position: relative; - &:after { - content: ' \2013 '; - display: inline-block; - text-align: center; - width: 25px; + div.mage-error[generated] { + left: 0; position: absolute; - right: 0; - top: 6px; + top: 32px; } } - } - - &:last-child { - position: relative; - div.mage-error[generated] { - position: absolute; - top: 32px; - left: 0; + &.with-addon { + .control { + padding-right: 45px; + } } - } - &.with-addon { - .control { - padding-right: 45px; + &.date { + &:extend(.abs-field-date all); } } - - &.date { - &:extend(.abs-field-date all); - } } - } - .group.price { - .addon { - .addafter { - background: none; - border: 0; - padding-top: 6px; - position: absolute; - right: 0; - top: 0; + .group.price { + .addon { + .addafter { + background: none; + border: 0; + padding-top: 6px; + position: absolute; + right: 0; + top: 0; + } } } } -} -.search-terms { - &:extend(.abs-reset-list all); - line-height: 2em; + .search-terms { + &:extend(.abs-reset-list all); + line-height: 2em; - > li { - display: inline-block; - margin-right: @indent__s; - } -} + > li { + display: inline-block; + margin-right: @indent__s; + } + } + .search.found { + margin-bottom: @indent__s; + } } // -// Mobile -//-------------------------------------- +// Mobile +// _____________________________________________ + .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .block-search { margin-top: @indent__s; @@ -197,13 +206,14 @@ } // -// Desktop -//-------------------------------------- +// Desktop +// _____________________________________________ + .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .block-search { - position: relative; float: right; padding-left: 15px; + position: relative; width: 250px; z-index: 4; @@ -218,27 +228,27 @@ } input { - position: static; - padding-right: 35px; - margin: 0; .lib-input-placeholder(@form-element-input-placeholder__color); + margin: 0; + padding-right: 35px; + position: static; } .action.search { - position: absolute; display: inline-block; - right: @indent__s; - top: 0; - z-index: 1; .lib-button-icon( - @_icon-font-content: @icon-search, - @_icon-font-size: 16px, - @_icon-font-text-hide: true, - @_icon-font-color: @header-icons-color, - @_icon-font-color-hover: @header-icons-color-hover, - @_icon-font-line-height: 32px + @_icon-font-content: @icon-search, + @_icon-font-size: 16px, + @_icon-font-text-hide: true, + @_icon-font-color: @header-icons-color, + @_icon-font-color-hover: @header-icons-color-hover, + @_icon-font-line-height: 32px ); .lib-button-reset(); + position: absolute; + right: @indent__s; + top: 0; + z-index: 1; &:focus { &:before {