anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #2

Merged
anacarolinaduartecavalcante merged 94 commits from develop into master 2023-02-03 17:19:00 +00:00
Conversation 0 Commits 94 Files Changed 68 +5806 -1126
68 changed files with 5806 additions and 1126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -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",

3
react/Autores.tsx Normal file
View File

@ -0,0 +1,3 @@
import Autores from "./components/Autores/Autores";
export default Autores;

3
react/InstallmentProduct.tsx Normal file
View File

@ -0,0 +1,3 @@
import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct";
export default InstallmentProduct;

3
react/PaymentMethods.tsx Normal file
View File

@ -0,0 +1,3 @@
import PaymentMethods from "./components/PaymentMethods/PaymentMethods";
export default PaymentMethods;

3
react/Pix.tsx Normal file
View File

@ -0,0 +1,3 @@
import Pix from "./components/Pix/Pix";
export default Pix;

3
react/Placeholder.tsx Normal file
View File

@ -0,0 +1,3 @@
import Placeholder from "./components/Placeholder/Placeholder";
export default Placeholder;

3
react/Social.tsx Normal file
View File

@ -0,0 +1,3 @@
import Social from "./components/Social/Social";
export default Social;

26
react/components/Autores/Autores.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
const Autores = () => {
return (
<div className="vtex-menu-2-x-AutoresBlock">
<ul className="vtex-menu-2-x-Autores-Group">
<li className="vtex-menu-2-x-Autores-List">
Powered by
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone logo vtex"
/>
</li>
<li className="vtex-menu-2-x-Autores-List">
Developed by
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone logo m3"
/>
</li>
</ul>
</div>
);
};
export default Autores;

1
react/components/Html/index.tsx
View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

221
react/components/Html/styles.css Normal file
View File

@ -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;
}

27
react/components/InstallmentProduct/InstallmentProduct.tsx Normal file
View File

@ -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 (
<p className={styles.PriceContent}>
<span style={{fontWeight: "700"}}>{productWithInstallments.numberOfInstallments}x&nbsp;</span>
de&nbsp;
<span style={{fontWeight: "700"}}>
R$&nbsp;
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
</span>{" "}
sem juros
</p>
);
};
export default InstallmentProduct;

7
react/components/InstallmentProduct/styles.css Normal file
View File

@ -0,0 +1,7 @@
.PriceContent {
margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

73
react/components/PaymentMethods/PaymentMethods.tsx Normal file
View File

@ -0,0 +1,73 @@
import React from "react";
const PaymentMethods = () => {
return (
<div className="vtex-menu-2-x-FooterRightBlock">
<span className="vtex-menu-2-x-SpanTitleBig">Formas de pagamento</span>
<ul className="vtex-menu-2-x-UlGroup">
<ul className="vtex-menu-2-x-UlSecondary">
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone mastercard"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone diners"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone boleto"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone pix"
/>
</li>
</ul>
<ul className="vtex-menu-2-x-UlSecondary">
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone elo"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone hipercard"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone visa"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone amex"
/>
</li>
</ul>
</ul>
</div>
);
};
export default PaymentMethods;

30
react/components/Pix/Pix.tsx Normal file
View File

@ -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 (
<div className={styles.PixContent}>
<img
className={styles.ImgPixContent}
src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-anacarolinaduartecavalcante-m3academy.svg"
alt="logo pix"
/>
<div className={styles.PixDiscount}>
<span className={styles.TextPixDiscount}>
R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
</span>
<span className={styles.TextDiscount}>10 % de desconto</span>
</div>
</div>
);
};
export default Pix;

32
react/components/Pix/styles.css Normal file
View File

@ -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;
}

17
react/components/Placeholder/Placeholder.tsx Normal file
View File

@ -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;

90
react/components/Social/Social.tsx Normal file
View File

@ -0,0 +1,90 @@
import React from "react";
const Social = () => {
return (
<div className="vtex-menu-2-x-FooterRightBlock">
<span className="vtex-menu-2-x-SpanTitle">Nos siga</span>
<ul className="vtex-menu-2-x-UlGroup">
<ul className="vtex-menu-2-x-UlSecondary">
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/email-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone email"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/facebook-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone facebook"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pinterest-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone pinterest"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/spotify-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone spotify"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/linkedin-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone linkedin"
/>
</a>
</li>
</ul>
<ul className="vtex-menu-2-x-UlSecondary">
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/twiter-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone twiter"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/instagram-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone instagram"
/>
</a>
</li>
<li>
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/whatsapp-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone whatsapp"
/>
</a>
</li>
<li>
{" "}
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/youtube-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone youtube"
/>
</a>
</li>
</ul>
</ul>
</div>
);
};
export default Social;

7
react/index.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}

10
react/tsconfig.json
View File

@ -7,5 +7,11 @@
"moduleResolution": "node",
"target": "es2017"
},
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
}
"include": [
"./typings/*.d.ts",
"./**/*.tsx",
"./**/*.ts",
"components/SwiperComponent/SwiperComponent.tsxonent.tsx",
"SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx"
]
}

