diff --git a/.vscode/settings.json b/.vscode/settings.json
index 04540ca..bac992e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -164,5 +164,14 @@
}
}
}
- ]
+ ],
+ "files.exclude": {
+ "**/.git": true,
+ "**/.svn": true,
+ "**/.hg": true,
+ "**/CVS": true,
+ "**/.DS_Store": true,
+ "**/Thumbs.db": false
+ },
+ "explorerExclude.backup": {}
}
diff --git a/react/PaymentPix.tsx b/react/PaymentPix.tsx
new file mode 100644
index 0000000..1eb71bb
--- /dev/null
+++ b/react/PaymentPix.tsx
@@ -0,0 +1,3 @@
+import { PaymentPix } from "./components/PaymentPix/PaymentPix";
+
+export default PaymentPix;
diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx
deleted file mode 100644
index 9a2edfb..0000000
--- a/react/ProductDescription.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ProductDescription } from "./components/ProductDescription/ProductDescription";
-
-export default ProductDescription;
diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx
new file mode 100644
index 0000000..fe6c855
--- /dev/null
+++ b/react/components/PaymentPix/PaymentPix.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import styles from "./styles.css";
+
+const PaymentPix = () => {
+ const product = useProduct();
+ const pricePix = (
+ (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
+ ).toFixed(2);
+
+ const imagePix =
+ "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
+
+ const convertPrice = pricePix.toString().replace(".", ",");
+
+ return (
+
+
+
+
R$ {convertPrice}
+
10% de desconto
+
+
Oaswq
;
-};
-
-export { ProductDescription };
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0f4c222..b41d781 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -6,6 +6,8 @@
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"tab-layout#product",
+ "list-context.product-list#shelf",
+ "newsletter",
"product-questions-and-answers"
]
},
@@ -77,7 +79,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
- "width": "60%",
+ "width": "50%",
"rowGap": 0
}
},
@@ -86,12 +88,15 @@
},
"product-images": {
"props": {
+ "thumbnailsOrientation": "horizontal",
+
"aspectRatio": {
"desktop": "auto",
- "phone": "16:9"
+ "phone": "auto"
},
- "displayThumbnailsArrows": false,
- "displayMode": "list"
+
+ "showPaginationDots": false,
+ "showNavigationArrows": false
}
},
"product-images#descricao": {
@@ -111,22 +116,27 @@
},
"children": [
"flex-layout.row#product-name",
+ "product-identifier.product",
"product-rating-summary",
- "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
- "product-separator",
- "product-identifier.product",
+ "product-paymentPix-component",
"sku-selector",
- "product-quantity",
+
+ "flex-layout.row#cart",
"product-assembly-options",
"product-gifts",
- "flex-layout.row#buy-button",
+
"availability-subscriber",
"shipping-simulator"
]
},
-
+ "flex-layout.row#cart": {
+ "props": {
+ "blockClass": "cart"
+ },
+ "children": ["product-quantity", "flex-layout.row#buy-button"]
+ },
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@@ -143,9 +153,10 @@
"flex-layout.row#buy-button": {
"props": {
- "marginTop": 4,
- "marginBottom": 7
+ "width": "80%",
+ "blockClass": "buyButton"
},
+
"children": ["add-to-cart-button"]
},
@@ -218,5 +229,25 @@
"props": {
"tabId": "product2"
}
+ },
+ "list-context.product-list#shelf": {
+ "blocks": ["product-summary.shelf#shelf"],
+ "children": ["slider-layout#shelf-products"]
+ },
+ "product-summary.shelf#shelf": {
+ "children": ["product-summary-image#shelf", "product-summary-price"]
+ },
+ "slider-layout#shelf-products": {
+ "props": {
+ "itemsPerPage": {
+ "desktop": 4,
+ "tablet": 1,
+ "phone": 1
+ },
+ "infinite": true,
+ "showNavigationArrows": "desktopOnly",
+ "blockClass": "carousel"
+ },
+ "children": []
}
}
diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc
index cfc3226..971cd70 100644
--- a/store/blocks/product-summary/product-summary-list.jsonc
+++ b/store/blocks/product-summary/product-summary-list.jsonc
@@ -9,14 +9,10 @@
]
},
"responsive-layout.desktop#productSummaryList": {
- "children": [
- "flex-layout.row#summaryListDesktop"
- ]
+ "children": ["flex-layout.row#summaryListDesktop"]
},
"responsive-layout.mobile#productSummaryList": {
- "children": [
- "flex-layout.row#summaryListMobile"
- ]
+ "children": ["flex-layout.row#summaryListMobile"]
},
"product-price-savings#summaryPercentage": {
"props": {
@@ -36,7 +32,7 @@
]
},
"flex-layout.row#summaryListDesktop": {
- "props":{
+ "props": {
"fullWidth": true,
"colSizing": "auto",
"blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
]
},
"flex-layout.row#productSpecifications": {
- "children": [
- "product-specification-group#summary"
- ]
+ "children": ["product-specification-group#summary"]
},
"product-summary-name#summaryListDesktop": {
"props": {
@@ -100,18 +94,13 @@
"colSizing": "auto",
"colGap": 5
},
- "children": [
- "add-to-cart-button",
- "flex-layout.row#buyNowButton"
- ]
+ "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
},
"flex-layout.row#buyNowButton": {
"props": {
"blockClass": "buyNowButton"
},
- "children": [
- "add-to-cart-button#buyNow"
- ]
+ "children": ["add-to-cart-button#buyNow"]
},
"add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
}
},
"flex-layout.col#priceSummaryListDesktop": {
- "children": [
- "product-selling-price#summary",
- "product-list-price#summary"
- ]
+ "children": ["product-selling-price#summary", "product-list-price#summary"]
},
"stack-layout#summaryListDesktop": {
"children": [
@@ -144,7 +130,7 @@
}
},
"flex-layout.row#summaryListMobile": {
- "props":{
+ "props": {
"preserveLayoutOnMobile": true,
"colSizing": "auto",
"blockClass": "summaryListMobile",
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee3..bb93cc8 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
- "markers": [
- "discount"
- ],
+ "markers": ["discount"],
"blockClass": "summary"
}
}
diff --git a/store/interfaces.json b/store/interfaces.json
index f5b5636..1e7bec4 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -6,7 +6,7 @@
"component": "html",
"composition": "children"
},
- "product-description-component": {
- "component": "ProductDescription"
+ "product-paymentPix-component": {
+ "component": "PaymentPix"
}
}
diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css
new file mode 100644
index 0000000..e69de29
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 1dd7d62..689e9c1 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.html {
background-color: red;
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
new file mode 100644
index 0000000..f5ba8ae
--- /dev/null
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -0,0 +1,10 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css
new file mode 100644
index 0000000..5eb3ef6
--- /dev/null
+++ b/styles/css/vtex.address-form.css
@@ -0,0 +1,13 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.input::placeholder {
+ content: "Digite seu CEP";
+}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 58f9518..dc77e8c 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.homeIcon {
display: none;
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..c807690 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,98 +1,32 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
- padding: 0 0.5rem;
-}
-
-@media screen and (min-width: 40em) {
- .flexRowContent--menu-link,
- .flexRowContent--main-header {
- padding: 0 1rem;
- }
-}
-
-@media screen and (min-width: 80rem) {
- .flexRowContent--menu-link,
- .flexRowContent--main-header {
- padding: 0 0.25rem;
- }
-}
-
-.flexRowContent--menu-link {
- background-color: #03044e;
- color: #fff;
-}
-
-.flexRowContent--main-header {
- background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
- align-items: center;
- padding: 0.625rem 0.5rem;
- background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
- color: #ffffff;
- font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
- color: #727273;
- font-size: 14px;
-}
-
-.flexRow--deals {
- background-color: #0F3E99;
- padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
- align-items: center;
-}
-
-.flexRow--deals .flexCol {
- align-items: center;
- margin-bottom: 5px;
- padding-top: 5px;
-}
-
-.flexCol--filterCol {
- max-width: 500px;
- min-width: 230px;
-}
-
-.flexCol--productCountCol {
- align-items: flex-start;
-}
-
-.flexCol--orderByCol {
- align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
- width: 42%;
-}
-
-.flexCol--filterMobileCol {
- width: 38%;
-}
-
-.flexRow--quickviewMainRow {
+@charset "UTF-8";
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.flexRowContent--cart {
display: flex;
- max-height: 100%;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 25px;
}
-
-.flexColChild--quickviewDetails:first-child {
- overflow-y: auto;
- height: 66% !important;
- overflow-x: hidden;
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
+ background-color: black;
}
-
-.flexColChild--quickviewDetails:last-child {
- height: 34% !important;
-}
-
-.flexRow--addToCartRow {
- padding-bottom: 1rem;
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
+ font-size: 0;
}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
+ content: "adicionar à sacola";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ color: #ffffff;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..128134d 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -1,3 +1,32 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
.product-identifier--productReference {
- margin-bottom: 1rem;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 8px;
}
+
+.product-identifier__label {
+ display: none;
+}
+
+.product-identifier__separator {
+ display: none;
+}
+
+.product-identifier__value {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..b5b35cc
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,30 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper {
+ background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+ border-right: none;
+ border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+}
+
+.quantitySelectorStepper {
+ border: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..f5ba8ae 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 34c4328..17fb098 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -6,4 +6,155 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.container {
+ max-width: 100%;
+ margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+ max-height: none !important;
+}
+
+.thumbImg {
+ width: 86%;
+ margin: 0;
+}
+
+.productImagesThumb {
+ height: auto !important;
+}
+
+.productBrand {
+ display: flex;
+ justify-content: flex-end;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+}
+.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+ margin-right: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+ font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+ content: "OUTRAS CORES";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+ border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+ border-radius: 21px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+ font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+ content: "OUTROS TAMANHOS:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+ width: 40px;
+ height: 40px;
+ top: 0;
+ left: 0;
+ right: 0;
+ border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+ width: 40px;
+ height: 40px;
+ border-radius: 30px;
+ padding: 0;
+ margin: auto;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+ padding: 0;
+ margin: auto;
+}
+
+.shippingContainer :global(.vtex-button) {
+ width: 49px;
+ height: 49px;
+ background-color: black;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+ content: "Ok";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #ffffff;
+}
+
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
+ content: "CALCULAR FRETE:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+.shippingContainer {
+ display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+ height: 49px;
+}
+.shippingContainer :global(.vtex-button) {
+ position: relative;
+ right: 127px;
+ top: 27px;
+ width: 49px;
+ height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: relative;
+ left: 70px;
+ top: 8px;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss
new file mode 100644
index 0000000..026dcd8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.address-form.scss
@@ -0,0 +1,5 @@
+.input {
+ &::placeholder {
+ content: "Digite seu CEP";
+ }
+}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
new file mode 100644
index 0000000..4108e84
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,23 @@
+.flexRowContent--cart {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 25px;
+ .flexRow--buyButton {
+ :global(.vtex-button) {
+ background-color: black;
+ }
+ :global(.vtex-button__label) {
+ font-size: 0;
+ &::after {
+ content: "adicionar à sacola";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ color: #ffffff;
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
new file mode 100644
index 0000000..fec8794
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -0,0 +1,19 @@
+.product-identifier--productReference {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 8px;
+}
+.product-identifier__label {
+ display: none;
+}
+.product-identifier__separator {
+ display: none;
+}
+.product-identifier__value {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..3b9d284
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,20 @@
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper {
+ background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+ border-right: none;
+ border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+}
+
+.quantitySelectorStepper {
+ border: none;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index e69de29..cd73e7c 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -0,0 +1,161 @@
+.container {
+ max-width: 100%;
+ margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+ max-height: none !important;
+}
+
+.thumbImg {
+ width: 86%;
+ margin: 0;
+}
+
+.productImagesThumb {
+ height: auto !important;
+}
+.productBrand {
+ display: flex;
+ justify-content: flex-end;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ .valueWrapper .skuSelectorItemTextValue {
+ margin-right: 5px;
+ }
+
+ .skuSelectorSubcontainer--cor {
+ .skuSelectorName {
+ font-size: 0;
+ &::after {
+ content: "OUTRAS CORES";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+ }
+ .frameAround {
+ border-radius: 30px;
+ }
+ .skuSelectorItemImageValue,
+ .skuSelectorInternalBox {
+ border-radius: 21px;
+ }
+ .skuSelectorSelectorImageValue {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+ }
+ }
+ .skuSelectorSubcontainer--tamanho {
+ .skuSelectorName {
+ font-size: 0;
+ &::after {
+ content: "OUTROS TAMANHOS:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+ }
+ .frameAround {
+ width: 40px;
+ height: 40px;
+ top: 0;
+ left: 0;
+ right: 0;
+ border-radius: 30px;
+ }
+
+ .skuSelectorInternalBox {
+ width: 40px;
+ height: 40px;
+ border-radius: 30px;
+ padding: 0;
+ margin: auto;
+ }
+ .skuSelectorItemTextValue {
+ padding: 0;
+ margin: auto;
+ }
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-button) {
+ width: 49px;
+ height: 49px;
+ background-color: black;
+ :global(.vtex-button__label) {
+ font-size: 0;
+ &::after {
+ content: "Ok";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #ffffff;
+ }
+ }
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-input) {
+ :global(.vtex-input__label) {
+ font-size: 0;
+ &::after {
+ content: "CALCULAR FRETE:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+ }
+ }
+}
+.shippingContainer {
+ display: flex;
+ :global(.vtex-input-prefix__group) {
+ height: 49px;
+ }
+
+ :global(.vtex-button) {
+ position: relative;
+ right: 127px;
+ top: 27px;
+ width: 49px;
+ height: 49px;
+ }
+ :global(.vtex-address-form__postalCode) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: relative;
+ left: 70px;
+ top: 8px;
+ }
+}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index daf3adb..4c6da1c 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+
$color-black: #292929;
$color-white: #fff;
@@ -14,18 +16,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
- xs: 0,
- cstm: 400,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px
+ xs: 0,
+ cstm: 400,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
) !default;
$z-index: (
- level1: 5,
- level2: 10,
- level3: 15,
- level4: 20,
- level5: 25
+ level1: 5,
+ level2: 10,
+ level3: 15,
+ level4: 20,
+ level5: 25,
) !default;