diff --git a/assets/pix-logo.png b/assets/pix-logo.png new file mode 100644 index 0000000..3458b4a Binary files /dev/null and b/assets/pix-logo.png differ diff --git a/gulpfile.js b/gulpfile.js index 4a85dd0..f5a5aa3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,12 +23,12 @@ const pathsStore = { // Quick/efficient way to get the unique values from a array. function uniqValuesArray(a) { - var seen = {}; - var out = []; - var len = a.length; - var j = 0; - for (var i = 0; i < len; i++) { - var item = a[i]; + let seen = {}; + let out = []; + let len = a.length; + let j = 0; + for (let i = 0; i < len; i++) { + let item = a[i]; if (seen[item] !== 1) { seen[item] = 1; out[j++] = item; 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/Example.tsx b/react/Example.tsx index 7d550e5..fe63560 100644 --- a/react/Example.tsx +++ b/react/Example.tsx @@ -1,3 +1,3 @@ import Example from "./components/Example/Example"; -export default Example; \ No newline at end of file +export default Example; diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..1373321 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix"; + +export default Pix; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..53ea3ff --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/index"; + +export default Placeholder; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..3511a1f 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..677f6e0 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,399 @@ +[class*="html--pdp-breadcrumb"] { + margin: 16px 40px; +} + +[class*="html--pdp-breadcrumb"] :global(.vtex-breadcrumb-1-x-container) { + padding: 0; +} + +[class*="html--product-main"] { + display: flex; + padding: 0 40px 16px; + gap: 32px; +} + +[class*="html--product-availability"] { + display: flex; + padding: 0 40px 16px; + gap: 32px; +} + +[class*="html--info-availability"] { + width: 48.8235294%; +} + +[class*="html--stack"] { + width: 48.8235294%; +} + +[class*="html--right-col"] { + width: 48.8235294%; +} + +[class*="html--product-name"] { + text-align: end; + margin-bottom: 16px; +} + +[class*="html--buy-container"] { + display: flex; + margin-bottom: 16px; +} + +[class*="html--buy-container"] :global(.vtex-store-components-3-x-container) { + padding: 0; + margin-left: 10px; +} + +[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRowContent) { + background-color: red; + margin: 0; + padding: 0; +} + +[class*="html--buy-container"] :global(.vtex-button) { + background-color: #000; + padding: 12px 0; + border: none; + /* font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; */ + border-radius: 0; + height: 49px; +} + +[class*="html--buy-container"] + :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; +} + +[class*="html--buy-container"] + :global(.vtex-add-to-cart-button-0-x-buttonText)::after { + content: "Adicionar à sacola"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; + text-transform: uppercase; +} + +[class*="html--buy-button"] { + flex: 1; +} + +[class*="html--message-availability"] { + width: 60.090361%; +} + +[class*="html--message-availability"] :global(.vtex-store-components-3-x-form) { + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + margin: 0; + display: grid; + gap: 8px; + row-gap: 15px; + grid-auto-columns: 1fr 1fr; + grid-template: + "name email" + "buttonSubmit buttonSubmit"; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-input) { + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + padding: 12px 14px; +} + +[class*="html--message-availability"] + :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: #989898; +} + +[class*="html--message-availability"] :global(.vtex-styleguide-9-x-input) { + padding: 0; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputName) { + grid-area: name; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: email; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-submit) { + grid-area: buttonSubmit; + width: 100%; + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-button) { + width: 100%; + height: 49px; + border: none; + border-radius: 0; + background-color: #000; +} + +[class*="html--message-availability"] :global(.vtex-button__label) { + font-size: 0; +} +[class*="html--message-availability"] :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + +[class*="html--related-product"] { + padding: 0 59.2px; +} + +[class*="html--related-product"] :global(.vtex-rich-text-0-x-heading) { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLeftArrow) { + padding: 0; + left: -17px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderRightArrow) { + padding: 0; + right: -17px; +} + +[class*="html--related-product"] :global(.vtex-slider-layout-0-x-caretIcon) { + display: none; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLeftArrow)::after { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg"); + width: 11.2px; + height: 29.6px; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg"); + width: 11.2px; + height: 29.6px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { + flex-direction: column; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + position: initial; + margin-top: 32px; + margin-bottom: 64px; + align-items: center; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDot) { + background-color: #000; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDot--isActive) { + padding: 7.5px; + border: 0.5px solid #000; + background-color: transparent; +} + +[class*="html--product-item"] { + display: flex; + flex-direction: column; + height: 100%; +} + +[class*="html--product-item"] :global(.vtex-product-price-1-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + margin: 8px 0; +} +[class*="html--product-item"] :global(.vtex-product-price-1-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +[class*="html--newsletter"] { + background-color: #000; + padding: 32px 40px 16px; +} + +@media screen and (min-width: 1920px) { + [class*="html--pdp-breadcrumb"] { + margin: 16px 360px; + } + + [class*="html--product-main"] { + padding: 0 360px 16px; + } + [class*="html--product-availability"] { + padding: 0 360px 16px; + } + + [class*="html--stack"] { + width: 49.13043478%; + } + + [class*="html--info-availability"] { + width: 49.13043478%; + } + + [class*="html--related-product"] { + padding: 0 479px; + } +} + +@media screen and (max-width: 1024px) { + [class*="html--product-main"] { + display: block; + padding: 0 40px; + } + + [class*="html--product-availability"] { + display: block; + padding: 0 40px; + } + + [class*="html--stack"] { + width: 100%; + } + [class*="html--info-availability"] { + width: 100%; + } + + [class*="html--right-col"] { + width: 100%; + } + + [class*="html--product-name"] { + text-align: start; + } + + [class*="html--buy-container"] :global(.vtex-button__label) { + padding: 0; + } + + [class*="html--message-availability"] { + width: 100%; + } + + [class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + max-width: none; + width: 100%; + } + + [class*="html--related-product"] { + padding: 0 50.9px; + } + + [class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + margin-top: 24px; + } + + [class*="html--related-product"] :global(.vtex-rich-text-0-x-heading) { + margin-bottom: 24px; + margin-top: 16px; + } +} + +@media screen and (max-width: 768px) { + [class*="html--buy-container"] { + display: block; + } + + [class*="html--buy-container"] :global(.vtex-store-components-3-x-container) { + margin: 0; + margin-top: 10px; + } + + [class*="html--buy-container"] :global(.vtex-button) { + height: 70px; + } + + + + [class*="html--related-product"] { + padding: 0 47.2px; + } + + [class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + margin-top: 16px; + margin-bottom: 32px; + } + + [class*="html--newsletter"] { + padding: 32px 16px 16px; + } +} diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx new file mode 100644 index 0000000..d7f64d0 --- /dev/null +++ b/react/components/Pix/index.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + const precoAtual = Number( + product?.product?.priceRange.sellingPrice.highPrice + ); + + const desconto = (precoAtual * 10) / 100; + + const precoNovo = precoAtual - desconto; + + const fechApi = async () => { + fetch("/api/checkout/pub/orderForms/simulation", { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: `{ + "items": [ + { + "id": ${product?.selectedItem?.itemId}, + "seller": ${product?.selectedItem?.sellers[0].sellerId}, + "quantity": ${product?.selectedQuantity} + } + ], + "country": "BRA" + }`, + }) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + + fechApi(); + + return ( +
+
+ logo do Pix +
+ +
+

+ R$ {precoNovo.toFixed(2).replace(".", ",")} +

+

10 % de desconto

+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..c87225f --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,37 @@ +.pixWrapper { + display: flex; + gap: 26px; + margin:8px 0 16px; + align-items: center; +} + +.pixImageContainer { + margin: 0; +} + +.pixImage { + width: 66px; +} +/* +.descriptionContainer { + +} */ + +.newPrice { + margin: 0; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.discount { + margin: 0; + + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/Placeholder/index.tsx b/react/components/Placeholder/index.tsx new file mode 100644 index 0000000..53b6166 --- /dev/null +++ b/react/components/Placeholder/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +const Example = () => { + if (typeof document !== "undefined") { + const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); + const inputEmail = document.querySelector(".vtex-store-components-3-x-inputEmail"); + + if (inputCEP) { + inputCEP.setAttribute("placeholder", "Digite seu CEP"); + } + + if (inputEmail) { + console.log(inputEmail.children[0].children[0].children[0].setAttribute("placeholder", "E-mail")); + + } + } + + return <>; +}; + +export default Example; diff --git a/react/types/index.d.ts b/react/types/index.d.ts new file mode 100644 index 0000000..cbe652d --- /dev/null +++ b/react/types/index.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..8a7a101 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,15 +1,219 @@ { "store.product": { "children": [ + "placeholder", "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "html#tab-layout", + "html#relatedProduct", + "html#newsletter" ] }, + + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "html#newsletter": { + "props": { + "blockClass": "newsletter" + }, + "children": ["rich-text#newsletter", "newsletter#pdp"] + }, + + "rich-text#newsletter": { + "props": { + "text": "Assine nossa newsletter", + "blockClass": "title-newsletter" + } + }, + + "newsletter#pdp": { + "props": { + "blockClass": "product-newsletter", + "label": "Receba ofertas e novidades por e-mail", + "placeholder": "Digite seu e-mail", + "submit": "ENVIAR" + } + }, + + "html#relatedProduct": { + "props": { + "blockClass": "related-product" + }, + "children": ["rich-text#title-relatedProduct", "html#product-list"] + }, + + "rich-text#title-relatedProduct": { + "props": { + "text": "## Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "blockClass": "title-related-product" + } + }, + + "list-context.product-list": { + "blocks": ["product-summary.shelf#related-product"], + "children": ["slider-layout"] + }, + + "html#product-list": { + "props": { + "testId": "product-summary-list", + "blockClass": "product-list" + }, + "children": ["list-context.product-list"] + }, + + "html#product-item": { + "props": { + "blockClass": "product-item", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#related-product", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] + }, + + "product-list-price": { + "props": { + "message": "de {listPriceValue} por" + } + }, + + + "product-summary.shelf#related-product": { + "children": [ + "html#product-item" + ] + }, + + "product-summary-image#related-product": { + "props": { + "showBadge": false, + "aspectRatio": "1:1" + } + }, + + "slider-layout": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description01" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description01", + "tab-list.item#description02", + "tab-list.item#description03", + "tab-list.item#description04", + "tab-list.item#description05" + ] + }, + + "tab-list.item#description01": { + "props": { + "tabId": "description01", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description02": { + "props": { + "tabId": "description02", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description03": { + "props": { + "tabId": "description03", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description04": { + "props": { + "tabId": "description04", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description05": { + "props": { + "tabId": "description05", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description01", + "tab-content.item#description02", + "tab-content.item#description03", + "tab-content.item#description04", + "tab-content.item#description05" + ] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + "tab-content.item#description01": { + "props": { + "tabId": "description01" + }, + "children": ["product-images#description", "product-description"] + }, + + "tab-content.item#description02": { + "props": { + "tabId": "description02" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description03": { + "props": { + "tabId": "description03" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description04": { + "props": { + "tabId": "description04" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description05": { + "props": { + "tabId": "description05" + }, + "children": ["product-images#description", "product-description"] + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,20 +222,7 @@ }, "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -39,20 +230,15 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["html#stack", "html#right-col"] }, "stack-layout": { @@ -60,7 +246,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-image", "product-bookmark", "product-specification-badges" ] @@ -75,56 +261,131 @@ } }, - "flex-layout.col#stack": { + "html#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "blockClass": "stack" } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props": { + "blockClass": "product-image", + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true + "thumbnailAspectRatio": "1:1", + "thumbnailMaxHeight": 90, + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "thumbnailVisibility": "visible" } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "right-col" }, "children": [ - "flex-layout.row#product-name", - "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", + "html#product-name", + "html#selling-price", + "html#installments", + "html#pix", + "html#sku-selector", + "html#buy-container", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, - "flex-layout.row#product-name": { + "html#shipping-simulator": { "props": { - "marginBottom": 3 + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "product-installments": { + "props": { + "markers": ["discount"], + "blockClass": "installments", + "message": "ou {installmentsNumber}x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" + }, + + "children": ["sku-selector"] + }, + + "html#pix": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["pix"] + }, + + "html#buy-container": { + "props": { + "blockClass": "buy-container" + }, + "children": ["html#product-quantity", "html#buy-button"] + }, + + "html#buy-button": { + "props": { + "blockClass": "buy-button", + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#buy-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#product-name": { + "props": { + "blockClass": "product-name" + }, + "children": ["html#name", "html#code"] + }, + + "html#name": { + "props": { + "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, + "html#code": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -140,46 +401,29 @@ "children": ["add-to-cart-button"] }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability" }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { "preventVerticalStretch": true, "rowGap": 0, "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#availability", + "sku-selector" ] }, - "flex-layout.row#availability": { + "html#availability": { "props": { "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } + } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..30740ad 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,14 +1,10 @@ { - "flex-layout.row#selling-price": { + "html#selling-price": { "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 + "testId": "product-price", + "blockClass": "selling-price" }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +15,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..6ea1ec9 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -37,7 +34,7 @@ "flex-layout.col#quickviewPrice": { "children": [ "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", + "html#selling-price", "product-installments" ] }, @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..720eebd 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,14 @@ "html": { "component": "html", "composition": "children" + }, + + "placeholder": { + "component": "Placeholder" + }, + + + "pix": { + "component": "Pix" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..92a5494 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Open Sans", sans-serif; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..64c4329 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ 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..707e8c4 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,26 @@ +/* +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 { + margin: 0; +} +.container .link, +.container .term { + color: #929292; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .homeLink::before { + content: "Home"; +} +.container .homeLink .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 a7c5732..34c4328 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,9 @@ -.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 { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-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 */ \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..f542881 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,19 @@ -.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__label, .product-identifier__separator { + display: none; } +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.478); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..1f72c44 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,28 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 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 */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000; } .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; + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } +.installments .installments-discount { + font-weight: 700; +} \ 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..6b6c6cf --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,77 @@ +/* +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-container) { + border: 1px solid #ccc; + width: 128px; + height: 49px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + padding: 0; + border: none; + height: auto; + flex: 1; + color: #929292; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__input):focus { + outline: none; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-left: 16px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-right: 16px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border: none; + width: auto !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + border: none; + width: auto !important; + background-color: transparent; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..68daeaa 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,40 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - +/* +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 { - text-align: start; + margin: 0 8px; + max-width: none !important; + border-radius: 0; } - -.imageContainer { - text-align: center; +.container .element { + padding: 0; } - -.image { - border-radius: 0.25rem; +.container .element .imageContainer { + width: 100%; } +.container .element .imageContainer :global(.vtex-store-components-3-x-discountContainer) { + width: 100%; +} +.container .element .nameContainer { + padding: 0; + margin-top: 16px; +} +.container .element .nameContainer .productBrand { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; +} +@media screen and (max-width: 1024px) { + .container .element .nameContainer .productBrand { + font-size: 14px; + line-height: 19px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..81300ec 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--title-newsletter { + width: 100%; + max-width: 774px; + margin: 0 auto; + padding-bottom: 8px; +} +.container--title-newsletter .wrapper--title-newsletter { + width: 100%; +} +.container--title-newsletter .wrapper--title-newsletter .paragraph { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..914e9a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,464 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; +} +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + margin-bottom: 32px; + display: block; + } +} +.carouselGaleryThumbs .productImagesThumbActive, +.carouselGaleryThumbs .productImagesThumb { + margin: 0 16px 0 0; + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; +} + +.productNameContainer { + margin-bottom: 8px; +} +.productNameContainer .productBrand { + color: #575757; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList { + margin: 0; + gap: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + background-image: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { + content: ""; + display: block; + width: 1px; + height: 40px; + background: #D5D5D5; + transform: rotate(45deg); + bottom: 0; + left: 50%; + position: relative; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin-bottom: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "Outras Cores:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem { + width: 48px; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid rgba(185, 185, 185, 0.6); + border-radius: 50%; + position: absolute; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + background-image: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { + content: ""; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; + position: absolute; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper { + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} + +.shippingContainer { + position: relative; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + padding-bottom: 16px; +} + +.shippingContainer :global(.vtex-input) { + width: auto; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-input) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} + +.shippingContainer :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + margin: 0; +} +.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #afafaf; +} + +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0 0 16.5px 32px; + color: #000000 !important; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 8px 0 0 0; + text-align: end; + width: 100%; + } +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000000 !important; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + margin: 0; + } +} + +.shippingContainer :global(.vtex-button) { + width: auto; + border: none; + top: 27px; + left: 234px; + position: absolute; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-button) { + right: 0; + left: auto; + } +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; + background-color: #000000; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} + +.shippingTable { + margin: 0; + padding: 0 0 16px 0; + border: none; + width: 326px; +} +@media screen and (max-width: 768px) { + .shippingTable { + width: 100%; + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: block; +} + +.shippingTableLabel, +.shippingTableCell, +.currencyContainer { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate, +.shippingTableHeadDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + text-align: start; +} + +.shippingTableRow { + display: flex; + gap: 32px; + padding-bottom: 15px; +} + +.shippingTableBody .shippingTableRow:last-child { + padding-bottom: 0; +} + +.shippingTableCell { + padding: 0; +} + +.shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { + width: 23.92638036%; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + order: 3; + width: 41.71779%; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + width: 14.723926%; +} + +.discountInsideContainer { + display: none; +} + +.newsletter--product-newsletter { + max-width: 774px; + margin: 0 auto; + width: 100%; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter { + max-width: none; + } +} +.newsletter--product-newsletter .container--product-newsletter { + padding: 0; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter { + margin: 0; + width: 100%; + max-width: none; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { + font-size: 16px; + line-height: 22px; + } +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter { + width: 100%; + border-bottom: 1px solid #929292; + display: flex; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer { + width: 10.852713178%; + padding: 0; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button) { + width: 100%; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 3px solid #bfbfbf; + min-height: auto; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button__label) { + width: 100%; + padding: 0 !important; + padding-bottom: 10px !important; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input) { + flex: 1; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input-prefix__group) { + border: none; + height: 29px; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 12px; + line-height: 16px; + } } \ 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..f2f2900 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,164 @@ +/* +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: 0 40px; +} +@media screen and (min-width: 1920px) { + .container { + padding: 0 360px; + } +} +.container .listContainer { + justify-content: space-between; + padding: 0 64px; + border-bottom: 1px solid #b9b9b9; +} +@media screen and (max-width: 1024px) { + .container .listContainer { + flex-direction: column; + padding: 8px 0; + border-top: 1px solid #b9b9b9; + } +} +.container .listContainer .listItem { + margin: 0; + padding: 0; + border-bottom: 2px solid transparent; +} +@media screen and (max-width: 1024px) { + .container .listContainer .listItem { + border: none; + } +} +.container .listContainer .listItemActive { + border-bottom: 2px solid #000; +} +@media screen and (max-width: 1024px) { + .container .listContainer .listItemActive { + border: none; + } +} +.container .listItem :global(.vtex-button) { + background-color: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + border: none; + padding: 0 16px; + width: 100%; +} +@media screen and (min-width: 1920px) { + .container .listItem :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} +@media screen and (max-width: 1024px) { + .container .listItem :global(.vtex-button) { + padding: 0; + } +} +.container .listItem :global(.vtex-button__label) { + padding: 0 !important; + text-align: start; + display: block; +} +.container .listItemActive :global(.vtex-button__label) { + color: #000; +} +.container .listItemActive :global(.vtex-button) { + border: none; + border-radius: 0; + color: #000; +} +.container .contentContainer { + padding: 32px 32px 16px; +} +@media screen and (max-width: 1024px) { + .container .contentContainer { + padding: 16px 0; + border-bottom: 1px solid #b9b9b9; + } +} +.container .contentContainer .contentItem { + display: flex; + gap: 32px; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem { + flex-direction: column; + gap: 16px; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 50%; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100%; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} +@media screen and (min-width: 1920px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 32px; + margin-bottom: 16px; + } +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 20px; + line-height: 32px; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-container) { + height: auto !important; + overflow: auto !important; +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-pointerEventsNone) { + display: none; +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media screen and (min-width: 1920px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-size: 14px; + line-height: 19px; + } +} \ 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 deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..3447b2f --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,24 @@ +.container { + margin: 0; + + .link, + .term { + color: $gray-500; + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .homeLink { + &::before { + content: "Home"; + } + + .homeIcon { + display: none; + } + } +} + \ No newline at end of file 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..9957e34 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,13 @@ +.product-identifier { + &__label, &__separator { + display: none; + } + + &__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-550; + } +} 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..9b9064b --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,20 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $black; +} + +.installments { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + + .installments-discount { + font-weight: 700; + } +} 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..5200baf --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,73 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper-container) { + border: 1px solid #ccc; + width: 128px; + height: 49px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + padding: 0; + border: none; + height: auto; + flex: 1; + color: #929292; + + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + &:focus { + outline: none; + } +} + +.quantitySelectorContainer + :global(.vtex-numeric-stepper__minus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-left: 16px; +} + +.quantitySelectorContainer + :global(.vtex-numeric-stepper__plus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-right: 16px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border: none; + width: auto !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + border: none; + width: auto !important; + background-color: transparent; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + + diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..8c07b51 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,32 @@ +.container { + margin: 0 8px; + max-width: none !important; + border-radius: 0; + + .element { + padding: 0; + + .imageContainer { + width: 100%; + } + .imageContainer :global(.vtex-store-components-3-x-discountContainer) { + width: 100%; + } + .nameContainer { + padding: 0; + margin-top: 16px; + .productBrand { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..216628b 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,18 @@ +.container--title-newsletter { + width: 100%; + max-width: 774px; + margin: 0 auto; + padding-bottom: 8px; + .wrapper--title-newsletter { + width: 100%; + .paragraph { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + margin: 0; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..6699917 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,502 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; + + @media screen and (max-width: 1024px) { + margin-bottom: 32px; + display: block; + } + + .productImagesThumbActive, + .productImagesThumb { + margin: 0 16px 0 0; + + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; + } +} + +.productNameContainer { + margin-bottom: 8px; + + .productBrand { + color: $gray-700; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor, + .skuSelectorSubcontainer--tamanho { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { + font-size: 0; + } + } + } + + .skuSelectorOptionsList { + margin: 0; + gap: 16px; + .skuSelectorItem { + margin: 0; + + .skuSelectorInternalBox { + .diagonalCross { + background-image: none; + + &::after { + content: ""; + display: block; + width: 1px; + height: 40px; + background: $gray-300; + + transform: rotate(45deg); + bottom: 0; + left: 50%; + position: relative; + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } + } + } + + .skuSelectorSubcontainer--cor { + margin-bottom: 16px; + + .skuSelectorName { + &::after { + content: "Outras Cores:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + + .skuSelectorOptionsList { + .skuSelectorItem { + width: 48px; + height: 48px; + + .skuSelectorInternalBox { + border: 1px solid $gray-450; + border-radius: 50%; + position: absolute; + + .diagonalCross { + background-image: none; + + &::after { + content: ""; + height: 48px; + } + } + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } + + .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorName { + &::after { + content: "OUTROS TAMANHOS:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + .skuSelectorOptionsList { + .skuSelectorItem { + width: 40px; + height: 40px; + + .skuSelectorInternalBox { + border: 1px solid $gray-600; + border-radius: 50%; + position: absolute; + .valueWrapper { + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-450; + } + + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "CALCULAR FRETE:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-500; + } +} + +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; + + @media screen and (max-width: 768px) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + padding-bottom: 16px; +} +.shippingContainer :global(.vtex-input) { + width: auto; + + @media screen and (max-width: 768px) { + width: 100%; + } +} +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + margin: 0; + &::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #afafaf; + } +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0 0 16.5px 32px; + color: #000000 !important; + + @media screen and (max-width: 768px) { + padding: 8px 0 0 0; + text-align: end; + width: 100%; + } + + :last-child { + color: #000000 !important; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + + @media screen and (max-width: 768px) { + margin: 0; + } + } +} + +.shippingContainer :global(.vtex-button) { + width: auto; + border: none; + top: 27px; + left: 234px; + position: absolute; + + @media screen and (max-width: 768px) { + right: 0; + left: auto; + } +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; + background-color: #000000; + width: 49px; + height: 49px; + &::after { + content: "OK"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: #ffffff; + } +} + +.shippingTable { + margin: 0; + padding: 0 0 16px 0; + border: none; + width: 326px; + + @media screen and (max-width: 768px) { + width: 100%; + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: block; +} + +.shippingTableLabel, +.shippingTableCell, +.currencyContainer { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate, +.shippingTableHeadDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + text-align: start; +} + +.shippingTableRow { + display: flex; + gap: 32px; + padding-bottom: 15px; +} + +.shippingTableBody { + .shippingTableRow { + &:last-child { + padding-bottom: 0; + } + } +} + +.shippingTableCell { + padding: 0; +} + +.shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { + width: 23.92638036%; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + order: 3; + width: 41.71779%; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + width: 14.723926%; +} + +.discountInsideContainer { + display: none; +} + +.newsletter--product-newsletter { + max-width: 774px; + margin: 0 auto; + width: 100%; + + @media screen and (max-width: 768px) { + max-width: none; + } + .container--product-newsletter { + padding: 0; + .form--product-newsletter { + margin: 0; + width: 100%; + max-width: none; + .label--product-newsletter { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 16px; + line-height: 22px; + } + } + + .inputGroup--product-newsletter { + width: 100%; + border-bottom: 1px solid #929292; + + display: flex; + + .buttonContainer { + width: 10.852713178%; + padding: 0; + } + + .buttonContainer :global(.vtex-button) { + width: 100%; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 3px solid #bfbfbf; + min-height: auto; + } + .buttonContainer :global(.vtex-button__label) { + width: 100%; + padding: 0 !important; + + padding-bottom: 10px !important; + + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; + } + } + + .inputGroup--product-newsletter :global(.vtex-input) { + flex: 1; + } + .inputGroup--product-newsletter :global(.vtex-input-prefix__group) { + border: none; + height: 29px; + } + + .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 12px; + line-height: 16px; + } + + &::placeholder { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 12px; + line-height: 16px; + } + } + } + } + } +} 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..476a16b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,154 @@ +.container { + padding: 0 40px; + + @media screen and (min-width: 1920px) { + padding: 0 360px; + } + + .listContainer { + justify-content: space-between; + padding: 0 64px; + border-bottom: 1px solid #b9b9b9; + + @media screen and (max-width: 1024px) { + flex-direction: column; + padding: 8px 0; + border-top: 1px solid #b9b9b9; + } + .listItem { + margin: 0; + padding: 0; + border-bottom: 2px solid transparent; + + @media screen and (max-width: 1024px) { + border: none; + } + } + + .listItemActive { + border-bottom: 2px solid $black; + + @media screen and (max-width: 1024px) { + border: none; + } + } + } + + .listItem :global(.vtex-button) { + background-color: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + border: none; + padding: 0 16px; + width: 100%; + + @media screen and (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } + + @media screen and (max-width: 1024px) { + padding: 0; + } + } + + .listItem :global(.vtex-button__label) { + padding: 0 !important; + text-align: start; + display: block; + } + .listItemActive :global(.vtex-button__label) { + color: $black; + } + + .listItemActive :global(.vtex-button) { + border: none; + border-radius: 0; + color: $black; + } + + .contentContainer { + padding: 32px 32px 16px; + + @media screen and (max-width: 1024px) { + padding: 16px 0; + border-bottom: 1px solid #b9b9b9; + } + .contentItem { + display: flex; + gap: 32px; + + @media screen and (max-width: 1024px) { + flex-direction: column; + gap: 16px; + } + } + + .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 50%; + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + .contentItem + :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; + + @media screen and (min-width: 1920px) { + font-size: 32px; + margin-bottom: 16px; + } + + @media screen and (max-width: 1024px) { + font-size: 20px; + line-height: 32px; + } + } + + .contentItem :global(.vtex-store-components-3-x-container) { + height: auto !important; + overflow: auto !important; + } + .contentItem :global(.vtex-store-components-3-x-pointerEventsNone) { + display: none; + } + + .contentItem :global(.vtex-store-components-3-x-content) { + font-style: normal; + font-weight: 400; + font-size: 16px; + 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; + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..29ce22a 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -12,6 +12,16 @@ $color-blue: #4267b2; $color-green: #4caf50; +$gray-300: #D5D5D5; +$gray-400: #b9b9b9; +$gray-450: #b9b9b999; +$gray-500: #929292; +$gray-550: rgba(146, 146, 146, 0.478); +$gray-600: #989898; +$gray-700: #575757; + +$black: #000; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, @@ -19,7 +29,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, + ultrawide: 2499px ) !default; $z-index: (