149
store/blocks/footer/footer.json
View File

@ -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"
}
}
}

436
store/blocks/footer/menu.json
View File

@ -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"
}
}
}

48
store/blocks/header/category-menu.json
View File

@ -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": {

50
store/blocks/header/header.jsonc
View File

@ -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"
}
}
}

7
store/blocks/home/home.jsonc
View File

@ -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"
}
},

16
store/blocks/pdp/product-assembly.jsonc
View File

@ -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": {

81
store/blocks/pdp/product-availability.jsonc Normal file
View File

@ -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"]
}
}

10
store/blocks/pdp/product-breadcrumb.jsonc Normal file
View File

@ -0,0 +1,10 @@
{
"html#breadcrumb": {
"props": {
"tag": "section",
"testId": "breadcrumbs",
"blockClass": "pdp-breadcrumb"
},
"children": ["breadcrumb"]
}
}

20
store/blocks/pdp/product-image.jsonc Normal file
View File

@ -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"
}
}
}

97
store/blocks/pdp/product-right-col.jsonc Normal file
View File

@ -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"]
}
}

72
store/blocks/pdp/product-slider-layout.jsonc Normal file
View File

@ -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"
}
}
}

108
store/blocks/pdp/product-tab-layout.jsonc Normal file
View File

@ -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"
}
}
}

192
store/blocks/pdp/product.jsonc
View File

@ -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
// }
// }
// }
}

14
store/blocks/product-price.jsonc
View File

@ -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"
]
}
}

1
store/blocks/product-summary/quickview.json
View File

@ -36,7 +36,6 @@
},
"flex-layout.col#quickviewPrice": {
"children": [
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments"
]

18
store/interfaces.json
View File

@ -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"
}
}

35
styles/configs/font-faces.css Normal file
View File

@ -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");
}

688
styles/configs/style.json
View File

@ -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]
}

53
styles/css/vtex.breadcrumb.css Normal file
View File

@ -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;
}

256
styles/css/vtex.flex-layout.css
View File

@ -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;
}
}

15
styles/css/agenciamagma.store-theme.css → styles/css/vtex.login.css
View File

@ -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;
}
}

247
styles/css/vtex.menu.css Normal file
View File

@ -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;
}

35
styles/css/vtex.product-identifier.css
View File

@ -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;
}
}

91
styles/css/vtex.product-price.css
View File

@ -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;
}

65
styles/css/vtex.product-quantity.css Normal file
View File

@ -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;
}

43
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,45 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* 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;
}

303
styles/css/vtex.slider-layout.css
View File

@ -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;
}

10
styles/css/vtex.stack-layout.css
View File

@ -1,10 +0,0 @@
.stackItem--product {
width: 100%;
min-height: 257px
}
.stackItem--quickview {
right: 0;
top: 0;
left: auto;
}

12
styles/css/vtex.sticky-layout.css
View File

@ -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;
}

990
styles/css/vtex.store-components.css
View File

@ -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;
}

23
styles/css/vtex.store-footer.css
View File

@ -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;
}

206
styles/css/vtex.tab-layout.css Normal file
View File

@ -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%;
}
}

8
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,8 +0,0 @@
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
}

0
styles/sass/pages/product/vtex.rich-text.scss
View File

3
styles/sass/pages/product/vtex.store-components.scss
View File

@ -1,3 +0,0 @@
.newsletter{
background: red;
}

47
styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss Normal file
View File

@ -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;
}
}

193
styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss Normal file
View File

@ -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;
}
}

10
styles/sass/pages/product/vtexLogin/vtex.login.scss Normal file
View File

@ -0,0 +1,10 @@
@media (max-width: 768px) and (min-width: 375px) {
.buttonLink {
position: relative;
left: 30px;
width: 22px;
:global(.vtex-button) {
width: 22px;
}
}
}

215
styles/sass/pages/product/vtexMenu/vtex.menu.scss Normal file
View File

@ -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;
}
}
}

23
styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss Normal file
View File

@ -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;
}
}

9
styles/sass/pages/product/vtexProduct/vtex.product-price.scss Normal file
View File

@ -0,0 +1,9 @@
//dados produto
.sellingPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $black;
margin-top: 24px;
}

63
styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss Normal file
View File

@ -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;
}
}
}
}
}
}

45
styles/sass/pages/product/vtexRichText/vtex.rich-text.scss Normal file
View File

@ -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;
}
}
}

237
styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss Normal file
View File

@ -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;
}
}
}

5
styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss Normal file
View File

@ -0,0 +1,5 @@
// Header
.wrapper--sticky-header {
background-color: $white !important;
}

923
styles/sass/pages/product/vtexStore/vtex.store-components.scss Normal file
View File

@ -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;
}
}
}
}
}
}
}

7
styles/sass/pages/product/vtexStore/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,7 @@
.acceptedPaymentMethodContainer{
margin: 0;
}
.socialNetworksContainer{
margin: 0;
}

153
styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss Normal file
View File

@ -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%;
}
}
}
}

40
styles/sass/utils/_vars.scss
View File

@ -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;