carloswinter/challenge-vtex-io-carlos-winter
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #4

Merged
carloswinter merged 9 commits from development into master 2023-02-10 19:23:59 +00:00
Conversation 0 Commits 9 Files Changed 51 +2398 -95
38 changed files with 2398 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6bf3066779 - Show all commits

3
Example.tsx Normal file
View File

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

BIN
assets/images/pix-106 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
html.ts Normal file
View File

@ -0,0 +1 @@
export { Html as default } from "./components/Html"

11
index.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}

3
manifest.json
View File

@ -66,7 +66,8 @@
"vtex.tab-layout": "0.x",
"vtex.condition-layout": "2.x",
"vtex.css-handles": "1.x",
"vtex.product-context": "0.x"
"vtex.product-context": "0.x",
"vtex.store-newsletter": "1.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

3
react/Placeholder.tsx Normal file
View File

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

1
react/Prices.tsx Normal file
View File

@ -0,0 +1 @@
export { default } from "./components/Prices/Prices";

8
react/components/Html/styles.css
View File

@ -1,11 +1,3 @@
/* :global(.agenciamagma-store-theme-5-x-html--cart-content) {
display: flex;
align-items: center;
justify-content: center;
column-gap: 10px;
margin-top: 8px;
margin-bottom: 16px;
} */
[class*="html--cart-content"] {
display: flex;
gap: 10px;

32
react/components/Pix/Pix.tsx
View File

@ -4,7 +4,6 @@ import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
console.log(product);
const pix = {
pixValue: Number(
@ -13,37 +12,36 @@ const Pix = () => {
),
};
const priceTimes =
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments;
const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed(
2
)
.toString()
.replace(".", ",");
// const priceTimes =
// product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
// .NumberOfInstallments;
// const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed(
// 2
// )
// .toString()
// .replace(".", ",");
const pixPrice = (pix.pixValue = pix.pixValue * 0.9)
.toFixed(2)
.toString()
.replace(".", ",");
return (
<>
<span className={styles.AllPriceTimesText}>
/* <span className={styles.AllPriceTimesText}>
<span className={styles.PriceTimes}>{priceTimes} x</span> de
<span className={styles.PriceTimes}> R$ {valueTotal}</span> sem juros
</span>
</span> */
return (
<>
<div className={styles.PricesWrapperRow}>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logo-pix-carloswinter.svg"
src="https://agenciamagma.vteximg.com.br/arquivos/pix-daviklein.svg"
alt="Imagem Pix"
/>
</figure>
<div className={styles.PricesCol}>
<p className={styles.PricesCol}>
<span className={styles.PixFullValue}>R${pixPrice}</span>
<span className={styles.PixPercent}>10% de desconto</span>
</div>
</p>
</div>
</>
);

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

@ -0,0 +1,8 @@
const Placeholder = () => {
if (typeof document !== "undefined") {
const m3Input = document.querySelector(".vtex-address-form-4-x-input");
m3Input?.setAttribute("placeholder", "Digite seu CEP");
}
return null;
};
export default Placeholder;

58
react/components/Prices/Prices.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from "react";
import styles from "./styles.css";
import { useProduct } from "vtex.product-context";
export default function Prices() {
const product = useProduct();
console.log(product);
return (
<div>
<span className={styles.fullPrice}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].TotalValuePlusInterestRate.toString().replace(
".",
","
)}{" "}
</span>
<div className={styles.installmentsNumber}>
<span className={styles.BiginstallmentsNumberText}>
{
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments
}{" "}
x
</span>
<span className={styles.installmentsNumberText}> de </span>
<span className={styles.BiginstallmentsNumberText}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toString().replace(
".",
","
)}
</span>
<span className={styles.installmentsNumberText}> sem juros</span>
</div>
<div className={styles.pixWrapper}>
<img className={styles.pixImage}
src="https://agenciamagma.vteximg.com.br/arquivos/pix-daviklein.svg"
alt="pix-image"
/>
<div className={styles.PixValues}>
<span className={styles.PixValuesPrice}>
R${" "}
{(
Number(
product?.selectedItem?.sellers[0].commertialOffer
.Installments[0].TotalValuePlusInterestRate
) * 0.9
)
.toFixed(2)
.toString()
.replace(".", ",")}
</span>
<span className={styles.PixValuesText}>10 % de desconto</span>
</div>
</div>
</div>
);
}

