diff --git a/assets/left-arrow-vitor-soares.png b/assets/left-arrow-vitor-soares.png new file mode 100644 index 0000000..ef0f194 Binary files /dev/null and b/assets/left-arrow-vitor-soares.png differ diff --git a/assets/left-arrow-vitor-soares.svg b/assets/left-arrow-vitor-soares.svg new file mode 100644 index 0000000..217a30d --- /dev/null +++ b/assets/left-arrow-vitor-soares.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/pix-logo-vitor-soares.png b/assets/pix-logo-vitor-soares.png new file mode 100644 index 0000000..df6f851 Binary files /dev/null and b/assets/pix-logo-vitor-soares.png differ diff --git a/assets/right-arrow-vitor-soares.png b/assets/right-arrow-vitor-soares.png new file mode 100644 index 0000000..ad6850a Binary files /dev/null and b/assets/right-arrow-vitor-soares.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/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..b617656 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,2 @@ +import Pix from "./components/Pix-bloco/Pix"; +export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..5c84865 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ 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..6384192 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,58 @@ +[class*="html--buy-button"] { + display: flex; + gap: 10px; + margin-bottom: 5px; +} + +[class*="html--buy-button"] :global(.vtex-button) { + height: 49px; + background: black; + border: none; + border-radius: 0; + width: 100%; +} + +[class*="description-container"] { + display: flex; + gap: 32px; +} + +[class*="add-to-cart-button"] { + width: 100%; +} + +[class*="html--product-summary"] { + padding: 0 40px; +} + +@media only screen and (max-width: 1024px) { + [class*="html--buy-button"] :global(.vtex-button) { + width: 100%; + } + + [class*="description-container"] { + flex-direction: column; + gap: 0; + } +} + +@media only screen and (max-width: 768px) { + [class*="html--buy-button"] { + flex-direction: column; + margin-bottom: 16px; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 74px; + } + + [class*="html--shipping-simulator"] { + padding-bottom: 8px; + } +} + +@media only screen and (min-width: 1920px) { + [class*="html--product-summary"] { + padding: 0 360px; + } +} diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx new file mode 100644 index 0000000..6aff3ed --- /dev/null +++ b/react/components/Pix-bloco/Pix.tsx @@ -0,0 +1,40 @@ +import React, { useEffect } from "react"; + +import { useProduct } from "vtex.product-context"; +import styles from "./style.module.css"; + +const Pix = () => { + useEffect(() => { + setTimeout(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + + cepInput?.setAttribute("placeholder", "Digite seu CEP"); + + console.log(cepInput); + }, 1000); + }, []); + + const productContextValue = useProduct(); + + const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const discountValue = (Number(productPrice) * 10) / 100; + + const totalValue = Number(productPrice) - Number(discountValue); + + return ( +
+
+
+ desconto +
+
+

R${totalValue.toFixed(2).replace(".", ",")}

+

10 % de desconto

+
+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix-bloco/style.module.css b/react/components/Pix-bloco/style.module.css new file mode 100644 index 0000000..d36fdf4 --- /dev/null +++ b/react/components/Pix-bloco/style.module.css @@ -0,0 +1,26 @@ +.container-flex { + display: flex; + flex-direction: row; + align-items: center; + gap: 26px; + margin-top: 8px; + margin-bottom: 16px; +} + +.value { + font-weight: 700; + font-size: 18px; + line-height: 25px; + margin: 0; + + color: rgba(0, 0, 0, 0.58); +} + +.text { + font-weight: 300; + font-size: 13px; + line-height: 18px; + margin: 0; + + color: #929292; +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..ce6a4ec 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,10 +2,21 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "blockClass": "button-buy-product" } }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "add-to-cart-button" + }, + "children": [ + "add-to-cart-button" + ] + }, + "minicart.v2": { "props": { "customPixelEventId": "add-to-cart-button" diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..65fd3f5 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,17 @@ "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", + // "html#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "list-context.product-list#carousel-list", + "product-questions-and-answers", + "newsletter" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -26,12 +30,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -45,6 +44,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "container-main-content", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -60,12 +60,13 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#images", "product-bookmark", "product-specification-badges" ] }, + "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -78,70 +79,340 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "60%", "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", + "html#product-name", + "html#identifier", "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", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#selling-price", + "html#selling-price", + "html#product-installments", + "html#pix", + // "product-separator", + "html#sku-selector", + "html#buy-button", + // "flex-layout.row#buy-button", + // "product-gifts", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, - "flex-layout.row#product-name": { + "html#buy-button": { "props": { - "marginBottom": 3 + "blockClass": "buy-button" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + + "html#identifier": { + "props": { + "blockClass": "product-name", + "testId": "product-code" + }, + "children": [ + "product-identifier.product" + ] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": [ + "product-selling-price" + ] + }, + + "html#pix": { + "props": { + "testId": "pix-price" + }, + "children": [ + "Pix" + ] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": [ + "shipping-simulator" + ] + }, + + // DESCRIÇÃO DE PRODUTOS + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": [ + "tab-layout#product" + ] + }, + + "tab-layout#product": { + "props": { + "blockClass": "structure", + "defaultActiveTabId": "product1" + }, + "children": ["tab-list#product", "tab-content#product"] + }, + + "tab-list#product": { + "props": { + "blockClass": "tab" + }, + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] + }, + + "tab-list.item#product1": { + "props": { + "blockClass": "tab-render", + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#product2": { + "props": { + "blockClass": "tab-render", + "tabId": "product2", + "label": "Descrição" + } + }, + "tab-list.item#product3": { + "props": { + "blockClass": "tab-render", + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "blockClass": "tab-render", + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "blockClass": "tab-render", + "tabId": "product5", + "label": "Descrição" + } + }, + + "tab-content#product": { + "props": { + "blockClass": "content" + }, + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] + }, + + "tab-content.item#product1": { + "props": { + "tabId": "product1", + "blockClass": "content-render" + }, + "children": ["html#description"] + }, + + "tab-content.item#product2": { + "props": { + "tabId": "product2", + "blockClass": "content-render" + }, + "children": ["html#description"] + }, + + "tab-content.item#product3": { + "props": { + "tabId": "product3", + "blockClass": "content-render" + }, + "children": ["html#description"] + }, + + "tab-content.item#product4": { + "props": { + "tabId": "product4", + "blockClass": "content-render" + }, + "children": ["html#description"] + }, + + "tab-content.item#product5": { + "props": { + "tabId": "product5", + "blockClass": "content-render" + }, + "children": ["html#description"] + }, + + // "html#imageDescriptionContainer": { + // "props": { + // "blockClass": "image-description" + // }, + // "children": ["product-images#imageDescription"] + // }, + + "product-images#imageDescription": { + "props": { + "displayMode": "first-image", + "blockClass": "img-description", + "zoomMode": "disabled" + } + }, + + "html#description": { + "props": { + "blockClass": "description-container" + }, + "children": ["product-images#imageDescription", "product-description"] + }, + + + // "flex-layout.row#quantity-buy-button": { + // "props": { + // "blockClass": "quantity-buy-button" + // }, + // "children": [ + // "html#product-quantity", + // "flex-layout.row#buy-button" + // ] + // }, + + // CARROSSEL DE PRODUTOS + "list-context.product-list#carousel-list": { + "blocks": ["product-summary.shelf#carousel-shelf"], + "children": ["html#slider"] + }, + + "product-summary.shelf#carousel-shelf": { + "children": [ + "html#shelf" + ] + }, + + "html#shelf": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-list-price", + "product-selling-price" + ] + }, + + "product-list-price": { + "props": { + "message": "de {listPriceValue} por" + } + }, + + "html#slider": { + "props": { + "testId": "product-summary-list", + "blockClass": "product-summary" + }, + "children": [ + "slider-layout#carousel" + ] + }, + + "slider-layout#carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + }, + + + "html#product-name": { + "props": { + "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, - "sku-selector": { + "html#sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true - } + "showValueNameForImageVariation": true, + "blockClass": "sku-size", + "testId": "sku-selector" + }, + "children": [ + "sku-selector" + ] }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "width": "73%", + "blockClass": "buy-button-row" }, - "children": ["add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, "flex-layout.row#product-availability": { "props": { + "blockClass": "container-main-content", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -159,10 +430,10 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#identifier", + "flex-layout.row#availability", + "html#sku-selector" ] }, "flex-layout.row#availability": { @@ -181,5 +452,40 @@ "Pinterest": true } } + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": [ + "product-quantity" + ] + }, + + "product-quantity": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } + }, + + "html#product-installments": { + "props": { + "installmentsCriteria": "max-quality-without-interest", + "blockClass": "fees", + "testId": "product-installments" + }, + "children": [ + "product-installments" + ] + }, + + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..849cdc8 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "Pix": { + "component": "Pix" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..ee3264d 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, 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..9dd0fcc 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,14 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; } \ No newline at end of file diff --git a/styles/css/global.css b/styles/css/global.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/global.css @@ -0,0 +1,9 @@ +/* +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 */ +/* 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..2f88b42 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,23 @@ +@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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.buttonText { + font-size: 0; +} +.buttonText::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; +} \ 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..697e686 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,58 @@ +/* +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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.container { + padding: 0 40px 16px; +} +@media only screen and (min-width: 1920px) { + .container { + padding: 0 360px 16px; + } +} + +.homeIcon, +.homeLink { + display: none; +} + +.arrow--1 { + padding-left: 0; +} +.arrow--1 .caretIcon { + display: none; +} + +.link--1 { + font-size: 0px; + padding-left: 0; +} +.link--1::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.term { + 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..9898f0c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,68 @@ -.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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.flexRowContent--buy-button-row :global(.vtex-button) { + background: #000000; + border: none; + border-radius: 0; + width: 100%; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.stretchChildrenWidth { + padding: 0 !important; + margin: 0; + width: 100% !important; + max-width: unset !important; +} +@media only screen and (max-width: 1025px) { + .stretchChildrenWidth { + max-width: unset !important; + width: 100% !important; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +.flexRowContent--buy-button-row { + height: 49px; +} + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; +} +@media only screen and (min-width: 1920px) { + :global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 360px; } } -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; } -.flexRowContent--main-header { - background-color: #f0f0f0; +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; +} +@media only screen and (max-width: 1025px) { + :global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 0; + } } -.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; +:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + gap: 32px; } +@media only screen and (max-width: 1025px) { + :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + flex-direction: column; + gap: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper-container.css b/styles/css/vtex.numeric-stepper-container.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper-container.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 */ +/* Grid breakpoints */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper.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 */ +/* Grid breakpoints */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..0957d76 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,32 @@ -.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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.product-identifier__label { + display: none; } +.product-identifier__separator { + display: none; +} +.product-identifier__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; +} +@media only screen and (max-width: 1025px) { + .product-identifier__value { + justify-content: unset; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..4129fa2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,74 @@ -.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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; + font-size: 0px; +} +.installments .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments .installmentsNumber--36::after { + content: " x de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments .installmentValue::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } -.savings { - font-weight: 500; - color: #79B03A; +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + color: #bababa; +} +@media only screen and (max-width: 1025px) { + .listPrice { + font-size: 12px; + line-height: 16px; + } } -.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; +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 24px; + line-height: 33px; + color: #000000; } +@media only screen and (max-width: 1025px) { + :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 18px; + line-height: 25px; + } +} \ 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..06b8643 --- /dev/null +++ b/styles/css/vtex.product-quantity.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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +@media only screen and (max-width: 767px) { + .quantitySelectorContainer { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..79622dd 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,99 @@ -.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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.imageNormal { + width: 105%; + height: 314px; + max-height: unset; + max-width: 314px; + object-fit: contain; +} +@media only screen and (max-width: 1025px) { + .imageNormal { + height: 291.2px; + max-width: 291.2px; + } +} +@media only screen and (max-width: 767px) { + .imageNormal { + height: 124.8px; + width: 100%; + } } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; } - -.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; +@media only screen and (max-width: 1025px) { + .brandName { + font-size: 14px; + line-height: 19px; } } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 16px 0 8px 0; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; +.priceContainer { + padding: 0; +} +.priceContainer .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +@media only screen and (max-width: 1025px) { + .priceContainer .listPriceContainer { + font-size: 12px; + line-height: 16px; + } +} +.priceContainer .listPriceContainer::after { + content: "por"; +} +.priceContainer .listPriceContainer .listPrice { + padding: 0 4px 0 0; +} +.priceContainer .sellingPriceLabel { + display: none; +} +.priceContainer .installmentContainer { + display: none; +} +.priceContainer .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media only screen and (max-width: 1025px) { + .priceContainer .price_sellingPrice { + font-size: 18px; + line-height: 25px; + } +} +.priceContainer .sellingPriceContainer { + padding: 0 0 32px 0; } -.container { - text-align: start; +.element { + padding: 0; } -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..bbd296e 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6e813b8 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,80 @@ +/* +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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ .sliderLayoutContainer { - justify-content: center; + margin-bottom: 64px; + padding: 0 16px; +} +@media only screen and (max-width: 1025px) { + .sliderLayoutContainer { + padding: 0 12px; + } +} +@media only screen and (max-width: 767px) { + .sliderLayoutContainer { + padding: 0 8px; + margin-bottom: 32px; + } +} +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { + gap: 16px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: #EDEDED; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; + gap: 12px; +} +.paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000000; + margin: 0; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: #fff !important; + border: 0.5px solid #000000; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderRightArrow { + visibility: hidden; + padding: 0; + margin: 0; } +.sliderRightArrow::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); +} + +.sliderLeftArrow { + visibility: hidden; + padding: 0; + margin: 0; +} +.sliderLeftArrow::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); +} +@media only screen and (max-width: 1025px) { + .sliderLeftArrow::before { + display: block; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..2ad95ba 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,710 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ +.container { + padding: 0; + max-width: 100% !important; + width: 100%; +} +@media only screen and (min-width: 1920px) { + .container { + margin: 0 !important; + } +} + +.discountInsideContainer { + display: none; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; + border-color: #cccccc; + width: 32px; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: #fff; + border-color: #cccccc; +} +:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +:global(.vtex-numeric-stepper__plus-button) { + background: #fff; + border-color: #cccccc; +} +:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +.thumbImg { + border-radius: 8px; +} + +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + margin-bottom: 8px; + color: #575757; +} +@media only screen and (max-width: 1025px) { + .productNameContainer { + text-align: unset; + } +} + +.productImage .productImageTag { + width: 100% !important; + height: 100%; + max-height: unset !important; + object-fit: contain; + max-width: 100% !important; +} +@media only screen and (max-width: 1025px) { + .productImage .productImageTag { + max-height: 100% !important; + max-width: 100% !important; + } +} + +.productImagesGallerySlide { + max-width: 100% !important; + width: 100% !important; +} +@media only screen and (max-width: 1025px) { + .productImagesGallerySlide { + max-width: none !important; + width: none !important; + } +} + +.carouselGaleryThumbs { + display: block; + margin-top: 16px; + margin-bottom: 16px; +} +@media only screen and (max-width: 1025px) { + .carouselGaleryThumbs { + margin-bottom: 32px; + } +} + +.productImagesThumb { + height: 90px !important; + width: unset !important; + margin-bottom: 0 !important; + margin-right: 16px; +} +.productImagesThumb .thumbImg { + max-width: 90px; + width: 100%; + height: 90px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin-bottom: 16px; + order: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { + left: 8px; + top: 5px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemImageValue { + max-width: 100%; +} +.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; +} +.skuSelectorContainer .skuSelectorItem--selected .diagonalCross { + color: #000000; +} +.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross { + left: 4px; + top: 5px; + right: 3px; + bottom: 3px; + transform: rotateY(180deg); +} +.skuSelectorContainer .skuSelectorItem--sku-size { + margin: 0 16px 0 0; +} + +.subscriberContainer { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.submit :global(.vtex-button) { + background: #000000; + height: 40px; + margin-top: -1px; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size { + color: #000000; +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} + +.productImageTag { + max-width: 100%; +} +@media only screen and (max-width: 1025px) { + .productImageTag { + max-width: 100%; + max-height: max-content; + } +} + +.address-form__field .input__label { + font-size: 40px; +} + +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; +} +:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; +} + +:global(.vtex-store-components-3-x-skuSelectorSubcontainer) .diagonalCross { + top: 7px; + right: 2px; + left: 1px; + bottom: 6px; +} + +.shippingContainer { + position: relative; + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; + } +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + margin-top: 0; + left: auto; + right: 0; + bottom: 0; + } +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + color: #000000; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + font-size: 0; + border: 0; + border-radius: 0; + background: #000000; + cursor: pointer; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-button) { + min-width: 49px; + right: 0; + } +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} +.shippingContainer :global(.vtex-button__label) { + height: fit-content; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; +} +@media only screen and (max-width: 767px) { + :global(.vtex-address-form__field--small) { + flex-direction: column; + width: 100%; + padding-bottom: 24px; + } +} + +.shippingTable { + display: flex; + flex-direction: column; + border: none; + margin-top: 0; + padding: 0; +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableRow { + display: flex; + flex-direction: row; +} +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow { + padding-top: 8px; + } +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +@media only screen and (min-width: 1920px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + padding-right: 122px; + } +} +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + width: auto; + margin-right: 48px; + } +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + order: 3; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { + width: auto; + margin-right: 32px; + } +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { + display: flex; + order: 2; + font-size: 0; +} +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { + width: auto; + margin-right: 40px; + } +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableCellDeliveryName { + width: 23.9263%; + padding: 0 0 15px 0; + text-align: initial; +} +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableCellDeliveryEstimate { + width: 41.7177%; + padding: 0 0 15px 0; + text-align: initial; +} +.shippingTable .shippingTableCellDeliveryPrice, +.shippingTable .shippingTableHeadDeliveryPrice { + width: 14.7239%; + padding: 0 0 15px 0; + text-align: initial; +} + +.shippingTableBody .shippingtableRow { + display: flex; + flex-direction: row; + text-align: left; +} +.shippingTableBody .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; +} +.shippingTableBody .shippingTableCellDeliveryName, +.shippingTableBody .currencyContainer, +.shippingTableBody .shippingTableCellDeliveryEstimate { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.shippingTableBody .shippingTableRadioBtn { + display: none; +} +@media only screen and (max-width: 399px) { + .shippingTableBody .shippingTableCellDeliveryName { + width: 97px; + margin-right: 21px; + } +} +@media only screen and (max-width: 399px) { + .shippingTableBody .shippingTableCellDeliveryPrice { + width: 55px; + margin-right: 32px; + } +} + +.subscriberContainer .title { + font-size: 0; + line-height: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .title .subscribeLabel { + font-size: 0; +} +.subscriberContainer .title .subscribeLabel::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form { + margin-bottom: 16px; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: " nome email" " submit submit"; + justify-content: inherit; + gap: 8px; + margin-top: 15px; +} +@media only screen and (max-width: 1025px) { + .subscriberContainer .form .content { + max-width: unset; + } +} +.subscriberContainer .form .content .inputName { + grid-area: nome; + margin-bottom: 0; +} +.subscriberContainer .form .content .inputEmail { + grid-area: email; + margin-bottom: 0; +} +.subscriberContainer .form .content .submit { + grid-area: submit; + width: 100%; + margin-top: 7px; + margin-bottom: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; +} + +.productDescriptionContainer { + width: 100%; +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer { + padding-left: 0; + } +} +.productDescriptionContainer .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + color: #575757; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + margin-bottom: 16px; + } +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + padding-top: 16px; + } +} +.productDescriptionContainer .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer .productDescriptionText { + font-size: 14px; + line-height: 19px; + border-bottom: 1px solid #bfbfbf; + padding-bottom: 16px; + } +} + .newsletter { - background: red; + display: flex; + align-items: flex-end; + justify-content: center; + height: 175px; + background: #000000; + color: #fff; +} +@media only screen and (max-width: 767px) { + .newsletter { + height: 220px; + } +} +.newsletter .container { + display: flex; + justify-content: center; + max-width: unset; + width: 100%; +} +.newsletter .container .form { + max-width: 774px; + width: 100%; + padding-bottom: 16px; + margin: 0; +} +@media only screen and (max-width: 1025px) { + .newsletter .container .form { + max-width: 1024px; + } +} +@media only screen and (max-width: 767px) { + .newsletter .container .form { + padding-bottom: 32px; + } +} +.newsletter .container .form .label { + display: flex; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media only screen and (max-width: 767px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +@media only screen and (max-width: 1025px) { + .newsletter :global(.vtex-store-components-3-x-inputGroup) { + padding: 16px 16px 0; + } +} +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-store-components-3-x-inputGroup) { + display: flex; + padding: 0; + } +} +.newsletter .buttonContainer { + padding: 0; +} +.newsletter :global(.vtex-button) { + border: none; + border-bottom: 3px solid #bfbfbf; + border-radius: 0; + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-button) { + font-size: 14px; + line-height: 19px; + } +} +.newsletter :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #cccccc; +} +.newsletter :global(.vtex-styleguide-9-x-input) { + padding: 0; + background-color: transparent; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } } \ 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..1b96dcc --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,169 @@ +@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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.container--structure { + padding: 0 40px; +} +@media only screen and (min-width: 1920px) { + .container--structure { + padding: 0 360px; + } +} +.container--structure::after { + content: "Você também pode gostar:"; + display: block; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + padding: 16px 0 32px 0; + color: #575757; +} +@media only screen and (max-width: 767px) { + .container--structure::after { + font-size: 20px; + } +} +.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { + width: 100% !important; + max-height: 100% !important; + max-width: 100% !important; +} +@media only screen and (max-width: 1025px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { + max-width: unset !important; + max-height: 944px !important; + } +} +@media only screen and (max-width: 767px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { + max-width: unset !important; + max-height: unset !important; + } +} + +.contentContainer { + padding: 0 32px; +} +@media only screen and (max-width: 1025px) { + .contentContainer { + padding: 16px 0 0 0; + } +} + +.listContainer { + border-bottom: 1px solid #b9b9b9; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} +@media only screen and (min-width: 1920px) { + .listContainer { + height: 49px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer { + border-top: 1px solid #b9b9b9; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} +.listContainer .listItem :global(.vtex-button) { + border: none; +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem :global(.vtex-button) { + width: 100%; + } +} +.listContainer .listItem :global(.vtex-button):hover { + background-color: transparent; +} +.listContainer .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: #bfbfbf; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; +} +@media only screen and (min-width: 1920px) { + .listContainer .listItem :global(.vtex-button__label) { + font-size: 24px; + line-height: 26px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem :global(.vtex-button__label) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 38px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} +.listContainer .listItemActive :global(.vtex-button) { + background-color: #fff; + width: 114px; + border: none; + padding: 0; +} +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive :global(.vtex-button) { + width: 100%; + } +} +.listContainer .listItemActive :global(.vtex-button__label) { + color: #000000; + background-color: #fff; + border-bottom: 2px solid #000000; + padding: 0; +} +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive :global(.vtex-button__label) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + border-bottom: none; + } +} + +@media only screen and (max-width: 1025px) { + :global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) { + flex-direction: column; + } +} \ 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..7eb71d6 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; } - diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..e5924ac --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText { + font-size: 0; + + &::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $white; + } +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..b5caa69 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,49 @@ +.container { + padding: 0 40px 16px ; + + @include mq(xl, min) { + padding: 0 360px 16px; + } +} + +.homeIcon, +.homeLink { + display: none; +} + +.arrow--1 { + padding-left: 0; + .caretIcon { + display: none; + } +} + +.link--1 { + font-size: 0px; + padding-left: 0; + + &::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} + +.term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} 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..61d7ea8 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,52 @@ +.flexRowContent--buy-button-row :global(.vtex-button) { + background: $black; + border: none; + border-radius: 0; + width: 100%; +} + +.stretchChildrenWidth { + padding: 0 !important; + margin: 0; + width: 100% !important; + max-width: unset !important; + + @include mq(md, max) { + max-width: unset !important; + width: 100% !important; + } +} + +.flexRowContent--buy-button-row { + height: 49px; +} + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; + + @include mq(xl, min) { + padding: 0 360px; + } +} + +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; +} + +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; + + @include mq(md, max) { + padding-right: 0; + } +} + +:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + gap: 32px; + + @include mq(md, max) { + flex-direction: column; + gap: 0; + } +} 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..50fd3da --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,24 @@ +.product-identifier { + + &__label { + display: none; + } + + &__separator { + display: none; + } + + &__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; + + @include mq(md, max) { + justify-content: unset; + } + } +} 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..974cf26 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,74 @@ +.sellingPriceValue { + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: $black; +} + +.installments { + font-size: 0px; + + .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " x de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } + + .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } +} + +// CARROSSEL +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + + color: $gray-700; + + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } +} + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) { + .sellingPriceValue { + font-size: 24px; + line-height: 33px; + + color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } + } +} 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..d243d3f --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,5 @@ +.quantitySelectorContainer { + @include mq(sm, max) { + margin-bottom: 0; + } +} 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..444f2c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,97 @@ +// .imageContainer { +// width: 314px; +// height: 314px; +// } + +.imageNormal { + width: 105%; + height: 314px; + max-height: unset; + max-width: 314px; + object-fit: contain; + + @include mq(md, max) { + height: 291.2px; + max-width: 291.2px; + } + + @include mq(sm, max) { + height: 124.8px; + width: 100%; + } +} + +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $black; + + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + } +} + +.nameContainer { + padding: 16px 0 8px 0; +} + +.priceContainer { + padding: 0; + + .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-700; + + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } + + &::after { + content: "por"; + } + + .listPrice { + padding: 0 4px 0 0; + } + } + + .sellingPriceLabel { + display: none; + } + + .installmentContainer { + display: none; + } + + .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + + color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } + } + + .sellingPriceContainer { + padding: 0 0 32px 0; + } +} + +.element { + padding: 0; +} + +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; +} 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..9cd6442 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,79 @@ +.sliderLayoutContainer { + margin-bottom: 64px; + padding: 0 16px; + + @include mq(md, max) { + padding: 0 12px; + } + + @include mq(sm, max) { + padding: 0 8px; + margin-bottom: 32px; + } + + :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { + gap: 16px; + } +} + +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: $gray-600; +} + +.paginationDotsContainer { + align-items: center; + gap: 12px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: $black; + margin: 0; + } +} + +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: $white !important; + border: 0.5px solid $black; +} + +.sliderRightArrow { + visibility: hidden; + padding: 0; + margin: 0; + + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); + + + // @include mq(sm, max) { + // padding: 0 48px 0 0; + // } + } +} + +.sliderLeftArrow { + visibility: hidden; + padding: 0; + margin: 0; + + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); + + + @include mq(md, max) { + display: block; + } + + // @include mq(sm, max) { + // padding: 0 0 0 48px; + // } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..e0cc20d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,840 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + padding: 0; + max-width: 100% !important; + width: 100%; + + @include mq(xl, min) { + margin: 0 !important; + } +} + +.discountInsideContainer { + display: none; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; + border-color: $gray-200; + width: 32px; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: $white; + border-color: $gray-200; + + :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +:global(.vtex-numeric-stepper__plus-button) { + background: $white; + border-color: $gray-200; + + :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +.thumbImg { + border-radius: 8px; +} + +// TITULO E IMAGENS +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + margin-bottom: 8px; + + color: $gray-100; + + @include mq(md, max) { + text-align: unset; + } +} + +.productImage { + .productImageTag { + width: 100% !important; + height: 100%; + max-height: unset !important; + object-fit: contain; + max-width: 100% !important; + + @include mq(md, max) { + max-height: 100% !important; + max-width: 100% !important; + } + } +} + +.productImagesGallerySlide { + max-width: 100% !important; + width: 100% !important; + + @include mq(md, max) { + max-width: none !important; + width: none !important; + } +} + +.carouselGaleryThumbs { + display: block; + margin-top: 16px; + margin-bottom: 16px; + + @include mq(md, max) { + margin-bottom: 32px; + } +} + +.productImagesThumb { + height: 90px !important; + width: unset !important; + margin-bottom: 0 !important; + margin-right: 16px; + + .thumbImg { + max-width: 90px; + width: 100%; + height: 90px; + } +} + +// sku Tamanho e Cor +.skuSelectorContainer { + display: flex; + flex-direction: column; + + .skuSelectorSubcontainer--cor { + margin-bottom: 16px; + order: 2; + + .frameAround, + .skuSelectorImageValue, + .skuSelectorInternalBox { + border-radius: 50%; + } + + .frameAround { + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorSelectorImageValue { + display: none; + } + } + } + + .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + + font-size: 14px; + line-height: 19px; + } + + .frameAround, + .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; + } + + .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorImageValue { + display: none; + } + } + + .diagonalCross { + left: 8px; + top: 5px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); + } + + .skuSelectorItemImageValue { + max-width: 100%; + } + } + + .skuSelectorItem--selected { + .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $black; + } + + .diagonalCross { + color: $black; + } + } + + .skuSelectorItemImage--sku-size { + .diagonalCross { + left: 4px; + top: 5px; + right: 3px; + bottom: 3px; + transform: rotateY(180deg); + } + } + .skuSelectorItem--sku-size { + margin: 0 16px 0 0; + } +} + +.subscriberContainer { + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; +} + +.submit { + :global(.vtex-button) { + background: $black; + height: 40px; + margin-top: -1px; + + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $white; + } +} + +.skuSelectorItem--sku-size-selected { + .skuSelectorItemTextValue-sku-size { + color: $black; + } +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} + +.productImageTag { + max-width: 100%; + + @include mq(md, max) { + max-width: 100%; + max-height: max-content; + } +} + +.address-form__field { + .input__label { + font-size: 40px; + } +} + +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; + + :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; + } +} + +:global(.vtex-store-components-3-x-skuSelectorSubcontainer) { + .diagonalCross { + top: 7px; + right: 2px; + left: 1px; + bottom: 6px; + } +} + +// :global(.vtex-store-components-3-x-skuSelectorItemImage) { +// .diagonalCross { +// top: 8px; +// right: 3px; +// left: 3px; +// bottom: 7px; +// } +// } + +// CEP +.shippingContainer { + position: relative; + display: flex; + + :global(.vtex-address-form__postalCode) { + display: flex; + } + + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + + @include mq(sm, max) { + width: 100%; + } + + :global(.vtex-input__suffix) { + @include mq(sm, max) { + display: none; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + + font-weight: 400; + font-size: 12px; + line-height: 16px; + + display: flex; + align-items: center; + + @include mq(sm, max) { + position: absolute; + margin-top: 0; + left: auto; + right: 0; + bottom: 0; + } + + :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + + color: $black; + } + } + + :global(.vtex__icon-external-link) { + display: none; + } + + :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + + font-size: 0; + border: 0; + border-radius: 0; + background: $black; + cursor: pointer; + + @include mq(sm, max) { + min-width: 49px; + right: 0; + } + + &::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: $white; + } + } + + :global(.vtex-button__label) { + height: fit-content; + } + + :global(.vtex-input__label) { + font-size: 0px; + + &::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } + } +} + +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; + + @include mq(sm, max) { + flex-direction: column; + width: 100%; + padding-bottom: 24px; + } +} + +// ENTREGA + +.shippingTable { + display: flex; + flex-direction: column; + border: none; + margin-top: 0; + padding: 0; + + .shippingTableHead { + display: block; + } + + .shippingTableRow { + display: flex; + flex-direction: row; + + @include mq(xs, max) { + padding-top: 8px; + } + + .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: $black-100; + + @include mq(xl, min) { + padding-right: 122px; + } + + @include mq(xs, max) { + width: auto; + margin-right: 48px; + } + } + + .shippingTableHeadDeliveryEstimate { + display: flex; + order: 3; + + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: $black-100; + + @include mq(xs, max) { + width: auto; + margin-right: 32px; + } + } + + .shippingTableHeadDeliveryPrice { + display: flex; + order: 2; + + font-size: 0; + + @include mq(xs, max) { + width: auto; + margin-right: 40px; + } + + &::after { + content: "FRETE"; + + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $black-100; + } + } + } + + .shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { + width: 23.9263%; + padding: 0 0 15px 0; + text-align: initial; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + width: 41.7177%; + padding: 0 0 15px 0; + text-align: initial; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + width: 14.7239%; + padding: 0 0 15px 0; + text-align: initial; +} +} + +.shippingTableBody { + .shippingtableRow { + display: flex; + flex-direction: row; + text-align: left; + } + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; + } + + .shippingTableCellDeliveryName, + .currencyContainer, + .shippingTableCellDeliveryEstimate { + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: $gray-900; + } + + .shippingTableRadioBtn { + display: none; + } + + .shippingTableCellDeliveryName { + @include mq(xs, max) { + width: 97px; + margin-right: 21px; + } + } + + .shippingTableCellDeliveryPrice { + @include mq(xs, max) { + width: 55px; + margin-right: 32px; + } + } +} + +// PRODUTO INDISPONÍVEL +.subscriberContainer { + + .title { + font-size: 0; + line-height: 0; + margin: 0; + + &::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + } + } + + .form { + margin-bottom: 16px; + + .content { + display: grid; + grid-template-areas: " nome email" + " submit submit"; + justify-content: inherit; + gap: 8px; + margin-top: 15px; + + @include mq(md, max) { + max-width: unset; + } + + .inputName { + grid-area: nome; + margin-bottom: 0; + } + + .inputEmail { + grid-area: email; + margin-bottom: 0; + } + + .submit { + grid-area: submit; + width: 100%; + margin-top: 7px; + margin-bottom: 0; + + :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + + color: $white; + } + } + } + } + } +} + +// DESCRIÇÃO +.productDescriptionContainer { + width: 100%; + + @include mq(md, max) { + padding-left: 0; + } + + .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + + color: $gray-100; + + @include mq(xl, min) { + font-size: 32px; + margin-bottom: 16px; + } + + @include mq(md, max) { + font-size: 20px; + padding-top: 16px; + } + } + + .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } + + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + border-bottom: 1px solid $gray-400; + padding-bottom: 16px; + } + } + + + // :global(.vtex-store-components-3-x-productDescriptionContainer) { + // width: 100% !important; + // padding-left: 32px; + // } +} + +// :global(.vtex-store-components-3-x-productImagesContainer--first-image) { +// max-width: 632px; +// width: 100%; +// height: 632px; + +// @include mq(md, max) { +// max-width: unset; +// height: 944px; +// } + +// @include mq(sm, max) { +// height: unset; +// } +// } + +// NEWSLETTER +.newsletter { + display: flex; + align-items: flex-end; + justify-content: center; + height: 175px; + + background: $black; + color: $white; + + @include mq(sm, max) { + height: 220px; + } + + .container { + display: flex; + justify-content: center; + max-width: unset; + width: 100%; + // padding-top: 32px; + // margin: 0; + + .form { + max-width: 774px; + width: 100%; + padding-bottom: 16px; + margin: 0; + + @include mq(md, max) { + max-width: 1024px; + } + + @include mq(sm, max) { + padding-bottom: 32px; + } + + .label { + display: flex; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + color: $white; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $gray; + + @include mq(sm, max) { + font-size: 16px; + line-height: 22px; + } + } + } + } + } + + :global(.vtex-store-components-3-x-inputGroup) { + @include mq(md, max) { + padding: 16px 16px 0; + } + + @include mq(sm, max) { + display: flex; + padding: 0; + } + } + + .buttonContainer { + padding: 0; + } + + :global(.vtex-button ) { + border: none; + border-bottom: 3px solid $gray-400; + border-radius: 0; + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: $white; + + @include mq(sm, max) { + font-size: 14px; + line-height: 19px; + } + } + + :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $gray-800; + } + + :global(.vtex-styleguide-9-x-input) { + padding: 0; + background-color: transparent; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $gray; + + @include mq(sm, max) { + font-size: 12px; + line-height: 16px; + } + } +} 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..634e43b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,156 @@ +.container--structure { + padding: 0 40px; + + @include mq(xl, min) { + padding: 0 360px; + } + + &::after { + content: "Você também pode gostar:"; + display: block; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + padding: 16px 0 32px 0; + + color: $gray-100; + + @include mq(sm, max) { + font-size: 20px; + } + } + + :global(.vtex-store-components-3-x-productImageTag--img-description--main) { + width: 100% !important; + max-height: 100% !important; + max-width: 100% !important; + + @include mq(md, max) { + max-width: unset !important; + max-height: 944px !important; + } + + @include mq(sm, max) { + max-width: unset !important; + max-height: unset !important; + } + } +} + +.contentContainer { + padding: 0 32px; + + @include mq(md, max) { + padding: 16px 0 0 0; + } +} + +.listContainer { + border-bottom: 1px solid $gray-500; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; + + @include mq(xl, min) { + height: 49px; + } + + @include mq(md, max) { + border-top: 1px solid $gray-500; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } + + .listItem { + @include mq(md, max) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + + :global(.vtex-button) { + border: none; + + @include mq(md, max) { + width: 100%; + } + + &:hover { + background-color: transparent; + } + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: $gray-400; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; + + @include mq(xl, min) { + font-size: 24px; + line-height: 26px; + } + + @include mq(md, max) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 38px; + } + } + } + + .listItemActive { + @include mq(md, max) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + + :global(.vtex-button) { + background-color: $white; + width: 114px; + border: none; + padding: 0; + + @include mq(md, max) { + width: 100%; + } + } + + :global(.vtex-button__label) { + color: $black; + background-color: $white; + border-bottom: 2px solid $black; + padding: 0; + + @include mq(md, max) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + border-bottom: none; + } + } + } +} + +:global(.vtex-tab-layout-0-x-contentItem--content-render) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + @include mq(md, max) { + flex-direction: column; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..f987a63 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,24 @@ -$color-black: #292929; +/* Fontes */ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); + +/* Cores */ +$color-black: #292929; +$black-100: #202020; +$black: #000000; + +$white: #fff; + +$gray: #929292; +$gray-100: #575757; +$gray-200: #cccccc; +$gray-300: #868686; +$gray-400: #bfbfbf; +$gray-500: #b9b9b9; +$gray-600: #EDEDED; +$gray-700: #bababa; +$gray-800: #cccccc; +$gray-900: #afafaf; -$color-white: #fff; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; @@ -14,12 +32,11 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xss: 0, + xs: 400px, + sm: 768px, + md: 1026px, + xl: 1920px ) !default; $z-index: (