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 ( +
+ Imagem do Pix +
+

R$ {convertPrice}

+

10% de desconto

+
+
+ ); +}; + +export { PaymentPix }; diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css new file mode 100644 index 0000000..20ec1da --- /dev/null +++ b/react/components/PaymentPix/styles.css @@ -0,0 +1,38 @@ +.paymentPixWrapper { + display: flex; + flex-direction: row; + margin-top: 8px; + margin-bottom: 16px; + height: 39px; + gap: 26px; + align-items: center; +} +.paymentPixImg { + display: flex; + width: 66px; + height: 24px; + align-items: center; +} +.paymentPixText { + display: flex; + flex-direction: column; +} +.paymentPixValue { + margin: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + + color: rgba(0, 0, 0, 0.58); +} +.paymentPixDiscount { + margin: 0; + color: #929292; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; +} diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx deleted file mode 100644 index ca68644..0000000 --- a/react/components/ProductDescription/ProductDescription.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const ProductDescription = () => { - return
Oaswq
; -}; - -export { ProductDescription }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fa56ba1..59b8a51 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -88,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": { @@ -113,22 +116,26 @@ }, "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 @@ -145,9 +152,10 @@ "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, @@ -191,7 +199,13 @@ } }, "tab-list#product": { - "children": ["tab-list.item#product1", "tab-list.item#product2"] + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] }, "tab-list.item#product1": { "props": { @@ -206,8 +220,32 @@ "label": "Descrição" } }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, "tab-content#product": { - "children": ["tab-content.item#product1", "tab-content.item#product2"] + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] }, "tab-content.item#product1": { "children": ["product-images#descricao", "product-description"], @@ -216,11 +254,29 @@ } }, "tab-content.item#product2": { - "children": ["product-description"], + "children": ["product-images#descricao", "product-description"], "props": { "tabId": "product2" } }, + "tab-content.item#product3": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product5" + } + }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], "children": ["slider-layout#shelf-products"] diff --git a/store/interfaces.json b/store/interfaces.json index 714e4e6..1e7bec4 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-payment-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 9964bda..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; @@ -13,9 +14,4 @@ .homeLink::after { content: "Home"; -} - -.link--1 { - display: flex; - order: -1; } \ No newline at end of file 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 3533ae1..4945797 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,7 +6,172 @@ 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 */ -.productDescriptionContainer { - background: red; +.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; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ae31ca0..d63cf56 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -1,4 +1,64 @@ +/* +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 */ +.container { + margin-bottom: 16px; +} + +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer .listItem { + padding: 0; + margin: 0; +} +.listContainer .listItem :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; +} +.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; +} +.listContainer .listItemActive :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; +} +.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; +} + .contentItem { display: flex; flex-direction: row; -} + gap: 32px; +} \ 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.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 0dd25c0..80c6236 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,7 +6,3 @@ content: "Home"; } } -.link--1 { - display: flex; - order: -1; -} 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 926f0da..f66a67b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,181 @@ -.productDescriptionContainer { - background: red; +.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; + } +} + +//Estilização da descrição do produto +.productDescriptionContainer { + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..e91615b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,54 @@ +.container { + margin-bottom: 16px; +} +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + padding: 0; + margin: 0; + :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; + } + } + } + .listItemActive { + :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; + } + } + } +} +.contentItem { + display: flex; + flex-direction: row; + gap: 32px; +} 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;