diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-BoldItalic.ttf b/assets/fonts/OpenSans-BoldItalic.ttf new file mode 100644 index 0000000..307122c Binary files /dev/null and b/assets/fonts/OpenSans-BoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..08d7185 Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBold.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/assets/fonts/OpenSans-ExtraBoldItalic.ttf new file mode 100644 index 0000000..c35f57f Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf new file mode 100644 index 0000000..790286f Binary files /dev/null and b/assets/fonts/OpenSans-Italic.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-LightItalic.ttf b/assets/fonts/OpenSans-LightItalic.ttf new file mode 100644 index 0000000..77f2e6c Binary files /dev/null and b/assets/fonts/OpenSans-LightItalic.ttf differ diff --git a/assets/fonts/OpenSans-Medium.ttf b/assets/fonts/OpenSans-Medium.ttf new file mode 100644 index 0000000..ba6db9b Binary files /dev/null and b/assets/fonts/OpenSans-Medium.ttf differ diff --git a/assets/fonts/OpenSans-MediumItalic.ttf b/assets/fonts/OpenSans-MediumItalic.ttf new file mode 100644 index 0000000..980ac25 Binary files /dev/null and b/assets/fonts/OpenSans-MediumItalic.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/assets/fonts/OpenSans-SemiBoldItalic.ttf b/assets/fonts/OpenSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..f8c39f9 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBoldItalic.ttf differ diff --git a/assets/pix-image-victor_souza.svg b/assets/pix-image-victor_souza.svg new file mode 100644 index 0000000..1d79272 --- /dev/null +++ b/assets/pix-image-victor_souza.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/sandalia-image.png b/assets/sandalia-image.png new file mode 100644 index 0000000..f4da28d Binary files /dev/null and b/assets/sandalia-image.png differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 7d550e5..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Example from "./components/Example/Example"; - -export default Example; \ No newline at end of file diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx deleted file mode 100644 index d195271..0000000 --- a/react/components/Example/Example.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Example = () => { - return ( -
Example
- ) -} - -export default Example \ No newline at end of file diff --git a/react/components/Example/paymentWithPix.tsx b/react/components/Example/paymentWithPix.tsx new file mode 100644 index 0000000..4cb9c7b --- /dev/null +++ b/react/components/Example/paymentWithPix.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {useProduct} from 'vtex.product-context'; + +const PaymentWithPix =() => { + +const product = useProduct(); + + +let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg" + + + return ( +
+ Imagem do icone do pix +
+

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}

+

R$ 10 % de desconto