65
react/components/Prices/styles.css Normal file
View File

@ -0,0 +1,65 @@
.pixWrapper {
display: flex;
}
.fullPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installmentsNumberText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.BiginstallmentsNumberText {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.pixWrapper {
display: flex;
gap: 26px;
margin-top: 8px;
}
.pixImage {
width: 66px;
height: 24px;
align-self: center;
}
.PixValues {
display: flex;
flex-direction: column;
}
.PixValuesPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.PixValuesText {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}

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

@ -15,18 +15,40 @@
},
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
"children": ["html#slider-layout"]
},
"product-summary.shelf#demo1": {
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
"html#sliderPrateleira"
// "product-summary-name",
// "product-summary-description",
// "product-summary-image",
// "product-summary-price",
// "product-summary-sku-selector",
// "product-summary-buy-button"
]
},
"html#sliderPrateleira": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "prateleira-flexcol"
},
"children": [
"product-summary-image",
"product-summary-name",
"product-list-price",
"product-selling-price"
]
},
"html#slider-layout": {
"props": {
"testId": "product-summary-list",
"blockClass": "slider-layout-wrapper"
},
"children": ["slider-layout#demo-products"]
},
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
@ -35,7 +57,7 @@
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"showNavigationArrows": "always",
"blockClass": "carousel"
}
},
@ -49,17 +71,32 @@
"children": ["breadcrumb"]
},
"flex-layout.row#specifications-title": {
"props": {
"props": {
"marginBottom": 7,
"marginTop": 7
}
},
"children": ["rich-text#specifications"]
},
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
"text": "##### Você também pode gostar:",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"blockClass": "specifications-texto"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["html#product-description"]
},
"html#product-description": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": {
@ -174,12 +211,19 @@
}
},
"flex-layout.row#product-image": {
"children": ["html#product-images"]
},
"html#product-images": {
"props": {
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"testId": "",
"phone": "16:9"
},
"displayThumbnailsArrows": false,
@ -194,31 +238,93 @@
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-name",
"html#codigo",
"product-rating-summary",
"flex-layout.row#selling-price",
"html#selling-price",
// "flex-layout.row#selling-price",
"html#product-installments",
"html#pix-component",
"sku-selector",
"html#sku-selector",
// "html#product-quantity",
// "html#add-to-cart-button",
"html#cart-content",
"Placeholder",
"product-assembly-options",
"product-gifts",
"availability-subscriber",
"shipping-simulator",
"share#default"
"html#shipping-simulator"
]
},
"html#product-name": {
"props": {
"marginBottom": 3,
"testId": "product-name",
"blockClass": "productName"
},
"children": ["vtex.store-components:product-name"]
},
"html#codigo": {
"props": {
"blockClass": "codigo",
"testId": "product-code"
},
"children": ["product-identifier.product"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"html#pix-component": {
"props": {
"testId": "pix-price"
"testId": "pix-price",
"blockClass": "pix"
},
"children": ["pix-component"]
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button",
"blockClass": "addButton"
},
"children": ["flex-layout.row#buy-button"]
},
"html#product-quantity": {
"props": {
"testId": "product-quantity"
},
"children": ["product-quantity"]
},
"html#cart-content": {
"props": {
"blockClass": "cart-content"
},
"children": ["product-quantity", "flex-layout.row#buy-button"]
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator",
"blockClass": "shippingSimulator"
},
"children": ["shipping-simulator"]
},
"flex-layout.row#product-name": {
@ -264,10 +370,10 @@
"blockClass": "info-availability"
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"html#product-name",
"html#codigo",
"flex-layout.row#availability",
"html#sku-selector"
]
},
"flex-layout.row#availability": {

3
store/interfaces.json
View File

@ -8,5 +8,8 @@
"html": {
"component": "html",
"composition": "children"
},
"Placeholder": {
"component": "Placeholder"
}
}

