From e12747a53168f4dbfcf174a6c3c401986617e53b Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Tue, 7 Feb 2023 20:43:28 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=20estiliza=C3=A7=C3=A3o=20para=20a?= =?UTF-8?q?rea=20abaico=20da=20imagem=20do=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 16 ++- styles/css/vtex.flex-layout.css | 57 ++++++++- styles/css/vtex.product-identifier.css | 33 ++++- styles/css/vtex.store-components.css | 90 ++++++++++++- styles/css/vtex.tab-layout.css | 6 + .../sass/pages/product/vtex.flex-layout.scss | 61 ++++++++- .../product/vtex.product-identifier.scss | 30 +++++ .../pages/product/vtex.store-components.scss | 119 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 4 + 9 files changed, 399 insertions(+), 17 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4131ae0..053b631 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -85,7 +85,8 @@ "desktop": "1:1", "phone": "auto" }, - "maxHeight": 664, + // "maxHeight": 664, + "maxHeight": 944, "showPaginationDots": false, "displayThumbnailsArrows": false, @@ -180,12 +181,17 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#identifieAndName", + "flex-layout.row#availability", + "sku-selector" ] }, + "flex-layout.row#identifieAndName": { + "props": { + "blockClass": "identifieAndName" + }, + "children": ["flex-layout.row#product-name", "product-identifier.product"] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 3aa744c..8edda2a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,22 +8,36 @@ /* Media Query M3 */ /* Grid breakpoints */ .flexRowContent--product-main { - padding: 0; + padding: 0 40px; margin: 0; border: 1px solid red; } +.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + min-width: 296px; + max-width: 664px; + padding: 0; + border-radius: 0; +} +@media (max-width: 1024px) { + .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + max-width: 944px; + } +} +.flexRow--indisponivel :global(.vtex-store-components-3-x-productImagesGallerySlide) { + width: 100%; +} .flexRow--indisponivel :global(.vtex-store-components-3-x-container) { padding: 0; } .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { - padding: 0; + padding: 0 40px; margin: 0; gap: 32px; } @media (max-width: 1024px) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { - padding: 0 40px; flex-direction: column; } } @@ -35,13 +49,48 @@ } @media (max-width: 1024px) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { - height: 402px; + width: 100% !important; + max-width: 944px; } } +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + max-width: 90%; +} +@media (max-width: 1024px) { + .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) { + max-width: none; + } +} +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability { + height: 68px; + margin-bottom: 8px; +} .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { justify-content: initial; } +.flexRowContent { + margin-bottom: 0; +} + +.flexRowContent--identifieAndName { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: center; +} +@media (max-width: 1024px) { + .flexRowContent--identifieAndName { + text-align: start; + align-items: initial; + } +} + .flexRow--description :global(.vtex-store-components17-x-container) { padding-left: 0 !important; padding-right: 0 !important; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..8f5d235 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,34 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + padding-right: 40px; } +@media (max-width: 1024px) { + .product-identifier--productReference { + display: block; + padding-right: 0; + } +} +.product-identifier--productReference .product-identifier__label, +.product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + text-align: right; + color: rgba(146, 146, 146, 0.4784313725); +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 553fd4a..2b594f9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -115,12 +115,15 @@ border-bottom: 3px solid #BFBFBF; } -.subscriberContainer { - max-width: 399px; +:global(.vtex-store-components-3-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; } + @media (max-width: 1024px) { .subscriberContainer { max-width: 765px; + margin-top: 24px; } } .subscriberContainer :global(.vtex-store-components-3-x-title) { @@ -309,6 +312,89 @@ } } +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; + margin-left: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + visibility: visible; + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; + color: #000000; +} +.skuSelectorContainer .diagonalCross { + top: 0px; + right: 10px; + bottom: 0px; + left: 10px; + transform: rotateY(180deg); + color: black; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; + margin-left: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; + color: #000000; + border: 1px solid #989898; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .frameAround { + border-color: #000; + z-index: 9; +} + +.skuSelectorOptionsList { + margin: 0; +} + .productImageTag--imageDescription--main { max-height: 632px !important; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index bdefa5a..4c6e2aa 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -77,4 +77,10 @@ font-size: 18px; line-height: 38px; color: #000000; +} +@media (max-width: 1024px) { + .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button) :global(.vtex-button__label), + .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + padding-left: 0; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ce9da29..f8fc16c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,25 +1,40 @@ // INICIO PRODUCT .flexRowContent--product-main { - padding: 0; + padding: 0 40px; margin: 0; border: 1px solid red; + + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + min-width: 296px; + max-width: 664px; + padding: 0; + border-radius: 0; + + @media (max-width:1024px) { + width: 100% !important; + max-width: 944px; + } + } } // FIM PRODUCT // INICIO INDISPONIVEL .flexRow--indisponivel { + :global(.vtex-store-components-3-x-productImagesGallerySlide) { + width: 100%; + } :global(.vtex-store-components-3-x-container) { padding: 0; .flexRowContent--indisponivel { - padding: 0; + padding: 0 40px; margin: 0; gap: 32px; @media (max-width:1024px) { - padding: 0 40px; + // padding: 0 40px; flex-direction: column; } @@ -30,22 +45,60 @@ padding: 0; border-radius: 0; + @media (max-width:1024px) { + width: 100% !important; + max-width: 944px; + } + + :global(.vtex-store-components-3-x-productNameContainer--quickview) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + max-width: 90%; + + @media (max-width:1024px) { + max-width: none; + } + } + @media (max-width:1024px) { // width: 100% !important; // max-width: none; - height: 402px; } .flexColChild--info-availability { + height: 68px; + margin-bottom: 8px; + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { justify-content: initial; + } + } } } } } +.flexRowContent { + margin-bottom: 0; +} + +.flexRowContent--identifieAndName { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: center; + + @media (max-width:1024px) { + text-align: start; + align-items: initial; + } +} + // FIM INDISPONIVEL diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..e7ae493 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,30 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + padding-right: 40px; + + @media (max-width:1024px) { + display: block; + padding-right: 0; + } + + .product-identifier__label, + .product-identifier__separator { + display: none; + } + + .product-identifier__value { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + + text-align: right; + + color: #9292927a; + } +} + +.product-identifier__value {} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b2e062e..0358ba4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -118,13 +118,23 @@ } // FIM NEWSLETTER +// INICIO MAIN +:global(.vtex-store-components-3-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; +} + + + +// FIM MAIN // INICIO INDISPONIVEL .subscriberContainer { - max-width: 399px; + // max-width: 399px; @media (max-width:1024px) { max-width: 765px; + margin-top: 24px; } @@ -351,6 +361,113 @@ } } +// SKU E TAMANHOS +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + + margin-left: 16px; + + &::after { + visibility: visible; + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; + } + } + + .skuSelectorSelectorImageValue, + .skuSelectorNameSeparator { + display: none; + } + + .frameAround { + border-radius: 30px; + } + + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + color: $color-black; + } + } + + .diagonalCross { + top: 0px; + right: 10px; + bottom: 0px; + left: 10px; + transform: rotateY(180deg); + color: black; + } + + .skuSelectorSubcontainer--tamanho { + + .skuSelectorName { + font-size: 0; + + margin-left: 16px; + + &::after { + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + } + } + + .frameAround { + // border: 1px solid #989898; + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; + } + + .skuSelectorInternalBox { + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; + color: $color-black; + border: 1px solid #989898; + } + + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + + color: rgba(185, 185, 185, 0.6); + } + } + + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + + .frameAround { + border-color: #000; + z-index: 9; + } +} + +.skuSelectorOptionsList { + margin: 0; +} + .productImageTag--imageDescription--main { max-height: 632px !important; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 88e3ffc..370a516 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -80,6 +80,10 @@ color: #000000; + @media (max-width:1024px) { + padding-left: 0; + } + } }