+
+
+ + ) +} + +export default PaymentWithPix; diff --git a/react/components/Example/styles.css b/react/components/Example/styles.css new file mode 100644 index 0000000..f425591 --- /dev/null +++ b/react/components/Example/styles.css @@ -0,0 +1,37 @@ + +[class*="wrapperPix"] { + display: flex; + gap: 26px; + align-items: center; + margin-top: 8px; +} + +[class*="wrapperPixImage"] { + width: 66px; + height: 24px; +} +[class*="wrapperPrices"] { + display: flex; + flex-direction: column; +} + +[class*="wrapperTitle"] { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + margin: 0; +} + + +[class*="wrapperSubtitle"] { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; + margin: 0; +} diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..aade69e 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,7 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css" + const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..16bcb7d --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,28 @@ + +/* estilização do botão da sacola */ +[class*="m3-boxBuy"] { + display: flex; + gap:10px; + margin-bottom: 16px; +} + +[class*="html--m3buyButton"] >[class*="button"] { + width: 100%; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + display: flex; + align-items: center; + text-align: center; + color: #FFFFFF; + background-color: black; + height: 49px; +} + + + + + + diff --git a/react/paymentWithPix.tsx b/react/paymentWithPix.tsx new file mode 100644 index 0000000..5cdc4e8 --- /dev/null +++ b/react/paymentWithPix.tsx @@ -0,0 +1,3 @@ +import paymentWithPix from "./components/Example/PaymentWithPix"; + +export default paymentWithPix; diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..e468802 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,13 +2,15 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text":"ADICIONAR À SACOLA" } }, "minicart.v2": { "props": { "customPixelEventId": "add-to-cart-button" + }, "children": ["minicart-base-content"] } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..b109aa8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,10 +3,12 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "html#product-description", + // "product-specification-group#table", + // "shelf.relatedProducts", + "rich-text#1", + "list-context.product-list#demo1", + "newsletter", "product-questions-and-answers" ] }, @@ -60,7 +62,8 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + //este cara foi trocado por html#imagens + "html#imagens", "product-bookmark", "product-specification-badges" ] @@ -78,46 +81,68 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "width": "51%", + "rowGap": 0, + "blockClass":"stack" } }, "flex-layout.row#product-image": { "children": ["product-images"] }, + + "html#imagens":{ + "props":{ + "testId": "product-images" + }, + "children": ["product-images"] + }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" + }, - "displayThumbnailsArrows": true + + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "maxHeight":900 } }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass":"right-col" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", + "html#pixzap", + "html#product-installments", + // "product-separator", + // "product-identifier.product", + "html#sku-selector", + "html#box-buy", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, - + //criando este bloco e trocando na chamada acima + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -131,6 +156,7 @@ "showValueNameForImageVariation": true } }, + ////////////////////////////////////////////////////////////////////// "flex-layout.row#buy-button": { "props": { @@ -175,11 +201,267 @@ "share#default": { "props": { "social": { - "Facebook": true, + "Facebook": false, "WhatsApp": true, "Twitter": false, "Pinterest": true } } - } + }, + + "image#image-1": { + "props":{ + "src":"assets/sandalia-image.png", + "maxHeight": "48%", + "maxWidth":"48%", + "blockClass":"imageElement" + } + }, + +"tab-layout#home": { + "children": [ + "tab-list#home", + "tab-content#home" + ] +}, + + +"tab-list#home": { + "children": [ + "tab-list.item#home1", + "tab-list.item#home2", + "tab-list.item#home3", + "tab-list.item#home4", + "tab-list.item#home5" +] +}, + +"tab-list.item#home1": { +"props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true } +}, + +"tab-list.item#home2": { + "props": { + "tabId": "description2", + "label": "Descrição" + } +}, + +"tab-list.item#home3": { + "props": { + "tabId": "description3", + "label": "Descrição" + } +}, + +"tab-list.item#home4": { + "props": { + "tabId": "description4", + "label": "Descrição" + } +}, + +"tab-list.item#home5": { + "props": { + "tabId": "description5", + "label": "Descrição" + } +}, +"tab-content#home": { + "props" : { + "defaultActiveTab": true + }, + "children": [ + "tab-content.item#home1", + "tab-content.item#home2", + "tab-content.item#home3", + "tab-content.item#home4", + "tab-content.item#home5" + ] +}, + +"tab-content.item#home1": { + "children": [ + "image#image-1", + "product-description" + ], + "props": { + "tabId":"description1" + } +}, +"tab-content.item#home2": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description2" +} +}, +"tab-content.item#home3": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description3" +} +}, +"tab-content.item#home4": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description4" +} +}, +"tab-content.item#home5": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description5" +} +}, + +"html#box-buy" : { + "props":{ + "blockClass": "m3-boxBuy" + }, + "children":[ "html#product-quantity", "html#add-to-cart-button"] +}, + +// "flex-layout.col#button-2":{ +// "children": ["flex-layout.row#buy-button"] +// }, + + "html#add-to-cart-button": { + "props":{ + "testId": "add-to-cart-button", + "blockClass": "m3buyButton" + }, + "children":["add-to-cart-button"] + }, + + "html#product-quantity": { + "props":{ + "testId": "product-quantity" + }, + "children":["product-quantity#1"] + }, + + +"product-quantity#1":{ + "props":{ + "width":"25%", + "size":"large", + "snowLabel": false + } + }, + +//estilizando os blocos do carousel + +"list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["html#slider"] +}, +"product-summary.shelf#demo1": { + "children": [ + "html#prateleira" + ] + }, + +"slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + + }, + "rich-text#1": { + "props": { + "text": "Você também pode gostar:", + "blockClass": "m3-richText" + } + }, + + //blocos htmls + "html#codigo": { + //não rodou + "props":{ + "testId": "product-code", + "blockClass": "codigo" + }, + "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":["example-component"] + }, + "html#sku-selector": { + "props":{ + "testId": "sku-selector", + "blockClass": "m3-skuSelector" + }, + "children":["sku-selector"] + }, + "html#shipping-simulator": { + "props":{ + "testId": "shipping-simulator" + }, + "children":["shipping-simulator"] + }, + "html#product-description": { + "props":{ + "testId": "product-description" + }, + "children":["tab-layout#home"] + }, + "html#slider": { + "props":{ + "testId": "product-summary-list" + }, + "children":["slider-layout#demo-products"] + }, + "html#prateleira": { + "props":{ + "testId": "vtex-product-summary" + }, + "children":[ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price"] + } +} + + + + + diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..6da9a9b 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -7,7 +7,7 @@ "marginBottom": 4 }, "children": [ - "product-selling-price" + "html#selling-price" ] }, diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..29bf415 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -38,7 +38,7 @@ "children": [ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments" + "html#product-installments" ] }, "modal-actions#quickview": { @@ -137,7 +137,9 @@ "product-images#quickview" : { "props": { "blockClass": "quickview", - "showNavigationArrows": true + "showNavigationArrows": true, + "maxHeight": 100 + } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..e0b6ca6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,7 +1,8 @@ { "example-component": { - "component": "Example" + "component": "PaymentWithPix" }, + "html": { "component": "html", "composition": "children" diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..bd29971 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,5 @@ +@font-face { + font-family: 'OpenSans'; + src: url('assets/fonts/OpenSans-Regular.ttf'); + font-weight: 400; +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..04627d5 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "OpensSans sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..cab8c6b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,9 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ /* Grid breakpoints */ .html { background-color: red; diff --git a/styles/css/product-separator.css b/styles/css/product-separator.css new file mode 100644 index 0000000..d55774d --- /dev/null +++ b/styles/css/product-separator.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ \ No newline at end of file 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..d55774d --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..ef2dba3 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,56 @@ +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.container { + display: flex; + align-items: center; + background-color: white; + padding: 32px 0 16px 40px; +} +.container .term { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .arrow--1 .Link { + font-size: 0; +} +.container .arrow--1 .Link::before { + content: "Sapatos"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +@media (min-width: 1900px) { + .container { + padding-left: 70px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..976d156 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,38 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.flexRowContent { + padding: 0; + margin: 0; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.flexCol--stack { + padding-left: 40px; +} + +.flexCol--right-col { + padding-right: 40px; +} + +.stretchChildrenWidth { + width: 0; +} + +@media (min-width: 768px) and (max-width: 1024px) { + .flexRowContent { + display: flex; + flex-direction: column; } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; + .flexRowContent .stretchChildrenWidth { + width: 100% !important; } -} - -.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 { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..9cda2ce 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,36 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.product-identifier__label { + display: none; } + +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +@media (min-width: 768px) and (max-width: 1024px) { + .product-identifier__value { + justify-content: flex-start; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..4a36d71 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,29 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ 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..609fbc4 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* 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.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..37912a9 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,65 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.installmentContainer { + background-color: none; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +.productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 0; + margin-bottom: 8px; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; +.priceContainer { + padding: 0; } -.container { - text-align: start; +.price_listPriceContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + padding: 0; + margin-bottom: 8px; } .imageContainer { - text-align: center; + margin-bottom: 16px; + width: 314.4px; + height: 314.4px; +} +.imageContainer .imageNormal { + width: 100%; + height: 100%; } -.image { - border-radius: 0.25rem; -} +@media (min-width: 768px) and (max-width: 1024px) { + .imageContainer { + margin-bottom: 16px; + width: 200px; + height: 200px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..8ae215d 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,27 @@ 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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.container { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + display: flex; + justify-content: center; +} + +.m3-richText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..3f4a0e0 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,17 @@ +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.title ::before { + content: " Veja tambem"; + font-size: 16px; + color: red; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..272432e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,36 @@ -.sliderLayoutContainer { - justify-content: center; -} - +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + width: 100%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; + margin-bottom: 64px; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + display: flex; + align-items: center; +} +.sliderLayoutContainer--carousel .paginationDot { + background: black; +} +.sliderLayoutContainer--carousel .paginationDot--isActive { + background: white; + border: 0.5px solid black; } -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +@media (min-width: 768px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel { + padding: 24px 62px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..c3bd5bd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,7 +6,319 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ /* Grid breakpoints */ .newsletter { - background: red; + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.newsletter :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; +} +.newsletter :global(.vtex-button):hover { + border-bottom: 5px solid #bfbfbf; +} +.newsletter :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} +.newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; +} + +.container { + max-width: 100%; + margin: 0; +} + +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + border: none; +} + +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Opens Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + +.productDescriptionTitle { + font-family: "Opens Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + width: 15%; + height: auto !important; +} + +.shippingTableHead { + display: grid; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryName { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableHeadDeliveryEstimate { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableHeadDeliveryPrice { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableRow { + display: grid; + grid-template-columns: 110px 110px 130px; + grid-template-areas: "t p d "; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + grid-area: t; + padding: 0; + margin-bottom: 15px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryEstimate { + grid-area: d; + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryPrice { + grid-area: p; + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shareContainer { + display: none; +} + +.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: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.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: 49px; + top: 27px; + width: 49px; + height: 49px; +} + +.productBrand--quickview { + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} +.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; + margin: auto; +} + +@media (min-width: 768px) and (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..c1ec31f --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,62 @@ +/* +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@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.contentItem { + display: flex; + flex-direction: row; + gap: 32px; + padding: 32px 72px 16px 72px; +} + +.listContainer { + display: flex; + justify-content: space-between; + padding-left: 104px; + padding-right: 104px; + border-bottom: 1px solid #B9B9B9; +} + +.listItem { + margin: 0; + padding: 0; +} +.listItem :global(.vtex-button) { + border-top: none; + border-left: none; + border-right: none; + border-radius: 0; +} +.listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + background-color: white; + padding: 0 16px; + text-transform: initial; +} + +@media (min-width: 637px) and (max-width: 1024px) { + .listContainer { + display: flex; + flex-direction: column; + padding-left: 40px; + padding-right: 40px; + } + .contentItem { + display: flex; + flex-direction: column; + padding: 32px 40px 16px 40px; + } +} \ 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 ea7d5b9..1ea9174 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -6,3 +6,4 @@ background-color: green; } + diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..f15bf83 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,55 @@ + +.container { + display: flex; + align-items: center; + background-color: white; + padding: 32px 0 16px 40px; + + .term { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + .homeLink { + .homeIcon { + display: none; + } + } + + .homeLink::before { + content:"Home"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + + } + + .arrow--1 { + .Link { + font-size:0; + } + + .Link::before { + content:"Sapatos"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} + +@media (min-width:1900px) { + .container { + padding-left: 70px; + } +} 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..e65542b --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,29 @@ + + +.flexRowContent { + padding: 0; + margin:0; +} +.flexCol--stack { + padding-left: 40px; +} + +.flexCol--right-col { + padding-right: 40px; +} + +.stretchChildrenWidth { + width:0; +} + +@media (min-width:768px) and (max-width:1024px) { + .flexRowContent { + display: flex; + flex-direction: column; + + .stretchChildrenWidth { + width: 100% !important; + } + } + +} 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..5f40e51 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,22 @@ +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; + } +.product-identifier__value { + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +@media (min-width: 768px) and (max-width: 1024px) { + .product-identifier__value { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..ab3cffe --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,19 @@ +.sellingPriceValue { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + + 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..2aab9d8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,22 @@ +.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.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..bca4139 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,55 @@ +.installmentContainer { + background-color: none; +} + +.productNameContainer { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} +.nameContainer { + padding:0; + margin-bottom: 8px; +} +.priceContainer { + padding: 0; +} + +.price_listPriceContainer { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + padding: 0; + margin-bottom: 8px; +} + +.imageContainer { + margin-bottom: 16px; + // background-color: #EDEDED; + width: 314.4px; + height: 314.4px; + + + .imageNormal { + width: 100%; + height: 100%; + } +} + +@media (min-width:768px) and (max-width:1024px) { + .imageContainer { + margin-bottom: 16px; + // background-color: #EDEDED; + width: 200px; + height: 200px; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..ebe41e6 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,21 @@ +.container { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + display: flex; + justify-content: center; +} + +.m3-richText { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..ee45877 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,27 @@ + +.sliderLayoutContainer--carousel { + width: 100%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; + margin-bottom: 64px; + + .paginationDotsContainer { + display: flex; + align-items: center; + } + .paginationDot { + background: black; + } + .paginationDot--isActive { + background: white; + border: 0.5px solid black; + } +} + + +@media (min-width:768px) and (max-width:1024px) { +.sliderLayoutContainer--carousel { + padding: 24px 62px; +} +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..493b44e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,339 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + } + + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; + } +} + +.container { + max-width: 100%; + margin: 0; +} + +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + border: none; +} +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Opens Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + +.productDescriptionTitle { + font-family: "Opens Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + width: 15%; + height: auto !important; +} + +@media (min-width: 375px) and (max-width: 1444px) { +} + + +@media (min-width: 1898px) and (max-width: 2000px) { + // .carouselGaleryThumbs { + // margin-left: 28px; + // } +} + +// estilização do frete + +//estilização dos topicos +.shippingTableHead { + display: grid; + margin-bottom: 15px; +} +.shippingTableHeadDeliveryName { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTableHeadDeliveryEstimate { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTableHeadDeliveryPrice { + display: flex; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +//estilização das colunas +.shippingTableRow { + display: grid; + grid-template-columns: 110px 110px 130px; + grid-template-areas: "t p d "; +} + +.shippingTableRadioBtn { + display: none; +} +.shippingTableCellDeliveryName { + grid-area: t; + padding: 0; + margin-bottom: 15px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryEstimate { + grid-area: d; + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryPrice { + grid-area: p; + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shareContainer { + display: none; +} + +.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: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + } + } + } +} + +.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: 49px; + top: 27px; + width: 49px; + height: 49px; + } +} + +// estilização do texto + +.productBrand--quickview { + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +//estilização do container de skus ( tamanhos e cores ) + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + .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; + margin: auto; + } + } +} + +@media (min-width: 768px) and (max-width: 1024px) { + .productBrand--quickview{ + justify-content: flex-start; + } +} 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..7ab21c2 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,59 @@ +.contentItem { + display: flex; + flex-direction: row; + gap:32px; + padding: 32px 72px 16px 72px; +} + + +//estilização do menu "descrição" + +.listContainer { + display: flex; + justify-content: space-between; + padding-left: 104px; + padding-right: 104px; + border-bottom: 1px solid #B9B9B9; +} + +.listItem { + margin: 0; + padding: 0; + :global(.vtex-button) { + border-top: none; + border-left: none; + border-right: none; + border-radius: 0; + :global(.vtex-button__label ) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + background-color: white; + padding: 0 16px; + text-transform: initial; + } + } +} + +@media (min-width:637px) and (max-width:1024px) { + + // .container { + // display: block; + // flex-direction: column; + // } + .listContainer { + display: flex; + flex-direction: column; + padding-left: 40px; + padding-right: 40px; + } + .contentItem { + display: flex; + flex-direction: column; + padding: 32px 40px 16px 40px; + } +} + diff --git a/styles/sass/pages/vtex.shelf.scss b/styles/sass/pages/vtex.shelf.scss new file mode 100644 index 0000000..efb4698 --- /dev/null +++ b/styles/sass/pages/vtex.shelf.scss @@ -0,0 +1,10 @@ +.title ::before { + content: " Veja tambem"; + font-size: 16px; + color:red; +} + +// .title { +// color: blue; +// } + diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..70dfa10 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,17 +1,21 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap'); + +/*font*/ + +$font-family:'Open Sans', sans-serif; + +/*colors*/ $color-black: #292929; - $color-white: #fff; - $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; - $color-blue: #4267b2; - $color-green: #4caf50; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0,