diff --git a/assets/iconPix.svg b/assets/iconPix.svg new file mode 100644 index 0000000..c80d1da --- /dev/null +++ b/assets/iconPix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/PayWithPix.tsx b/react/PayWithPix.tsx new file mode 100644 index 0000000..3854f6b --- /dev/null +++ b/react/PayWithPix.tsx @@ -0,0 +1,3 @@ +import { PayWithPix } from "./PayWithPix/PayWithPix"; + +export default PayWithPix; diff --git a/react/PayWithPix/PayWithPix.css b/react/PayWithPix/PayWithPix.css new file mode 100644 index 0000000..cef306a --- /dev/null +++ b/react/PayWithPix/PayWithPix.css @@ -0,0 +1,33 @@ +.PayWithPix { + display: flex; + column-gap: 26px; + align-items: center; + margin: 16px 0 24px; +} + +.PayWithPix__pixIcon { + width: 66px; + height: 24px; + display: block; +} + +.PayWithPix__wrapper { + display: flex; + flex-direction: column; +} + +.PayWithPix__price { + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + margin: 0; +} + +.PayWithPix__discount { + font-family: "Open Sans", sans-serif; + font-weight: 300; + font-size: 13px; + color: #929292; +} diff --git a/react/PayWithPix/PayWithPix.tsx b/react/PayWithPix/PayWithPix.tsx new file mode 100644 index 0000000..2f54ace --- /dev/null +++ b/react/PayWithPix/PayWithPix.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +import style from "./PayWithPix.css"; + +const PayWithPix = () => { + const productContextValue = useProduct(); + + const discount = + (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) * + 0.9; + const priceFormatted = discount?.toFixed(2).toString().replace(".", ","); + + return ( +
+
+

R$ {priceFormatted}

+ 10 % de desconto +
+
+ ); +}; + +export { PayWithPix }; diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx new file mode 100644 index 0000000..fbdca5f --- /dev/null +++ b/react/ProductContext.tsx @@ -0,0 +1,36 @@ +import React, { useEffect, useState } from "react"; +import { useProduct } from "vtex.product-context"; + +const ProductContext = () => { + const productContext = useProduct(); + const [simulation, setSimulation] = useState(); + useEffect(() => { + fetch("/api/checkout/pub/orderForms/simulation?sc=1", { + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + method: "POST", + body: JSON.stringify({ + paymentData: { + payments: [{ paymentSystem: "125", installments: 1 }], + }, + items: [ + { + id: productContext?.selectedItem?.itemId, + quantity: 1, + seller: "1", + }, + ], + country: "BRA", + }), + }).then(async (res) => { + setSimulation(await res.json()); + }); + }, [productContext?.selectedItem]); + + console.log("productContext", productContext); + return <> {simulation?.paymentData?.payments[0]?.value}; +}; + +export default ProductContext; diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..e18de24 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a5b01d..f656582 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,9 +1,7 @@ { "store.product": { "children": [ - "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#description", "rich-text#prateleira", "flex-layout.row#shelf", "product-questions-and-answers", @@ -19,6 +17,104 @@ "children": ["breadcrumb"] }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": ["flex-layout.row#product-image"] + }, + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, + + "html#codigo": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#pixzap": { + "props": { + "testId": "pix-price" + }, + "children": ["flex-layout.row#pix"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["flex-layout.row#product-quantity"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#teste"] + }, + + "html#prateleira": { + "props": { + "blockClass": "prateleirateste", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-summary-space", + "product-list-price#summary", + "html#selling-price" + ] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], "props": { @@ -88,40 +184,47 @@ }, "tab-content.item#description1": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description1" } }, "tab-content.item#description2": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description2" } }, "tab-content.item#description3": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description3" } }, "tab-content.item#description4": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description4" } }, "tab-content.item#description5": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description5" } }, + "image#description": { + "props": { + "blockClass": "image-description", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } + }, + "rich-text#prateleira": { "props": { "blockClass": "title-shelf", @@ -130,13 +233,7 @@ }, "product-summary.shelf#teste": { - "children": [ - "product-summary-image#shelf", - "product-summary-name", - "product-summary-space", - "product-list-price#summary", - "product-selling-price#summary" - ] + "children": ["html#prateleira"] }, "list-context.product-list#teste": { @@ -152,13 +249,12 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", "blockClass": "carousel" } }, "flex-layout.row#shelf": { - "children": ["list-context.product-list#teste"] + "children": ["html#slider"] }, "condition-layout.product#availability": { @@ -174,6 +270,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "principal", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -181,15 +278,33 @@ "paddingTop": 7, "paddingBottom": 7 }, + "children": ["flex-layout.col#mainpage-col"] + }, + + "flex-layout.row#mainpage-row": { + "props": { + "blockClass": "mainpage-row" + }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, + "flex-layout.col#mainpage-col": { + "props": { + "blockClass": "mainpage-col" + }, + "children": [ + "html#breadcrumb", + "flex-layout.row#mainpage-row", + "html#product-description" + ] + }, + "stack-layout": { "props": { "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#imagens", "product-bookmark", "product-specification-badges" ] @@ -218,7 +333,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, "displayThumbnailsArrows": true, "thumbnailsOrientation": "horizontal" @@ -230,23 +345,44 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "sku-selector", - "product-assembly-options", - "product-gifts", + "html#product-installments", + "html#pixzap", + "html#sku-selector", "flex-layout.row#buy-box", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default", "placeholder" ] }, + "flex-layout.row#pix": { + "props": { + "blockClass": "pix-container" + }, + "children": ["image#pix", "pay-with-pix"] + }, + + "image#pix": { + "props": { + "blockClass": "pix-image", + "src": "assets/iconPix.svg" + } + }, + + "product-installments": { + "props": { + "installmentsCriteria": "max-quantity-without-interest", + "markers": ["discount"], + "message": "ou {installmentsNumber}x de {installmentValue} sem juros" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -276,10 +412,7 @@ "colSizing": "auto" }, - "children": [ - "flex-layout.row#product-quantity", - "flex-layout.row#buy-button" - ] + "children": ["html#product-quantity", "flex-layout.row#buy-button"] }, "flex-layout.row#product-quantity": { @@ -298,7 +431,7 @@ "preventHorizontalStretch": false, "fullWidth": true }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -308,11 +441,34 @@ "marginBottom": 7, "paddingTop": 7 }, + "children": ["flex-layout.row#mainpage-row-availability"] + }, + + "flex-layout.row#mainpage-row-availability": { + "props": { + "blockClass": "mainpage-row" + }, + "children": ["flex-layout.col#mainpage-col-availability"] + }, + + "flex-layout.row#teste": { "children": [ "flex-layout.col#stack", "flex-layout.col#right-col-availability" ] }, + + "flex-layout.col#mainpage-col-availability": { + "props": { + "blockClass": "mainpage-col" + }, + "children": [ + "html#breadcrumb", + "flex-layout.row#teste", + "html#product-description" + ] + }, + "flex-layout.col#right-col-availability": { "props": { "preventVerticalStretch": true, @@ -320,12 +476,13 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#codigo", + "flex-layout.row#availability", + "html#sku-selector" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/store/interfaces.json b/store/interfaces.json index 9193346..60bda72 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,11 @@ }, "placeholder": { "component": "placeholder" + }, + "product-context": { + "component": "ProductContext" + }, + "pay-with-pix": { + "component": "PayWithPix" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 7f0a2f5..edea4af 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -14,4 +14,10 @@ .html--pdp-breadcrumb { background-color: white; +} + +.html--prateleirateste { + height: 100%; + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 72451a6..86b84d3 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,17 +9,25 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); /* Grid breakpoints */ .container { + display: flex; + align-items: center; + flex-wrap: wrap; font-size: 14px; line-height: 19px; - padding: 0 40px 16px 40px; + padding: 0; + margin-bottom: 16px; } -.container .homeIconm, .container .homeLink { - display: none; + visibility: hidden; + padding: 0; } -.container .arrow--1 { - padding-left: 0; +.container .homeLink::before { + content: "Home"; + font-size: 14px; + line-height: 19px; + visibility: visible; + padding: 0; } -.container .arrow--1 .caretIcon { +.container .homeIcon { display: none; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 84ff0e2..8cc4e7b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,17 +8,6 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); /* Grid breakpoints */ -.flexRowContent { - padding: 0; - margin: 0; -} -@media screen and (max-width: 1024px) { - .flexRowContent { - display: flex; - flex-direction: column; - } -} - .flexRowContent--buy-button-container { margin-bottom: 16px; } @@ -28,7 +17,76 @@ height: 50px; margin-left: 10px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .flexRowContent--buy-button-container :global(.vtex-button) { + height: 74px; + margin-top: 10px; + margin-left: unset; + } +} .flexRow--buy-box .stretchChildrenWidth:nth-child(2n) { width: 100% !important; +} + +.flexRowContent--principal .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; +} +.flexRowContent--principal .flexColChild--mainpage-col { + padding: 0; +} + +.flexRowContent { + padding: 0; + margin: 0; +} +@media screen and (max-width: 1024px) { + .flexRowContent { + display: flex; + flex-direction: column; + } + .flexRowContent .stretchChildrenWidth { + width: auto !important; + padding: 0; + } + .flexRowContent :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: block; + } + .flexRowContent .flexRowContent--buy-box { + flex-direction: row; + } +} +@media screen and (max-width: 1024px) and (min-width: 375px) and (max-width: 768px) { + .flexRowContent .flexRowContent--buy-box { + flex-direction: column; + } +} + +.flexRowContent--main-header-mobile { + flex-direction: row; +} + +.flexColChild--mainpage-col { + padding-bottom: 2rem; +} + +:global(.vtex-flex-layout-0-x-flexRow--pix-container) { + display: flex; + align-items: center; +} +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) { + flex-direction: row; + display: flex; + } +} +:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + display: flex; + align-items: center; + width: auto !important; + padding-right: 26px; +} +:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-imageElement) { + width: 66px; + height: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css index ab98158..da0161c 100644 --- a/styles/css/vtex.login.css +++ b/styles/css/vtex.login.css @@ -12,4 +12,10 @@ .vtex-address-form__postalCode-forgottenURL a) { color: black; +} + +:global(.agenciamagma-store-theme-5-x-html--prateleirateste) { + height: 100%; + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 4051955..120eec9 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -22,6 +22,12 @@ height: 50px; } +@media screen and (max-width: 1024px) { + :global(.vtex-numeric-stepper__input) { + width: 44px; + } +} + :global(.vtex-numeric-stepper__minus-button) { background-color: white; } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 9d37b69..cb77006 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -18,4 +18,14 @@ line-height: 38px; color: #575757; margin: 0; +} +@media screen and (min-width: 1920px) { + .container--title-shelf .paragraph--title-shelf { + margin-top: 16px; + } +} +@media screen and (min-width: 375px) and (max-width: 768px) { + .container--title-shelf .paragraph--title-shelf { + font-size: 20px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 004650a..19dfded 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,10 +12,20 @@ background-color: transparent; height: 630px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel { + height: 393px; + } +} .sliderLayoutContainer--carousel .sliderTrackContainer { margin: 32px 27px 32px 27px; padding-bottom: 32px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + padding-bottom: 0; + } +} .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack { margin-bottom: 32px; } @@ -25,6 +35,21 @@ height: 448px; margin-right: 16px; } +@media screen and (max-width: 767px) { + .sliderLayoutContainer--carousel .slide { + margin-right: 8px; + } +} +@media screen and (min-width: 768px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel .slide { + margin-right: 12px; + } +} +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .slide { + height: unset; + } +} .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) { max-width: unset !important; } @@ -32,9 +57,22 @@ padding: 0; } .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) { - width: 314px; + width: 100%; + max-width: 314px; height: 314px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) { + max-width: 124px; + height: 124px; + } +} +@media screen and (min-width: 768px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) { + max-width: 291px; + height: 291px; + } +} .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { max-height: 314px !important; } @@ -49,6 +87,12 @@ line-height: 25px; color: #000000; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px; + line-height: 19px; + } +} .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) { display: block; font-family: "Open Sans", sans-serif; @@ -59,7 +103,21 @@ color: #bababa; padding-bottom: 8px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) { + font-size: 12px; + line-height: 16px; + } +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::before { + content: "de "; + font-size: 14px; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::after { + content: " por"; +} .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) { + display: block; text-align: center; font-family: "Open Sans", sans-serif; font-weight: 700; @@ -67,6 +125,12 @@ line-height: 33px; color: #000000; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} .sliderLayoutContainer--carousel .sliderRightArrow, .sliderLayoutContainer--carousel .sliderLeftArrow { margin: 0; @@ -99,6 +163,11 @@ align-items: center; margin-bottom: 64px; } +@media screen and (min-width: 375px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .paginationDotsContainer { + margin-bottom: 32px; + } +} .sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { width: 10px; height: 10px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 28ea8dc..1d9aee2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -11,6 +12,12 @@ .container { padding: 0 40px; } +@media screen and (min-width: 1920px) { + .container { + max-width: 115rem !important; + padding: 0; + } +} .container .productNameContainer--quickview { font-weight: 300; font-size: 20px; @@ -18,6 +25,12 @@ text-align: right; color: #575757; } +@media screen and (max-width: 1024px) { + .container .productNameContainer--quickview { + text-align: unset; + margin-top: 32px; + } +} .container .skuSelectorContainer { display: flex; flex-direction: column; @@ -67,6 +80,9 @@ .container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { padding: 0; } +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--verde { + display: none; +} .container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected { width: 40px; height: 40px; @@ -79,6 +95,12 @@ border-radius: 50%; z-index: unset; } +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross { + width: 10px; + margin: 0 auto; + color: black; + transform: rotate(60deg); +} .container .skuSelectorContainer .skuSelectorSubcontainer--tamanho { order: 1; margin-bottom: 10px; @@ -160,9 +182,15 @@ } .shippingContainer { - display: flex; + margin-top: 16px; + margin-bottom: 16px; position: relative; } +@media screen and (min-width: 768px) { + .shippingContainer { + max-width: 280px; + } +} .shippingContainer :global(.vtex-button) { font-size: 0; background-color: black; @@ -171,6 +199,8 @@ border: none; border-radius: 0; top: 27px; + position: absolute; + right: 0; } .shippingContainer :global(.vtex-button)::before { content: "OK"; @@ -257,11 +287,23 @@ } :global(.vtex-address-form__postalCode-forgottenURL) { - position: absolute; - right: 32px; - bottom: 15px; text-decoration: underline; } +@media screen and (min-width: 375px) and (max-width: 768px) { + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + flex-direction: row-reverse; + } +} +@media screen and (min-width: 768px) { + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: -50%; + top: calc(50% + 13.5px); + transform: translateY(-50%); + padding: 0; + } +} :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } @@ -280,6 +322,11 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } +@media screen and (max-width: 1024px) { + :global(.vtex-product-identifier-0-x-product-identifier) { + justify-content: start; + } +} :global(.vtex-store-components-3-x-swiper-pagination), :global(.vtex-store-components-3-x-swiperCaretNext), @@ -289,9 +336,23 @@ :global(.vtex-store-components-3-x-productImageTag) { object-fit: unset !important; - margin-bottom: 16px; max-height: 664px !important; max-width: 664px; + margin-bottom: 16px; +} +@media screen and (min-width: 1920px) { + :global(.vtex-store-components-3-x-productImageTag) { + max-height: unset !important; + max-width: unset; + width: auto !important; + height: 904px !important; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-productImageTag) { + max-width: 944px; + max-height: 944px !important; + } } :global(.vtex-store-components-3-x-figure) { @@ -302,6 +363,9 @@ :global(.vtex-store-components-3-x-carouselGaleryThumbs) { margin-top: unset; } +:global(.vtex-store-components-3-x-carouselGaleryThumbs) :global(.vtex-store-components-3-x-productImagesThumbCaret) { + display: none; +} .thumbImg--video { height: 90px; @@ -310,10 +374,11 @@ .thumbImg { width: 90px !important; height: 90px; + border-radius: 8px; } .productImagesThumb { - max-width: 90px; + width: 90px !important; max-height: 90px !important; margin: 0 16px 0 0; } @@ -321,17 +386,38 @@ .newsletter--newsletter { display: flex; flex-direction: column; - height: 175px; + align-items: center; + height: 100%; + max-height: 175px; background-color: black; padding-bottom: 16px; padding-top: 32px; } +@media screen and (max-width: 1024px) { + .newsletter--newsletter { + height: 220px; + max-height: unset; + padding-top: 64px; + } +} .newsletter--newsletter .container--newsletter { margin: 0; + width: 100%; + padding: 0; +} +@media screen and (max-width: 1024px) { + .newsletter--newsletter .container--newsletter { + padding: 0 16px; + } } .newsletter--newsletter .container--newsletter .form--newsletter { max-width: 774px !important; } +@media screen and (max-width: 1024px) { + .newsletter--newsletter .container--newsletter .form--newsletter { + max-width: 992px !important; + } +} .newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter { display: flex; flex-direction: column; @@ -351,7 +437,14 @@ color: #929292; margin-top: 16px; } +@media screen and (max-width: 1024px) { + .newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after { + font-size: 16px; + line-height: 22px; + } +} .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter { + display: flex; padding-top: 16px; border-bottom: 1px solid #929292; } @@ -368,9 +461,16 @@ line-height: 25px; color: #929292; } +@media screen and (max-width: 1024px) { + .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + padding-left: 16px; + } +} .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter { padding: 0; - border-bottom: 3px solid white; + border-bottom: 3px solid #bfbfbf; height: 32px; } .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) { @@ -385,4 +485,67 @@ line-height: 19px; color: #ffffff; padding: 0px 16px 13px 16px !important; +} + +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::before { + content: "Produto Indisponível"; + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 10px; + width: 100%; +} +.subscriberContainer .inputName { + margin-right: 8px; +} +.subscriberContainer .inputName :global(.vtex-input-prefix__group), +.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid #989898; +} +.subscriberContainer .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 12px 14px; +} +.subscriberContainer .submit { + grid-column: span 2; +} +.subscriberContainer .submit :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: none; + height: 49px; + width: 100%; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Avise-me"; + font-family: "Open Sans", sans-serif; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #ffffff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2797ed0..c9ce9b1 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,18 +9,49 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); /* Grid breakpoints */ .container--description { - margin: 16px 40px; height: 702px; + margin-top: 16px; + margin-bottom: 16px; +} +@media screen and (min-width: 1920px) { + .container--description { + height: 974px; + } +} +@media screen and (max-width: 1024px) { + .container--description { + height: 100%; + max-height: 1418px; + border-bottom: 1px solid #bfbfbf; + } } .container--description .listContainer { display: flex; justify-content: space-around; border-bottom: 1px solid #bfbfbf; } +@media screen and (max-width: 1024px) { + .container--description .listContainer { + border-top: 1px solid #bfbfbf; + } +} +@media screen and (max-width: 1024px) { + .container--description .listContainer { + flex-direction: column; + } +} .container--description .listContainer .listItem { padding: 0; margin: 0; } +@media screen and (max-width: 1024px) { + .container--description .listContainer .listItem { + margin-bottom: 16px; + } + .container--description .listContainer .listItem:first-child { + margin-top: 16px; + } +} .container--description .listContainer .listItem :global(.vtex-button) { background: white; border: none; @@ -29,46 +60,121 @@ text-transform: none; color: #bfbfbf; } +@media screen and (min-width: 1920px) { + .container--description .listContainer .listItem :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} +@media screen and (min-width: 375px) and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) { + display: flex; + justify-content: start; + width: 100%; + } +} .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } .container--description .listContainer .listItemActive { border-bottom: 2px solid black; } +@media screen and (max-width: 1024px) { + .container--description .listContainer .listItemActive { + border: none; + } +} .container--description .listContainer .listItemActive :global(.vtex-button) { color: black; } +.container--description .contentContainer { + padding-top: 32px; +} +@media screen and (min-width: 1920px) { + .container--description .contentContainer { + padding-top: 64px; + } +} +@media screen and (max-width: 1024px) { + .container--description .contentContainer { + padding-top: unset; + } +} .container--description .contentContainer .contentItem { display: flex; } -.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { - width: 100%; - height: 100%; +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem { + flex-direction: column; + } +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) { max-width: 632px; - max-height: 632px; + margin-left: 32px; } -.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) { - margin: 32px 32px 16px 32px; +@media screen and (min-width: 1920px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) { + height: 872px; + } } -.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) { - display: none; +@media screen and (min-width: 1920px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) { + max-width: unset; + } +} +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) { + max-width: 944px; + margin-top: 16px; + margin-left: unset; + } } .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { - margin-top: 32px; margin-left: 32px; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-top: 16px; + margin-left: unset; + margin-bottom: 16px; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { font-family: "Open Sans", sans-serif; font-size: 24px; line-height: 32px; color: #575757; } +@media screen and (min-width: 1920px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 32px; + line-height: 32px; + } +} +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 20px; + line-height: 32px; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; color: #929292; } +@media screen and (min-width: 1920px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { + font-size: 14px; + line-height: 19px; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) { padding: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index f7710ca..48b4498 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,3 +5,9 @@ .html--pdp-breadcrumb { background-color: white; } + +.html--prateleirateste { + height: 100%; + display: flex; + flex-direction: column; +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 254b4ef..355ba05 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,17 +1,26 @@ .container { + display: flex; + align-items: center; + flex-wrap: wrap; font-size: 14px; line-height: 19px; - padding: 0 40px 16px 40px; + padding: 0; + margin-bottom: 16px; - .homeIconm, .homeLink { - display: none; - } + visibility: hidden; + padding: 0; - .arrow--1 { - padding-left: 0; - .caretIcon { - display: none; + &::before { + content: "Home"; + font-size: 14px; + line-height: 19px; + visibility: visible; + padding: 0; } } + + .homeIcon { + display: none; + } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 217a3d6..58b1e74 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,20 +1,17 @@ -.flexRowContent { - padding: 0; - margin: 0; - - @media screen and (max-width: 1024px) { - display: flex; - flex-direction: column; - } -} - .flexRowContent--buy-button-container { margin-bottom: 16px; + :global(.vtex-button) { background-color: black; border: none; height: 50px; margin-left: 10px; + + @media screen and (min-width: 375px) and (max-width: 768px) { + height: 74px; + margin-top: 10px; + margin-left: unset; + } } } @@ -23,3 +20,71 @@ width: 100% !important; } } + +.flexRowContent--principal { + .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; + } + + .flexColChild--mainpage-col { + padding: 0; + } +} + +.flexRowContent { + padding: 0; + margin: 0; + + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + + .stretchChildrenWidth { + width: auto !important; + padding: 0; + } + + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: block; + } + + .flexRowContent--buy-box { + flex-direction: row; + + @media screen and (min-width: 375px) and (max-width: 768px) { + flex-direction: column; + } + } + } +} + +.flexRowContent--main-header-mobile { + flex-direction: row; +} +.flexColChild--mainpage-col { + padding-bottom: 2rem; +} + +:global(.vtex-flex-layout-0-x-flexRow--pix-container) { + display: flex; + align-items: center; + + :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) { + @media screen and (max-width: 1024px) { + flex-direction: row; + display: flex; + } + + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + display: flex; + align-items: center; + width: auto !important; + padding-right: 26px; + + :global(.vtex-store-components-3-x-imageElement) { + width: 66px; + height: 24px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss index c060054..01251a6 100644 --- a/styles/sass/pages/product/vtex.login.scss +++ b/styles/sass/pages/product/vtex.login.scss @@ -3,3 +3,9 @@ a) { color: black; } + +:global(.agenciamagma-store-theme-5-x-html--prateleirateste) { + height: 100%; + display: flex; + flex-direction: column; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 509d826..efd890d 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -11,6 +11,12 @@ height: 50px; } +:global(.vtex-numeric-stepper__input) { + @media screen and (max-width: 1024px) { + width: 44px; + } +} + :global(.vtex-numeric-stepper__minus-button) { background-color: white; } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 20a1c64..ade3e51 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -9,5 +9,13 @@ color: #575757; margin: 0; + + @media screen and (min-width: 1920px) { + margin-top: 16px; + } + + @media screen and (min-width: 375px) and (max-width: 768px) { + font-size: 20px; + } } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index c87a094..11a5cde 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,10 +2,18 @@ background-color: transparent; height: 630px; + @media screen and (min-width: 375px) and (max-width: 768px) { + height: 393px; + } + .sliderTrackContainer { margin: 32px 27px 32px 27px; padding-bottom: 32px; + @media screen and (min-width: 375px) and (max-width: 768px) { + padding-bottom: 0; + } + .sliderTrack { margin-bottom: 32px; } @@ -17,6 +25,18 @@ height: 448px; margin-right: 16px; + @media screen and (max-width: 767px) { + margin-right: 8px; + } + + @media screen and (min-width: 768px) and (max-width: 1024px) { + margin-right: 12px; + } + + @media screen and (min-width: 375px) and (max-width: 768px) { + height: unset; + } + :global(.vtex-product-summary-2-x-container) { max-width: unset !important; @@ -25,9 +45,20 @@ } :global(.vtex-product-summary-2-x-imageContainer) { - width: 314px; + width: 100%; + max-width: 314px; height: 314px; + @media screen and (min-width: 375px) and (max-width: 768px) { + max-width: 124px; + height: 124px; + } + + @media screen and (min-width: 768px) and (max-width: 1024px) { + max-width: 291px; + height: 291px; + } + :global(.vtex-product-summary-2-x-imageNormal) { max-height: 314px !important; } @@ -44,6 +75,11 @@ line-height: 25px; color: #000000; + + @media screen and (min-width: 375px) and (max-width: 768px) { + font-size: 14px; + line-height: 19px; + } } } @@ -56,15 +92,37 @@ text-decoration-line: line-through; color: #bababa; padding-bottom: 8px; + + @media screen and (min-width: 375px) and (max-width: 768px) { + font-size: 12px; + line-height: 16px; + } + + :global(.vtex-product-price-1-x-listPriceValue) { + &::before { + content: "de "; + font-size: 14px; + } + + &::after { + content: " por"; + } + } } :global(.vtex-product-price-1-x-sellingPrice) { + display: block; text-align: center; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 24px; line-height: 33px; color: #000000; + + @media screen and (min-width: 375px) and (max-width: 768px) { + font-size: 18px; + line-height: 25px; + } } } @@ -100,6 +158,10 @@ align-items: center; margin-bottom: 64px; + @media screen and (min-width: 375px) and (max-width: 768px) { + margin-bottom: 32px; + } + .paginationDot { width: 10px; height: 10px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ef7ac46..a94c951 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,12 +1,21 @@ .container { padding: 0 40px; + @media screen and (min-width: 1920px) { + max-width: 115rem !important; + padding: 0; + } .productNameContainer--quickview { font-weight: 300; font-size: 20px; line-height: 34px; text-align: right; color: #575757; + + @media screen and (max-width: 1024px) { + text-align: unset; + margin-top: 32px; + } } .skuSelectorContainer { @@ -66,6 +75,10 @@ } } } + + .skuSelectorItem--verde { + display: none; + } .skuSelectorItem--selected { width: 40px; height: 40px; @@ -80,6 +93,13 @@ } } } + + .diagonalCross { + width: 10px; + margin: 0 auto; + color: black; + transform: rotate(60deg); + } } .skuSelectorSubcontainer--tamanho { @@ -179,8 +199,12 @@ } .shippingContainer { - display: flex; + margin-top: 16px; + margin-bottom: 16px; position: relative; + @media screen and (min-width: 768px) { + max-width: 280px; + } :global(.vtex-button) { font-size: 0; background-color: black; @@ -189,6 +213,8 @@ border: none; border-radius: 0; top: 27px; + position: absolute; + right: 0; &::before { content: "OK"; font-family: "Open Sans", sans-serif; @@ -287,11 +313,21 @@ } :global(.vtex-address-form__postalCode-forgottenURL) { - position: absolute; - right: 32px; - bottom: 15px; text-decoration: underline; + @media screen and (min-width: 375px) and (max-width: 768px) { + display: flex; + flex-direction: row-reverse; + } + + @media screen and (min-width: 768px) { + position: absolute; + right: -50%; + top: calc(50% + 13.5px); + transform: translateY(-50%); + padding: 0; + } + :global(.vtex__icon-external-link) { display: none; } @@ -309,6 +345,10 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + + @media screen and (max-width: 1024px) { + justify-content: start; + } } :global(.vtex-store-components-3-x-swiper-pagination), @@ -319,9 +359,21 @@ :global(.vtex-store-components-3-x-productImageTag) { object-fit: unset !important; - margin-bottom: 16px; max-height: 664px !important; max-width: 664px; + margin-bottom: 16px; + + @media screen and (min-width: 1920px) { + max-height: unset !important; + max-width: unset; + width: auto !important; + height: 904px !important; + } + + @media screen and (max-width: 1024px) { + max-width: 944px; + max-height: 944px !important; + } } :global(.vtex-store-components-3-x-figure) { @@ -331,6 +383,10 @@ :global(.vtex-store-components-3-x-carouselGaleryThumbs) { margin-top: unset; + + :global(.vtex-store-components-3-x-productImagesThumbCaret) { + display: none; + } } .thumbImg--video { @@ -340,10 +396,11 @@ .thumbImg { width: 90px !important; height: 90px; + border-radius: 8px; } .productImagesThumb { - max-width: 90px; + width: 90px !important; max-height: 90px !important; margin: 0 16px 0 0; } @@ -351,16 +408,33 @@ .newsletter--newsletter { display: flex; flex-direction: column; - height: 175px; + align-items: center; + height: 100%; + max-height: 175px; background-color: black; padding-bottom: 16px; padding-top: 32px; + @media screen and (max-width: 1024px) { + height: 220px; + max-height: unset; + padding-top: 64px; + } + .container--newsletter { margin: 0; + width: 100%; + padding: 0; + @media screen and (max-width: 1024px) { + padding: 0 16px; + } .form--newsletter { max-width: 774px !important; + + @media screen and (max-width: 1024px) { + max-width: 992px !important; + } .label--newsletter { display: flex; flex-direction: column; @@ -379,10 +453,16 @@ line-height: 25px; color: #929292; margin-top: 16px; + + @media screen and (max-width: 1024px) { + font-size: 16px; + line-height: 22px; + } } } .inputGroup--newsletter { + display: flex; padding-top: 16px; border-bottom: 1px solid #929292; @@ -398,12 +478,18 @@ font-size: 18px; line-height: 25px; color: #929292; + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + padding-left: 16px; + } } } .buttonContainer--newsletter { padding: 0; - border-bottom: 3px solid white; + border-bottom: 3px solid #bfbfbf; height: 32px; :global(.vtex-button) { @@ -425,3 +511,82 @@ } } } + +.subscriberContainer { + .title { + font-size: 0; + margin: 0; + + &::before { + content: "Produto Indisponível"; + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: #868686; + } + } + + .subscribeLabel { + font-size: 0; + + &::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + + color: #868686; + } + } + + :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 10px; + width: 100%; + } + + .inputName { + margin-right: 8px; + } + + .inputName, + .inputEmail { + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid #989898; + + :global(.vtex-styleguide-9-x-input) { + padding: 12px 14px; + } + } + } + + .submit { + grid-column: span 2; + + :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: none; + height: 49px; + width: 100%; + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "Avise-me"; + font-family: "Open Sans", sans-serif; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #ffffff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index c11c02d..024e867 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,26 +1,63 @@ .container--description { - margin: 16px 40px; height: 702px; + margin-top: 16px; + margin-bottom: 16px; + + @media screen and (min-width: 1920px) { + height: 974px; + } + + @media screen and (max-width: 1024px) { + height: 100%; + max-height: 1418px; + border-bottom: 1px solid #bfbfbf; + } .listContainer { display: flex; justify-content: space-around; border-bottom: 1px solid #bfbfbf; + @media screen and (max-width: 1024px) { + border-top: 1px solid #bfbfbf; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + } + .listItem { padding: 0; margin: 0; + @media screen and (max-width: 1024px) { + margin-bottom: 16px; + + &:first-child { + margin-top: 16px; + } + } + :global(.vtex-button) { background: white; border: none; - font-family: "Open Sans", sans-serif; font-size: 18px; text-transform: none; color: #bfbfbf; + @media screen and (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } + + @media screen and (min-width: 375px) and (max-width: 1024px) { + display: flex; + justify-content: start; + width: 100%; + } + :global(.vtex-button__label) { padding: 0; } @@ -30,6 +67,10 @@ .listItemActive { border-bottom: 2px solid black; + @media screen and (max-width: 1024px) { + border: none; + } + :global(.vtex-button) { color: black; } @@ -37,34 +78,66 @@ } .contentContainer { + padding-top: 32px; + + @media screen and (min-width: 1920px) { + padding-top: 64px; + } + + @media screen and (max-width: 1024px) { + padding-top: unset; + } .contentItem { display: flex; - :global(.vtex-store-components-3-x-productImagesContainer) { - width: 100%; - height: 100%; + @media screen and (max-width: 1024px) { + flex-direction: column; + } + + :global(.vtex-store-components-3-x-imageElement) { max-width: 632px; - max-height: 632px; - } + margin-left: 32px; - :global(.vtex-store-components-3-x-productImagesGallerySlide) { - margin: 32px 32px 16px 32px; - } + @media screen and (min-width: 1920px) { + height: 872px; + } - :global(.vtex-store-components-3-x-carouselGaleryThumbs) { - display: none; + @media screen and (min-width: 1920px) { + max-width: unset; + } + + @media screen and (max-width: 1024px) { + max-width: 944px; + margin-top: 16px; + margin-left: unset; + } } :global(.vtex-store-components-3-x-productDescriptionContainer) { - margin-top: 32px; margin-left: 32px; + @media screen and (max-width: 1024px) { + margin-top: 16px; + margin-left: unset; + margin-bottom: 16px; + } + :global(.vtex-store-components-3-x-productDescriptionTitle) { font-family: "Open Sans", sans-serif; font-size: 24px; line-height: 32px; color: #575757; + + @media screen and (min-width: 1920px) { + font-size: 32px; + line-height: 32px; + } + + @media screen and (max-width: 1024px) { + font-size: 20px; + line-height: 32px; + } } :global(.vtex-store-components-3-x-productDescriptionText) { @@ -73,6 +146,16 @@ line-height: 22px; color: #929292; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } } :global(.vtex-store-components-3-x-container) {