460
styles/configs/font-faces.css
View File

@ -1,35 +1,465 @@
/* cyrillic-ext */
@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-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@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-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@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-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@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");
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}

37
styles/css/agenciamagma.store-theme.css
View File

@ -14,3 +14,40 @@
.html--pdp-breadcrumb {
background-color: transparent;
}
.html--addButton {
width: 100%;
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none !important;
}
.html--prateleira-flexcol {
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 1024px) {
.html--prateleira-flexcol {
gap: 8px;
}
}
@media (min-width: 2560px) {
.html--prateleira-flexcol {
min-width: 434.4px;
min-height: 568.4px;
}
}
@media (min-width: 2560px) {
.html--slider-layout-wrapper {
margin: 0 350px !important;
}
}
.html--cart-content {
@media (max-width: 1024px) {
flex-direction: column;
}
}

12
styles/css/vtex.add-to-cart-button.css Normal file
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 */
.addButton {
width: 100%;
}

28
styles/css/vtex.breadcrumb.css
View File

@ -8,20 +8,42 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
display: flex;
align-items: center;
}
@media (min-width: 2560px) {
.container {
margin: 0 320px;
}
}
.container .homeLink {
padding: 0;
}
.container .homeLink .homeIcon {
display: none;
}
.container .homeLink::before {
content: "Home";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
@media (min-width: 2560px) {
.container .homeLink::before {
vertical-align: super;
}
}
.container .arrow--1 .link {
font-size: 0;
}
.container .arrow--1 .link::before {
content: "Sapatos";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -8,6 +8,69 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
}
:global(.vtex-breadcrumb-1-x-container) :nth-child(n) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-breadcrumb-1-x-container) :global(.vtex-breadcrumb-1-x-term) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-telemarketing-2-x-wrapper) :global(.vtex-store-components-3-x-container) {
margin: auto;
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 2560px) {
:global(.vtex-store-components-3-x-container) {
max-width: 100%;
margin: 0 320px;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding-right: 0 !important;
overflow: hidden;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
flex-direction: column;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
.addButton {
width: 100%;
}
.flexRow--buyButton {
width: 100%;
}
@ -18,6 +81,7 @@
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
@ -31,3 +95,21 @@
line-height: 25px;
color: #ffffff;
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
}
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
height: 74px !important;
}
}

16
styles/css/vtex.flex-layoutbreadcrumb.css Normal file
View File

@ -0,0 +1,16 @@
/*
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 */
.vtex-breadcrumb-1-x-container {
background-color: red;
}
.vtex-breadcrumb-1-x-container {
padding: 0 !important;
}

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

@ -19,5 +19,12 @@
font-size: 14px;
line-height: 19px;
float: right;
margin-bottom: 24px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier__value {
float: left;
}
}

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

