diff --git a/assets/iconPix.svg b/assets/iconPix.svg
new file mode 100644
index 0000000..c80d1da
--- /dev/null
+++ b/assets/iconPix.svg
@@ -0,0 +1,38 @@
+
diff --git a/react/PayWithPix.tsx b/react/PayWithPix.tsx
new file mode 100644
index 0000000..3854f6b
--- /dev/null
+++ b/react/PayWithPix.tsx
@@ -0,0 +1,3 @@
+import { PayWithPix } from "./PayWithPix/PayWithPix";
+
+export default PayWithPix;
diff --git a/react/PayWithPix/PayWithPix.css b/react/PayWithPix/PayWithPix.css
new file mode 100644
index 0000000..cef306a
--- /dev/null
+++ b/react/PayWithPix/PayWithPix.css
@@ -0,0 +1,33 @@
+.PayWithPix {
+ display: flex;
+ column-gap: 26px;
+ align-items: center;
+ margin: 16px 0 24px;
+}
+
+.PayWithPix__pixIcon {
+ width: 66px;
+ height: 24px;
+ display: block;
+}
+
+.PayWithPix__wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.PayWithPix__price {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+ margin: 0;
+}
+
+.PayWithPix__discount {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 300;
+ font-size: 13px;
+ color: #929292;
+}
diff --git a/react/PayWithPix/PayWithPix.tsx b/react/PayWithPix/PayWithPix.tsx
new file mode 100644
index 0000000..2f54ace
--- /dev/null
+++ b/react/PayWithPix/PayWithPix.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import style from "./PayWithPix.css";
+
+const PayWithPix = () => {
+ const productContextValue = useProduct();
+
+ const discount =
+ (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) *
+ 0.9;
+ const priceFormatted = discount?.toFixed(2).toString().replace(".", ",");
+
+ return (
+
+
+
R$ {priceFormatted}
+
10 % de desconto
+
+
+ );
+};
+
+export { PayWithPix };
diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx
new file mode 100644
index 0000000..fbdca5f
--- /dev/null
+++ b/react/ProductContext.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import { useProduct } from "vtex.product-context";
+
+const ProductContext = () => {
+ const productContext = useProduct();
+ const [simulation, setSimulation] = useState();
+ useEffect(() => {
+ fetch("/api/checkout/pub/orderForms/simulation?sc=1", {
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ method: "POST",
+ body: JSON.stringify({
+ paymentData: {
+ payments: [{ paymentSystem: "125", installments: 1 }],
+ },
+ items: [
+ {
+ id: productContext?.selectedItem?.itemId,
+ quantity: 1,
+ seller: "1",
+ },
+ ],
+ country: "BRA",
+ }),
+ }).then(async (res) => {
+ setSimulation(await res.json());
+ });
+ }, [productContext?.selectedItem]);
+
+ console.log("productContext", productContext);
+ return <> {simulation?.paymentData?.payments[0]?.value}>;
+};
+
+export default ProductContext;
diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc
index a4776bc..e18de24 100644
--- a/store/blocks/home/home.jsonc
+++ b/store/blocks/home/home.jsonc
@@ -2,8 +2,9 @@
"store.home": {
"blocks": [
"list-context.image-list#demo",
- "example-component", /* You can make references to blocks defined in other files.
- * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
+ "example-component"
+ /* You can make references to blocks defined in other files.
+ * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */,
"flex-layout.row#deals",
"__fold__",
"rich-text#shelf-title",
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a5b01d..f656582 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,9 +1,7 @@
{
"store.product": {
"children": [
- "html#breadcrumb",
"condition-layout.product#availability",
- "tab-layout#description",
"rich-text#prateleira",
"flex-layout.row#shelf",
"product-questions-and-answers",
@@ -19,6 +17,104 @@
"children": ["breadcrumb"]
},
+ "html#imagens": {
+ "props": {
+ "testId": "product-images"
+ },
+ "children": ["flex-layout.row#product-image"]
+ },
+
+ "html#product-name": {
+ "props": {
+ "testId": "product-name"
+ },
+ "children": ["flex-layout.row#product-name"]
+ },
+
+ "html#codigo": {
+ "props": {
+ "testId": "product-code"
+ },
+ "children": ["product-identifier.product"]
+ },
+
+ "html#selling-price": {
+ "props": {
+ "testId": "product-price"
+ },
+ "children": ["product-selling-price"]
+ },
+
+ "html#product-installments": {
+ "props": {
+ "testId": "product-installments"
+ },
+ "children": ["product-installments"]
+ },
+
+ "html#pixzap": {
+ "props": {
+ "testId": "pix-price"
+ },
+ "children": ["flex-layout.row#pix"]
+ },
+
+ "html#sku-selector": {
+ "props": {
+ "testId": "sku-selector"
+ },
+ "children": ["sku-selector"]
+ },
+
+ "html#product-quantity": {
+ "props": {
+ "testId": "product-quantity"
+ },
+ "children": ["flex-layout.row#product-quantity"]
+ },
+
+ "html#add-to-cart-button": {
+ "props": {
+ "testId": "add-to-cart-button"
+ },
+ "children": ["add-to-cart-button"]
+ },
+
+ "html#shipping-simulator": {
+ "props": {
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
+
+ "html#product-description": {
+ "props": {
+ "testId": "product-description"
+ },
+ "children": ["tab-layout#description"]
+ },
+
+ "html#slider": {
+ "props": {
+ "testId": "product-summary-list"
+ },
+ "children": ["list-context.product-list#teste"]
+ },
+
+ "html#prateleira": {
+ "props": {
+ "blockClass": "prateleirateste",
+ "testId": "vtex-product-summary"
+ },
+ "children": [
+ "product-summary-image#shelf",
+ "product-summary-name",
+ "product-summary-space",
+ "product-list-price#summary",
+ "html#selling-price"
+ ]
+ },
+
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
@@ -88,40 +184,47 @@
},
"tab-content.item#description1": {
- "children": ["product-images", "product-description"],
+ "children": ["image#description", "product-description"],
"props": {
"tabId": "description1"
}
},
"tab-content.item#description2": {
- "children": ["product-images", "product-description"],
+ "children": ["image#description", "product-description"],
"props": {
"tabId": "description2"
}
},
"tab-content.item#description3": {
- "children": ["product-images", "product-description"],
+ "children": ["image#description", "product-description"],
"props": {
"tabId": "description3"
}
},
"tab-content.item#description4": {
- "children": ["product-images", "product-description"],
+ "children": ["image#description", "product-description"],
"props": {
"tabId": "description4"
}
},
"tab-content.item#description5": {
- "children": ["product-images", "product-description"],
+ "children": ["image#description", "product-description"],
"props": {
"tabId": "description5"
}
},
+ "image#description": {
+ "props": {
+ "blockClass": "image-description",
+ "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
+ }
+ },
+
"rich-text#prateleira": {
"props": {
"blockClass": "title-shelf",
@@ -130,13 +233,7 @@
},
"product-summary.shelf#teste": {
- "children": [
- "product-summary-image#shelf",
- "product-summary-name",
- "product-summary-space",
- "product-list-price#summary",
- "product-selling-price#summary"
- ]
+ "children": ["html#prateleira"]
},
"list-context.product-list#teste": {
@@ -152,13 +249,12 @@
"phone": 2
},
"infinite": true,
- "showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
},
"flex-layout.row#shelf": {
- "children": ["list-context.product-list#teste"]
+ "children": ["html#slider"]
},
"condition-layout.product#availability": {
@@ -174,6 +270,7 @@
},
"flex-layout.row#product-main": {
"props": {
+ "blockClass": "principal",
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
@@ -181,15 +278,33 @@
"paddingTop": 7,
"paddingBottom": 7
},
+ "children": ["flex-layout.col#mainpage-col"]
+ },
+
+ "flex-layout.row#mainpage-row": {
+ "props": {
+ "blockClass": "mainpage-row"
+ },
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
+ "flex-layout.col#mainpage-col": {
+ "props": {
+ "blockClass": "mainpage-col"
+ },
+ "children": [
+ "html#breadcrumb",
+ "flex-layout.row#mainpage-row",
+ "html#product-description"
+ ]
+ },
+
"stack-layout": {
"props": {
"blockClass": "product"
},
"children": [
- "flex-layout.row#product-image",
+ "html#imagens",
"product-bookmark",
"product-specification-badges"
]
@@ -218,7 +333,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
- "phone": "16:9"
+ "phone": "1:1"
},
"displayThumbnailsArrows": true,
"thumbnailsOrientation": "horizontal"
@@ -230,23 +345,44 @@
"rowGap": 0
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-name",
+ "html#codigo",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
- "product-installments",
- "sku-selector",
- "product-assembly-options",
- "product-gifts",
+ "html#product-installments",
+ "html#pixzap",
+ "html#sku-selector",
"flex-layout.row#buy-box",
"availability-subscriber",
- "shipping-simulator",
+ "html#shipping-simulator",
"share#default",
"placeholder"
]
},
+ "flex-layout.row#pix": {
+ "props": {
+ "blockClass": "pix-container"
+ },
+ "children": ["image#pix", "pay-with-pix"]
+ },
+
+ "image#pix": {
+ "props": {
+ "blockClass": "pix-image",
+ "src": "assets/iconPix.svg"
+ }
+ },
+
+ "product-installments": {
+ "props": {
+ "installmentsCriteria": "max-quantity-without-interest",
+ "markers": ["discount"],
+ "message": "ou {installmentsNumber}x de {installmentValue} sem juros"
+ }
+ },
+
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@@ -276,10 +412,7 @@
"colSizing": "auto"
},
- "children": [
- "flex-layout.row#product-quantity",
- "flex-layout.row#buy-button"
- ]
+ "children": ["html#product-quantity", "flex-layout.row#buy-button"]
},
"flex-layout.row#product-quantity": {
@@ -298,7 +431,7 @@
"preventHorizontalStretch": false,
"fullWidth": true
},
- "children": ["add-to-cart-button"]
+ "children": ["html#add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@@ -308,11 +441,34 @@
"marginBottom": 7,
"paddingTop": 7
},
+ "children": ["flex-layout.row#mainpage-row-availability"]
+ },
+
+ "flex-layout.row#mainpage-row-availability": {
+ "props": {
+ "blockClass": "mainpage-row"
+ },
+ "children": ["flex-layout.col#mainpage-col-availability"]
+ },
+
+ "flex-layout.row#teste": {
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
]
},
+
+ "flex-layout.col#mainpage-col-availability": {
+ "props": {
+ "blockClass": "mainpage-col"
+ },
+ "children": [
+ "html#breadcrumb",
+ "flex-layout.row#teste",
+ "html#product-description"
+ ]
+ },
+
"flex-layout.col#right-col-availability": {
"props": {
"preventVerticalStretch": true,
@@ -320,12 +476,13 @@
"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": {
"props": {
"blockClass": "message-availability"
diff --git a/store/interfaces.json b/store/interfaces.json
index 9193346..60bda72 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -8,5 +8,11 @@
},
"placeholder": {
"component": "placeholder"
+ },
+ "product-context": {
+ "component": "ProductContext"
+ },
+ "pay-with-pix": {
+ "component": "PayWithPix"
}
}
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 7f0a2f5..edea4af 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -14,4 +14,10 @@
.html--pdp-breadcrumb {
background-color: white;
+}
+
+.html--prateleirateste {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 72451a6..86b84d3 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -9,17 +9,25 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
/* Grid breakpoints */
.container {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
font-size: 14px;
line-height: 19px;
- padding: 0 40px 16px 40px;
+ padding: 0;
+ margin-bottom: 16px;
}
-.container .homeIconm,
.container .homeLink {
- display: none;
+ visibility: hidden;
+ padding: 0;
}
-.container .arrow--1 {
- padding-left: 0;
+.container .homeLink::before {
+ content: "Home";
+ font-size: 14px;
+ line-height: 19px;
+ visibility: visible;
+ padding: 0;
}
-.container .arrow--1 .caretIcon {
+.container .homeIcon {
display: none;
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 84ff0e2..8cc4e7b 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -8,17 +8,6 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
/* Grid breakpoints */
-.flexRowContent {
- padding: 0;
- margin: 0;
-}
-@media screen and (max-width: 1024px) {
- .flexRowContent {
- display: flex;
- flex-direction: column;
- }
-}
-
.flexRowContent--buy-button-container {
margin-bottom: 16px;
}
@@ -28,7 +17,76 @@
height: 50px;
margin-left: 10px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .flexRowContent--buy-button-container :global(.vtex-button) {
+ height: 74px;
+ margin-top: 10px;
+ margin-left: unset;
+ }
+}
.flexRow--buy-box .stretchChildrenWidth:nth-child(2n) {
width: 100% !important;
+}
+
+.flexRowContent--principal .stretchChildrenWidth:nth-child(2n) {
+ width: 100% !important;
+}
+.flexRowContent--principal .flexColChild--mainpage-col {
+ padding: 0;
+}
+
+.flexRowContent {
+ padding: 0;
+ margin: 0;
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent {
+ display: flex;
+ flex-direction: column;
+ }
+ .flexRowContent .stretchChildrenWidth {
+ width: auto !important;
+ padding: 0;
+ }
+ .flexRowContent :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
+ display: block;
+ }
+ .flexRowContent .flexRowContent--buy-box {
+ flex-direction: row;
+ }
+}
+@media screen and (max-width: 1024px) and (min-width: 375px) and (max-width: 768px) {
+ .flexRowContent .flexRowContent--buy-box {
+ flex-direction: column;
+ }
+}
+
+.flexRowContent--main-header-mobile {
+ flex-direction: row;
+}
+
+.flexColChild--mainpage-col {
+ padding-bottom: 2rem;
+}
+
+:global(.vtex-flex-layout-0-x-flexRow--pix-container) {
+ display: flex;
+ align-items: center;
+}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) {
+ flex-direction: row;
+ display: flex;
+ }
+}
+:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+ display: flex;
+ align-items: center;
+ width: auto !important;
+ padding-right: 26px;
+}
+:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-imageElement) {
+ width: 66px;
+ height: 24px;
}
\ No newline at end of file
diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css
index ab98158..da0161c 100644
--- a/styles/css/vtex.login.css
+++ b/styles/css/vtex.login.css
@@ -12,4 +12,10 @@
.vtex-address-form__postalCode-forgottenURL
a) {
color: black;
+}
+
+:global(.agenciamagma-store-theme-5-x-html--prateleirateste) {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 4051955..120eec9 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -22,6 +22,12 @@
height: 50px;
}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-numeric-stepper__input) {
+ width: 44px;
+ }
+}
+
:global(.vtex-numeric-stepper__minus-button) {
background-color: white;
}
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 9d37b69..cb77006 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -18,4 +18,14 @@
line-height: 38px;
color: #575757;
margin: 0;
+}
+@media screen and (min-width: 1920px) {
+ .container--title-shelf .paragraph--title-shelf {
+ margin-top: 16px;
+ }
+}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .container--title-shelf .paragraph--title-shelf {
+ font-size: 20px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 004650a..19dfded 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -12,10 +12,20 @@
background-color: transparent;
height: 630px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel {
+ height: 393px;
+ }
+}
.sliderLayoutContainer--carousel .sliderTrackContainer {
margin: 32px 27px 32px 27px;
padding-bottom: 32px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .sliderTrackContainer {
+ padding-bottom: 0;
+ }
+}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack {
margin-bottom: 32px;
}
@@ -25,6 +35,21 @@
height: 448px;
margin-right: 16px;
}
+@media screen and (max-width: 767px) {
+ .sliderLayoutContainer--carousel .slide {
+ margin-right: 8px;
+ }
+}
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+ .sliderLayoutContainer--carousel .slide {
+ margin-right: 12px;
+ }
+}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .slide {
+ height: unset;
+ }
+}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) {
max-width: unset !important;
}
@@ -32,9 +57,22 @@
padding: 0;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) {
- width: 314px;
+ width: 100%;
+ max-width: 314px;
height: 314px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) {
+ max-width: 124px;
+ height: 124px;
+ }
+}
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+ .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) {
+ max-width: 291px;
+ height: 291px;
+ }
+}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
max-height: 314px !important;
}
@@ -49,6 +87,12 @@
line-height: 25px;
color: #000000;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) {
display: block;
font-family: "Open Sans", sans-serif;
@@ -59,7 +103,21 @@
color: #bababa;
padding-bottom: 8px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::before {
+ content: "de ";
+ font-size: 14px;
+}
+.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::after {
+ content: " por";
+}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) {
+ display: block;
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 700;
@@ -67,6 +125,12 @@
line-height: 33px;
color: #000000;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
.sliderLayoutContainer--carousel .sliderRightArrow,
.sliderLayoutContainer--carousel .sliderLeftArrow {
margin: 0;
@@ -99,6 +163,11 @@
align-items: center;
margin-bottom: 64px;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ .sliderLayoutContainer--carousel .paginationDotsContainer {
+ margin-bottom: 32px;
+ }
+}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
width: 10px;
height: 10px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 28ea8dc..1d9aee2 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@@ -11,6 +12,12 @@
.container {
padding: 0 40px;
}
+@media screen and (min-width: 1920px) {
+ .container {
+ max-width: 115rem !important;
+ padding: 0;
+ }
+}
.container .productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
@@ -18,6 +25,12 @@
text-align: right;
color: #575757;
}
+@media screen and (max-width: 1024px) {
+ .container .productNameContainer--quickview {
+ text-align: unset;
+ margin-top: 32px;
+ }
+}
.container .skuSelectorContainer {
display: flex;
flex-direction: column;
@@ -67,6 +80,9 @@
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
}
+.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--verde {
+ display: none;
+}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected {
width: 40px;
height: 40px;
@@ -79,6 +95,12 @@
border-radius: 50%;
z-index: unset;
}
+.container .skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
+ width: 10px;
+ margin: 0 auto;
+ color: black;
+ transform: rotate(60deg);
+}
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho {
order: 1;
margin-bottom: 10px;
@@ -160,9 +182,15 @@
}
.shippingContainer {
- display: flex;
+ margin-top: 16px;
+ margin-bottom: 16px;
position: relative;
}
+@media screen and (min-width: 768px) {
+ .shippingContainer {
+ max-width: 280px;
+ }
+}
.shippingContainer :global(.vtex-button) {
font-size: 0;
background-color: black;
@@ -171,6 +199,8 @@
border: none;
border-radius: 0;
top: 27px;
+ position: absolute;
+ right: 0;
}
.shippingContainer :global(.vtex-button)::before {
content: "OK";
@@ -257,11 +287,23 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
- position: absolute;
- right: 32px;
- bottom: 15px;
text-decoration: underline;
}
+@media screen and (min-width: 375px) and (max-width: 768px) {
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ display: flex;
+ flex-direction: row-reverse;
+ }
+}
+@media screen and (min-width: 768px) {
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ right: -50%;
+ top: calc(50% + 13.5px);
+ transform: translateY(-50%);
+ padding: 0;
+ }
+}
:global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
@@ -280,6 +322,11 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-product-identifier-0-x-product-identifier) {
+ justify-content: start;
+ }
+}
:global(.vtex-store-components-3-x-swiper-pagination),
:global(.vtex-store-components-3-x-swiperCaretNext),
@@ -289,9 +336,23 @@
:global(.vtex-store-components-3-x-productImageTag) {
object-fit: unset !important;
- margin-bottom: 16px;
max-height: 664px !important;
max-width: 664px;
+ margin-bottom: 16px;
+}
+@media screen and (min-width: 1920px) {
+ :global(.vtex-store-components-3-x-productImageTag) {
+ max-height: unset !important;
+ max-width: unset;
+ width: auto !important;
+ height: 904px !important;
+ }
+}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-store-components-3-x-productImageTag) {
+ max-width: 944px;
+ max-height: 944px !important;
+ }
}
:global(.vtex-store-components-3-x-figure) {
@@ -302,6 +363,9 @@
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
margin-top: unset;
}
+:global(.vtex-store-components-3-x-carouselGaleryThumbs) :global(.vtex-store-components-3-x-productImagesThumbCaret) {
+ display: none;
+}
.thumbImg--video {
height: 90px;
@@ -310,10 +374,11 @@
.thumbImg {
width: 90px !important;
height: 90px;
+ border-radius: 8px;
}
.productImagesThumb {
- max-width: 90px;
+ width: 90px !important;
max-height: 90px !important;
margin: 0 16px 0 0;
}
@@ -321,17 +386,38 @@
.newsletter--newsletter {
display: flex;
flex-direction: column;
- height: 175px;
+ align-items: center;
+ height: 100%;
+ max-height: 175px;
background-color: black;
padding-bottom: 16px;
padding-top: 32px;
}
+@media screen and (max-width: 1024px) {
+ .newsletter--newsletter {
+ height: 220px;
+ max-height: unset;
+ padding-top: 64px;
+ }
+}
.newsletter--newsletter .container--newsletter {
margin: 0;
+ width: 100%;
+ padding: 0;
+}
+@media screen and (max-width: 1024px) {
+ .newsletter--newsletter .container--newsletter {
+ padding: 0 16px;
+ }
}
.newsletter--newsletter .container--newsletter .form--newsletter {
max-width: 774px !important;
}
+@media screen and (max-width: 1024px) {
+ .newsletter--newsletter .container--newsletter .form--newsletter {
+ max-width: 992px !important;
+ }
+}
.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter {
display: flex;
flex-direction: column;
@@ -351,7 +437,14 @@
color: #929292;
margin-top: 16px;
}
+@media screen and (max-width: 1024px) {
+ .newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after {
+ font-size: 16px;
+ line-height: 22px;
+ }
+}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter {
+ display: flex;
padding-top: 16px;
border-bottom: 1px solid #929292;
}
@@ -368,9 +461,16 @@
line-height: 25px;
color: #929292;
}
+@media screen and (max-width: 1024px) {
+ .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+ font-size: 12px;
+ line-height: 16px;
+ padding-left: 16px;
+ }
+}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter {
padding: 0;
- border-bottom: 3px solid white;
+ border-bottom: 3px solid #bfbfbf;
height: 32px;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) {
@@ -385,4 +485,67 @@
line-height: 19px;
color: #ffffff;
padding: 0px 16px 13px 16px !important;
+}
+
+.subscriberContainer .title {
+ font-size: 0;
+ margin: 0;
+}
+.subscriberContainer .title::before {
+ content: "Produto Indisponível";
+ font-family: "Open Sans", sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+ font-size: 0;
+}
+.subscriberContainer .subscribeLabel::before {
+ content: "Deseja saber quando estiver disponível?";
+ font-family: "Open Sans", sans-serif;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer :global(.vtex-store-components-3-x-content) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-column-gap: 10px;
+ width: 100%;
+}
+.subscriberContainer .inputName {
+ margin-right: 8px;
+}
+.subscriberContainer .inputName :global(.vtex-input-prefix__group),
+.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) {
+ border-radius: 0;
+ border: 1px solid #989898;
+}
+.subscriberContainer .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input),
+.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+ padding: 12px 14px;
+}
+.subscriberContainer .submit {
+ grid-column: span 2;
+}
+.subscriberContainer .submit :global(.vtex-button) {
+ background-color: black;
+ border-radius: 0;
+ border: none;
+ height: 49px;
+ width: 100%;
+}
+.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
+ font-size: 0;
+}
+.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before {
+ content: "Avise-me";
+ font-family: "Open Sans", sans-serif;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ color: #ffffff;
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 2797ed0..c9ce9b1 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -9,18 +9,49 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
/* Grid breakpoints */
.container--description {
- margin: 16px 40px;
height: 702px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+@media screen and (min-width: 1920px) {
+ .container--description {
+ height: 974px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description {
+ height: 100%;
+ max-height: 1418px;
+ border-bottom: 1px solid #bfbfbf;
+ }
}
.container--description .listContainer {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #bfbfbf;
}
+@media screen and (max-width: 1024px) {
+ .container--description .listContainer {
+ border-top: 1px solid #bfbfbf;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description .listContainer {
+ flex-direction: column;
+ }
+}
.container--description .listContainer .listItem {
padding: 0;
margin: 0;
}
+@media screen and (max-width: 1024px) {
+ .container--description .listContainer .listItem {
+ margin-bottom: 16px;
+ }
+ .container--description .listContainer .listItem:first-child {
+ margin-top: 16px;
+ }
+}
.container--description .listContainer .listItem :global(.vtex-button) {
background: white;
border: none;
@@ -29,46 +60,121 @@
text-transform: none;
color: #bfbfbf;
}
+@media screen and (min-width: 1920px) {
+ .container--description .listContainer .listItem :global(.vtex-button) {
+ font-size: 24px;
+ line-height: 38px;
+ }
+}
+@media screen and (min-width: 375px) and (max-width: 1024px) {
+ .container--description .listContainer .listItem :global(.vtex-button) {
+ display: flex;
+ justify-content: start;
+ width: 100%;
+ }
+}
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.container--description .listContainer .listItemActive {
border-bottom: 2px solid black;
}
+@media screen and (max-width: 1024px) {
+ .container--description .listContainer .listItemActive {
+ border: none;
+ }
+}
.container--description .listContainer .listItemActive :global(.vtex-button) {
color: black;
}
+.container--description .contentContainer {
+ padding-top: 32px;
+}
+@media screen and (min-width: 1920px) {
+ .container--description .contentContainer {
+ padding-top: 64px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer {
+ padding-top: unset;
+ }
+}
.container--description .contentContainer .contentItem {
display: flex;
}
-.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) {
- width: 100%;
- height: 100%;
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer .contentItem {
+ flex-direction: column;
+ }
+}
+.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) {
max-width: 632px;
- max-height: 632px;
+ margin-left: 32px;
}
-.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) {
- margin: 32px 32px 16px 32px;
+@media screen and (min-width: 1920px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) {
+ height: 872px;
+ }
}
-.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
- display: none;
+@media screen and (min-width: 1920px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) {
+ max-width: unset;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-imageElement) {
+ max-width: 944px;
+ margin-top: 16px;
+ margin-left: unset;
+ }
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
- margin-top: 32px;
margin-left: 32px;
}
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
+ margin-top: 16px;
+ margin-left: unset;
+ margin-bottom: 16px;
+ }
+}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans", sans-serif;
font-size: 24px;
line-height: 32px;
color: #575757;
}
+@media screen and (min-width: 1920px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+ font-size: 32px;
+ line-height: 32px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+ font-size: 20px;
+ line-height: 32px;
+ }
+}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 22px;
color: #929292;
}
+@media screen and (min-width: 1920px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) {
padding: 0;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index f7710ca..48b4498 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -5,3 +5,9 @@
.html--pdp-breadcrumb {
background-color: white;
}
+
+.html--prateleirateste {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 254b4ef..355ba05 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,17 +1,26 @@
.container {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
font-size: 14px;
line-height: 19px;
- padding: 0 40px 16px 40px;
+ padding: 0;
+ margin-bottom: 16px;
- .homeIconm,
.homeLink {
- display: none;
- }
+ visibility: hidden;
+ padding: 0;
- .arrow--1 {
- padding-left: 0;
- .caretIcon {
- display: none;
+ &::before {
+ content: "Home";
+ font-size: 14px;
+ line-height: 19px;
+ visibility: visible;
+ padding: 0;
}
}
+
+ .homeIcon {
+ display: none;
+ }
}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 217a3d6..58b1e74 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,20 +1,17 @@
-.flexRowContent {
- padding: 0;
- margin: 0;
-
- @media screen and (max-width: 1024px) {
- display: flex;
- flex-direction: column;
- }
-}
-
.flexRowContent--buy-button-container {
margin-bottom: 16px;
+
:global(.vtex-button) {
background-color: black;
border: none;
height: 50px;
margin-left: 10px;
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ height: 74px;
+ margin-top: 10px;
+ margin-left: unset;
+ }
}
}
@@ -23,3 +20,71 @@
width: 100% !important;
}
}
+
+.flexRowContent--principal {
+ .stretchChildrenWidth:nth-child(2n) {
+ width: 100% !important;
+ }
+
+ .flexColChild--mainpage-col {
+ padding: 0;
+ }
+}
+
+.flexRowContent {
+ padding: 0;
+ margin: 0;
+
+ @media screen and (max-width: 1024px) {
+ display: flex;
+ flex-direction: column;
+
+ .stretchChildrenWidth {
+ width: auto !important;
+ padding: 0;
+ }
+
+ :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
+ display: block;
+ }
+
+ .flexRowContent--buy-box {
+ flex-direction: row;
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ flex-direction: column;
+ }
+ }
+ }
+}
+
+.flexRowContent--main-header-mobile {
+ flex-direction: row;
+}
+.flexColChild--mainpage-col {
+ padding-bottom: 2rem;
+}
+
+:global(.vtex-flex-layout-0-x-flexRow--pix-container) {
+ display: flex;
+ align-items: center;
+
+ :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) {
+ @media screen and (max-width: 1024px) {
+ flex-direction: row;
+ display: flex;
+ }
+
+ :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+ display: flex;
+ align-items: center;
+ width: auto !important;
+ padding-right: 26px;
+
+ :global(.vtex-store-components-3-x-imageElement) {
+ width: 66px;
+ height: 24px;
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss
index c060054..01251a6 100644
--- a/styles/sass/pages/product/vtex.login.scss
+++ b/styles/sass/pages/product/vtex.login.scss
@@ -3,3 +3,9 @@
a) {
color: black;
}
+
+:global(.agenciamagma-store-theme-5-x-html--prateleirateste) {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 509d826..efd890d 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -11,6 +11,12 @@
height: 50px;
}
+:global(.vtex-numeric-stepper__input) {
+ @media screen and (max-width: 1024px) {
+ width: 44px;
+ }
+}
+
:global(.vtex-numeric-stepper__minus-button) {
background-color: white;
}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index 20a1c64..ade3e51 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -9,5 +9,13 @@
color: #575757;
margin: 0;
+
+ @media screen and (min-width: 1920px) {
+ margin-top: 16px;
+ }
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ font-size: 20px;
+ }
}
}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index c87a094..11a5cde 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -2,10 +2,18 @@
background-color: transparent;
height: 630px;
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ height: 393px;
+ }
+
.sliderTrackContainer {
margin: 32px 27px 32px 27px;
padding-bottom: 32px;
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ padding-bottom: 0;
+ }
+
.sliderTrack {
margin-bottom: 32px;
}
@@ -17,6 +25,18 @@
height: 448px;
margin-right: 16px;
+ @media screen and (max-width: 767px) {
+ margin-right: 8px;
+ }
+
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
+ margin-right: 12px;
+ }
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ height: unset;
+ }
+
:global(.vtex-product-summary-2-x-container) {
max-width: unset !important;
@@ -25,9 +45,20 @@
}
:global(.vtex-product-summary-2-x-imageContainer) {
- width: 314px;
+ width: 100%;
+ max-width: 314px;
height: 314px;
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ max-width: 124px;
+ height: 124px;
+ }
+
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
+ max-width: 291px;
+ height: 291px;
+ }
+
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: 314px !important;
}
@@ -44,6 +75,11 @@
line-height: 25px;
color: #000000;
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
}
@@ -56,15 +92,37 @@
text-decoration-line: line-through;
color: #bababa;
padding-bottom: 8px;
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ :global(.vtex-product-price-1-x-listPriceValue) {
+ &::before {
+ content: "de ";
+ font-size: 14px;
+ }
+
+ &::after {
+ content: " por";
+ }
+ }
}
:global(.vtex-product-price-1-x-sellingPrice) {
+ display: block;
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
+
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
}
}
@@ -100,6 +158,10 @@
align-items: center;
margin-bottom: 64px;
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ margin-bottom: 32px;
+ }
+
.paginationDot {
width: 10px;
height: 10px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index ef7ac46..a94c951 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,12 +1,21 @@
.container {
padding: 0 40px;
+ @media screen and (min-width: 1920px) {
+ max-width: 115rem !important;
+ padding: 0;
+ }
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
+
+ @media screen and (max-width: 1024px) {
+ text-align: unset;
+ margin-top: 32px;
+ }
}
.skuSelectorContainer {
@@ -66,6 +75,10 @@
}
}
}
+
+ .skuSelectorItem--verde {
+ display: none;
+ }
.skuSelectorItem--selected {
width: 40px;
height: 40px;
@@ -80,6 +93,13 @@
}
}
}
+
+ .diagonalCross {
+ width: 10px;
+ margin: 0 auto;
+ color: black;
+ transform: rotate(60deg);
+ }
}
.skuSelectorSubcontainer--tamanho {
@@ -179,8 +199,12 @@
}
.shippingContainer {
- display: flex;
+ margin-top: 16px;
+ margin-bottom: 16px;
position: relative;
+ @media screen and (min-width: 768px) {
+ max-width: 280px;
+ }
:global(.vtex-button) {
font-size: 0;
background-color: black;
@@ -189,6 +213,8 @@
border: none;
border-radius: 0;
top: 27px;
+ position: absolute;
+ right: 0;
&::before {
content: "OK";
font-family: "Open Sans", sans-serif;
@@ -287,11 +313,21 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
- position: absolute;
- right: 32px;
- bottom: 15px;
text-decoration: underline;
+ @media screen and (min-width: 375px) and (max-width: 768px) {
+ display: flex;
+ flex-direction: row-reverse;
+ }
+
+ @media screen and (min-width: 768px) {
+ position: absolute;
+ right: -50%;
+ top: calc(50% + 13.5px);
+ transform: translateY(-50%);
+ padding: 0;
+ }
+
:global(.vtex__icon-external-link) {
display: none;
}
@@ -309,6 +345,10 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
+
+ @media screen and (max-width: 1024px) {
+ justify-content: start;
+ }
}
:global(.vtex-store-components-3-x-swiper-pagination),
@@ -319,9 +359,21 @@
:global(.vtex-store-components-3-x-productImageTag) {
object-fit: unset !important;
- margin-bottom: 16px;
max-height: 664px !important;
max-width: 664px;
+ margin-bottom: 16px;
+
+ @media screen and (min-width: 1920px) {
+ max-height: unset !important;
+ max-width: unset;
+ width: auto !important;
+ height: 904px !important;
+ }
+
+ @media screen and (max-width: 1024px) {
+ max-width: 944px;
+ max-height: 944px !important;
+ }
}
:global(.vtex-store-components-3-x-figure) {
@@ -331,6 +383,10 @@
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
margin-top: unset;
+
+ :global(.vtex-store-components-3-x-productImagesThumbCaret) {
+ display: none;
+ }
}
.thumbImg--video {
@@ -340,10 +396,11 @@
.thumbImg {
width: 90px !important;
height: 90px;
+ border-radius: 8px;
}
.productImagesThumb {
- max-width: 90px;
+ width: 90px !important;
max-height: 90px !important;
margin: 0 16px 0 0;
}
@@ -351,16 +408,33 @@
.newsletter--newsletter {
display: flex;
flex-direction: column;
- height: 175px;
+ align-items: center;
+ height: 100%;
+ max-height: 175px;
background-color: black;
padding-bottom: 16px;
padding-top: 32px;
+ @media screen and (max-width: 1024px) {
+ height: 220px;
+ max-height: unset;
+ padding-top: 64px;
+ }
+
.container--newsletter {
margin: 0;
+ width: 100%;
+ padding: 0;
+ @media screen and (max-width: 1024px) {
+ padding: 0 16px;
+ }
.form--newsletter {
max-width: 774px !important;
+
+ @media screen and (max-width: 1024px) {
+ max-width: 992px !important;
+ }
.label--newsletter {
display: flex;
flex-direction: column;
@@ -379,10 +453,16 @@
line-height: 25px;
color: #929292;
margin-top: 16px;
+
+ @media screen and (max-width: 1024px) {
+ font-size: 16px;
+ line-height: 22px;
+ }
}
}
.inputGroup--newsletter {
+ display: flex;
padding-top: 16px;
border-bottom: 1px solid #929292;
@@ -398,12 +478,18 @@
font-size: 18px;
line-height: 25px;
color: #929292;
+
+ @media screen and (max-width: 1024px) {
+ font-size: 12px;
+ line-height: 16px;
+ padding-left: 16px;
+ }
}
}
.buttonContainer--newsletter {
padding: 0;
- border-bottom: 3px solid white;
+ border-bottom: 3px solid #bfbfbf;
height: 32px;
:global(.vtex-button) {
@@ -425,3 +511,82 @@
}
}
}
+
+.subscriberContainer {
+ .title {
+ font-size: 0;
+ margin: 0;
+
+ &::before {
+ content: "Produto Indisponível";
+ font-family: "Open Sans", sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: #868686;
+ }
+ }
+
+ .subscribeLabel {
+ font-size: 0;
+
+ &::before {
+ content: "Deseja saber quando estiver disponível?";
+ font-family: "Open Sans", sans-serif;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: #868686;
+ }
+ }
+
+ :global(.vtex-store-components-3-x-content) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-column-gap: 10px;
+ width: 100%;
+ }
+
+ .inputName {
+ margin-right: 8px;
+ }
+
+ .inputName,
+ .inputEmail {
+ :global(.vtex-input-prefix__group) {
+ border-radius: 0;
+ border: 1px solid #989898;
+
+ :global(.vtex-styleguide-9-x-input) {
+ padding: 12px 14px;
+ }
+ }
+ }
+
+ .submit {
+ grid-column: span 2;
+
+ :global(.vtex-button) {
+ background-color: black;
+ border-radius: 0;
+ border: none;
+ height: 49px;
+ width: 100%;
+
+ :global(.vtex-button__label) {
+ font-size: 0;
+
+ &::before {
+ content: "Avise-me";
+ font-family: "Open Sans", sans-serif;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ color: #ffffff;
+ }
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index c11c02d..024e867 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,26 +1,63 @@
.container--description {
- margin: 16px 40px;
height: 702px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+
+ @media screen and (min-width: 1920px) {
+ height: 974px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ height: 100%;
+ max-height: 1418px;
+ border-bottom: 1px solid #bfbfbf;
+ }
.listContainer {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #bfbfbf;
+ @media screen and (max-width: 1024px) {
+ border-top: 1px solid #bfbfbf;
+ }
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+
.listItem {
padding: 0;
margin: 0;
+ @media screen and (max-width: 1024px) {
+ margin-bottom: 16px;
+
+ &:first-child {
+ margin-top: 16px;
+ }
+ }
+
:global(.vtex-button) {
background: white;
border: none;
-
font-family: "Open Sans", sans-serif;
font-size: 18px;
text-transform: none;
color: #bfbfbf;
+ @media screen and (min-width: 1920px) {
+ font-size: 24px;
+ line-height: 38px;
+ }
+
+ @media screen and (min-width: 375px) and (max-width: 1024px) {
+ display: flex;
+ justify-content: start;
+ width: 100%;
+ }
+
:global(.vtex-button__label) {
padding: 0;
}
@@ -30,6 +67,10 @@
.listItemActive {
border-bottom: 2px solid black;
+ @media screen and (max-width: 1024px) {
+ border: none;
+ }
+
:global(.vtex-button) {
color: black;
}
@@ -37,34 +78,66 @@
}
.contentContainer {
+ padding-top: 32px;
+
+ @media screen and (min-width: 1920px) {
+ padding-top: 64px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ padding-top: unset;
+ }
.contentItem {
display: flex;
- :global(.vtex-store-components-3-x-productImagesContainer) {
- width: 100%;
- height: 100%;
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+
+ :global(.vtex-store-components-3-x-imageElement) {
max-width: 632px;
- max-height: 632px;
- }
+ margin-left: 32px;
- :global(.vtex-store-components-3-x-productImagesGallerySlide) {
- margin: 32px 32px 16px 32px;
- }
+ @media screen and (min-width: 1920px) {
+ height: 872px;
+ }
- :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
- display: none;
+ @media screen and (min-width: 1920px) {
+ max-width: unset;
+ }
+
+ @media screen and (max-width: 1024px) {
+ max-width: 944px;
+ margin-top: 16px;
+ margin-left: unset;
+ }
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
- margin-top: 32px;
margin-left: 32px;
+ @media screen and (max-width: 1024px) {
+ margin-top: 16px;
+ margin-left: unset;
+ margin-bottom: 16px;
+ }
+
:global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans", sans-serif;
font-size: 24px;
line-height: 32px;
color: #575757;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 32px;
+ line-height: 32px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ font-size: 20px;
+ line-height: 32px;
+ }
}
:global(.vtex-store-components-3-x-productDescriptionText) {
@@ -73,6 +146,16 @@
line-height: 22px;
color: #929292;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
:global(.vtex-store-components-3-x-container) {