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/Pix.ts b/react/Pix.ts new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.ts @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..7319e12 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./style.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..a00c400 --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,150 @@ +.html--pdp-breadcrumb { + margin: 0 40px; + +} + +.html--product-summary-container { + margin: 0 40px; +} + +@media screen and (min-width: 1920px) { + .html--pdp-breadcrumb { + margin: 0 360px; + + } + + .html--product-summary-container { + margin: 0 360px; + } +} + + +@media screen and (min-width: 768px) { + .html--quantity-and-button { + display: flex; + } + +} + +/*buy-button*/ +/* [class*="flexRowContent--btn-product"] button { + background-color: black; + border-color: black; + max-width: 526px; + width: 100%; + height: 49px; + display: flex; + border-radius: 0px; + +} + +[class*="flexRowContent--btn-product"] button:hover { + background-color: rgb(41, 41, 41); + border-color: black; +} + +[class*="flexRowContent--btn-product"] button span { + font-size: 0px; +} + +[class*="flexRowContent--btn-product"] button span::after { + content: "ADICIONAR À SACOLA"; + font-size: 14px; + font-family: "Open Sans", sans-serif; +} */ + +[class*="pix-container"] { + display: flex; + align-items: center; + margin: 10px 0; +} + +[class*="pix_price-container"] { + display: flex; + flex-direction: column; + margin-left: 20px; + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +[class*="pix_discount-container"] p { + display: inline; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} + +/*Cep-link*/ + +[class*="vtex-address-form__postalCode-forgottenURL"] a { + color: black; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] a:hover { + color: black; + text-decoration: underline; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] span { + display: none; +} + +/*Description*/ +[class*="vtex-tab-layout-0-x-listItem"] { + margin: 0; + padding: 0; +} + +[class*="vtex-tab-layout-0-x-listItem"] button { + text-transform: capitalize; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + color: #BFBFBF; + +} + +[class*="vtex-tab-layout-0-x-listItem"] button:hover { + color: black; + border-bottom: 2px solid black; + background-color: white; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button { + color: black; + background-color: white; + border: none; + border-bottom: 2px solid black; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button:hover { + background-color: white; + border-bottom: 4px solid black; + color: black; +} + +@media screen and (max-width: 1024px) { + + [class*="vtex-tab-layout-0-x-listItem"] button { + border: none; + width: 100%; + display: flex; + } + + [class*="vtex-tab-layout-0-x-listItemActive"] button { + width: 100%; + display: flex; + border: none; + } +} \ No newline at end of file diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..55dc5de --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const Pix = () => { + const productContextValue = useProduct()?.product?.priceRange?.sellingPrice + ?.highPrice; + + return ( + <> +
+
+ Pix +
+
+ {`R$ ${(productContextValue! - productContextValue! * 0.1) + .toFixed(2) + .replace(".", ",")}`} +
+

10% de desconto

+
+
+
+ + ); +}; + +export default Pix; diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..714c053 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -6,11 +6,7 @@ "blocks": ["header-layout.desktop", "header-layout.mobile"] }, "header-layout.desktop": { - "children": [ - "flex-layout.row#1-desktop", - "flex-layout.row#3-desktop", - "sticky-layout#4-desktop" - ] + "children": ["sticky-layout#4-desktop"] }, "flex-layout.row#1-desktop": { @@ -19,7 +15,7 @@ "fullWidth": true } }, - + "flex-layout.row#3-desktop": { "props": { "blockClass": "menu-link", diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..b60d514 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", @@ -100,5 +100,12 @@ "text": "\n**Reach us at**\nwww.vtex.com.br", "blockClass": "link" } + }, + + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..e0ebe43 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,9 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text": "Adicionar à sacola", + "blockClass": "addToCart" } }, diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..f9e22eb 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..b7885b9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,11 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "html#tab-layout", + "list-context.product-list#list", + //"shelf.relatedProducts", + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -50,7 +50,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "product-main-stack" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -78,49 +79,111 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "width": "50%", + "rowGap": 0, + "blockClass": "stack-layout-container" } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "showNavigationArrows": false } }, + + "html#right-col": { + "props": {} + }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", + "html#product-name", + "html#product-code", "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#product-installments", + "html#Pix", + "html#sku-selector", + "html#buy-container", "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, - "flex-layout.row#product-name": { + "html#buy-container": { "props": { - "marginBottom": 3 + "blockClass": "quantity-and-button" + }, + "children": ["html#product-quantity", "flex-layout.row#buy-button"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + + "html#Pix": { + "props": { + "testId": "pix-price" + }, + "children": ["Pix"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-code": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, @@ -128,14 +191,22 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": false } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "btn-product" + }, + "children": ["html#add-to-cart-button"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" }, "children": ["add-to-cart-button"] }, @@ -161,8 +232,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -181,5 +252,168 @@ "Pinterest": true } } + }, + + "product-images#descricao": { + "props": { + "displayMode": "first-image", + "blockClass": "imagem-descricao" + } + }, + + "rich-text#shelfTitle": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:", + "blockClass": "shelfTitleText" + } + }, + + "list-context.product-list#list": { + "blocks": ["product-summary.shelf#carrosselprodutos"], + "children": ["rich-text#shelfTitle", "html#slider"] + }, + "product-summary.shelf#carrosselprodutos": { + "children": ["html#product-summary"] + }, + + "html#product-summary": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary", + "product-summary-buy-button" + ] + }, + + "product-selling-price#summary": { + "props": { + "blockClass": "summary-selling-price" + }, + "children": ["product-selling-price"] + }, + + "product-list-price#summary": { + "props": { + "blockClass": "summary-list-price" + }, + "children": ["product-summary-price"] + }, + + "html#slider": { + "props": { + "testId": "product-summary-list", + "blockClass": "product-summary-container" + }, + "children": ["slider-layout#carrosselatualizado"] + }, + + "slider-layout#carrosselatualizado": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"] + }, + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + "tab-list.item#description1": { + "props": { + "tabId": "descriptionTab1", + "label": "Descrição", + "defaultActiveTab": true, + "blockClass": "descriptionTab1" + } + }, + "tab-list.item#description2": { + "props": { + "tabId": "descriptionTab2", + "label": "Descrição" + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "descriptionTab3", + "label": "Descrição" + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "descriptionTab4", + "label": "Descrição" + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "descriptionTab5", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + "tab-content.item#description1": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "descriptionTab1" + } + }, + "tab-content.item#description2": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "descriptionTab2" + } + }, + "tab-content.item#description3": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "descriptionTab3" + } + }, + "tab-content.item#description4": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "descriptionTab4" + } + }, + "tab-content.item#description5": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "descriptionTab5" + } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..f420180 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,14 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["html#selling-price"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +24,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-specification-list.jsonc b/store/blocks/product-summary/product-specification-list.jsonc index 57d44af..14ce810 100644 --- a/store/blocks/product-summary/product-specification-list.jsonc +++ b/store/blocks/product-summary/product-specification-list.jsonc @@ -1,13 +1,9 @@ { "product-specification-group#summary": { - "children": [ - "product-specification#summary" - ] + "children": ["product-specification#summary"] }, "product-specification#summary": { - "children": [ - "flex-layout.row#summarySpecificationValues" - ] + "children": ["flex-layout.row#summarySpecificationValues"] }, "flex-layout.row#summarySpecificationValues": { "props": { 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/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..2d07e38 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "Pix": { + "component": "Pix" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..8895b65 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;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..b8da68a --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,33 @@ +/* +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;700&display=swap"); +/* Grid breakpoints */ +.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; +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..0789508 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,54 @@ -.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@300;400;700&display=swap"); +/* Grid breakpoints */ +.flexRowContent--product-main-stack { + padding: 0 30px; + margin-bottom: 0; } - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +@media screen and (max-width: 1024px) { + .flexRowContent--product-main-stack { + display: flex; + flex-direction: column; + } + .flexRowContent--product-main-stack .stretchChildrenWidth { + width: 100% !important; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +@media screen and (max-width: 1024px) { + .flexRowContent--main-header-mobile { + display: flex; + flex-direction: row; } } -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; +.flexCol { + position: relative; } -.flexRowContent--main-header { - background-color: #f0f0f0; +@media screen and (min-width: 768px) { + .flexRowContent--btn-product { + margin: 0 10px; + } } -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; +.flexRow--btn-product { + width: 100%; } - -.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; +.flexRow--btn-product :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + font-family: "Open Sans"; + padding: 12px; } +.flexRow--btn-product :global(.vtex-button):hover { + background-color: rgb(36, 36, 36); +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..6b75deb 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +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;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: right; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); } +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: left; + } +} + +.product-identifier__label, +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b451a2b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,12 +1,31 @@ +/* +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;700&display=swap"); +/* Grid breakpoints */ .listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + visibility: hidden; +} + +.listPrice--summary { + visibility: visible; + display: block; +} + +.savings { + display: none; } .sellingPrice { - color: #3f3f40; + font-family: "Open Sans"; + color: #000000; font-size: 1.25rem; + margin-bottom: -12px; } .sellingPriceValue { @@ -15,47 +34,42 @@ } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; + color: #929292; + margin-bottom: 8px; + font-size: 0px; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + 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; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -74,6 +88,38 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +.installmentsNumber { + font-family: "Open Sans"; + font-weight: bold; + font-size: 16px; + margin-right: 6px; +} +.installmentsNumber::after { + content: "x"; + font-size: 16px; + margin-left: 4px; +} + +.installmentValue { + font-family: "Open Sans"; + font-size: 16px; + font-weight: bold; + margin-right: 6px; +} +.installmentValue::before { + content: "de"; + font-size: 16px; + font-weight: normal; + margin-right: 6px; +} + +.interestRate::after { + font-family: "Open Sans"; + content: "sem juros"; + font-size: 16px; + font-weight: normal; +} \ 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..345c24e --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,34 @@ +/* +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;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..713454e 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,13 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.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; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.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@300;400;700&display=swap"); +/* Grid breakpoints */ +.buyButton { + display: 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..b05cfa2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,14 @@ 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;700&display=swap"); +/* Grid breakpoints */ +.paragraph--shelfTitleText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} \ 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..7dab7cd --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,24 @@ +@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;700&display=swap"); +/* Grid breakpoints */ +.title { + font-size: 0px; +} +.title::after { + content: "Você também pode gostar:"; + 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.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6104f2a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,31 @@ -.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@300;400;700&display=swap"); +/* Grid breakpoints */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + background-color: white; } - -.sliderTrackContainer { - max-width: 100%; +@media screen and (min-width: 1025px) { + .sliderLayoutContainer--carousel { + padding: 0 40px; + } } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + color: black; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.paginationDot { + background-color: black; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--isActive { + background-color: white; + border: 1px solid black; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..255ca99 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,7 +7,394 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ +/*Product name*/ +.productNameContainer--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + } +} + +/* carouselThumbs*/ +.carouselGaleryThumbs { + height: 140px; + margin-top: 16px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +/*SKU*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000000; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(0, 0, 0) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} +.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; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.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; +} + +/*not-Avaliable*/ +.subscriberContainer { + margin-top: 30px; + height: 180px; + position: relative; +} +.subscriberContainer .title { + font-size: 0px; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0px; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .inputName :global(.vtex-input-prefix__group), +.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer .submit { + width: 100%; + position: absolute; + bottom: 0; +} +.subscriberContainer .submit :global(.vtex-button) { + background-color: #000000; + color: #fff; + font-size: 0px; + width: 100%; + height: 100%; + padding: 12px; +} +.subscriberContainer .submit :global(.vtex-button)::after { + content: "Avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; +} + +/*Shipping*/ +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: #000000; + width: 50px; + height: 44px; + color: #fff; + margin-top: 25px; + margin-left: -4px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :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; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; +} +.shippingContainer :global(.vtex-input-prefix__group) { + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: #000000; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +@media screen and (min-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 348px; + top: 25px; + } +} +@media screen and (max-width: 1024px) and (min-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -60px; + } +} + +.shippingTable { + border: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableHead .shippingTableRow { + text-align: left; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; +} +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans"; + color: #afafaf; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} + +/* Image and Text Description */ +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} +@media screen and (max-width: 1024px) { + .content--imagem-descricao { + width: 100%; + } +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 32px; + color: #575757; +} +@media screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + line-height: 32px; + } +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +@media screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + margin-top: 16px; + width: 100%; + } +} + +/*newsletter*/ .newsletter { - background: red; + background: #000000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid white; +} +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} +.newsletter .inputGroup { + display: flex; +} +@media screen and (min-width: 768px) { + .newsletter .inputGroup { + width: 774px; + } +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid gray; + border-radius: 0; +} +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000000; +} +.newsletter .inputGroup .buttonContainer { + padding: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000000; + border: none; + border-bottom: 2px solid white; + border-radius: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000000; + border-bottom: 4px solid white; +} + +.sellingPriceValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +@media screen and (max-width: 1024px) { + .productImageTag--imagem-descricao--main { + max-height: 1100px !important; + } +} + +.productImageTag--main { + max-height: 1000px !important; } \ 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..4e02656 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,45 @@ +/* +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;700&display=swap"); +/* Grid breakpoints */ +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #b9b9b9; + margin: auto; + width: 95%; +} +@media screen and (min-width: 1920px) { + .listContainer { + width: 75%; + } +} +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + } +} + +.contentItem { + display: flex; + padding: 62px 52px 0; +} +@media screen and (min-width: 1920px) { + .contentItem { + padding: 62px 360px; + } +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + padding: 16px 40px; + border-bottom: 1px solid #b9b9b9; + } +} \ 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..b053eac 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,4 +5,3 @@ .html--pdp-breadcrumb { 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..adb8793 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,28 @@ +.homeLink { + .homeIcon { + display: none; + } + + &::before { + content: "Home"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; + } +} + +.link--1, +.link--2, +.link--3 { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; +} 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..b71e93f --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,50 @@ +// .flexRowContent { +// @media screen and (max-width: 1024px) { +// display: flex; +// flex-direction: column; +// } +// } +.flexRowContent--product-main-stack { + padding: 0 30px; + margin-bottom: 0; + + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + + .stretchChildrenWidth { + width: 100% !important; + } + } +} +.flexRowContent--main-header-mobile { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: row; + } +} + +.flexCol { + position: relative; +} + +.flexRowContent--btn-product { + @media screen and (min-width: 768px) { + margin: 0 10px; + } +} +.flexRow--btn-product { + width: 100%; + + :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + font-family: "Open Sans"; + padding: 12px; + + &:hover { + background-color: rgb(36, 36, 36); + } + } +} 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..66ee5a3 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,20 @@ +.product-identifier--productReference { + display: flex; + justify-content: right; + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; + + @media screen and (max-width: 1024px) { + justify-content: left; + } +} + +.product-identifier__label, +.product-identifier__separator { + display: none; +} 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..acb8bea --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,123 @@ +.listPrice { + visibility: hidden; +} + +.listPrice--summary { + visibility: visible; + display: block; +} + +.savings { + display: none; +} + +.sellingPrice { + font-family: $font-family; + color: $color-black; + font-size: 1.25rem; + margin-bottom: -12px; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #929292; + margin-bottom: 8px; + font-size: 0px; +} + +.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: 0.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; +} + +.installmentsNumber { + font-family: $font-family; + + font-weight: bold; + font-size: 16px; + + margin-right: 6px; + + &::after { + content: "x"; + font-size: 16px; + margin-left: 4px; + } +} + +.installmentValue { + font-family: $font-family; + font-size: 16px; + font-weight: bold; + margin-right: 6px; + + &::before { + content: "de"; + font-size: 16px; + font-weight: normal; + margin-right: 6px; + } +} + +.interestRate { + &::after { + font-family: $font-family; + + content: "sem juros"; + font-size: 16px; + font-weight: normal; + } +} 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..f423a93 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,28 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper { + :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; + } + + :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } + + :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } +} 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..8b2a726 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,3 @@ +.buyButton { + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..25ee81f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,10 @@ +.paragraph--shelfTitleText { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + + margin-bottom: 32px; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..4c5aaf8 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,16 @@ +.title { + font-size: 0px; + + &::after { + content: "Você também pode gostar:"; + 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..6be0ff4 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,20 @@ +.sliderLayoutContainer--carousel { + background-color: white; + + @media screen and (min-width: 1025px) { + padding: 0 40px; + } +} + +.paginationDotsContainer { + color: black; +} + +.paginationDot { + background-color: black; +} + +.paginationDot--isActive { + background-color: white; + border: 1px solid black; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..2519843 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,439 @@ -.newsletter{ - background: red; -} \ No newline at end of file +/*Product name*/ +.productNameContainer--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: $color-gray6; + + @media screen and (max-width: 1024px) { + text-align: left; + } +} + +/* carouselThumbs*/ +.carouselGaleryThumbs { + height: 140px; + margin-top: 16px; + + .productImagesThumb { + margin: 0px 10px; + } + + .thumbImg { + border-radius: 8px; + } +} + +/*SKU*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .frameAround { + border-radius: 50%; + border-color: $color-black; + z-index: 2; + margin: 2px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .skuSelectorItemTextValue { + padding: 0; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $color-gray10; + } + + .diagonalCross { + background-image: linear-gradient( + to top left, + transparent 44%, + rgb(0, 0, 0) 48%, + currentColor 48%, + currentColor 52%, + transparent 52% + ); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; + } +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTROS TAMANHOS:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray8; + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTRAS CORES:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray8; + } + } +} + +/*not-Avaliable*/ +.subscriberContainer { + margin-top: 30px; + height: 180px; + position: relative; + .title { + font-size: 0px; + + &::after { + content: "Produto indisponível"; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray11; + } + } + + .subscribeLabel { + font-size: 0px; + + &::after { + content: "Deseja saber quando estiver disponível?"; + + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray11; + } + } + + .inputName, + .inputEmail { + :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + } + } + + .submit { + width: 100%; + position: absolute; + bottom: 0; + + :global(.vtex-button) { + background-color: $color-black; + color: $color-white; + font-size: 0px; + width: 100%; + height: 100%; + padding: 12px; + + &::after { + content: "Avise-me"; + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + } + } + } +} + +/*Shipping*/ +.shippingContainer { + display: flex; + position: relative; + :global(.vtex-button) { + background-color: $color-black; + width: 50px; + height: 44px; + color: $color-white; + margin-top: 25px; + margin-left: -4px; + } + + :global(.vtex-input__label) { + font-size: 0px; + + &::after { + content: "calcular frete:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray8; + text-transform: uppercase; + } + } + + :global(.vtex-button__label) { + font-size: 0px; + } + + :global(.vtex-button__label)::after { + content: "OK"; + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + } + + :global(.vtex-input-prefix__group) { + border-radius: 0; + } + + :global(.vtex-address-form__postalCode) { + width: 280px; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + color: $color-black; + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + @media screen and (min-width: 768px) { + position: absolute; + left: 348px; + top: 25px; + } + + @media screen and (max-width: 1024px) and (min-width: 768px) { + right: -60px; + } + } +} + +.shippingTable { + border: none; + + .shippingTableHead { + display: contents; + + .shippingTableRow { + text-align: left; + text-transform: uppercase; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + } + } + } + + .shippingTableCell { + padding: 7px 0; + font-family: $font-family; + color: $color-gray12; + } + + .shippingTableRadioBtn { + display: none; + } +} + +/* Image and Text Description */ +.content--imagem-descricao { + margin-right: 16px; + width: 50%; + + @media screen and (max-width: 1024px) { + width: 100%; + } +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; + + .productDescriptionTitle { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 32px; + + color: $color-gray6; + + @media screen and (min-width: 1920px) { + font-size: 32px; + line-height: 32px; + } + } + + .productDescriptionText { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $color-gray8; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + } + + @media screen and (max-width: 1024px) { + margin-top: 16px; + width: 100%; + } +} + +/*newsletter*/ +.newsletter { + background: $color-black; + color: $color-white; + + margin-top: 50px; + border-bottom: 2px solid white; + + .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; + } + + .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .label { + display: flex; + flex-direction: column; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + color: $color-white; + } + + .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: $font-family; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: $color-gray8; + + margin: 16px; + } + + .inputGroup { + display: flex; + @media screen and (min-width: 768px) { + width: 774px; + } + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid gray; + border-radius: 0; + } + + :global(.vtex-styleguide-9-x-input) { + background-color: $color-black; + } + + .buttonContainer { + padding: 0; + + :global(.vtex-button) { + background-color: $color-black; + border: none; + border-bottom: 2px solid white; + border-radius: 0; + + &:hover { + background-color: $color-black; + border-bottom: 4px solid white; + } + } + } + } +} + +.sellingPriceValue { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.productImageTag--imagem-descricao--main { + @media screen and (max-width: 1024px) { + max-height: 1100px !important; + } +} + +.productImageTag--main { + max-height: 1000px !important; +} 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..4b90ea6 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,30 @@ +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #b9b9b9; + margin: auto; + width: 95%; + + @media screen and (min-width: 1920px) { + width: 75%; + } + @media screen and (max-width: 1024px) { + flex-direction: column; + border-top: 1px solid #b9b9b9; + } +} + +.contentItem { + display: flex; + padding: 62px 52px 0; + + @media screen and (min-width: 1920px) { + padding: 62px 360px; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + padding: 16px 40px; + border-bottom: 1px solid #b9b9b9; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..f83139d 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,8 @@ -$color-black: #292929; +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); + +$font-family: "Open Sans"; + +$color-black: #000000; $color-white: #fff; @@ -7,6 +11,14 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #575757; +$color-gray7: rgba(146, 146, 146, 0.48); +$color-gray8: #929292; +$color-gray9: #989898; +$color-gray10: rgba(185, 185, 185, 0.6); +$color-gray11: #868686; +$color-gray12: #afafaf; +$color-gray13: #b9b9b9; $color-blue: #4267b2; @@ -14,18 +26,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;