@ -18,3 +18,57 @@
.flexRowContent {
margin: 0 !important;
}
.listPriceValue {
text-decoration-line: line-through;
text-decoration-color: #bababa;
}
.listPriceValue::before {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "de";
margin-right: 6px;
}
.listPriceValue::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "por";
margin-left: 5px;
}
.listPriceValue .currencyCode,
.listPriceValue .currencyLiteral,
.listPriceValue .currencyInteger {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
@media screen and (max-width: 1024px) {
.listPrice {
height: 19px;
}
.listPriceValue .currencyCode,
.listPriceValue .currencyLiteral,
.listPriceValue .currencyInteger {
font-size: 12px;
line-height: 16px;
}
.sellingPrice {
font-size: 18px;
line-height: 25px;
}
}
.currencyGroup {
color: #bababa;
}

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

@ -7,3 +7,26 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.heading--specifications-texto {
margin: 0 0 16px;
}
@media (min-width: 2560px) {
.heading--specifications-texto {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
}
@media screen and (max-width: 1024px) {
.heading--specifications-texto {
font-size: 24px;
line-height: 38px;
margin: 0;
}
}
@media screen and (max-width: 376px) {
.heading--specifications-texto {
font-size: 20px;
}
}

22
styles/css/vtex.shipping-simulator.css Normal file
View File

@ -0,0 +1,22 @@
/*
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 */
.shippingContainer {
display: none !important;
}
.shippingContainer :global(.vtex-button__label) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
width: 49px;
height: 49px;
background: #000000;
}

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

@ -9,6 +9,12 @@
/* Grid breakpoints */
.sliderLayoutContainer {
padding: 16px 40px 113px;
margin-bottom: -49px;
}
@media (min-width: 2560px) {
.sliderLayoutContainer {
width: 100%;
}
}
.sliderLayoutContainer .sliderTrackContainer {
padding: 0 24px 36px;
@ -20,24 +26,36 @@
margin: 0;
width: 100%;
}
@media (min-width: 2560px) {
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
align-items: center;
max-width: 434.4px !important;
min-height: 543.4px !important;
}
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: 100%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
background-color: #ededed;
}
@media (min-width: 2560px) {
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
min-width: 434.4px;
min-height: 434.4px;
}
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
order: 2;
padding: 0;
justify-content: center;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
height: 50px;
height: auto;
align-items: center;
font-family: "Open Sans", sans-serif;
font-style: normal;
@ -104,6 +122,15 @@
text-align: center;
color: #000;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) :nth-child(n) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
@ -121,6 +148,7 @@
}
.sliderLayoutContainer .paginationDotsContainer {
bottom: 113px;
align-items: center;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot {
width: 10px;
@ -130,4 +158,84 @@
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
background-color: #fff;
height: 17px !important;
width: 17px !important;
}
.slide .slideChildrenContainer :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) .html--prateleira-flexcol {
display: flex;
}
@media screen and (max-width: 1024px) {
:global(.vtex-product-summary-2-x-productBrand) {
font-size: 14px !important;
line-height: 19px !important;
height: auto !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
margin-bottom: 4px;
}
.sliderTrackContainer {
padding: 0 24px 24px !important;
}
.sliderTrack {
gap: 12px !important;
}
.sliderLayoutContainer {
margin-bottom: -49px;
}
}
@media screen and (max-width: 376px) {
.sliderLayoutContainer {
margin-bottom: -81px;
}
.sliderTrack {
gap: 8px !important;
}
:global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 124.8px !important;
}
.sliderTrackContainer {
padding-bottom: 16px !important;
}
}
:global(.vtex-product-price-1-x-interestRate)::after {
content: "sem juros";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-product-price-1-x-installments) {
font-size: 0;
}
:global(.vtex-product-price-1-x-installmentValue) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-product-price-1-x-installmentValue)::before {
content: " de ";
}
:global(.vtex-product-price-1-x-installmentValue)::after {
content: " ";
}
:global(.vtex-product-price-1-x-installmentsNumber) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-product-price-1-x-installmentsNumber)::after {
content: " x ";
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -14,7 +15,7 @@
font-size: 0;
display: flex;
flex-direction: column;
gap: 16px;
gap: 8px;
}
.newsletter .container .form .label::before {
content: "Assine nossa newsletter";
@ -35,10 +36,23 @@
line-height: 25px;
color: #929292;
}
@media (max-width: 350px) {
.newsletter .container .form .label::after {
white-space: unset;
}
}
.newsletter .container .form .inputGroup {
display: flex;
justify-content: center;
}
.newsletter .container .form .inputGroup :global(.vtex-input) {
width: 686px;
}
@media (max-width: 1024px) {
.newsletter .container .form .inputGroup :global(.vtex-input) {
width: 100%;
}
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
@ -63,6 +77,7 @@
padding: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
width: 88px;
background: black;
border: none;
border-bottom: 3px gray solid;
@ -79,14 +94,28 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-bottom: 8px;
float: right;
color: #575757;
}
.productImageTag {
object-fit: unset !important;
max-height: 100% !important;
width: 100%;
}
:global(.vtex-store-components-3-x-productImageTag--zoom) {
display: none;
}
:global(.vtex-stack-layout-0-x-stackItem) {
min-height: unset;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.skuSelectorSubcontainer--tamanho {
@ -216,6 +245,11 @@
line-height: 32px;
color: #575757;
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
}
}
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
@ -224,3 +258,361 @@
line-height: 22px;
color: #929292;
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText :first-child {
margin: 0;
}
}
.carouselGaleryThumbs {
margin-top: 16px;
}
@media (max-width: 639px) {
.carouselGaleryThumbs {
display: block;
}
}
.carouselGaleryThumbs :first-child {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
height: 90px !important;
width: 90px !important;
margin-bottom: 0;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
height: 90px;
width: 90px;
border-radius: 8px;
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 0;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: calc(100% - 47px);
flex-direction: column;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
display: flex;
flex-direction: column;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
}
@media (max-width: 540px) {
.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) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
margin-top: 8px;
margin-right: -49px;
justify-content: right;
position: static;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000;
line-height: normal;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
display: none;
}
.shippingContainer :global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
align-self: end;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-button) {
align-self: center;
bottom: 0;
}
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
.shippingTable {
border: 0;
width: auto;
}
.shippingTable .shippingTableHead {
display: block;
}
.shippingTable .shippingTableHead .shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
}
.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: "Valor";
font-size: 14px;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
margin-top: 15px;
}
.shippingTable .shippingTableBody .shippingTableRow :nth-child(n) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn {
display: none;
}
.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;
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
}
.productBrand {
float: left;
}
.productDescriptionTitle {
font-size: 20px !important;
line-height: 32px !important;
}
.productDescriptionText {
font-size: 14px !important;
line-height: 19px !important;
}
.container .form {
margin: 0 16px;
max-width: 992px;
}
.container .form .label {
width: 100%;
}
.container .form .label::after {
font-size: 16px !important;
line-height: 22px !important;
}
.container .form .inputGroup {
width: 100%;
}
.container .form .inputGroup :global(.vtex-styleguide-9-x-input) {
font-size: 12px !important;
line-height: 16px !important;
width: 100% !important;
}
}
: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-family: "Open Sans", "sans-serif";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
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) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 8px;
grid-row-gap: 13px;
}
@media (min-width: 2560px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
min-width: 765px;
}
}
: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: 1/1/2/2;
margin: 0 !important;
}
: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-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
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: 1/2/2/3;
margin: 0 !important;
}
: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-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
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: 2/1/3/3;
}
: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) {
font-size: 0;
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-submit) :global(.vtex-button)::before {
content: "AVISE-ME";
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
height: 49px;
background: #000000;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}

48
styles/css/vtex.tab-layout.css
View File

@ -46,6 +46,11 @@
padding-right: 0 !important;
text-transform: capitalize;
}
@media (min-width: 2560px) {
.listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
}
}
.listContainer--listaDescricao .listItemActive :global(.vtex-button) {
border-radius: 0;
border: none;
@ -66,3 +71,46 @@
padding-right: 0 !important;
text-transform: capitalize;
}
@media (min-width: 2560px) {
.listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
}
}
@media screen and (max-width: 1024px) {
.listContainer--listaDescricao {
flex-direction: column;
gap: 16px;
padding: 16px 0;
border-top: 1px solid #b9b9b9;
margin-top: 16px;
}
.listItem :global(.vtex-button) {
padding: 0 !important;
}
.listItemActive :global(.vtex-button) {
padding: 0 !important;
border: none !important;
}
.contentContainer {
flex-direction: column;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-productImagesContainer) {
width: 100% !important;
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
width: 100% !important;
}
}
@media screen and (max-width: 376px) {
.listContainer--listaDescricao {
margin-bottom: 16px;
}
.contentContainer {
gap: 16px;
}
}

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

