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/PixPrice.tsx b/react/PixPrice.tsx new file mode 100644 index 0000000..7b6642a --- /dev/null +++ b/react/PixPrice.tsx @@ -0,0 +1,3 @@ +import PixPrice from "./components/PixPrice/PixPrice"; + +export default PixPrice; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..082c0f0 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 "./styles.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/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..7669a87 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,88 @@ +[class*="html--pdp-breadcrumb"] { + display: flex; + justify-content: center; + padding: 0 40px; +} + +[class*="html--product-quantity"] { + width: 161.58px; +} + +[class*="html--add-to-cart"] { + width: 100%; +} + +[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; +} + +[class*="html--descriptionImage"] { + width: 46.471%; +} + +[class*="html--descriptionText"] { + width: 50%; +} + +[class*="html--productDescription"] { + padding: 0 40px; + width: 100%; +} + +@media (min-width: 1921px) { + [class*="html--product-quantity"] { + width: 16.712%; + } + + [class*="html--descriptionImage"] { + width: 47.392%; + } + + [class*="html--shelf"] { + display: flex; + justify-content: center; + } +} + +@media (max-width: 1024px) { + [class*="html--product-quantity"] { + width: 149.91px; + } + + [class*="html--buy-button"] { + margin-bottom: 16px; + } + + [class*="html--descriptionImage"] { + width: 100%; + } + + [class*="html--descriptionText"] { + width: 100%; + } +} + +@media (max-width: 463px) { + [class*="html--buy-button"] { + flex-direction: column; + gap: 0; + } + + [class*="html--product-quantity"] { + width: 128px; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 74px; + padding: 0 64px; + } +} diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx new file mode 100644 index 0000000..6d393c4 --- /dev/null +++ b/react/components/PixPrice/PixPrice.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.module.css"; + +const PixPrice = () => { + useEffect(() => { + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); + + inputCep?.setAttribute("placeholder", "Digite seu CEP"); + }); + + const productContextValue = useProduct(); + + const productPrice = + productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const descount = (Number(productPrice) * 10) / 100; + + const total = Number(productPrice) - Number(descount); + + return ( +
+
+
+ +
+
+

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

+

10 % de desconto

+
+
+
+ ); +}; + +export default PixPrice; diff --git a/react/components/PixPrice/styles.module.css b/react/components/PixPrice/styles.module.css new file mode 100644 index 0000000..5f5a6d1 --- /dev/null +++ b/react/components/PixPrice/styles.module.css @@ -0,0 +1,35 @@ +.pixPrice-container { + display: flex; + height: 39px; + margin-top: 8px; +} + +.pixPrice-content { + display: flex; + gap: 26px; + width: 197px; +} + +.pixPrice-img { + display: flex; + align-items: center; +} + +.pixPrice-value, +.pixPrice-text { + margin: 0; +} + +.pixPrice-value { + font-style: normal; + font-weight: 700; + font-size: 18px; + color: rgba(0, 0, 0, 0.58); +} + +.pixPrice-text { + font-style: normal; + font-weight: 300; + font-size: 13px; + 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..0caa02a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -1,8 +1,19 @@ { - "add-to-cart-button": { + "html#add-to-cart": { "props": { + "testId": "add-to-cart-button", + "blockClass": "add-to-cart" + }, + "children": ["add-to-cart-button#addToCart"] + }, + + "add-to-cart-button#addToCart": { + "props": { + "blockClass": "addToCart", "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "width": "75%", + "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..34f4233 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,10 +1,10 @@ { - "sticky-layout#buy-button": { - "props": { - "position": "bottom" - }, - "children": ["flex-layout.row#buy-button"] - }, + // "sticky-layout#buy-button": { + // "props": { + // "position": "bottom" + // }, + // "children": ["flex-layout.row#buy-button"] + // }, "product-assembly-options": { "children": [ "flex-layout.row#product-assembly-options", @@ -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-description.jsonc b/store/blocks/pdp/product-description.jsonc new file mode 100644 index 0000000..437419b --- /dev/null +++ b/store/blocks/pdp/product-description.jsonc @@ -0,0 +1,122 @@ +{ + "html#productDescription": { + "props": { + "blockClass": "productDescription", + "testId": "tab-layout" + }, + "children": ["tab-layout#productDescription"] + }, + "tab-layout#productDescription": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + "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": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "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": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description1" + } + }, + "tab-content.item#description2": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description2" + } + }, + "tab-content.item#description3": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description3" + } + }, + "tab-content.item#description4": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description4" + } + }, + "tab-content.item#description5": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description5" + } + }, + "html#descriptionImage": { + "props": { + "blockClass": "descriptionImage" + }, + "children": ["product-images#description"] + }, + "html#descriptionText": { + "props": { + "blockClass": "descriptionText" + }, + "children": ["product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled" + } + }, + "product-description": { + "props": { + "collapseContent": false + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..7e4edfa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,11 +2,15 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "flex-layout.row#product-container", + // "flex-layout.row#description", + "html#productDescription", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "rich-text#shelfTitle", + "html#shelf", + "newsletter#pageProduct", "product-questions-and-answers" ] }, @@ -32,6 +36,13 @@ }, "children": ["product-description"] }, + + "flex-layout.row#product-container": { + "props": { + "blockClass": "product-container" + }, + "children": ["condition-layout.product#availability"] + }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -78,46 +89,71 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "644px", "rowGap": 0 } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "testId": "product-images", + "blockClass": "product-images" + }, "children": ["product-images"] }, "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" + // "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90 } }, "flex-layout.col#right-col": { "props": { + "blockClass": "right-col", "preventVerticalStretch": true, "rowGap": 0 }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", + "html#pix", + "html#sku-selector", "product-gifts", - "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator", + // "flex-layout.row#buy-button", + "html#buy-button", + // "availability-subscriber", + "html#shipping-simulator", "share#default" ] }, + "html#pix": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["PixPrice"] + }, + + "html#shipping-simulator": { + "props": { + "blockClass": "shipping-simulator", + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -125,19 +161,65 @@ "children": ["vtex.store-components:product-name"] }, - "sku-selector": { + "product-identifier.product": { "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true + "label": "hide", + "idField": "productReference" } }, - "flex-layout.row#buy-button": { + "product-installments": { "props": { - "marginTop": 4, - "marginBottom": 7 + "markers": ["discount"], + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros" + } + }, + + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" }, - "children": ["add-to-cart-button"] + "children": ["sku-selector"] + }, + + "sku-selector": { + "props": { + "variationsSpacing": 3 + } + }, + + "html#buy-button": { + "props": { + "blockClass": "buy-button" + }, + "children": ["html#product-quantity", "html#add-to-cart"] + }, + + // "flex-layout.row#buy-button": { + // "props": { + // "blockClass": "buy-button", + // "marginTop": 4, + // "marginBottom": 7 + // }, + // "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + // }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity#addToCart"] + }, + + "product-quantity#addToCart": { + "props": { + "blockClass": "addToCartQuantity", + "showLabel": false, + "size": "large" + } }, "flex-layout.row#product-availability": { @@ -161,10 +243,18 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#availability", + "sku-selector" ] }, + + "html#availability": { + "props": { + "blockClass": "availability" + }, + "children": ["flex-layout.row#availability"] + }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -175,11 +265,80 @@ "share#default": { "props": { "social": { - "Facebook": true, - "WhatsApp": true, + "Facebook": false, + "WhatsApp": false, "Twitter": false, - "Pinterest": true + "Pinterest": false } } + }, + + "rich-text#shelfTitle": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "# Você também pode gostar:", + "blockClass": "shelfTitleText" + } + }, + // "product-summary-image": { + // "props": { + // "showBadge": false + // } + // }, + + "html#shelf": { + "props": { + "blockClass": "shelf" + }, + "children": ["list-context.product-list#shelfProducts"] + }, + + "list-context.product-list#shelfProducts": { + "blocks": ["product-summary.shelf#shelfProducts"], + "children": ["html#slider-layout"] + }, + + "product-summary.shelf#shelfProducts": { + "children": ["html#product-summary"] + }, + + "html#product-summary": { + "props": { + "blockClass": "product-summary", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "html#slider-layout": { + "props": { + "blockClass": "shelf", + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products"] + }, + + "slider-layout#demo-products": { + "props": { + "blockClass": "shelf", + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + + "newsletter#pageProduct": { + "props": { + "blockClass": "pageProduct", + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..8b2dfde 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,21 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price#summary"] + }, + + "product-selling-price#summary": { + "props": { + "blockClass": "summary", + "message": "{sellingPriceValue}" + } + }, + + "product-selling-price#shelf": { + "props": { + "blockClass": "shelf", + "message": "{sellingPriceValue}" + } }, "flex-layout.row#list-price-savings": { @@ -19,9 +31,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/quickview.json b/store/blocks/product-summary/quickview.jsonc similarity index 85% rename from store/blocks/product-summary/quickview.json rename to store/blocks/product-summary/quickview.jsonc index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.jsonc @@ -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..aaa4ae2 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "PixPrice": { + "component": "PixPrice" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..e729845 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "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" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "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" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "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" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "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": "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": "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": "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": "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": "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": "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": "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": "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", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..a3131a9 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* 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..34c4328 --- /dev/null +++ b/styles/css/vtex-add-to-cart-button.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-rich-text.css b/styles/css/vtex-rich-text.css new file mode 100644 index 0000000..d88705b --- /dev/null +++ b/styles/css/vtex-rich-text.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 */ +.paragraph--product-installments { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..4494087 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,61 @@ +@charset "UTF-8"; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.container { + width: 100%; + max-width: 1920px; +} + +.termArrow, +.term { + display: none; +} + +.homeLink { + visibility: hidden; + position: relative; + margin-right: 15px; +} + +.homeLink::after { + visibility: visible; + display: block; + content: "Home"; + font-size: 16px; + position: absolute; + top: 17%; +} + +.link--1 { + font-size: 0; +} + +.link--1::after { + display: block; + content: "Sapatos"; + font-size: 16px; +} + +.link--2 { + font-size: 0; +} + +.link--2::after { + display: block; + content: "Sandálias"; + font-size: 16px; +} + +@media (min-width: 1921px) { + .container { + max-width: 1840px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.fle-layout.css b/styles/css/vtex.fle-layout.css new file mode 100644 index 0000000..2c86776 --- /dev/null +++ b/styles/css/vtex.fle-layout.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 */ +.flexRowContent--buy-button .pr7 { + width: 22%; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..b104457 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,18 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.flexRowContent { + padding: 0; + margin: 0; +} + .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +24,12 @@ padding: 0 1rem; } } - @media screen and (min-width: 80rem) { .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.25rem; } } - .flexRowContent--menu-link { background-color: #03044e; color: #fff; @@ -42,8 +55,12 @@ font-size: 14px; } +.flexRowContent--buy-button { + height: 49px; +} + .flexRow--deals { - background-color: #0F3E99; + background-color: #0f3e99; padding: 14px 0px; } @@ -96,3 +113,43 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +.flexRowContent { + gap: 32px; +} + +.flexRowContent--product-container { + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; +} +.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth { + padding: 0; +} + +@media (min-width: 1921px) { + .flexRowContent--product-container { + max-width: 1840px; + } +} +@media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } + .flexRowContent--product-container { + width: 100%; + } + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..878c3fd 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,28 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: end; + margin-bottom: 24px; } + +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..d3a0261 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,6 +1,16 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } @@ -21,41 +31,40 @@ .savings { font-weight: 500; - color: #79B03A; + color: #79b03a; } .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 +83,33 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +.installments--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} \ 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..1a1f06e --- /dev/null +++ b/styles/css/vtex.product-quantity.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;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__plus-button) { + border-radius: 0; + border: 1px solid #cccccc; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid #cccccc; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid #cccccc; + border-left: 0; + border-right: 0; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..eec33f5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,60 @@ -.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; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.imageWrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; } .image { - border-radius: 0.25rem; + width: 314.4px; + height: 314.4px; } + +.brandName { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} + +.nameContainer { + padding: 16px 0 0 0; +} + +.containerNormal { + max-width: 314px !important; +} + +@media (min-width: 1921px) { + .image { + width: 434.4px; + height: 434.4px; + } +} +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + .image { + width: 291.2px; + height: 291.2px; + } +} +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..1668279 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,17 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.headingLevel1--shelfTitleText { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} + +@media (max-width: 1024px) { + .headingLevel1--shelfTitleText { + margin-top: 32px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..dfbf40f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,88 @@ -.sliderLayoutContainer { +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.paginationDotsContainer--shelf { + display: flex; + justify-content: center; + align-items: center; +} + +.paginationDot--shelf { + background: #000000; + width: 10px !important; + height: 10px !important; +} + +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000000; + background: transparent; +} + +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + +.sliderLayoutContainer--shelf { + padding-left: 40px !important; + padding-right: 40px !important; + display: flex; justify-content: center; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderTrackContainer--shelf { + width: 100%; } -.sliderTrackContainer { - max-width: 100%; +.sliderLeftArrow--shelf { + visibility: hidden; + margin-left: 10px; +} +.sliderLeftArrow--shelf::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderRightArrow--shelf { + visibility: hidden; + margin-right: 8px; +} +.sliderRightArrow--shelf::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +@media (min-width: 1921px) { + .sliderLayoutContainer--shelf { + max-width: 1840px; + } + .sliderTrackContainer--shelf { + width: 100%; + max-width: 1840px; + } } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } } +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + .sliderRightArrow--shelf { + margin-right: 0; + } + .sliderTrack--shelf { + gap: 8px !important; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..24b1cdf 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,529 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .newsletter { background: red; +} + +.productBrand--quickview { + display: flex; + justify-content: end; + color: #575757; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.carouselGaleryThumbs { + max-height: 90px; + width: 150%; + display: block; +} + +.productImageTag--main { + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; +} + +.carouselThumbBorder { + display: none; +} + +.shareLabel { + display: none; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; +} +.skuSelectorItem .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorItem--selected .diagonalCross { + color: #000000; +} +.skuSelectorItem--selected .skuSelectorInternalBox { + border: none; +} +.skuSelectorItem--selected .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; +} + +.frameAround { + border-radius: 50%; + border-color: black; +} + +.diagonalCross { + transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 30px; + height: 33px; +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + order: 1; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: #929292; +} + +.productImagesThumb { + max-width: 90px; + margin-right: 16px; +} +.productImagesThumb .figure .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; +} + +.shippingContainer { + display: flex; + position: relative; + max-width: 664px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-input__label)::after { + font-size: 14px; + display: block; + content: "CALCULAR FRETE:"; + color: #929292; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0; + height: 49px; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + position: absolute; + left: 232px; + top: 33%; + background: #000000; + border: none; + border-radius: 0; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-button__label)::after { + font-size: 14px; + font-weight: 600; + color: #fff; + display: block; + content: "OK"; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-size: 0; + visibility: hidden; + position: absolute; + left: 302px; + top: 36%; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after { + visibility: visible; + content: "Não sei meu CEP"; + font-size: 12px; + color: #000000; + text-decoration-line: underline; +} + +.shippingTable { + border: none; + padding: 0; + max-width: 382px; +} + +.shippingTableHead { + display: flex; +} + +.shippingTableRow { + position: relative; + width: 100%; +} + +.shippingTableHeadDeliveryName { + font-size: 0; +} + +.shippingTableHeadDeliveryName::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Entrega"; + text-transform: uppercase; + display: block; + color: #000000; +} + +.shippingTableHeadDeliveryEstimate { + font-size: 0; + position: absolute; + top: 5%; + left: 61%; +} + +.shippingTableHeadDeliveryEstimate::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Prazo"; + text-transform: uppercase; + display: block; + color: #000000; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; + position: absolute; + top: 5%; + left: 36%; +} + +.shippingTableHeadDeliveryPrice::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Frete"; + text-transform: uppercase; + display: block; + color: #000000; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; + padding-top: 15px; +} + +.shippingTableCellDeliveryEstimate { + position: absolute; + left: 61%; +} + +.shippingTableCellDeliveryPrice { + position: absolute; + left: 36%; +} + +.skuSelectorOptionsList { + margin: 0; +} + +.skuSelectorNameContainer { + margin-bottom: 0; +} + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: #000000; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid #cccccc; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.inputGroup--pageProduct { + display: flex; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #cccccc; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; +} + +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + +.subscriberContainer { + margin-top: 43px; +} +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +.form { + width: 100%; + margin: 0; +} +.form .content { + display: grid; + grid-template-areas: "nm em" "sub sub"; + justify-content: inherit; + gap: 8px; + width: 59.024%; +} +.form .content .inputName { + grid-area: nm; + width: 100%; + margin: 0; +} +.form .content .inputName :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; + padding-bottom: 5px; +} +.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.form .content .inputEmail { + grid-area: em; + width: 100%; + margin: 0; +} +.form .content .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; + padding-bottom: 5px; +} +.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.form .content .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; +} +.form .content .submit :global(.vtex-button) { + height: 49px; + background: #000000; + border: none; + border-radius: 0; + width: 100%; +} +.form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; +} + +.productImagesGallerySlide { + width: 100% !important; +} + +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + +@media (min-width: 1921px) { + .container--pageProduct { + width: 100%; + max-width: 774px; + } +} +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + .price_sellingPrice { + font-size: 18px; + } + .container--pageProduct { + width: 96%; + } + .form .content { + width: 100%; + max-width: 100%; + } +} +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..99c1ef5 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.input { + border: none; +} \ 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..5fc03aa --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,89 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.container--description { + margin-top: 16px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #bfbfbf; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + border-bottom: 2px solid #000000; + border-radius: 0; + text-transform: capitalize; +} + +@media (min-width: 1921px) { + .listContainer, + .contentContainer { + max-width: 1840px; + } +} +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: 1px solid #bfbfbf; + } + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } + .listItem :global(.vtex-button__label) { + padding: 0; + } + .listItemActive :global(.vtex-button) { + border: none; + } + .contentItem { + flex-direction: column; + margin-top: 15px; + gap: 16px; + } +} \ 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..fa44192 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,3 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - +// .html { +// background-color: red; +// } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..98f2ef1 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,50 @@ +.container { + width: 100%; + max-width: 1920px; +} + +.termArrow, +.term { + display: none; +} + +.homeLink { + visibility: hidden; + position: relative; + margin-right: 15px; +} + +.homeLink::after { + visibility: visible; + display: block; + content: "Home"; + font-size: 16px; + position: absolute; + top: 17%; +} + +.link--1 { + font-size: 0; +} + +.link--1::after { + display: block; + content: "Sapatos"; + font-size: 16px; +} + +.link--2 { + font-size: 0; +} + +.link--2::after { + display: block; + content: "Sandálias"; + font-size: 16px; +} + +@media (min-width: 1921px) { + .container { + max-width: 1840px; + } +} 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..8f999cb --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,149 @@ +.flexRowContent { + padding: 0; + margin: 0; +} + +.flexRowContent--menu-link, +.flexRowContent--main-header { + padding: 0 0.5rem; +} + +@media screen and (min-width: 40em) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 1rem; + } +} + +@media screen and (min-width: 80rem) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 0.25rem; + } +} + +.flexRowContent--menu-link { + background-color: #03044e; + color: #fff; +} + +.flexRowContent--main-header { + background-color: #f0f0f0; +} + +.flexRowContent--main-header-mobile { + align-items: center; + padding: 0.625rem 0.5rem; + background-color: #f0f0f0; +} + +.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { + color: #ffffff; + font-size: 14px; +} + +.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { + color: #727273; + font-size: 14px; +} + +.flexRowContent--buy-button { + height: 49px; +} + +.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; +} + +.flexRowContent { + gap: 32px; +} + +.flexRowContent--product-container { + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; + + .stretchChildrenWidth { + padding: 0; + } +} + +@media (min-width: 1921px) { + .flexRowContent--product-container { + max-width: 1840px; + } +} + +@media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } + .flexRowContent--product-container { + width: 100%; + } + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 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..b6b3265 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,18 @@ +.product-identifier--productReference { + display: flex; + justify-content: end; + margin-bottom: 24px; +} + +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..7804407 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,106 @@ +.listPrice { + color: #727273; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79b03a; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2e2e2e; +} + +.savings--summary { + background: #8bc34a; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: 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; +} + +.installments--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: $color-gray7; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black; +} 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..257cdb9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,27 @@ +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__plus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: 0; + border-right: 0; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + width: 100%; +} 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..7f396f9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,53 @@ +.imageWrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.image { + width: 314.4px; + height: 314.4px; +} + +.brandName { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $color-black; +} + +.nameContainer { + padding: 16px 0 0 0; +} + +.containerNormal { + max-width: 314px !important; +} + +@media (min-width: 1921px) { + .image { + width: 434.4px; + height: 434.4px; + } +} + +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + + .image { + width: 291.2px; + height: 291.2px; + } +} + +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..49f1389 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,12 @@ +.headingLevel1--shelfTitleText { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} + +@media (max-width: 1024px) { + .headingLevel1--shelfTitleText { + margin-top: 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..a844780 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,85 @@ +.paginationDotsContainer--shelf { + display: flex; + justify-content: center; + align-items: center; +} + +.paginationDot--shelf { + background: $color-black; + width: 10px !important; + height: 10px !important; +} + +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid $color-black; + background: transparent; +} + +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + +.sliderLayoutContainer--shelf { + padding-left: 40px !important; + padding-right: 40px !important; + display: flex; + justify-content: center; +} + +.sliderTrackContainer--shelf { + width: 100%; +} + +.sliderLeftArrow--shelf { + visibility: hidden; + margin-left: 10px; + + &::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); + } +} + +.sliderRightArrow--shelf { + visibility: hidden; + margin-right: 8px; + + &::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); + } +} + +@media (min-width: 1921px) { + .sliderLayoutContainer--shelf { + max-width: 1840px; + } + + .sliderTrackContainer--shelf { + width: 100%; + max-width: 1840px; + } +} + +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } +} + +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + + .sliderRightArrow--shelf { + margin-right: 0; + } + + .sliderTrack--shelf { + gap: 8px !important; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..0a741c2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,559 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productBrand--quickview { + display: flex; + justify-content: end; + color: $color-gray8; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.carouselGaleryThumbs { + max-height: 90px; + width: 150%; + display: block; +} + +.productImageTag--main { + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; +} + +.carouselThumbBorder { + display: none; +} + +.shareLabel { + display: none; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; + .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #b9b9b999; + } +} + +.skuSelectorItem--selected { + .diagonalCross { + color: $color-black; + } + + .skuSelectorInternalBox { + border: none; + } + + .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + } +} + +.frameAround { + border-radius: 50%; + border-color: black; +} + +.diagonalCross { + transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 30px; + height: 33px; +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; + color: $color-gray7; + } + } +} + +.skuSelectorSubcontainer--tamanho { + order: 1; + margin: 0; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: $color-gray7; + } + } +} + +.productImagesThumb { + max-width: 90px; + margin-right: 16px; + .figure { + .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; + } + } +} + +.shippingContainer { + display: flex; + position: relative; + max-width: 664px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-input__label)::after { + font-size: 14px; + display: block; + content: "CALCULAR FRETE:"; + color: $color-gray7; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray6; + border-radius: 0; + height: 49px; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + position: absolute; + left: 232px; + top: 33%; + background: $color-black; + border: none; + border-radius: 0; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-button__label)::after { + font-size: 14px; + font-weight: 600; + color: $color-white; + display: block; + content: "OK"; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-size: 0; + visibility: hidden; + position: absolute; + left: 302px; + top: 36%; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after { + visibility: visible; + content: "Não sei meu CEP"; + font-size: 12px; + color: $color-black; + text-decoration-line: underline; +} + +.shippingTable { + border: none; + padding: 0; + max-width: 382px; +} + +.shippingTableHead { + display: flex; +} + +.shippingTableRow { + position: relative; + width: 100%; +} + +.shippingTableHeadDeliveryName { + font-size: 0; +} + +.shippingTableHeadDeliveryName::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Entrega"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableHeadDeliveryEstimate { + font-size: 0; + position: absolute; + top: 5%; + left: 61%; +} + +.shippingTableHeadDeliveryEstimate::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Prazo"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; + position: absolute; + top: 5%; + left: 36%; +} + +.shippingTableHeadDeliveryPrice::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Frete"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + padding: 0; + padding-top: 15px; +} + +.shippingTableCellDeliveryEstimate { + position: absolute; + left: 61%; +} + +.shippingTableCellDeliveryPrice { + position: absolute; + left: 36%; +} + +.skuSelectorOptionsList { + margin: 0; +} + +.skuSelectorNameContainer { + margin-bottom: 0; +} + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black; +} + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: $color-black; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray7; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid $color-gray6; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; +} + +.inputGroup--pageProduct { + display: flex; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $color-gray6; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; +} + +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + +.subscriberContainer { + margin-top: 43px; + + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } +} + +.form { + width: 100%; + margin: 0; + + .content { + display: grid; + grid-template-areas: + "nm em" + "sub sub"; + justify-content: inherit; + gap: 8px; + width: 59.024%; + + .inputName { + grid-area: nm; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + padding-bottom: 5px; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray13; + } + } + + .inputEmail { + grid-area: em; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + padding-bottom: 5px; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray13; + } + } + + .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; + + & :global(.vtex-button) { + height: 49px; + background: $color-black; + border: none; + border-radius: 0; + width: 100%; + } + + & :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + } +} + +.productImagesGallerySlide { + width: 100% !important; +} + +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + +@media (min-width: 1921px) { + .container--pageProduct { + width: 100%; + max-width: 774px; + } +} + +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + + .price_sellingPrice { + font-size: 18px; + } + + .container--pageProduct { + width: 96%; + } + + .form { + .content { + width: 100%; + max-width: 100%; + } + } +} + +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } +} 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..9075fbd --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,84 @@ +.container--description { + margin-top: 16px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid $color-gray10; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-gray10; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-black; + border-bottom: 2px solid $color-black; + border-radius: 0; + text-transform: capitalize; +} + +@media (min-width: 1921px) { + .listContainer, + .contentContainer { + max-width: 1840px; + } +} + +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: 1px solid $color-gray10; + } + + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } + + .listItem :global(.vtex-button__label) { + padding: 0; + } + + .listItemActive :global(.vtex-button) { + border: none; + } + + .contentItem { + flex-direction: column; + margin-top: 15px; + gap: 16px; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..b38d9da 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,6 @@ -$color-black: #292929; +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); + +$color-black: #000000; $color-white: #fff; @@ -7,6 +9,14 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #cccccc; +$color-gray7: #929292; +$color-gray8: #575757; +$color-gray9: #afafaf; +$color-gray10: #bfbfbf; +$color-gray11: #ffffff; +$color-gray12: #868686; +$color-gray13: #989898; $color-blue: #4267b2; @@ -14,18 +24,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;