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/Autores.tsx b/react/Autores.tsx new file mode 100644 index 0000000..9381cb5 --- /dev/null +++ b/react/Autores.tsx @@ -0,0 +1,3 @@ +import Autores from "./components/Autores/Autores"; + +export default Autores; diff --git a/react/InstallmentProduct.tsx b/react/InstallmentProduct.tsx new file mode 100644 index 0000000..0827efa --- /dev/null +++ b/react/InstallmentProduct.tsx @@ -0,0 +1,3 @@ +import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct"; + +export default InstallmentProduct; diff --git a/react/PaymentMethods.tsx b/react/PaymentMethods.tsx new file mode 100644 index 0000000..54ba1ad --- /dev/null +++ b/react/PaymentMethods.tsx @@ -0,0 +1,3 @@ +import PaymentMethods from "./components/PaymentMethods/PaymentMethods"; + +export default PaymentMethods; diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..29393ed --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/Placeholder"; + +export default Placeholder; diff --git a/react/Social.tsx b/react/Social.tsx new file mode 100644 index 0000000..c9bfe37 --- /dev/null +++ b/react/Social.tsx @@ -0,0 +1,3 @@ +import Social from "./components/Social/Social"; + +export default Social; diff --git a/react/components/Autores/Autores.tsx b/react/components/Autores/Autores.tsx new file mode 100644 index 0000000..12ef274 --- /dev/null +++ b/react/components/Autores/Autores.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +const Autores = () => { + return ( +
+ +
+ ); +}; + +export default Autores; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..0a215b6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..6c4a883 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,221 @@ +/* Header Telemarketing */ + +:global(.vtex-telemarketing-2-x-wrapper) { + background-color: #000000; + height: 34px; +} + +/* Product Main */ + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 49.131% 49.131%; + column-gap: 32px; + width: 71.858%; + margin: 0 auto; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 48.819% 48.819%; + padding: 0 40px; + column-gap: 32px; + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px 0; + } + +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px 0 40px; + } +} + +/* Product Quantity and Add To Cart Button */ + +:global(.agenciamagma-store-theme-5-x-html--cart-content) { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 10px; + margin-top: 8px; + margin-bottom: 16px; +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--cart-content) { + flex-direction: column; + align-items: flex-start; + } +} + +[data-testid="product-quantity"] { + height: 49px; +} + +[data-testid="add-to-cart-button"] { + width: 100%; +} + + +/* Product Availability */ + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { + display: grid; + grid-template-columns: 49.131% 49.131%; + column-gap: 32px; + width: 71.858%; + margin: 0 auto; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { + display: grid; + grid-template-columns: 48.819% 48.819%; + padding: 0 40px; + column-gap: 32px; + + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + } + +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + margin-bottom: 8px; + } +} + + +/* Footer */ + +:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: flex; + justify-content: center; +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + justify-content: center; + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: unset; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: unset; + } +} + +:global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: flex; + justify-content: right; +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: unset; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: unset; + } +} + +/* Footer Credits */ + +:global(.agenciamagma-store-theme-5-x-html--credits) { + height: 107px; + background: #000000; + border-top: 1px solid #FFFFFF; + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 32px 32px 0 438.5px; +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--credits) { + justify-content: space-between; + padding: 31.5px 320px 15.5px; + } +} + +:global(.agenciamagma-store-theme-5-x-html--credits-mobile) { + background: #000000; + border-top: 1px solid #FFFFFF; + display: flex; + justify-content: center; + height: 131px; +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--credits-mobile) { + height: 151px; + } +} + +:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + margin-top: 16px; + margin-bottom: 32px; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + margin-top: 16px; + margin-bottom: 32px; + padding: 0 40px; + } +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + align-items: flex-start; + } +} + +:global(.agenciamagma-store-theme-5-x-html--footer-credits-information-mobile) { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx new file mode 100644 index 0000000..11fafb7 --- /dev/null +++ b/react/components/InstallmentProduct/InstallmentProduct.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + +const InstallmentProduct = () => { + const product = useProduct(); + const productWithInstallments = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments, + value: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, + }; + return ( +

+ {productWithInstallments.numberOfInstallments}x  + de  + + R$  + {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")} + {" "} + sem juros +

+ ); +}; + +export default InstallmentProduct; diff --git a/react/components/InstallmentProduct/styles.css b/react/components/InstallmentProduct/styles.css new file mode 100644 index 0000000..87129b9 --- /dev/null +++ b/react/components/InstallmentProduct/styles.css @@ -0,0 +1,7 @@ +.PriceContent { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/react/components/PaymentMethods/PaymentMethods.tsx b/react/components/PaymentMethods/PaymentMethods.tsx new file mode 100644 index 0000000..87e598a --- /dev/null +++ b/react/components/PaymentMethods/PaymentMethods.tsx @@ -0,0 +1,73 @@ +import React from "react"; + +const PaymentMethods = () => { + return ( +
+ Formas de pagamento + +
+ ); +}; + +export default PaymentMethods; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..dce7874 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + const pix = { + pixValue: Number(product?.selectedItem?.sellers[0].commertialOffer.Price), + }; + const discount = pix.pixValue * 0.1; + const pixPrice = pix.pixValue - discount; + + return ( +
+ logo pix +
+ + R$ {pixPrice?.toFixed(2).toString().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..b416807 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,32 @@ +.PixContent { + margin-top: 8px; + height: 36px; + display: flex; + align-items: center; + column-gap: 26px; +} + +.ImgPixContent { + width: 66.01px; + height: 24px; +} + +.PixDiscount { + display: flex; + flex-direction: column; + height: 36px; +} + +.TextPixDiscount { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.TextDiscount { + font-weight: 300 ; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..7840422 --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,17 @@ +const Placeholder = () => { + if (typeof document !== "undefined") { + const postalCodeInput = document.querySelector( + ".vtex-address-form-4-x-input" + ); + const postalCodeValue = document.querySelector(".postalCode"); + if (postalCodeInput) { + postalCodeInput.classList.add("postalCode"); + } + if (postalCodeValue) { + postalCodeValue.setAttribute("placeholder", "Digite seu CEP"); + } + } + return null; +}; + +export default Placeholder; diff --git a/react/components/Social/Social.tsx b/react/components/Social/Social.tsx new file mode 100644 index 0000000..8424c7a --- /dev/null +++ b/react/components/Social/Social.tsx @@ -0,0 +1,90 @@ +import React from "react"; + +const Social = () => { + return ( +
+ Nos siga + +
+ ); +}; + +export default Social; diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..1fb927a --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1,7 @@ +declare module "*.css" { + interface IClassNames { + [className: string]: string; + } + const classNames: IClassNames; + export = classNames; +} diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..40652a6 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -7,5 +7,11 @@ "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts", + "components/SwiperComponent/SwiperComponent.tsxonent.tsx", + "SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx" + ] +} diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c05ac0f..c2e5300 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -1,25 +1,20 @@ { "footer": { - "blocks": [ - "footer-layout.desktop", - "footer-layout.mobile" - ] + "blocks": ["footer-layout.desktop", "footer-layout.mobile"] }, "footer-layout.desktop": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-2-desktop", - "flex-layout.row#footer-3-desktop" + "html#footer-3-desktop" ] }, "flex-layout.row#footer-1-desktop": { "children": [ - "vtex.menu@2.x:menu#Products", - "vtex.menu@2.x:menu#footer-clothing", - "vtex.menu@2.x:menu#footer-decoration", - "vtex.menu@2.x:menu#footer-bags", - "footer-spacer", - "social-networks" + "vtex.menu@2.x:menu#footer-site-m3-academy", + "vtex.menu@2.x:menu#footer-am3academy", + "html#seja-um-franqueado", + "html#right-block" ], "props": { "blockClass": "menu-row", @@ -27,83 +22,113 @@ "paddingBottom": 3 } }, - "social-networks": { + "html#seja-um-franqueado": { "props": { - "socialNetworks": [ - { - "name": "Facebook", - "url": "https://www.facebook.com/vtexonline/" - }, - { - "name": "Instagram", - "url": "https://www.instagram.com/vtextruecloud/" - }, - { - "name": "Twitter", - "url": "https://twitter.com/vtexonline" - }, - { - "name": "Youtube", - "url": "https://www.youtube.com/user/VTEXTV" - } - ] - } + "blockClass": "seja-um-franqueado" + }, + "children": ["vtex.menu@2.x:menu#footer-seja-um-franqueado-container"] + }, + "html#right-block": { + "children": [ + "html#social-networks-component", + "flex-layout.row#footer-2-desktop" + ] + }, + "html#social-networks-component": { + "props": { + "blockClass": "social-networks-component" + }, + "children": ["social-networks-component"] }, "flex-layout.row#footer-2-desktop": { - "children": [ - "accepted-payment-methods" - ], + "children": ["html#payment-methods-component"], "props": { "blockClass": "payment-methods" } }, - "accepted-payment-methods": { + "html#payment-methods-component": { "props": { - "paymentMethods": [ - "MasterCard", - "Visa", - "Diners Club" - ] - } + "blockClass": "payment-methods-component" + }, + "children": ["payment-methods-component"] }, - "flex-layout.row#footer-3-desktop": { + "html#footer-3-desktop": { "children": [ - "rich-text#footer" + "html#footer-credits-information", + "html#footer-credits-autores" ], "props": { "blockClass": "credits" } }, + "html#footer-credits-information": { + "props": { + "blockClass": "footer-credits-information" + }, + "children": [ + "rich-text#footer", + "rich-text#footer-address", + "rich-text#footer-cnpj" + ] + }, + "html#footer-credits-autores": { + "props": { + "blockClass": "autores-component" + }, + "children": ["autores-component"] + }, "rich-text#footer": { "props": { - "text": "All stock and product photos are from photos.icons8.com", + "text": "Copyright © 2022 M3 Academy. Todos os direitos reservados.", "blockClass": "footer" } }, + "rich-text#footer-address": { + "props": { + "text": "R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ", + "blockClass": "footer-address" + } + }, + "rich-text#footer-cnpj": { + "props": { + "text": "CNPJ: 12.345.678.0009-10", + "blockClass": "footer-cnpj" + } + }, "footer-layout.mobile": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" + "html#2-footer-mobile" ] }, - "flex-layout.row#2-footer-mobile": { - "children": [ - "flex-layout.col#footer-1-mobile" - ], + "flex-layout.row#newsletter": { + "children": ["newsletter"], "props": { - "blockClass": "payment-methods", + "blockClass": "newsletter-footer" + } + }, + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "html#2-footer-mobile": { + "children": ["html#footer-1-mobile"], + "props": { + "blockClass": "credits-mobile", "paddingTop": 4, "paddingBottom": 4 } }, - "flex-layout.col#footer-1-mobile": { + "html#footer-1-mobile": { "children": [ - "accepted-payment-methods", - "social-networks", - "rich-text#footer-mobile" + "html#footer-credits-information", + "html#footer-credits-autores" ], "props": { - "blockClass": "payment-methods", + "blockClass": "footer-credits-information-mobile", "paddingTop": 4, "paddingBottom": 4, "rowGap": 4 @@ -111,17 +136,15 @@ }, "flex-layout.row#1-footer-mobile": { "props": { + "blockClass": "menu-row-mobile", "paddingTop": 4, "paddingBottom": 4 }, "children": [ - "vtex.menu@2.x:menu#footer-mobile" + "vtex.menu@2.x:menu#footer-mobile", + "html#seja-um-franqueado", + "social-networks-component", + "html#payment-methods-component" ] - }, - "rich-text#footer-mobile": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } } } diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json index 7cc85f7..6099776 100644 --- a/store/blocks/footer/menu.json +++ b/store/blocks/footer/menu.json @@ -1,18 +1,23 @@ { - "vtex.menu@2.x:menu#Products": { + "vtex.menu@2.x:menu#footer-site-m3-academy": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#news", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization" + "menu-item#site-m3-academy", + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "menu-item#cnpj" ] }, - "menu-item#news": { + "menu-item#site-m3-academy": { "props": { - "id": "menu-item-news", + "blockClass": "site-m3-academy", + "id": "menu-item-site-m3-academy", "type": "custom", "iconId": null, "highlight": false, @@ -20,14 +25,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "News", - "text": "News" + "tagTitle": "Site M3 Academy", + "text": "Site M3 Academy" } } }, - "menu-item#blackfriday": { + "menu-item#loja-ebit-ouro": { "props": { - "id": "menu-item-black-friday", + "id": "menu-item-loja-ebit-ouro", "type": "custom", "iconId": null, "highlight": false, @@ -35,14 +40,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" + "tagTitle": "Loja Ebit Ouro", + "text": "Loja Ebit Ouro" } } }, - "menu-item#sale": { + "menu-item#trocas-e-devolucoes": { "props": { - "id": "menu-item-sale", + "id": "menu-item-trocas-e-devolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -50,14 +55,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" + "tagTitle": "Trocas e devoluções", + "text": "Trocas e devoluções" } } }, - "menu-item#personalization": { + "menu-item#central-de-atendimento": { "props": { - "id": "menu-item-personalization", + "id": "menu-item-central-de-atendimento", "type": "custom", "iconId": null, "highlight": false, @@ -65,84 +70,87 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" + "tagTitle": "Central de atendimento", + "text": "Central de atendimento" + } + } + }, + "menu-item#fale-conosco": { + "props": { + "id": "menu-item-fale-conosco", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Fale conosco", + "text": "Fale conosco" + } + } + }, + "menu-item#imprensa": { + "props": { + "id": "menu-item-imprensa", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Imprensa", + "text": "Imprensa" + } + } + }, + "menu-item#rastreamento": { + "props": { + "id": "menu-item-rastreamento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Rastreamento", + "text": "Rastreamento" + } + } + }, + "menu-item#cnpj": { + "props": { + "blockClass": "cnpj", + "id": "menu-item-cnpj", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "CNPJ 12.345.678.0009-10", + "text": "CNPJ 12.345.678.0009-10" } } }, - "vtex.menu@2.x:menu#footer-decoration": { + "vtex.menu@2.x:menu#footer-seja-um-franqueado-container": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" + "menu-item#seja-um-franqueado-block", + "menu-item#seja-um-franqueado-link", + "menu-item#multimarcas" ] }, - "menu-item#smartphones": { - "props": { - "id": "menu-item-smartphones", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/smartphones", - "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" - } - } - }, - - "menu-item#videogames": { - "props": { - "id": "menu-item-videogames", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/videogames", - "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" - } - } - }, - - "menu-item#tvs": { - "props": { - "id": "menu-item-tvs", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/tvs", - "noFollow": true, - "tagTitle": "TVs", - "text": "TVs" - } - } - }, - - "vtex.menu@2.x:menu#footer-bags": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#bags", - "menu-item#backpacks", - "menu-item#necessaire" - ] - }, - - "menu-item#bags": { + "menu-item#seja-um-franqueado-block": { "props": { + "blockClass": "seja-um-franqueado-block", "id": "menu-item-bags", "type": "custom", "iconId": null, @@ -151,55 +159,59 @@ "type": "internal", "href": "/bags/d", "noFollow": true, - "tagTitle": "Bags", - "text": "Bags" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#backpacks": { + "menu-item#seja-um-franqueado-link": { "props": { - "id": "menu-item-backpacks", + "blockClass": "seja-um-franqueado-link", + "id": "menu-item-seja-um-franqueado-link", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/backpacks", + "href": "/bags/seja-um-franqueado-link", "noFollow": true, - "tagTitle": "Backpacks", - "text": "Backpacks" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#necessaire": { + "menu-item#multimarcas": { "props": { - "id": "menu-item-necessaire", + "blockClass": "multimarcas", + "id": "menu-item-multimarcas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/necessaire", + "href": "/bags/multimarcas", "noFollow": true, - "tagTitle": "Necessaire", - "text": "Necessaire" + "tagTitle": "Multimarcas", + "text": "Multimarcas" } } }, - "vtex.menu@2.x:menu#footer-clothing": { + "vtex.menu@2.x:menu#footer-am3academy": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#clothing", - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" + "menu-item#am3academy", + "menu-item#seja-um-franqueado", + "menu-item#quem-somos", + "menu-item#nossas-lojas", + "menu-item#responsabilidade-social", + "menu-item#franquias", + "menu-item#procon-mg", + "menu-item#politica-de-privacidade" ] }, @@ -208,185 +220,207 @@ "orientation": "vertical" }, "children": [ - "menu-item#clothing-mobile", - "menu-item#decoration-mobile", - "menu-item#sale-mobile" + "menu-item#site-m3-academy-mobile", + "menu-item#am3academy-mobile" ] }, - "menu-item#clothing-mobile": { + "menu-item#site-m3-academy-mobile": { "props": { - "id": "menu-item-category-clothing", + "blockClass": "site-m3-academy-mobile", + "id": "menu-item-category-site-m3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "/site-m3academy/d", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "Site M3 Academy", + "text": "Site M3 Academy" } }, - "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"] + "blocks": ["vtex.menu@2.x:submenu.accordion#site-m3-academy"] }, - "vtex.menu@2.x:submenu.accordion#clothing": { - "children": ["vtex.menu@2.x:menu#clothing-accordion"] + "vtex.menu@2.x:submenu.accordion#site-m3-academy": { + "children": ["vtex.menu@2.x:menu#site-m3-academy-accordion"] }, - "vtex.menu@2.x:menu#clothing-accordion": { + "vtex.menu@2.x:menu#site-m3-academy-accordion": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "menu-item#cnpj" ] }, - "menu-item#decoration-mobile": { + "menu-item#am3academy-mobile": { "props": { - "itemProps": { - "tagTitle": "Decoration", - "text": "Decoration" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] - }, - "vtex.menu@2.x:submenu.accordion#decoration": { - "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] - }, - - "vtex.menu@2.x:menu#footer-decoration-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#sale-mobile": { - "props": { - "itemProps": { - "tagTitle": "Sale", - "text": "Sale" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] - }, - "vtex.menu@2.x:submenu.accordion#sale": { - "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] - }, - - "vtex.menu@2.x:menu#footer-sale-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#clothing": { - "props": { - "id": "menu-item-category-clothing", + "blockClass": "am3academy-mobile", + "id": "menu-item-category-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "/am3academy/d", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } - } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#am3academy"] + }, + "vtex.menu@2.x:submenu.accordion#am3academy": { + "children": ["vtex.menu@2.x:menu#am3academy-accordion"] }, - "menu-item#shorts": { + "vtex.menu@2.x:menu#am3academy-accordion": { "props": { - "id": "menu-item-shorts", + "orientation": "vertical" + }, + "children": [ + "menu-item#seja-um-franqueado", + "menu-item#quem-somos", + "menu-item#nossas-lojas", + "menu-item#responsabilidade-social", + "menu-item#franquias", + "menu-item#procon-mg", + "menu-item#politica-de-privacidade" + ] + }, + + "menu-item#am3academy": { + "props": { + "blockClass": "am3academy", + "id": "menu-item-category-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shorts", - "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" + "href": "/am3academy/d", + "noFollow": true, + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } } }, - "menu-item#tank-tops": { + "menu-item#seja-um-franqueado": { "props": { - "id": "menu-item-tank-tops", + "id": "menu-item-seja-um-franqueado", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/tank-tops", + "href": "/am3academy/seja-um-franqueado", "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#shirts": { + "menu-item#quem-somos": { "props": { - "id": "menu-item-shirts", + "id": "menu-item-quem-somos", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shirts", + "href": "/am3academy/quem-somos", "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" + "tagTitle": "Quem somos", + "text": "Quem somos" } } }, - "menu-item#sweatshirt": { + "menu-item#nossas-lojas": { "props": { - "id": "menu-item-sweat-shirts", + "id": "menu-item-nossas-lojas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/sweatshirt", + "href": "/am3academy/nossas-lojas", "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" + "tagTitle": "Nossas lojas", + "text": "Nossas lojas" } } }, - "menu-item#cropped": { + "menu-item#responsabilidade-social": { "props": { - "id": "menu-item-cropped", + "blockClass": "responsabilidade-social", + "id": "menu-item-responsabilidade-social", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/cropped", + "href": "/am3academy/responsabilidade-social", "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" + "tagTitle": "Responsabilidade Social", + "text": "Responsabilidade Social" + } + } + }, + + "menu-item#franquias": { + "props": { + "id": "menu-item-franquias", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/franquias", + "noFollow": false, + "tagTitle": "Franquias", + "text": "Franquias" + } + } + }, + "menu-item#procon-mg": { + "props": { + "id": "menu-item-procon-mg", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/procon-mg", + "noFollow": false, + "tagTitle": "Procon MG", + "text": "Procon MG" + } + } + }, + "menu-item#politica-de-privacidade": { + "props": { + "id": "menu-item-politica-de-privacidade", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/politica-de-privacidade", + "noFollow": false, + "tagTitle": "Política de Privacidade", + "text": "Política de Privacidade" } } } diff --git a/store/blocks/header/category-menu.json b/store/blocks/header/category-menu.json index f641551..97185f6 100644 --- a/store/blocks/header/category-menu.json +++ b/store/blocks/header/category-menu.json @@ -23,40 +23,36 @@ "text": "Apparel & Accessories" } }, - "blocks": [ - "vtex.menu@2.x:submenu#category-apparel" - ] + "blocks": ["vtex.menu@2.x:submenu#category-apparel"] }, "vtex.menu@2.x:submenu#category-apparel": { "props": { "width": "auto" }, - "children": [ - "vtex.menu@2.x:menu#category-apparel" - ] + "children": ["vtex.menu@2.x:menu#category-apparel"] }, "vtex.menu@2.x:menu#category-apparel": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#category-apparel-clothing", + "menu-item#category-apparel-am3academy", "menu-item#category-apparel-accessories", "menu-item#category-apparel-eyeglasses" ] }, - "menu-item#category-apparel-clothing": { + "menu-item#category-apparel-am3academy": { "props": { - "id": "menu-item-category-apparel-clothing", + "id": "menu-item-category-apparel-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/apparel---accessories/clothing/", + "href": "/apparel---accessories/am3academy/", "noFollow": false, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } } }, @@ -107,7 +103,7 @@ }, "menu-item#more": { "props": { - "id": "menu-item-custom-sale", + "id": "menu-item-custom-trocas-e-devolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -119,42 +115,28 @@ "text": "More" } }, - "blocks": [ - "vtex.menu@2.x:submenu#more" - ] + "blocks": ["vtex.menu@2.x:submenu#more"] }, "vtex.menu@2.x:submenu#more": { "props": { "width": "100%" }, - "children": [ - "flex-layout.row#menu-more" - ] + "children": ["flex-layout.row#menu-more"] }, "flex-layout.row#menu-more": { - "children": [ - "flex-layout.col#menu-more-1", - "flex-layout.col#menu-more-2" - ] + "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"] }, "flex-layout.col#menu-more-1": { - "children": [ - "vtex.menu@2.x:menu#more" - ] + "children": ["vtex.menu@2.x:menu#more"] }, "flex-layout.col#menu-more-2": { - "children": [ - "info-card#home" - ] + "children": ["info-card#home"] }, "vtex.menu@2.x:menu#more": { "props": { "orientation": "vertical" }, - "children": [ - "menu-item#about-us", - "menu-item#faq" - ] + "children": ["menu-item#about-us", "menu-item#faq"] }, "menu-item#about-us": { "props": { diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..a576210 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -7,33 +7,33 @@ }, "header-layout.desktop": { "children": [ - "flex-layout.row#1-desktop", - "flex-layout.row#3-desktop", + "html#flex-layout.row#1-desktop", + // "flex-layout.row#3-desktop", "sticky-layout#4-desktop" ] }, - "flex-layout.row#1-desktop": { + "html#flex-layout.row#1-desktop": { "children": ["telemarketing"], "props": { "fullWidth": true } }, - - "flex-layout.row#3-desktop": { - "props": { - "blockClass": "menu-link", - "horizontalAlign": "center", - "preventHorizontalStretch": true, - "preventVerticalStretch": true, - "fullWidth": true - }, - "children": [ - "vtex.menu@2.x:menu#websites", - "flex-layout.col#spacer", - "vtex.menu@2.x:menu#institutional" - ] - }, + + // "flex-layout.row#3-desktop": { + // "props": { + // "blockClass": "menu-link", + // "horizontalAlign": "center", + // "preventHorizontalStretch": true, + // "preventVerticalStretch": true, + // "fullWidth": true + // }, + // "children": [ + // "vtex.menu@2.x:menu#websites", + // "flex-layout.col#spacer", + // "vtex.menu@2.x:menu#institutional" + // ] + // }, "flex-layout.col#spacer": { "props": { "width": "grow" @@ -59,7 +59,7 @@ "flex-layout.col#category-menu", "flex-layout.col#spacer", "search-bar", - "locale-switcher", + // "locale-switcher", "login", "minicart.v2" ] @@ -80,9 +80,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png", - "width": "180", - "height": "12" + "url": "https://agenciamagma.vteximg.com.br/arquivos/Logo-m3academy-anacarolinaduartecavalcante.svg", + "width": "140", + "height": "33" } }, "header-layout.mobile": { @@ -125,9 +125,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png", - "width": "77.5", - "height": "27.5" + "url": "https://agenciamagma.vteximg.com.br/arquivos/Logo-m3academy-anacarolinaduartecavalcante.svg", + "width": "140", + "height": "33" } } } diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..a8e49c1 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", @@ -40,7 +41,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..b3461e6 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,9 +1,9 @@ { - "sticky-layout#buy-button": { + "sticky-layout#add-to-cart-button": { "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["flex-layout.row#add-to-cart-button"] }, "product-assembly-options": { "children": [ @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product-availability.jsonc b/store/blocks/pdp/product-availability.jsonc new file mode 100644 index 0000000..7756d3c --- /dev/null +++ b/store/blocks/pdp/product-availability.jsonc @@ -0,0 +1,81 @@ +{ + "condition-layout.product#availability": { + "props": { + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "html#product-main", + "Else": "html#product-availability" + } + }, + "html#product-main": { + "props": { + "blockClass": "product-main-content" + }, + "children": ["html#flex-layout.col#stack", "html#right-col"] + }, + + "html#flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "blockClass": "stack-layout-content", + "rowGap": 0 + } + }, + + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "html#flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] + }, + + "product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } + }, + + "html#product-availability": { + "props": { + "blockClass": "product-availability-block" + }, + "children": ["html#flex-layout.col#stack", "html#right-col-availability"] + }, + + "html#right-col-availability": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0, + "blockClass": "info-availability" + }, + "children": [ + "html#identification-product-availability", + "flex-layout.row#availability", + "html#sku-selector" + ] + }, + + "html#identification-product-availability": { + "props": { + "blockClass": "identification-product-availability" + }, + "children": ["html#product-name", "product-identifier.product"] + }, + + "flex-layout.row#availability": { + "props": { + "blockClass": "message-availability" + }, + "children": ["availability-subscriber"] + } +} diff --git a/store/blocks/pdp/product-breadcrumb.jsonc b/store/blocks/pdp/product-breadcrumb.jsonc new file mode 100644 index 0000000..ba79c0b --- /dev/null +++ b/store/blocks/pdp/product-breadcrumb.jsonc @@ -0,0 +1,10 @@ +{ + "html#breadcrumb": { + "props": { + "tag": "section", + "testId": "breadcrumbs", + "blockClass": "pdp-breadcrumb" + }, + "children": ["breadcrumb"] + } +} diff --git a/store/blocks/pdp/product-image.jsonc b/store/blocks/pdp/product-image.jsonc new file mode 100644 index 0000000..a2b4ccb --- /dev/null +++ b/store/blocks/pdp/product-image.jsonc @@ -0,0 +1,20 @@ +{ + "html#flex-layout.row#product-image": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, + + "product-images": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" + } + } +} diff --git a/store/blocks/pdp/product-right-col.jsonc b/store/blocks/pdp/product-right-col.jsonc new file mode 100644 index 0000000..9b523b2 --- /dev/null +++ b/store/blocks/pdp/product-right-col.jsonc @@ -0,0 +1,97 @@ +{ + "html#right-col": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0 + }, + "children": [ + "html#identification-product", + // "product-rating-summary", + "flex-layout.row#selling-price", + "installment-product-component", + "html#pix-component", + // "product-separator", + "html#sku-selector", + // "product-quantity", + "html#cart-content", + // "product-assembly-options", + "product-gifts", + // "flex-layout.row#add-to-cart-button", + "availability-subscriber", + "html#shipping-simulator", + "placeholder-component" + // "share#default" + ] + }, + + "html#product-name": { + "props": { + "marginBottom": 3 + }, + "children": ["vtex.store-components:product-name"] + }, + + "html#identification-product": { + "props": { + "blockClass": "identification-product-content" + }, + "children": ["html#product-name", "product-identifier.product"] + }, + + "html#pix-component": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + + "sku-selector": { + "props": { + "variationsSpacing": 3, + "showValueNameForImageVariation": true, + "blockClass": "sku-selector" + } + }, + + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#add-to-cart-button"] + }, + + "flex-layout.row#add-to-cart-button": { + "props": { + "marginTop": 4, + "marginBottom": 7 + }, + "children": ["add-to-cart-button"] + }, + + "html#shipping-simulator":{ + "props":{ + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + } +} diff --git a/store/blocks/pdp/product-slider-layout.jsonc b/store/blocks/pdp/product-slider-layout.jsonc new file mode 100644 index 0000000..753aa15 --- /dev/null +++ b/store/blocks/pdp/product-slider-layout.jsonc @@ -0,0 +1,72 @@ +{ + "html#slider-block-container": { + "children": [ + "rich-text#slider-block-title", + "html#list-context.product-list#slider-block" + ] + }, + + "rich-text#slider-block-title": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "slider-title" + } + }, + + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#product-content"] + }, + + "html#product-summary.shelf#product-content": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + // "maxHeight": 300 + } + }, + + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + + "slider-layout#products-carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + } +} diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc new file mode 100644 index 0000000..0738bfe --- /dev/null +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -0,0 +1,108 @@ +{ + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ] + }, + + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..4f469ce 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,183 +3,23 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + "tab-layout#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "html#slider-block-container", "product-questions-and-answers" ] - }, - "html#breadcrumb": { - "props": { - "tag": "section", - "testId": "breadcrumbs", - "blockClass": "pdp-breadcrumb" - }, - "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": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" - } - }, - "flex-layout.row#product-main": { - "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] - }, - - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, - - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, - - "flex-layout.col#stack": { - "children": ["stack-layout"], - "props": { - "width": "60%", - "rowGap": 0 - } - }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { - "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true - } - }, - "flex-layout.col#right-col": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0 - }, - "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", - "product-gifts", - "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator", - "share#default" - ] - }, - - "flex-layout.row#product-name": { - "props": { - "marginBottom": 3 - }, - "children": ["vtex.store-components:product-name"] - }, - - "sku-selector": { - "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true - } - }, - - "flex-layout.row#buy-button": { - "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["add-to-cart-button"] - }, - - "flex-layout.row#product-availability": { - "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 - }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] - }, - "flex-layout.col#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" - ] - }, - "flex-layout.row#availability": { - "props": { - "blockClass": "message-availability" - }, - "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } + // "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..3f13053 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -9,19 +9,5 @@ "children": [ "product-selling-price" ] - }, - - "flex-layout.row#list-price-savings": { - "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 2, - "marginTop": 5 - }, - "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..1226c11 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -36,7 +36,6 @@ }, "flex-layout.col#quickviewPrice": { "children": [ - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments" ] diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..9288222 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,23 @@ "html": { "component": "html", "composition": "children" + }, + "installment-product-component": { + "component": "InstallmentProduct" + }, + "pix-component": { + "component": "Pix" + }, + "placeholder-component": { + "component": "Placeholder" + }, + "social-networks-component": { + "component": "Social" + }, + "payment-methods-component": { + "component": "PaymentMethods" + }, + "autores-component": { + "component": "Autores" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..c5c00b9 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + src: local("Open Sans Light"), local("OpenSans-Light"), + url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), + url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), + url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: local("Open Sans Bold"), local("OpenSans-Bold"), + url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff) + format("woff"); +} 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/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..677a74f --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,53 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-left: 40px; + padding: 0 0 16px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container { + margin: 0 auto; + width: 71.858%; + } +} +.container .homeLink { + padding-right: 6px; + padding-left: 0; +} +.container .homeLink::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeIcon { + display: none; +} +.container .arrow { + padding: 0 6px; +} +.container .arrow .link { + padding: 0 6px; +} +.container .term { + padding: 0 6px; +} +.container .link, +.container .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..10d123f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,174 @@ -.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 { +@charset "UTF-8"; +/* +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 */ +.flexRow--main-header { display: flex; - max-height: 100%; + justify-content: center; +} +.flexRow--main-header .flexRowContent--main-header { + height: 97px; + display: flex; + justify-content: space-between; + align-items: center; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--main-header .flexRowContent--main-header { + margin: 0 auto; + padding-left: 360px; + padding-right: 360px; + } +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 40px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 0; + } +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { + visibility: hidden; +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRow--main-header-mobile .flexRowContent--main-header-mobile { + display: flex; + justify-content: space-between; + align-items: center; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) { + position: absolute; + top: 16px; + left: 40%; +} +@media (max-width: 768px) and (min-width: 375px) { + .flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) { + left: 30%; + } +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) :global(.vtex-store-components-3-x-sizeMobile) { + padding: 0; + height: 33px; + display: contents; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer) { + visibility: hidden; + display: flex; + padding-left: 40px; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 27.93px; + height: 21px; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { + visibility: hidden; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; + left: 0; + position: absolute; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; +.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 308.08px; + } +} +.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292; } -.flexRow--addToCartRow { - padding-bottom: 1rem; +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; } + +.flexCol--stack-layout-content { + width: 100% !important; +} + +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { + background: #000000; + padding: 12px 64px; + height: 49px; + border: none; + border-radius: 0; +} +@media (max-width: 768px) and (min-width: 375px) { + .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { + height: 74px; + margin-top: 10px; + } +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +.flexRow--menu-row { + background-color: #000000; + height: 464px; + padding: 32px 32px 128px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--menu-row { + padding: 32px 320px 128px; + } +} + +.flexRow--menu-row-mobile { + background-color: #000000; + min-height: 532px; + padding: 0px 16px 32px; +} +.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile { + display: flex; + flex-direction: column; +} +.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile .stretchChildrenWidth { + width: 100% !important; +} + +@media (max-width: 768px) and (min-width: 375px) { + .flexRow--newsletter-footer { + margin-top: 32px; + } +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.login.css similarity index 51% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.login.css index 5e37ba5..e680a11 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.login.css @@ -7,10 +7,13 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +@media (max-width: 768px) and (min-width: 375px) { + .buttonLink { + position: relative; + left: 30px; + width: 22px; + } + .buttonLink :global(.vtex-button) { + width: 22px; + } } \ No newline at end of file diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..da0e430 --- /dev/null +++ b/styles/css/vtex.menu.css @@ -0,0 +1,247 @@ +/* +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 */ +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer { + margin-bottom: 14px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer { + margin-bottom: 14px; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin-left: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin: 0; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink { + width: 100%; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: #929292; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed { + visibility: hidden; + width: 17px; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed::before, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen { + visibility: hidden; + transform: rotate(179deg); + width: 17px; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen::before, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + line-height: 38px; + text-align: center; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + display: flex; + justify-content: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + display: flex; + justify-content: center; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social { + line-height: 30px; + text-decoration-line: underline; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + font-weight: 400; + font-size: 12px; + line-height: 30px; + color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + width: 164px; + height: 42px; + border: 1px solid #ffffff; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + width: 100%; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile { + border-bottom: 1px solid #ffffff; + padding: 8px 0; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + font-weight: 400; + font-size: 14px; + color: #ffffff; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer--am3academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer--site-m3-academy-mobile { + margin: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas { + display: flex; + justify-content: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas { + display: flex; + justify-content: center; + } +} + +.FooterRightBlock { + margin-bottom: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } +} +.FooterRightBlock .SpanTitle { + color: #ffffff; + font-weight: 400; + font-size: 14px; + line-height: 38px; +} +.FooterRightBlock .SpanTitleBig { + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .SpanTitleBig { + font-size: 14px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .SpanTitleBig { + font-size: 14px; + } +} +.FooterRightBlock .UlGroup { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + row-gap: 4px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .UlGroup { + align-items: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .UlGroup { + justify-content: center; + align-items: center; + } +} +.FooterRightBlock .UlGroup .UlSecondary { + display: flex; + padding: 0; + margin: 0; + column-gap: 8px; + list-style: none; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .UlGroup .UlSecondary .ImgCard { + width: 42px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .UlGroup .UlSecondary .ImgCard { + width: 42px; + } +} + +.AutoresBlock .Autores-Group { + display: flex; + align-items: center; + column-gap: 15.73px; + margin: 0; + padding: 0; +} +.AutoresBlock .Autores-Group .Autores-List { + display: flex; + align-items: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #ffffff; + column-gap: 8.72px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..8ca0eeb 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,34 @@ -.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 { + float: right; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} +@media (max-width: 1025px) and (min-width: 768px) { + .product-identifier__value { + text-align: left; + float: left; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .product-identifier__value { + text-align: left; + float: left; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..c22a76c 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,16 @@ -.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-weight: 700; -} - -.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; -} + font-size: 25px; + line-height: 38px; + color: #000000; + margin-top: 24px; +} \ 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..992f63a --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,65 @@ +/* +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-bottom: 0px; +} +@media (max-width: 768px) and (min-width: 375px) { + .quantitySelectorContainer { + margin: 0; + } +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; + padding: 0; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..30c47f9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,45 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--slider-title { + display: flex; + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--slider-title { + margin-bottom: 24px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--slider-title { + margin-bottom: 16px; + } +} +.container--slider-title .wrapper--slider-title .heading--slider-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 0; +} +@media (max-width: 768px) and (min-width: 375px) { + .container--slider-title .wrapper--slider-title .heading--slider-title { + font-size: 20px; + } +} + +.container .wrapper .paragraph { + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 20px; + text-align: center; + color: rgba(255, 255, 255, 0.45); +} +.container .wrapper .paragraph--footer { + font-weight: 700; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..7a24b8e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,286 @@ -.sliderLayoutContainer { +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.sliderLayoutContainer--carousel { + background: unset; + width: 94.435%; + margin: 0 auto 113px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel { + width: 71.858%; + min-height: 543.4px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel { + width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel { + width: 78.616%; + margin: 0 auto 32px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer { + width: 96%; + margin: 0 auto; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 97.012%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 95.085%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 87.03%; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 5.3515% !important; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 5.4036% !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 6.0831% !important; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 6.921% !important; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel { + width: 100%; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) { + max-width: 100% !important; + border-radius: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 448.4px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 543.4px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 383.2px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 254.8px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + padding: 16px 0 8px; + display: flex; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + display: inline-block; + vertical-align: text-top; + padding: 0 16px; + min-height: 19px; } - -.sliderTrackContainer { - max-width: 100%; +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + width: 100%; + height: 314.4px; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 434.4px; + } } +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 291.2px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 124.8px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + border-radius: 0; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + min-width: 100%; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + row-gap: 8px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 60px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 49px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 49px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + padding: 0; + text-align: center; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + padding: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-size: 12px; + line-height: 16px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before { + content: "de "; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after { + content: " por"; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + display: flex; + justify-content: center; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} +.sliderLayoutContainer--carousel .sliderArrows { + padding: 0; + margin: 0; +} +.sliderLayoutContainer--carousel .sliderLeftArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderLeftArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderLeftArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + left: 0; + position: absolute; +} +.sliderLayoutContainer--carousel .sliderRightArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderRightArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + right: 0; + position: absolute; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + display: flex; + align-items: center; + bottom: -32px; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { + background-color: #000000; + width: 10px !important; + height: 10px !important; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive { + background-color: #ffffff; + border: 0.5px solid #000000; + width: 17px !important; + height: 17px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css deleted file mode 100644 index 7149eb7..0000000 --- a/styles/css/vtex.stack-layout.css +++ /dev/null @@ -1,10 +0,0 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - -.stackItem--quickview { - right: 0; - top: 0; - left: auto; -} diff --git a/styles/css/vtex.sticky-layout.css b/styles/css/vtex.sticky-layout.css index e69de29..f5116b9 100644 --- a/styles/css/vtex.sticky-layout.css +++ b/styles/css/vtex.sticky-layout.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.wrapper--sticky-header { + background-color: #ffffff !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..e72eb43 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,993 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.logoContainer { + padding-left: 40px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .logoContainer { + padding-left: 0; + } +} + +.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #aeaeae; + border-radius: 0; +} + +.container { + width: 100%; + padding: 0; + margin: 0 auto; + max-width: unset !important; +} + +.swiperCaret { + display: none; +} + +.productImagesContainer .carouselContainer .carouselGaleryCursor { + margin: 0 !important; + width: auto; + padding: 0; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + margin: 0; +} +@media (max-width: 2560px) and (min-width: 1920px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + height: 904px !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + margin: 0; + height: 944px !important; + } +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { + height: 904px !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { + height: 944px !important; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + object-fit: unset !important; + max-height: unset !important; + height: 664px !important; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + height: 904px !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + height: 944px !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + height: auto; + } +} +@media (max-width: 768px) and (min-width: 377px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } +} +@media (max-width: 377px) and (min-width: 376px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + width: 99.67% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; + } +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 664px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 944px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 296px; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { + margin-top: 16px; + height: 90px !important; +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { + display: block; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb { + width: 10% !important; + height: 10% !important; + margin-right: 16px; + width: 90px !important; + height: 90px !important; +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .figure, +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .thumbImg { + width: 100%; + height: 100%; + border-radius: 8px; +} + +.productNameContainer { + text-align: right; +} +@media (max-width: 1025px) and (min-width: 768px) { + .productNameContainer { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productNameContainer { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } +} +.productNameContainer .productBrand { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +:global(.vtex-store-components-3-x-subscriberContainer) { + margin-top: 16px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) { + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 60.091%; + margin: 0; + display: grid; + grid-template-areas: "A B" "C C"; + max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; +} +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 44.138%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; + width: 100%; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0 0 15px 0; + width: 100%; +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + width: 100%; + margin-right: 0; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + height: 40px; + padding: 0 14px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0 0 15px; + width: 100%; + height: 40px; +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + width: 100%; + margin-right: 0; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + padding: 0 14px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + width: 100%; +} +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + margin: 0; + height: 49px; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 8px 0 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +@media (max-width: 1025px) and (min-width: 768px) { + .skuSelectorSubcontainer--cor { + margin-bottom: 0; + } +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 8px 0 0; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0 !important; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 48px; + height: 48px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% + 10px - 11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; +} + +.shippingContainer { + display: flex; + align-items: flex-end; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer { + padding-bottom: 40px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding-bottom: 0; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: calc(100% - 49px); + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + margin-top: 8px; + height: 49px; + border-radius: 0; + width: 231px; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 100%; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + height: 0; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + text-decoration-line: underline; + color: #000000; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding-top: 0; + position: relative; + left: 312px; + bottom: 35px; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + left: 81.1%; + bottom: 0; + top: 8px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { + display: none; +} +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background: #000000; + border-radius: 0; + border: none; + bottom: 1px; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + display: none; +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 600; + font-size: 14px; + line-height: 19px; +} + +.shippingTable { + border: 0; + padding: 0; + margin-top: 16px; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable { + margin-top: 0; + margin-bottom: 16px; + } +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: 13% 8% 17%; + grid-template-areas: "A B C"; + column-gap: 32px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "frete"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: 13% 8% 17%; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: B; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding-left: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +.productImagesContainer--image-description { + width: 92.93%; + height: 632px; + max-height: unset; + position: relative; + margin-left: 32px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer--image-description { + width: 94.784%; + height: 872px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description { + width: 100%; + height: auto; + margin-left: 0; + margin-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer--image-description { + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + margin-left: 0; + margin-bottom: 16px; + } +} +.productImagesContainer--image-description .productImage--image-description { + height: 632px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer--image-description .productImage--image-description { + height: 872px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description .productImage--image-description { + height: auto; + } +} +@media (max-width: 768px) and (min-width: 377px) { + .productImagesContainer--image-description .productImage--image-description { + width: 100% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } +} +@media (max-width: 377px) and (min-width: 376px) { + .productImagesContainer--image-description .productImage--image-description { + width: 100% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; + } +} +.productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { + height: auto !important; + object-fit: cover !important; + max-height: unset !important; +} + +.productDescriptionContainer { + width: 92.93%; + position: relative; + margin-left: 16px; + margin-right: 32px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productDescriptionContainer { + width: 94.784%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer { + margin-left: 0; + margin-right: 0; + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer { + margin-left: 0; + width: 100%; + margin-right: 0; + } +} +.productDescriptionContainer .productDescriptionTitle { + margin-bottom: 8px; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + margin-bottom: 16px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} +.productDescriptionContainer .productDescriptionText .container { + padding: 0; +} +.productDescriptionContainer .productDescriptionText .container .content :first-child { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionText .container .content :first-child { + font-size: 14px; + line-height: 19px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer .productDescriptionText .container .content :first-child { + font-size: 14px; + line-height: 19px; + } +} +.productDescriptionContainer .productDescriptionText .container .pointerEventsNone { + display: none; +} + +.installmentsPrice { + display: none; +} + .newsletter { - background: red; + height: 175px; + background: #000000; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; + border-bottom: 1px solid #ffffff; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter { + border-bottom: none !important; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter { + height: 200px; + padding: 64px 16px 12px; + border-bottom: none !important; + } +} +.newsletter .container { + margin: 0; +} +.newsletter .container .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form { + width: 100%; + height: 124px; + padding: 0; + } +} +.newsletter .container .form .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin-top: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup { + display: flex; + align-items: center; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #929292; + border-radius: 0; + height: 32px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 12px; + line-height: 16px; + } +} +.newsletter .container .form .inputGroup .buttonContainer { + padding: 0; + height: 32px; +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid #bfbfbf; + min-height: unset; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + margin-top: 0; + } +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + padding: 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..9beaa52 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,16 @@ -.row--menu-row { - padding-right: 24px; +/* +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 */ +.acceptedPaymentMethodContainer { + margin: 0; } -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +.socialNetworksContainer { + margin: 0; +} \ 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..35b32a6 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,206 @@ +/* +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--description-block { + padding: 0 40px; + margin-top: 16px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block { + padding: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block { + margin: 0; + padding: 0 40px; + } +} +.container--description-block .listContainer { + justify-content: space-around; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + padding-top: 0; + column-gap: 2%; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer { + width: 71.858%; + margin: 0 auto 64px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + padding-top: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + padding-top: 16px; + } +} +.container--description-block .listContainer .listItem { + margin: 0; + padding: 0; + width: 114px; + height: 38px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem { + width: 142px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItem { + width: 82px; + margin-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItem { + width: 82px; + margin-bottom: 16px; + } +} +.container--description-block .listContainer .listItem :global(.vtex-button) { + background-color: unset; + border: none; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + width: 100%; + height: 38px; + border-radius: 0; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) { + font-size: 24px; + } +} +.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; + width: 114px; + height: 38px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 142px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; + justify-content: left; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; + justify-content: left; + } +} +.container--description-block .listContainer .listItemActive { + margin: 0; + padding: 0; + height: 38px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive { + margin-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive { + margin-bottom: 16px; + } +} +.container--description-block .listContainer .listItemActive :global(.vtex-button) { + background-color: unset; + border: none; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-bottom: 2px solid #000000; + width: 100%; + height: 38px; + border-radius: 0; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + font-size: 24px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + border-bottom: unset; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + border-bottom: unset; + } +} +.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + width: 100%; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .contentContainer { + width: 71.858%; + margin: 0 auto; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .contentContainer { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } +} +.container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 50% 50%; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 100%; + } +} \ 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.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss deleted file mode 100644 index 36d0f22..0000000 --- a/styles/sass/pages/product/vtex.store-components.scss +++ /dev/null @@ -1,3 +0,0 @@ -.newsletter{ - background: red; -} \ No newline at end of file diff --git a/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss new file mode 100644 index 0000000..429c4e5 --- /dev/null +++ b/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss @@ -0,0 +1,47 @@ +.container { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-left: 40px; + padding: 0 0 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin: 0 auto; + width: 71.858%; + } + .homeLink { + padding-right: 6px; + padding-left: 0; + } + + .homeLink::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; + } + + .homeIcon { + display: none; + } + + .arrow { + padding: 0 6px; + .link { + padding: 0 6px; + } + } + + .term { + padding: 0 6px; + } + + .link, + .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; + } +} diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss new file mode 100644 index 0000000..56c310a --- /dev/null +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -0,0 +1,193 @@ +//Header + +.flexRow--main-header { + display: flex; + justify-content: center; + .flexRowContent--main-header { + height: 97px; + display: flex; + justify-content: space-between; + align-items: center; + @media (max-width: 2561px) and (min-width: 1920px) { + margin: 0 auto; + padding-left: 360px; + padding-right: 360px; + } + :global(.vtex-minicart-2-x-minicartWrapperContainer) { + :global(.vtex-minicart-2-x-minicartContainer) { + :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 40px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding-right: 0; + } + } + } + } + :global(.vtex-login-2-x-container) { + :global(.vtex-button) { + :global(.vtex-button__label) { + visibility: hidden; + } + :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; + } + } + } + } +} + +.flexRow--main-header-mobile { + .flexRowContent--main-header-mobile { + display: flex; + justify-content: space-between; + align-items: center; + :global(.vtex-store-components-3-x-logoLink) { + position: absolute; + top: 16px; + left: 40%; + @media (max-width: 768px) and (min-width: 375px) { + left: 30%; + } + :global(.vtex-store-components-3-x-sizeMobile) { + padding: 0; + height: 33px; + display: contents; + } + } + :global(.vtex-store-drawer-0-x-openIconContainer) { + visibility: hidden; + display: flex; + padding-left: 40px; + } + :global(.vtex-store-drawer-0-x-openIconContainer)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 27.93px; + height: 21px; + } + :global(.vtex-login-2-x-container) { + :global(.vtex-button) { + :global(.vtex-button__label) { + visibility: hidden; + } + :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; + left: 0; + position: absolute; + } + } + } + } +} + +//Menu + +.flexColChild { + :global(.vtex-menu-2-x-menuContainerNav) { + :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-left: 308.08px; + } + :global(.vtex-menu-2-x-menuItem) { + :global(.vtex-menu-2-x-styledLink) { + :global(.vtex-menu-2-x-styledLinkContent) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: $gray; + } + } + } + } + } +} + +//Product-images + +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; +} + +.flexCol--stack-layout-content { + width: 100% !important; +} + +//Botao add Cart + +.flexRow { + .flexRowContent { + .stretchChildrenWidth { + :global(.vtex-button):first-child { + background: $black; + padding: 12px 64px; + height: 49px; + border: none; + border-radius: 0; + @media (max-width: 768px) and (min-width: 375px) { + height: 74px; + margin-top: 10px; + } + :global(.vtex-button__label) { + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; + } + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; + color: $white; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } + } + } + } +} + +//Footer + +.flexRow--menu-row { + background-color: $black; + height: 464px; + padding: 32px 32px 128px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 32px 320px 128px; + } +} +.flexRow--menu-row-mobile { + background-color: $black; + min-height: 532px; + padding: 0px 16px 32px; + .flexRowContent--menu-row-mobile { + display: flex; + flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + } + } +} + +//Footer Newsletter + +.flexRow--newsletter-footer { + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 32px; + } +} diff --git a/styles/sass/pages/product/vtexLogin/vtex.login.scss b/styles/sass/pages/product/vtexLogin/vtex.login.scss new file mode 100644 index 0000000..5942ec3 --- /dev/null +++ b/styles/sass/pages/product/vtexLogin/vtex.login.scss @@ -0,0 +1,10 @@ +@media (max-width: 768px) and (min-width: 375px) { + .buttonLink { + position: relative; + left: 30px; + width: 22px; + :global(.vtex-button) { + width: 22px; + } + } +} diff --git a/styles/sass/pages/product/vtexMenu/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss new file mode 100644 index 0000000..035d2a7 --- /dev/null +++ b/styles/sass/pages/product/vtexMenu/vtex.menu.scss @@ -0,0 +1,215 @@ +//Footer + +.menuContainerNav { + .menuContainer { + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 14px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 14px; + } + .menuItem { + .styledLinkContainer { + margin-left: 0; + @media (max-width: 1025px) and (min-width: 768px) { + margin: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + } + .styledLink { + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } + .styledLinkContent { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: $gray; + .accordionIcon--site-m3-academy-mobile--isClosed, + .accordionIcon--am3academy-mobile--isClosed { + visibility: hidden; + width: 17px; + } + .accordionIcon--site-m3-academy-mobile--isClosed::before, + .accordionIcon--am3academy-mobile--isClosed::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); + } + .accordionIcon--site-m3-academy-mobile--isOpen, + .accordionIcon--am3academy-mobile--isOpen { + visibility: hidden; + transform: rotate(179deg); + width: 17px; + } + .accordionIcon--site-m3-academy-mobile--isOpen::before, + .accordionIcon--am3academy-mobile--isOpen::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); + } + } + .styledLinkContent--site-m3-academy, + .styledLinkContent--am3academy, + .styledLinkContent--seja-um-franqueado-block { + line-height: 38px; + text-align: center; + } + .styledLinkContent--seja-um-franqueado-block { + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + justify-content: center; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + justify-content: center; + } + } + .styledLinkContent--cnpj, + .styledLinkContent--responsabilidade-social { + line-height: 30px; + text-decoration-line: underline; + } + .styledLinkContent--seja-um-franqueado-link, + .styledLinkContent--multimarcas { + font-weight: 400; + font-size: 12px; + line-height: 30px; + color: $white; + display: flex; + justify-content: center; + align-items: center; + width: 164px; + height: 42px; + border: 1px solid $white; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } + } + .styledLinkContent--site-m3-academy-mobile, + .styledLinkContent--am3academy-mobile { + border-bottom: 1px solid $white; + padding: 8px 0; + } + .styledLinkContent--site-m3-academy, + .styledLinkContent--site-m3-academy-mobile, + .styledLinkContent--cnpj, + .styledLinkContent--am3academy, + .styledLinkContent--am3academy-mobile, + .styledLinkContent--responsabilidade-social, + .styledLinkContent--seja-um-franqueado-block { + font-weight: 400; + font-size: 14px; + color: $white; + } + } + } + .styledLinkContainer--am3academy-mobile, + .styledLinkContainer--site-m3-academy-mobile { + margin: 0; + } + .styledLinkContainer--seja-um-franqueado-link, + .styledLinkContainer--multimarcas { + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + justify-content: center; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + justify-content: center; + } + } + } + } +} + +.FooterRightBlock { + margin-bottom: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } + .SpanTitle { + color: $white; + font-weight: 400; + font-size: 14px; + line-height: 38px; + } + .SpanTitleBig { + color: $white; + font-weight: 400; + font-size: 18px; + line-height: 38px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 14px; + } + } + .UlGroup { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + row-gap: 4px; + @media (max-width: 1025px) and (min-width: 768px) { + align-items: center; + } + @media (max-width: 768px) and (min-width: 375px) { + justify-content: center; + align-items: center; + } + .UlSecondary { + display: flex; + padding: 0; + margin: 0; + column-gap: 8px; + list-style: none; + .ImgCard { + @media (max-width: 1025px) and (min-width: 768px) { + width: 42px; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 42px; + } + } + } + } +} + +// Footer Credits + +.AutoresBlock { + .Autores-Group { + display: flex; + align-items: center; + column-gap: 15.73px; + margin: 0; + padding: 0; + .Autores-List { + display: flex; + align-items: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: $white; + column-gap: 8.72px; + } + } +} diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss new file mode 100644 index 0000000..706c081 --- /dev/null +++ b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss @@ -0,0 +1,23 @@ +//Código de referência Produto + +.product-identifier__label, +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + float: right; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + float: left; + } + @media (max-width: 768px) and (min-width: 375px) { + text-align: left; + float: left; + } +} diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss new file mode 100644 index 0000000..1690d69 --- /dev/null +++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss @@ -0,0 +1,9 @@ +//dados produto + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $black; + margin-top: 24px; +} diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss b/styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss new file mode 100644 index 0000000..2015465 --- /dev/null +++ b/styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss @@ -0,0 +1,63 @@ +//Product quantity + +.quantitySelectorContainer { + margin-bottom: 0px; + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + } + .quantitySelectorTitle { + display: none; + } + + .quantitySelectorStepper { + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: $cccccc; + color: $gray; + font-weight: 400; + font-size: 16px; + line-height: 22px; + padding: 0; + } + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: $cccccc; + color: $black; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: $cccccc; + color: $black; + border-radius: 0; + background-color: $white; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss b/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss new file mode 100644 index 0000000..9fa5917 --- /dev/null +++ b/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss @@ -0,0 +1,45 @@ +// Slider + +.container--slider-title { + display: flex; + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 24px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 16px; + } + .wrapper--slider-title { + .heading--slider-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 0; + @media (max-width: 768px) and (min-width: 375px) { + font-size: 20px; + } + } + } +} + +// Footer Credits + +.container { + .wrapper { + .paragraph { + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 20px; + text-align: center; + color: rgba(255, 255, 255, 0.45); + } + .paragraph--footer { + font-weight: 700; + } + } +} diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss new file mode 100644 index 0000000..8ff7932 --- /dev/null +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -0,0 +1,237 @@ +//Slider + +.sliderLayoutContainer--carousel { + background: unset; + width: 94.435%; + margin: 0 auto 113px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + min-height: 543.4px; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 78.616%; + margin: 0 auto 32px; + } + .sliderTrackContainer { + width: 96%; + margin: 0 auto; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 97.012%; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 95.085%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 87.03%; + } + .sliderTrack { + .slide--carousel { + width: 5.3515% !important; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 5.4036% !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 6.0831% !important; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 6.921% !important; + } + .slideChildrenContainer--carousel { + width: 100%; + :global(.vtex-product-summary-2-x-containerNormal) { + max-width: 100% !important; + border-radius: 0; + :global(.vtex-product-summary-2-x-clearLink) { + min-height: 448.4px; + @media (max-width: 2561px) and (min-width: 1920px) { + min-height: 543.4px; + } + @media (max-width: 1025px) and (min-width: 768px) { + min-height: 383.2px; + } + @media (max-width: 768px) and (min-width: 375px) { + min-height: 254.8px; + } + :global(.vtex-product-summary-2-x-element) { + padding: 0; + :global(.vtex-product-summary-2-x-nameContainer) { + padding: 16px 0 8px; + display: flex; + justify-content: center; + :global(.vtex-product-summary-2-x-productNameContainer) { + :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $black; + display: inline-block; + vertical-align: text-top; + padding: 0 16px; + min-height: 19px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } + @media (max-width: 768px) and (min-width: 375px) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } + } + } + } + :global(.vtex-product-summary-2-x-imageContainer) { + width: 100%; + height: 314.4px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 434.4px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 291.2px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 124.8px; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + border-radius: 0; + @media (max-width: 1920px) and (min-width: 1024px) { + min-width: 100%; + } + } + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; + :global(.vtex-store-components-3-x-priceContainer) { + row-gap: 8px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 60px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 49px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 49px; + } + :global(.vtex-store-components-3-x-listPrice) { + padding: 0; + text-align: center; + :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; + } + :global(.vtex-store-components-3-x-listPriceValue) { + padding: 0; + :global(.vtex-product-summary-2-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: $BABABA; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } + &::before { + content: "de "; + } + &::after { + content: " por"; + } + } + } + } + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + display: flex; + justify-content: center; + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + :global(.vtex-store-components-3-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 18px; + line-height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 18px; + line-height: 25px + } + } + } + } + } + } + } + } + } + } + } + } + .sliderArrows { + padding: 0; + margin: 0; + } + .sliderLeftArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; + } + .sliderLeftArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderLeftArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + left: 0; + position: absolute; + } + + .sliderRightArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; + } + + .sliderRightArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + right: 0; + position: absolute; + } + .paginationDotsContainer { + display: flex; + align-items: center; + bottom: -32px; + .paginationDot { + background-color: $black; + width: 10px !important; + height: 10px !important; + } + .paginationDot--isActive { + background-color: $white; + border: 0.5px solid $black; + width: 17px !important; + height: 17px !important; + } + } +} diff --git a/styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss b/styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss new file mode 100644 index 0000000..23fc160 --- /dev/null +++ b/styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss @@ -0,0 +1,5 @@ +// Header + +.wrapper--sticky-header { + background-color: $white !important; +} diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss new file mode 100644 index 0000000..bfbc272 --- /dev/null +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -0,0 +1,923 @@ +//Logo Header + +.logoContainer { + padding-left: 40px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding-left: 0; + } +} + +//Input Header + +.autoCompleteOuterContainer { + &:first-child { + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #aeaeae; + border-radius: 0; + } + } + } +} + +//Product-images + +.container { + width: 100%; + padding: 0; + margin: 0 auto; + max-width: unset !important; +} + +.swiperCaret { + display: none; +} + +.productImagesContainer { + .carouselContainer { + .carouselGaleryCursor { + margin: 0 !important; + width: auto; + padding: 0; + .productImagesGallerySwiperContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } + .productImagesGallerySlide { + margin: 0; + @media (max-width: 2560px) and (min-width: 1920px) { + height: 904px !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + margin: 0; + height: 944px !important; + } + + .productImage { + @media (max-width: 2561px) and (min-width: 1920px) { + height: 904px !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } + + .productImageTag--main { + object-fit: unset !important; + max-height: unset !important; + height: 664px !important; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 904px !important; + } + + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: auto; + } + @media (max-width: 768px) and (min-width: 377px) { + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } + @media (max-width: 377px) and (min-width: 376px) { + width: 99.67% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; + } + } + } + .productVideo, + .videoContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + height: 664px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 296px; + } + } + } + } + .carouselGaleryThumbs { + margin-top: 16px; + height: 90px !important; + @media (max-width: 768px) and (min-width: 375px) { + display: block; + } + .productImagesThumb { + width: 10% !important; + height: 10% !important; + margin-right: 16px; + width: 90px !important; + height: 90px !important; + + .figure, + .thumbImg { + width: 100%; + height: 100%; + border-radius: 8px; + } + } + } + } + } +} + +//Dados produto + +.productNameContainer { + text-align: right; + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } + @media (max-width: 768px) and (min-width: 375px) { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; + } + .productBrand { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + } +} + +:global(.vtex-store-components-3-x-subscriberContainer) { + margin-top: 16px; + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + } + :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; + } + :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; + } + :global(.vtex-store-components-3-x-form) { + margin: 0; + :global(.vtex-store-components-3-x-content) { + width: 60.091%; + margin: 0; + display: grid; + grid-template-areas: + "A B" + "C C"; + max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 44.138%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; + width: 100%; + } + :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0 0 15px 0; + width: 100%; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + margin-right: 0; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + height: 40px; + padding: 0 14px; + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0 0 15px; + width: 100%; + height: 40px; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + margin-right: 0; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + padding: 0 14px; + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + :global(.vtex-button) { + width: 100%; + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + height: 49px; + } + :global(.vtex-button__label) { + font-size: 0; + } + :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + color: $white; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } + } + } + } +} + +// Sku selector + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 8px 0 0; + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + .frameAround--sku-selector { + border-color: $black; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: $black; + } + } + } + } + } +} +.skuSelectorSubcontainer--cor { + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 0; + } + .skuSelectorNameContainer { + margin: 8px 0 0; + height: 48px; + .skuSelectorOptionsList { + margin: 0 !important; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; + .frameAround--sku-selector { + border-color: $black; + border-width: 2px; + width: 48px; + height: 48px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; + border: 1px solid #989898; + .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% - -10px + -11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); + } + .valueWrapper, + .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; + } + } + } + } + } +} + +//Calculadora de Frete + +.shippingContainer { + display: flex; + align-items: flex-end; + @media (max-width: 768px) and (min-width: 375px) { + padding-bottom: 40px; + } + :global(.vtex-address-form__postalCode) { + padding-bottom: 0; + @media (max-width: 768px) and (min-width: 375px) { + width: calc(100% - 49px); + } + :global(.vtex-input)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; + } + :global(.vtex-input) { + :global(.vtex-input__label) { + display: none; + } + :global(.vtex-input-prefix__group) { + margin-top: 8px; + height: 49px; + border-radius: 0; + width: 231px; + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } + :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; + } + :global(.vtex-address-form-4-x-input)::placeholder { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + :global(.vtex-input__error) { + position: absolute; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + height: 0; + padding: 0; + :last-child { + text-decoration-line: underline; + color: $black; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding-top: 0; + position: relative; + left: 312px; + bottom: 35px; + @media (max-width: 768px) and (min-width: 375px) { + left: calc(100% - 18.9%); + bottom: 0; + top: 8px; + } + :last-child { + display: none; + } + } + } + } + :global(.vtex-button) { + width: 49px; + height: 49px; + background: $black; + border-radius: 0; + border: none; + bottom: 1px; + :global(.vtex-button__label) { + display: none; + } + } + :global(.vtex-button)::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + color: $white; + font-weight: 600; + font-size: 14px; + line-height: 19px; + } +} + +//Resultado Frete + +.shippingTable { + border: 0; + padding: 0; + margin-top: 16px; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + margin-bottom: 16px; + } + .shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: 13% 8% 17%; + grid-template-areas: "A B C"; + column-gap: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; + } + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; + } + .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; + } + .shippingTableHeadDeliveryPrice::after { + content: "frete"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + } + } + } + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: 13% 8% 17%; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + .shippingTableCellDeliveryPrice { + grid-area: B; + } + .shippingTableCell { + padding-left: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} + +//Tab Layout + +.productImagesContainer--image-description { + width: 92.93%; + height: 632px; + max-height: unset; + position: relative; + margin-left: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 94.784%; + height: 872px; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + height: auto; + margin-left: 0; + margin-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + margin-left: 0; + margin-bottom: 16px; + } + .productImage--image-description { + height: 632px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 872px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: auto; + } + @media (max-width: 768px) and (min-width: 377px) { + width: 100% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } + @media (max-width: 377px) and (min-width: 376px) { + width: 100% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; + } + & .productImageTag--image-description--main { + height: auto !important; + object-fit: cover !important; + max-height: unset !important; + + } + } +} +.productDescriptionContainer { + width: 92.93%; + position: relative; + margin-left: 16px; + margin-right: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 94.784%; + } + @media (max-width: 1025px) and (min-width: 768px) { + margin-left: 0; + margin-right: 0; + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-left: 0; + width: 100%; + margin-right: 0; + } + .productDescriptionTitle { + margin-bottom: 8px; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-bottom: 16px; + } + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 20px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 20px; + } + } + .productDescriptionText { + & .container { + padding: 0; + & .content { + :first-child { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $gray; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 14px; + line-height: 19px; + } + } + } + .pointerEventsNone { + display: none; + } + } + } +} + +//Slider + +.installmentsPrice { + display: none; +} + +//Newsletter Footer + +.newsletter { + height: 175px; + background: $black; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; + border-bottom: 1px solid $white; + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: none !important; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 200px; + padding: 64px 16px 12px; + border-bottom: none !important; + } + .container { + margin: 0; + .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + height: 124px; + padding: 0; + } + .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $white; + display: flex; + flex-direction: column; + } + .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $gray; + margin-top: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + align-items: center; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid $gray; + border-radius: 0; + height: 32px; + :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $gray; + border: 1px solid $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; + } + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $gray; + border: 1px solid $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } + } + } + } + .buttonContainer { + padding: 0; + height: 32px; + :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid $gray-300; + min-height: unset; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + } + :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: $white; + padding: 0 !important; + } + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtexStore/vtex.store-footer.scss b/styles/sass/pages/product/vtexStore/vtex.store-footer.scss new file mode 100644 index 0000000..8ef6b41 --- /dev/null +++ b/styles/sass/pages/product/vtexStore/vtex.store-footer.scss @@ -0,0 +1,7 @@ +.acceptedPaymentMethodContainer{ + margin: 0; +} + +.socialNetworksContainer{ + margin: 0; +} diff --git a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss new file mode 100644 index 0000000..938d9fe --- /dev/null +++ b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss @@ -0,0 +1,153 @@ +//Tab Layout + +.container--description-block { + padding: 0 40px; + margin-top: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + padding: 0 40px; + } + .listContainer { + justify-content: space-around; + border-bottom: 1px solid $B9B9B9; + margin-bottom: 32px; + padding-top: 0; + column-gap: 2%; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto 64px; + } + @media (max-width: 1025px) and (min-width: 768px) { + flex-direction: column; + border-top: 1px solid $B9B9B9; + margin-bottom: 16px; + padding-top: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + flex-direction: column; + border-top: 1px solid $B9B9B9; + margin-bottom: 16px; + padding-top: 16px; + } + .listItem { + margin: 0; + padding: 0; + width: 114px; + height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; + margin-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 82px; + margin-bottom: 16px; + } + :global(.vtex-button) { + background-color: unset; + border: none; + color: $gray-300; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + width: 100%; + height: 38px; + border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } + :global(.vtex-button__label) { + padding: 0 !important; + width: 114px; + height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } + @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; + justify-content: left; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 82px; + justify-content: left; + } + } + } + } + .listItemActive { + margin: 0; + padding: 0; + height: 38px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 16px; + } + :global(.vtex-button) { + background-color: unset; + border: none; + color: $black; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-bottom: 2px solid $black; + width: 100%; + height: 38px; + border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: unset; + } + @media (max-width: 768px) and (min-width: 375px) { + border-bottom: unset; + } + :global(.vtex-button__label) { + padding: 0; + width: 100%; + @media (max-width: 1025px) and (min-width: 768px) { + justify-content: left; + } + @media (max-width: 768px) and (min-width: 375px) { + justify-content: left; + } + } + } + } + } + .contentContainer { + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto; + } + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: 1px solid $B9B9B9; + padding-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + border-bottom: 1px solid $B9B9B9; + padding-bottom: 16px; + } + .contentItem { + display: grid; + grid-template-columns: 50% 50%; + @media (max-width: 1025px) and (min-width: 768px) { + display: grid; + grid-template-columns: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + display: grid; + grid-template-columns: 100%; + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..844b03d 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,31 +1,27 @@ -$color-black: #292929; +$black: #000000; -$color-white: #fff; +$white: #ffffff; -$color-gray: #6c6c6c; -$color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; -$color-gray4: #c4c4c4; -$color-gray5: #e5e5e5; - -$color-blue: #4267b2; - -$color-green: #4caf50; +$gray: #929292; +$gray-300: #bfbfbf; +$BABABA: #bababa; +$B9B9B9: #b9b9b9; +$cccccc: #cccccc; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;