@ -5,3 +5,36 @@
.html--pdp-breadcrumb {
background-color: transparent;
}
.html--addButton {
width: 100%;
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none !important;
}
.html--prateleira-flexcol {
display: flex;
flex-direction: column;
align-items: center;
@media screen and (max-width: 1024px) {
gap: 8px;
}
@media (min-width: 2560px) {
min-width: 434.4px;
min-height: 568.4px;
}
}
.html--slider-layout-wrapper {
@media (min-width: 2560px) {
margin: 0 350px !important;
}
}
.html--cart-content {
flex-direction: column;
}

23
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,15 +1,27 @@
.container {
display: flex;
align-items: center;
@media (min-width: 2560px) {
margin: 0 320px;
}
.homeLink {
padding: 0;
.homeIcon {
display: none;
}
}
.homeLink::before {
content: "Home";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
@media (min-width: 2560px) {
vertical-align: super;
}
}
.arrow--1 {
.link {
@ -17,7 +29,12 @@
}
.link::before {
content: "Sapatos";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}

94
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -2,6 +2,75 @@
// width: auto;
// padding: 0 40px;
// }
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
:nth-child(n) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-breadcrumb-1-x-term) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
:global(.vtex-telemarketing-2-x-wrapper) {
:global(.vtex-store-components-3-x-container) {
margin: auto;
}
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
@media (min-width: 2560px) {
max-width: 100%;
margin: 0 320px;
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding-right: 0 !important;
overflow: hidden;
}
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
@media (max-width: 1024px) {
flex-direction: column;
}
:global(.vtex-flex-layout-0-x-flexRow) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
.addButton {
width: 100%;
}
.flexRow--buyButton {
width: 100%;
.flexRowContent--buyButton {
@ -10,6 +79,7 @@
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
@ -26,3 +96,27 @@
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
}
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton {
.flexRowContent--buyButton {
:global(.vtex-button) {
height: 74px !important;
}
}
}
}

8
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -9,6 +9,12 @@
font-size: 14px;
line-height: 19px;
float: right;
margin-bottom: 24px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier__value {
float: left;
}
}

58
styles/sass/pages/product/vtex.product-price.scss
View File

@ -9,3 +9,61 @@
.flexRowContent {
margin: 0 !important;
}
.listPriceValue {
text-decoration-line: line-through;
text-decoration-color: #bababa;
&::before {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "de";
margin-right: 6px;
}
&::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "por";
margin-left: 5px;
}
.currencyCode,
.currencyLiteral,
.currencyInteger {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
}
@media screen and (max-width: 1024px) {
.listPrice {
height: 19px;
}
.listPriceValue {
.currencyCode,
.currencyLiteral,
.currencyInteger {
font-size: 12px;
line-height: 16px;
}
}
.sellingPrice {
font-size: 18px;
line-height: 25px;
}
}
.currencyGroup {
color: #bababa;
}

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

@ -0,0 +1,22 @@
.heading--specifications-texto {
margin: 0 0 16px;
@media (min-width: 2560px) {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
}
@media screen and (max-width: 1024px) {
.heading--specifications-texto {
font-size: 24px;
line-height: 38px;
margin: 0;
}
}
@media screen and (max-width: 376px) {
.heading--specifications-texto {
font-size: 20px;
}
}

130
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -1,5 +1,14 @@
// .sliderLayoutContainer--carousel {
// @media (min-width: 2560px) {
// margin: 0 350px;
// }
// }
.sliderLayoutContainer {
padding: 16px 40px 113px;
margin-bottom: -49px;
@media (min-width: 2560px) {
width: 100%;
}
.sliderTrackContainer {
padding: 0 24px 36px;
@ -12,27 +21,36 @@
:global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
@media (min-width: 2560px) {
align-items: center;
max-width: 434.4px !important;
min-height: 543.4px !important;
}
:global(.vtex-product-summary-2-x-element) {
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: 100%;
:global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
background-color: #ededed;
@media (min-width: 2560px) {
min-width: 434.4px;
min-height: 434.4px;
}
}
}
:global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
order: 2;
padding: 0;
justify-content: center;
:global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
height: 50px;
height: auto;
align-items: center;
font-family: "Open Sans", sans-serif;
@ -102,6 +120,15 @@
line-height: 33px;
text-align: center;
color: #000;
:nth-child(n) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
}
:global(.vtex-store-components-3-x-sellingPriceLabel) {
@ -131,6 +158,7 @@
}
.paginationDotsContainer {
bottom: 113px;
align-items: center;
.paginationDot {
width: 10px;
@ -141,6 +169,102 @@
.paginationDot--isActive {
background-color: #fff;
height: 17px !important;
width: 17px !important;
}
}
}
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-clearLink) {
:global(.vtex-product-summary-2-x-container) {
:global(.vtex-product-summary-2-x-element) {
.html--prateleira-flexcol {
display: flex;
}
}
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-product-summary-2-x-productBrand) {
font-size: 14px !important;
line-height: 19px !important;
height: auto !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
margin-bottom: 4px;
}
.sliderTrackContainer {
padding: 0 24px 24px !important;
}
.sliderTrack {
gap: 12px !important;
}
.sliderLayoutContainer {
margin-bottom: -49px;
}
}
@media screen and (max-width: 376px) {
.sliderLayoutContainer {
margin-bottom: -81px;
}
.sliderTrack {
gap: 8px !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
:global(.vtex-product-summary-2-x-imageNormal) {
height: 124.8px !important;
}
}
.sliderTrackContainer {
padding-bottom: 16px !important;
}
}
:global(.vtex-product-price-1-x-interestRate) {
&::after {
content: "sem juros";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}
:global(.vtex-product-price-1-x-installments) {
font-size: 0;
}
:global(.vtex-product-price-1-x-installmentValue) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
&::before {
content: " de ";
}
&::after {
content: " ";
}
}
:global(.vtex-product-price-1-x-installmentsNumber) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
&::after {
content: " x ";
}
}

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

