diff --git a/assets/pix-samuelcondack b/assets/pix-samuelcondack new file mode 100644 index 0000000..bcf46c3 --- /dev/null +++ b/assets/pix-samuelcondack @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/Placeholder.css b/react/Placeholder.css new file mode 100644 index 0000000..e69de29 diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,9 @@ +const Placeholder = () => { + if (typeof document !== 'undefined') { + const InputCep = document.querySelector('.vtex-address-form-4-x-input') + InputCep?.setAttribute('placeholder', 'Digite seu CEP') + } + + return null +} +export default Placeholder diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..47dc783 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./style.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..756d659 --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,54 @@ +[class*="html--quantityAndButton"] { + display: flex; + width: 100%; + gap: 10px; + margin-bottom: 16px; +} +[class*="vtex-add-to-cart-button-0-x-buttonText"]{ + font-size: 0; +} +[class*="vtex-add-to-cart-button-0-x-buttonText"]::before{ + content: 'ADICIONAR À SACOLA'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +@media (max-width: 576px) { + [class*="html--quantityAndButton"] { + flex-direction: column; + } +} + +[class*="html--prate"] { + display: flex; + flex-direction: column; +} + +[class*="add-to-cart-button"] { + width: 100%; +} + +[class*='html']>[class*='button'] { + width: 100%; + height: 49px; + border-radius: 0; + margin-right: 40px; + background: #000; + border: #000; +} + +[class*="html"]>[class*='flexRow'] { + width: 100%; + height: 49px; + display: flex; + align-items: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; +} diff --git a/react/imagempix.css b/react/imagempix.css new file mode 100644 index 0000000..73947fd --- /dev/null +++ b/react/imagempix.css @@ -0,0 +1,26 @@ +.pixwrapper { + display: flex; + flex-direction: row; + align-items: center; +} + +.priceandp { + margin-left: 26px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + margin-top: 6px; +} + +.priceandp>p { + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} \ No newline at end of file diff --git a/react/imagempix.tsx b/react/imagempix.tsx new file mode 100644 index 0000000..a4fc5cb --- /dev/null +++ b/react/imagempix.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' +import "./imagempix.css" + +const piximgacademy = () => { + + const CSS_HANDLES = [ + "pixwrapper", + "priceandp" + ] + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price + const discount = Number(productPrice) * 0.1 + const pixprice = Number(productPrice) - discount + return ( + <> +
+
+ imagem pix +
+
+ R$ {pixprice.toFixed(2).toString().replace(".",",")} +

10 % de desconto

+
+
+ + ) +} +export default piximgacademy; diff --git a/react/parcelamentoPage.css b/react/parcelamentoPage.css new file mode 100644 index 0000000..44c7d53 --- /dev/null +++ b/react/parcelamentoPage.css @@ -0,0 +1,6 @@ +.ParcelaWrapper { + margin: 0 0 8px 0; +} +.ParcelaWrapper > { + color: #929292; +} diff --git a/react/parcelamentoPage.tsx b/react/parcelamentoPage.tsx new file mode 100644 index 0000000..c82aa97 --- /dev/null +++ b/react/parcelamentoPage.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' + +import "./parcelamentoPage.css" + +const Parcelamento = () => { + const CSS_HANDLES = ['ParcelaWrapper'] + + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + + const Installments = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments, + } + const Price = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, + } + console.log(product) + return ( + + {Installments.numberOfInstallments} x de R$  + {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem + juros + + ) +} + +export default Parcelamento diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..04555c6 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,7 +2,7 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. + "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__", @@ -14,9 +14,10 @@ "newsletter" ] }, - "list-context.image-list#demo": { - "children": ["slider-layout#demo-images"], + "children": [ + "slider-layout#demo-images" + ], "props": { "height": 570, "preload": true, @@ -44,7 +45,6 @@ "blockClass": "carousel" } }, - "rich-text#shelf-title": { "props": { "text": "## Summer", @@ -52,11 +52,17 @@ } }, "flex-layout.row#shelf": { - "children": ["list-context.product-list#demo1"] + "children": [ + "list-context.product-list#demo1" + ] }, "list-context.product-list#demo1": { - "blocks": ["product-summary.shelf"], - "children": ["slider-layout#demo-products"], + "blocks": [ + "product-summary.shelf" + ], + "children": [ + "slider-layout#demo-products" + ], "props": { "orderBy": "OrderByTopSaleDESC" } @@ -73,7 +79,6 @@ "blockClass": "shelf" } }, - "info-card#home": { "props": { "id": "info-card-home", @@ -87,14 +92,12 @@ "textAlignment": "center" } }, - "rich-text#question": { "props": { "text": "**This is an example store built using the VTEX platform.\nWant to know more?**", "blockClass": "question" } }, - "rich-text#link": { "props": { "text": "\n**Reach us at**\nwww.vtex.com.br", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..e099dc2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,34 +3,260 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "html#product-description", "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + // "product-specification-group#table", + "html#slider", + "product-questions-and-answers", + "newsletter" ] }, + "list-context.product-list#demo1": { + "blocks": [ + "product-summary.shelf#demo1" + ], + "children": [ + "slider-layout#demo-products" + ] + }, + "product-summary.shelf#demo1": { + "children": [ + "html#prateleira" + ] + }, + "html#prateleira": { + "props": { + "blockClass": "prate", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price", + "product-summary-description" + // "product-summary-price", + ] + }, + "product-summary-image": { + "props": { + "aspectRatio": { + "desktop": "1:1" + } + } + }, + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + }, + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": [ + "list-context.product-list#demo1" + ] + }, + "html#quantityAndButton": { + "props": { + "blockClass": "quantityAndButton" + }, + "children": [ + "html#product-quantity", + "html#add-to-cart-button" + ] + }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": [ + "product-quantity" + ] + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": [ + "shipping-simulator" + ] + }, + "Pix-academy": { + "props": { + "blockClass": "pix-wrapper" + } + }, + "tab-layout#desc": { + "children": [ + "tab-list#home", + "tab-content#desc" + ], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] + }, + "tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } + }, + "tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } + }, + "tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } + }, + "tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } + }, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc3" + } + }, + "tab-content.item#desc4": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc4" + } + }, + "tab-content.item#desc5": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc5" + } + }, "html#breadcrumb": { "props": { "tag": "section", "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": [ + "breadcrumb" + ] }, "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] + "children": [ + "rich-text#specifications" + ] }, "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "flex-layout.row#description-row": { "props": { - "marginBottom": 7 + "blockClass": "description-row" }, - "children": ["product-description"] + "children": [ + "flex-layout.col#image-description", + "flex-layout.col#description" + ] + }, + "flex-layout.col#description": { + "props": { + "blockClass": "description" + }, + "children": [ + "product-description" + ] + }, + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": [ + "tab-layout#desc" + ] + }, + "product-description": { + "props": { + "blockClass": "product-description-m3" + } + }, + "flex-layout.col#image-description": { + "props": { + "blockClass": "image-description" + }, + "children": [ + "image#img-descricao" + ] + }, + "image#img-descricao": { + "props": { + "blockClass": "img-descricao", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } }, "condition-layout.product#availability": { "props": { @@ -52,20 +278,21 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": [ + "flex-layout.col#stack", + "flex-layout.col#right-col" + ] }, - "stack-layout": { "props": { "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#imagens", "product-bookmark", "product-specification-badges" ] }, - "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -74,24 +301,38 @@ "displayValue": "SPECIFICATION_NAME" } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "children": [ + "stack-layout" + ], "props": { - "width": "60%", + "width": "54%", "rowGap": 0 } }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": [ + "product-images" + ] + }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": [ + "product-images" + ] }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { @@ -100,46 +341,95 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "html#selling-price", + "html#product-installments", + "html#pixacademy", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#sku-selector", + "html#quantityAndButton", + "Placeholder", + "html#shipping-simulator" ] }, + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": [ + "product-selling-price" + ] + }, + "html#pixacademy": { + "props": { + "testId": "pix-price", + "blockClass": "pix-wrapper" + }, + "children": [ + "Pix-academy" + ] + }, + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": [ + "product-installments" + ] + }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": [ + "vtex.store-components:product-name" + ] + }, "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product-name", + "testId": "product-name" }, - "children": ["vtex.store-components:product-name"] + "children": [ + "vtex.store-components:product-name" + ] + }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": [ + "sku-selector" + ] }, - "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true } }, - "flex-layout.row#buy-button": { "props": { "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": [ + "add-to-cart-button" + ] + }, + "html#add-to-cart-button": { + "props": { + "blockClass": "add-to-cart-button", + "testId": "add-to-cart-button" + }, + "children": [ + "add-to-cart-button" + ] }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -159,19 +449,29 @@ "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" + ] + }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": [ + "product-identifier.product" ] }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" }, - "children": ["availability-subscriber"] + "children": [ + "availability-subscriber" + ] }, - "share#default": { "props": { "social": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..e028d6b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,14 @@ "html": { "component": "html", "composition": "children" + }, + "Parcelamento": { + "component": "parcelamentoPage" + }, + "Pix-academy": { + "component": "imagempix" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..2e96d06 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..c0a25ad --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,53 @@ +/* +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 */ +.container { + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; + align-items: center; +} +.container .homeLink .homeIcon { + display: none; +} +.container :global(.vtex-breadcrumb-1-x-link) { + font-size: 14px; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; + color: #929292; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .homeLink:hover::before { + color: #0f3e99; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + font-size: 14px; + color: #929292; +} +.container .arrow--1 .link:hover::before { + color: #0f3e99; +} + +.termArrow { + display: none; +} + +.term { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.button.css b/styles/css/vtex.button.css new file mode 100644 index 0000000..f3eadae --- /dev/null +++ b/styles/css/vtex.button.css @@ -0,0 +1,12 @@ +/* +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 */ +.bg-action-primary { + background-color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..7c5f074 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,93 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { +/* +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 */ +.flexRowContent--description-row { display: flex; - max-height: 100%; + justify-content: center; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.product-identifier--productReference { + display: flex; + justify-content: right; + color: rgba(146, 146, 146, 0.48); + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; +.pixWrapper { + display: flex; + flex-direction: row; } -.flexRow--addToCartRow { - padding-bottom: 1rem; +.pix-wrapper { + display: none; } + +:global(.vtex__icon-external-link) { + display: none; +} + +:global(.vtex-store-components-3-x-productImageTag) { + max-height: none !important; +} + +@media (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} + +:global(.vtex-product-price-1-x-installments) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +:global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +@media (min-width: 1920px) { + :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} + +:global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media (min-width: 1920px) { + :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-costumizer.css b/styles/css/vtex.product-costumizer.css new file mode 100644 index 0000000..1da8082 --- /dev/null +++ b/styles/css/vtex.product-costumizer.css @@ -0,0 +1,12 @@ +/* +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 */ +.productAssemblyGroupNameRow { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..84eb573 --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,24 @@ +/* +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 */ +.productAssemblyGroupName { + display: none; +} + +.productAssemblyGroupRequiredTag { + display: none; +} + +.textInputValue { + display: none; +} + +.flexColChild { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..f229f50 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,37 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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 { + display: flex; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + margin-bottom: 24px; + color: rgba(146, 146, 146, 0.48); } +@media (max-width: 1024px) { + .product-identifier { + text-align: left; + justify-content: left; + margin-bottom: 24px; + } +} +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; +} + +.product-identifier__value { + text-align: right; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b5da121 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,46 @@ +/* +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 */ .listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + text-align: center; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #BABABA; +} +@media (max-width: 376px) { + .listPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + text-align: center; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +@media (max-width: 376px) { + .sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..4bfb790 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,45 @@ +/* +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 */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..c665577 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,4 +7,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + justify-content: center; + padding: 16px 0; +} +.container .heading { + font-size: 0; + text-align: center; +} +.container .heading::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..fdde16e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,196 @@ +/* +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 */ .sliderLayoutContainer { + padding: 0 40px 32px; + margin-bottom: 32px; + padding: 16px 40px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; +} +.sliderLayoutContainer .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; +} +@media (max-width: 320px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 10px; + } +} +.sliderLayoutContainer .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; +} +@media (max-width: 320px) { + .sliderLayoutContainer .sliderRightArrow { + right: 10px; + } +} +.sliderLayoutContainer .sliderTrackContainer { + margin: 0 auto; + width: 94%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 2px; +} +@media (min-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 8px; + } +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; + } +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + height: 100%; + min-height: 94px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.sliderTrackContainer { - max-width: 100%; +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + height: 50px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (max-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 16px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + padding: 0; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; +} +.sliderLayoutContainer .paginationDotsContainer { + align-items: center; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..69442c7 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 @@ -7,6 +8,567 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +.container--product-description-m3 { + padding: 0 !important; +} + +.container { + padding: 0 40px; +} +@media (max-width: 1024px) { + .container :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + } +} + +:global(.vtex-store-components-3-x-imageElement--img-descricao) { + width: 100%; +} + +:global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 16px 0; +} +@media (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-bottom: 50px; + } +} + .newsletter { - background: red; + background: black; + padding: 32px 0; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #FFFFFF; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} + +.shippingTable { + display: block; +} + +.carouselGaleryThumbs { + width: 70%; +} +@media (max-width: 639px) { + .carouselGaleryThumbs { + display: flex; + width: 100%; + } +} + +.productNameContainer { + display: flex; + justify-content: right; + margin-bottom: 8px; +} +@media (max-width: 1024px) { + .productNameContainer { + justify-content: left; + } +} +.productNameContainer .productBrand--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +@media (max-width: 1024px) { + .productNameContainer .productBrand--quickview { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } +} + +.productDescriptionContainer { + max-width: 632px; + margin-left: 32px; +} +@media (max-width: 1024px) { + .productDescriptionContainer { + max-width: 100%; + margin-left: 0; + } +} + +.pointerEventsNone { + display: none; +} + +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.frameAround, +.skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorItem { + height: 43px; +} +.skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; +} +.skuSelectorSubcontainer--tamanho .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; +} + +.frameAround { + border-color: #000; +} + +.skuSelectorSubcontainer { + margin-bottom: 16px; +} + +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer { + margin-top: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.subscriberContainer .title { + font-size: 0; + margin-bottom: 0; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; +} +.subscriberContainer .form .content .input { + margin: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; +} +.subscriberContainer .form .content .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "avise-me"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 100%; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +@media (max-width: 476px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + left: 120px; + top: 85px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: black; + text-decoration: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child { + display: none; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + padding: 0 14.5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; +} + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +@media (max-width: 376px) { + .shippingTable .shippingTableHead .shippingTableRow { + margin-top: 16px; + } +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; +} +@media (max-width: 376px) { + .shippingTable .shippingTableBody .shippingTableRow { + justify-content: center; + align-items: center; + } +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 108px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +.subscriberContainer { + margin-bottom: 56px; +} + +.carouselGaleryThumbs :first-child { + height: 90px; +} +@media (max-width: 639px) { + .carouselGaleryThumbs :first-child { + margin: 0; + } +} +.carouselGaleryThumbs :first-child :first-child { + gap: 16px !important; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + max-width: 90px; + height: fit-content !important; + width: fit-content !important; + max-height: 90px; + margin: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + border-radius: 8px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..b661ae9 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,130 @@ +/* +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 */ +.listContainer { + margin-bottom: 32px; + display: flex; + flex-direction: row; + padding-right: 40px; + padding-left: 40px; + justify-content: space-around; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; +} +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + } + .listContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } +} +@media (max-width: 1024px) and (max-width: 1024px) { + .listContainer::before { + margin-bottom: 8px; + } +} +@media (max-width: 1024px) { + .listContainer::after { + bottom: 0px; + } +} +.listContainer::after { + content: ""; + background-color: #BFBFBF; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; +} +@media (max-width: 1024px) { + .listContainer::after { + bottom: 0 !important; + margin-top: 8px !important; + } +} + +@media (max-width: 1024px) { + .listItem { + margin-top: 8px; + margin-bottom: 8px; + padding: 0; + } + .listItem :global(.vtex-button) { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + } +} + +.listItem :global(.vtex-button) { + background-color: white; + color: #BFBFBF; + border: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} +@media (min-width: 1920px) { + .listItem :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + } +} + +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +@media (min-width: 1920px) { + .listItemActive :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000; + } +} +@media (max-width: 1024px) { + .listItemActive :global(.vtex-button) { + border: 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 ea7d5b9..f7710ca 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..e5df527 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,48 @@ +.container { + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; + align-items: center; + .homeLink { + .homeIcon { + display: none; + } + } +:global(.vtex-breadcrumb-1-x-link){ + font-size: 14px; +} + .homeLink::before { + content: 'Home'; + font-size: 16px; + color: #929292; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .homeLink:hover::before { + color: #0f3e99; + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: 'Sapatos'; + font-size: 14px; + color: #929292; + + } + .link:hover::before { + color: #0f3e99; + } + } +} +.termArrow{ + display: none; +} +.term{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..76f599c --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,71 @@ +.flexRowContent--description-row{ + display: flex; + justify-content: center; +} +.product-identifier--productReference{ + display: flex; + justify-content: right; + color: rgba(146, 146, 146, 0.48); + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.pixWrapper{ + display: flex; + flex-direction: row; + } +.pix-wrapper{ + display: none; +} +:global(.vtex__icon-external-link){ + display: none; +} +:global(.vtex-store-components-3-x-productImageTag){ + max-height: none !important; +} +.stretchChildrenWidth { + @media (max-width: 1024px) { + width: 100% !important; + padding: 0; + } +} +:global(.vtex-product-price-1-x-installments){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +:global(.vtex-store-components-3-x-productDescriptionTitle){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + @media (min-width: 1920px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} +:global(.vtex-store-components-3-x-productDescriptionText){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + @media (min-width: 1920px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} diff --git a/styles/sass/pages/product/vtex.product-customizer.scss b/styles/sass/pages/product/vtex.product-customizer.scss new file mode 100644 index 0000000..2e3102b --- /dev/null +++ b/styles/sass/pages/product/vtex.product-customizer.scss @@ -0,0 +1,12 @@ +.productAssemblyGroupName{ + display: none; +} +.productAssemblyGroupRequiredTag{ + display: none; +} +.textInputValue{ + display: none; +} +.flexColChild{ + display: none; +} 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..02de0c5 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,27 @@ +.product-identifier { + display: flex; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + margin-bottom: 24px; + @media (max-width: 1024px){ + text-align: left; + justify-content: left; + margin-bottom: 24px; + } + + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label, + .product-identifier__separator { + display: none; + } +} +.product-identifier__value{ + text-align: right; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..8c2aefb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,33 @@ +.listPrice{ + text-align: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #BABABA; + @media (max-width: 376px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + +} +.sellingPrice{ + text-align: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; + @media (max-width: 376px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..8b339ef --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,42 @@ +.quantitySelectorContainer { + margin: 0; + + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; + + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..ed9970d 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,18 @@ +.container{ + justify-content: center; + padding: 16px 0; + .heading{ + font-size: 0; + text-align: center; + &::before{ + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + } + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..318e68a --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,201 @@ +.sliderLayoutContainer { + padding: 0 40px 32px; + margin-bottom: 32px; + padding: 16px 40px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; + + .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; + @media (max-width: 320px){ + left: 10px; + } + } + + .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; + @media (max-width: 320px){ + right: 10px; + } + } + + .sliderTrackContainer { + margin: 0 auto; + width: 94%; + + .sliderTrack { + gap: 2px; + @media (min-width: 300px){ + gap: 8px; + } + @media (min-width: 500px){ + gap: 16px; + } + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + :global(.vtex-product-summary-2-x-element) { + padding: 0; + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + :global(.vtex-store-components-3-x-discountContainer) { + :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + height: 100%; + min-height: 94px; + } + } + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; + justify-content: center; + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + @media (min-width: 500px) { + height: 50px; + } + @media (max-width: 300px) { + font-size: 16px; + } + } + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + align-items: center; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + padding: 0; + + :global(.vtex-product-or-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + align-items: center; + // bottom: -32px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + } + + .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..0619692 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,606 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap'); + +.container--product-description-m3{ + padding: 0 !important; +} +.container{ + padding: 0 40px; + :global(.vtex-flex-layout-0-x-flexRowContent){ + @media (max-width: 1024px){ + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + } + } +} +:global(.vtex-store-components-3-x-imageElement--img-descricao){ + width: 100%; +} +:global(.vtex-flex-layout-0-x-flexRow){ + :global(.vtex-store-components-3-x-container){ + :global(.vtex-flex-layout-0-x-flexRowContent){ + padding: 0; + margin: 16px 0; + @media (max-width: 1024px){ + margin-bottom: 50px; + } + } + } +} .newsletter{ - background: red; -} \ No newline at end of file + background: black; + padding: 32px 0; + .container{ + .form{ + .label{ + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; + &::before{ + content: 'Assine nossa newsletter'; + font-size: 24px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #FFFFFF; + } + &::after{ + content: 'Receba ofertas e novidades por e-mail'; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + } + } + .inputGroup{ + display: flex; + justify-content: center; + :global(.vtex-input){ + :global(.vtex-input-prefix__group){ + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + :global(.vtex-styleguide-9-x-input){ + background: black; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; + &::before{ + content: 'Digite seu e-mail'; + font-size: 16px; + color: white; + } + } + } + } + :global(.vtex-store-components-3-x-buttonContainer){ + padding: 0; + :global(.vtex-button){ + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } + } + .shippingTable{ + display: block; + } +.carouselGaleryThumbs { + width: 70%; + @media (max-width: 639px){ + display: flex; + width: 100%; + } +} +// .productImageTag{ +// width: unset !important; +// } +.productNameContainer{ + display: flex; + justify-content: right; + margin-bottom: 8px; + @media (max-width: 1024px){ + justify-content: left; + } + + + .productBrand--quickview{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + @media (max-width: 1024px){ + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } + } +} +.productDescriptionContainer{ + max-width: 632px; + margin-left: 32px; + @media (max-width: 1024px){ + max-width: 100%; + margin-left: 0; + } +} +.pointerEventsNone{ + display: none; +} +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + +} +.skuSelectorContainer{ + display: flex; + flex-direction: column-reverse; +} +.frameAround, +.skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorItem { + height: 43px; + } + + .frameAround { + width: 40px; + height: 40px; + + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; + } + .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; + } +} + +.frameAround { + border-color: #000; +} +.skuSelectorSubcontainer{ + margin-bottom: 16px; +} +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorSelectorImageValue { + font-size: 0; + } + .skuSelectorName::before { + content: 'OUTRAS CORES'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + margin-top: 16px; + .skuSelectorName { + font-size: 0; + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + // border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + + } + } + } +} +.subscriberContainer { + .title { + font-size: 0; + margin-bottom: 0; + } + .title::before { + content: 'Produto indisponível'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .subscribeLabel { + font-size: 0; + } + .subscribeLabel::before { + content: 'Deseja saber quando estiver disponível?'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .form { + .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; + + .input { + margin: 0; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + } + } + } + } + .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; + + :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; + + :global(.vtex-button__label) { + padding: 12px; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'avise-me'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; + } + } + } + } + } +} +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + @media (max-width: 376px){ + flex-direction: column; + } + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: 'CALCULAR FRETE:'; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 100%; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + } + } + :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + @media (max-width: 476px){ + left: 120px; + top: 85px; + } + + :last-child{ + color: black; + text-decoration: underline; + } + :global(.vtex-address-form__postalCode-forgottenURL):first-child { + display: none; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + padding: 0 14.5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: 'OK'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; + + .shippingTableHead { + display: flex; + .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + @media (max-width: 376px){ + margin-top: 16px; + } + + .shippingTableHeadDeliveryEstimate { + order: 2; + } + .shippingTableHeadDeliveryPrice { + font-size: 0; + } + .shippingTableHeadDeliveryPrice::before { + content: 'FRETE'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + @media (max-width: 376px){ + justify-content: center; + align-items: center; + } + + .shippingTableCell { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; + } + + .shippingTableCellDeliveryEstimate { + order: 2; + } + .shippingTableCellDeliveryPrice { + width: 108px; + } + .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; + + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} +.subscriberContainer{ + margin-bottom: 56px; +} +.carouselGaleryThumbs { + :first-child { + height: 90px; + @media (max-width:639px){ + margin: 0; + } + + :first-child { + gap: 16px !important; + + .productImagesThumb { + max-width: 90px; + height: fit-content !important; + width: fit-content !important; + max-height: 90px; + margin: 0; + // @media (max-width: 639px){ + // height: 90px; + // width: 90px; + // } + .figure { + .thumbImg { + border-radius: 8px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..581e8f9 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,107 @@ +.listContainer{ + margin-bottom: 32px; + display: flex; + flex-direction: row; + padding-right: 40px; + padding-left: 40px; + justify-content: space-around; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; + @media (max-width: 1024px) { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + @media (max-width: 1024px){ + margin-bottom: 8px; + } + } + + &::after { + bottom: 0px; + } + } + &::after{ + content: ""; + background-color: #BFBFBF; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; + @media (max-width: 1024px){ + bottom: 0 !important; + margin-top: 8px !important; + } + } +} +.listItem { + @media (max-width: 1024px) { + margin-top: 8px; + margin-bottom: 8px; + padding: 0; + + :global(.vtex-button) { + margin: 0; + padding: 0; + :global(.vtex-button__label) { + padding: 0 !important; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + } + } + } +} +.listItem :global(.vtex-button){ + background-color: white; + color: #BFBFBF; + border: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; + @media (min-width: 1920px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + } +} +.listItemActive :global(.vtex-button){ + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + @media (min-width: 1920px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000; + } + @media (max-width: 1024px){ + border: 0; + } +}