@ -6,7 +6,7 @@
font-size: 0;
display: flex;
flex-direction: column;
gap: 16px;
gap: 8px;
&::before {
content: "Assine nossa newsletter";
font-size: 24px;
@ -25,12 +25,19 @@
font-size: 18px;
line-height: 25px;
color: #929292;
@media (max-width: 350px) {
white-space: unset;
}
}
}
.inputGroup {
display: flex;
justify-content: center;
:global(.vtex-input) {
width: 686px;
@media (max-width: 1024px) {
width: 100%;
}
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
@ -55,6 +62,7 @@
:global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
:global(.vtex-button) {
width: 88px;
background: black;
border: none;
border-bottom: 3px gray solid;
@ -75,29 +83,25 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-bottom: 8px;
float: right;
color: #575757;
}
.productImageTag {
// width: 664px !important;
// height: 664px !important;
// max-height: none !important;
object-fit: unset !important;
max-height: 100% !important;
width: 100%;
}
.productImagesThumb,
.carouselThumbBorder,
.figure,
.thumbImg {
// width: 90px !important;
// height: 90px !important;
:global(.vtex-store-components-3-x-productImageTag--zoom) {
display: none;
}
:global(.vtex-stack-layout-0-x-stackItem) {
min-height: unset;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.skuSelectorSubcontainer--tamanho {
@ -236,8 +240,11 @@
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@media (min-width: 2560px) {
font-size: 32px;
}
}
.productDescriptionText {
font-family: "Open Sans";
@ -246,7 +253,394 @@
font-size: 16px;
line-height: 22px;
@media (min-width: 2560px) {
font-size: 18px;
line-height: 25px;
}
color: #929292;
:first-child {
@media (min-width: 2560px) {
margin: 0;
}
}
}
}
}
// .swiper-container-initialized {
// .swiper-wrapper {
.carouselGaleryThumbs {
margin-top: 16px;
@media (max-width: 639px) {
display: block;
}
:first-child {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
:first-child {
.productImagesThumb {
height: 90px !important;
width: 90px !important;
margin-bottom: 0;
.figure {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
.thumbImg {
height: 90px;
width: 90px;
border-radius: 8px;
}
}
}
}
}
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
:global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 0;
@media (max-width: 540px) {
width: calc(100% - 47px);
flex-direction: column;
}
:global(.vtex-input) {
display: flex;
flex-direction: column;
:global(.vtex-input__label) {
font-size: 0;
}
:global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-input-prefix__group) {
@media (max-width: 540px) {
width: 100%;
}
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
:global(.vtex-address-form-4-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
}
:global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
@media (max-width: 540px) {
margin-top: 8px;
margin-right: -49px;
justify-content: right;
position: static;
}
:last-child {
color: #000;
line-height: normal;
:last-child {
display: none;
}
}
}
}
:global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
align-self: end;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
@media (max-width: 540px) {
align-self: center;
bottom: 0;
}
:global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
:global(.vtex-button__label)::before {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
}
}
.shippingTable {
border: 0;
width: auto;
.shippingTableHead {
display: block;
.shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
.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;
&::after {
content: "Valor";
font-size: 14px;
}
}
}
}
.shippingTableBody {
.shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
margin-top: 15px;
:nth-child(n) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTableCell {
padding: 0;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCellDeliveryName {
grid-area: A;
text-transform: capitalize;
}
.shippingTableCellDeliveryEstimate {
white-space: nowrap;
grid-area: C;
}
.shippingTableCellDeliveryPrice {
grid-area: B;
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
}
.productBrand {
float: left;
}
.productDescriptionTitle {
font-size: 20px !important;
line-height: 32px !important;
}
.productDescriptionText {
font-size: 14px !important;
line-height: 19px !important;
}
.container {
.form {
margin: 0 16px;
max-width: 992px;
.label {
width: 100%;
&::after {
font-size: 16px !important;
line-height: 22px !important;
}
}
.inputGroup {
width: 100%;
:global(.vtex-styleguide-9-x-input) {
font-size: 12px !important;
line-height: 16px !important;
width: 100% !important;
}
}
}
}
}
:global(.vtex-store-components-3-x-subscriberContainer) {
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-family: "Open Sans", "sans-serif";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
:global(.vtex-store-components-3-x-form) {
margin: 0;
:global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 8px;
grid-row-gap: 13px;
@media (min-width: 2560px) {
min-width: 765px;
}
:global(.vtex-store-components-3-x-inputName) {
grid-area: 1 / 1 / 2 / 2;
margin: 0 !important;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-inputEmail) {
grid-area: 1 / 2 / 2 / 3;
margin: 0 !important;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-submit) {
grid-area: 2 / 1 / 3 / 3;
:global(.vtex-button) {
font-size: 0;
width: 100%;
}
:global(.vtex-button)::before {
content: "AVISE-ME";
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
height: 49px;
background: #000000;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}
}
}
}

49
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -33,6 +33,9 @@
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
@media (min-width: 2560px) {
font-size: 24px;
}
}
}
}
@ -55,7 +58,53 @@
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
@media (min-width: 2560px) {
font-size: 24px;
}
}
}
}
}
@media screen and (max-width: 1024px) {
.listContainer--listaDescricao {
flex-direction: column;
gap: 16px;
padding: 16px 0;
border-top: 1px solid #b9b9b9;
margin-top: 16px;
}
.listItem {
:global(.vtex-button) {
padding: 0 !important;
}
}
.listItemActive {
:global(.vtex-button) {
padding: 0 !important;
border: none !important;
}
}
.contentContainer {
flex-direction: column;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-productImagesContainer) {
width: 100% !important;
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
width: 100% !important;
}
}
@media screen and (max-width: 376px) {
.listContainer--listaDescricao {
margin-bottom: 16px;
}
.contentContainer {
gap: 16px;
}
}

3
styles/sass/pages/vtex.add-to-cart-button.scss Normal file
View File

@ -0,0 +1,3 @@
.addButton {
width: 100%;
}