diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..6f9f3e2 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", @@ -66,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/Example.tsx b/react/Example.tsx index 7d550e5..fe63560 100644 --- a/react/Example.tsx +++ b/react/Example.tsx @@ -1,3 +1,3 @@ import Example from "./components/Example/Example"; -export default Example; \ No newline at end of file +export default Example; diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..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..fd3a18d --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,31 @@ +[class*="html--buy-button"] { + display: flex; + gap: 10px; + margin: 0; +} + +[class*="html--cart-button"] { + width: 100%; +} + +[class*="html--buy-button"] :global(.vtex-button) { + height: 49px; + max-width: 806px; + background: black; + border: none; + border-radius: 0; +} + +@media only screen and (min-width: 280px) and (max-width: 768px) { + [class*="html--buy-button"] { + flex-direction: column; + } + + [class*="html--product-quantity"] { + height: 49px; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 70px; + } +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..69917fa --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./style.module.css"; + +const Pix = () => { + useEffect(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + + cepInput?.setAttribute("placeholder", "Digite seu CEP"); + }); + + const productValue = useProduct(); + + const priceProduct = + productValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const descountValue = (Number(priceProduct) * 10) / 100; + + const totalValue = Number(priceProduct) - Number(descountValue); + + return ( +
+
+
+ 10% de desconto no Pix +
+
+

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

+

10 % de desconto

+
+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix/style.module.css b/react/components/Pix/style.module.css new file mode 100644 index 0000000..ba3c6ad --- /dev/null +++ b/react/components/Pix/style.module.css @@ -0,0 +1,28 @@ +/* .pix-container { + +} */ + +.pix-content { + display: flex; + align-items: center; + gap: 26px; + margin: 8px 0 16px; +} + +.pix-image { + height: fit-content; +} + +.pix-value { + font-weight: 700; + font-size: 18px; + color: rgba(0, 0, 0, 0.58); + margin: 0; +} + +.pix-text { + font-weight: 300; + font-size: 13px; + color: #929292; + margin: 0; +} 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/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..e18de24 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..a82979c 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,9 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text": "ADICIONAR À SACOLA", + "blockClass": "add-to-cart-button" } }, 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-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc new file mode 100644 index 0000000..b43fc2e --- /dev/null +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -0,0 +1,160 @@ + // Descrição + + { + "html#tab-layout": { + "props" : { + "testId": "tab-layout" + } + }, + + "tab-layout": { + "children": ["tab-list", "tab-content"], + "props": { + "blockClass": "tabLayout" + } + }, + + "tab-list": { + "children": [ + "tab-list.item#1", + "tab-list.item#2", + "tab-list.item#3", + "tab-list.item#4", + "tab-list.item#5" + ], + "props": { + "blockClass": "tabList" + } + }, + + "tab-content": { + "children": [ + "tab-content.item#1", + "tab-content.item#2", + "tab-content.item#3", + "tab-content.item#4", + "tab-content.item#5" + ], + "props": { + "blockClass": "tabContent" + } + }, + + "tab-list.item#1": { + "props": { + "tabId": "description#1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#2": { + "props": { + "tabId": "description#2", + "label": "Descrição" + } + }, + + "tab-list.item#3": { + "props": { + "tabId": "description#3", + "label": "Descrição" + } + }, + + "tab-list.item#4": { + "props": { + "tabId": "description#4", + "label": "Descrição" + } + }, + + "tab-list.item#5": { + "props": { + "tabId": "description#5", + "label": "Descrição" + } + }, + + "tab-content.item#1": { + "children": ["product-images#description", "rich-text#1"], + "props": { + "tabId": "description#1" + } + }, + "tab-content.item#2": { + "children": ["product-images#description", "rich-text#2"], + "props": { + "tabId": "description#2" + } + }, + "tab-content.item#3": { + "children": ["product-images#description", "rich-text#3"], + "props": { + "tabId": "description#3" + } + }, + "tab-content.item#4": { + "children": ["product-images#description", "rich-text#4"], + "props": { + "tabId": "description#4" + } + }, + "tab-content.item#5": { + "children": ["product-images#description", "rich-text#5"], + "props": { + "tabId": "description#5" + } + }, + + "product-images#description": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "auto" + }, + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "zoomMode": "disabled", + "displayMode": "first-image" + } + }, + + "rich-text#1": { + "props": { + "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.", + "textPosition": "CENTER", + "blockClass": "description-rich-text" + } + }, + "rich-text#2": { + "props": { + "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.", + "textPosition": "CENTER", + "blockClass": "description-rich-text" + } + }, + "rich-text#3": { + "props": { + "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.", + "textPosition": "CENTER", + "blockClass": "description-rich-text" + } + }, + "rich-text#4": { + "props": { + "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.", + "textPosition": "CENTER", + "blockClass": "description-rich-text" + } + }, + "rich-text#5": { + "props": { + "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.", + "textPosition": "CENTER", + "blockClass": "description-rich-text" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..12fc1d4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,16 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "html#tab-layout", + "rich-text#carousel", + "list-context.product-list#product-carousel", + "product-questions-and-answers", + "newsletter" ] }, + + // Breadcrumb + "html#breadcrumb": { "props": { "tag": "section", @@ -18,6 +21,9 @@ }, "children": ["breadcrumb"] }, + + // Produto + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -45,6 +51,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "product-main", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -66,34 +73,39 @@ ] }, - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, + // Imagens de produto "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "60%", "rowGap": 0 } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": ["html#product-images"] }, + "html#product-images": { + "children": ["product-images"], + "props": { + "testId": "product-images" + } + }, + "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, + + // Especificações de produto + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -101,23 +113,28 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-identifier.product", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", + "html#pix-price", + "html#sku-selector", + "html#buy-button", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "rich-text#labelCep", + "html#shipping-simulator" ] }, + // Título CEP + + "rich-text#labelCep": { + "props": { + "blockClass": "labelCep", + "text": "CALCULAR FRETE:" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -125,23 +142,71 @@ "children": ["vtex.store-components:product-name"] }, - "sku-selector": { + // Skus + + "html#sku-selector": { + "children": ["sku-selector"], "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true + "testId": "sku-selector" } }, - "flex-layout.row#buy-button": { + "sku-selector": { "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["add-to-cart-button"] + "variationsSpacing": 3, + "showValueNameForImageVariation": true, + "blockClass": "size-sku" + } }, + // Parcelamento + + "product-installments": { + "props": { + "markers": ["discount"], + "message": "{installmentsNumber} x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + + // Quantidade e botão de compra + + "html#buy-button": { + "props": { + "blockClass": "buy-button" + }, + "children": ["html#product-quantity-size", "html#cart-button"] + }, + + "html#cart-button": { + "children": ["add-to-cart-button"], + "props": { + "testId": "add-to-cart-button", + "blockClass": "cart-button" + } + }, + + "html#product-quantity-size": { + "children": ["product-quantity#size"], + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + } + }, + + "product-quantity#size": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } + }, + + // Produto indisponível + "flex-layout.row#product-availability": { "props": { + "blockClass": "product-availability", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -152,6 +217,7 @@ "flex-layout.col#right-col-availability" ] }, + "flex-layout.col#right-col-availability": { "props": { "preventVerticalStretch": true, @@ -161,10 +227,13 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, + + // Formulário produto indisponível + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -172,14 +241,86 @@ "children": ["availability-subscriber"] }, - "share#default": { + // Desconto Pix + + "html#pix-price": { + "children": ["Pix"], "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true + "testId": "pix-price" + } + }, + + // Prateleira de produtos + + "rich-text#carousel": { + "props": { + "text": "Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "blockClass": "carousel-title" + } + }, + + "product-summary.shelf#carousel": { + "children": ["html#product-summary"] + }, + + "list-context.product-list#product-carousel": { + "blocks": ["product-summary.shelf#carousel"], + "children": ["html#product-summary-list"] + }, + + "html#product-summary-list": { + "children": ["slider-layout#demo-products"], + "props": { + "testId": "product-summary-list" + } + }, + + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 } } + }, + + "html#product-summary": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "product-summary-image": { + "props": { + "aspectRatio": "1:1", + "showBadge": false + } + }, + + // Newsletter + + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail", + "submit": "ENVIAR" + } + }, + + // Informações de frete + + "html#shipping-simulator" : { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..2d07e38 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "Pix": { + "component": "Pix" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..a8c0c05 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,24 @@ +@font-face { + font-family: "Open Sans"; + src: url("assets/fonts/OpenSans-Regular.ttf"); + font-weight: 400; +} + +@font-face { + font-family: "Open Sans"; + src: url("assets/fonts/OpenSans-Light.ttf"); + font-weight: 300; +} + +@font-face { + font-family: "Open Sans"; + src: url("assets/fonts/OpenSans-SemiBold.ttf"); + font-weight: 600; +} + +@font-face { + font-family: "Open Sans"; + src: url("assets/fonts/OpenSans-Bold.ttf"); + font-weight: 700; +} + diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..722a77b 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, 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, 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, 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, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, 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/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..e86335b --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,22 @@ +/* +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 */ +.buttonText { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #fff; + padding: 7px 0; +} +@media screen and (max-width: 768px) { + .buttonText { + width: 168px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..5ac4f7d --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,37 @@ +/* +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 */ +.container { + padding: 14px 36px; +} +@media screen and (min-width: 1920px) { + .container { + margin: 0px 356px; + padding: 14px 0; + } +} +.container .link, +.container .term { + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeIcon { + display: none; +} +.container .link::after { + content: "Home"; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .link--1::after, +.container .link--2::after { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..899b74f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,23 @@ +/* +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 { + margin: 0; + padding-top: 0; +} + +@media screen and (max-width: 1024px) { + .flexRowContent--product-availability { + flex-direction: column; + } +} + .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +29,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 +60,18 @@ font-size: 14px; } +.flexRowContent--product-main { + margin: 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .flexRowContent--product-main { + flex-direction: column; + } +} + .flexRow--deals { - background-color: #0F3E99; + background-color: #fff; padding: 14px 0px; } @@ -93,6 +121,24 @@ height: 34% !important; } -.flexRow--addToCartRow { - padding-bottom: 1rem; +.stretchChildrenWidth { + margin: 0; } +@media screen and (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} + +.flexRowContent--buy-button { + height: 49px; + display: flex; + justify-content: center; +} + +.flexRowContent--buy-button :global(.vtex-button) { + background: #000000; + border: none; + border-radius: 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..b23bead 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,28 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.product-identifier__label { + display: none; } +.product-identifier__separator { + display: none; +} +.product-identifier__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} +@media screen and (max-width: 1024px) { + .product-identifier__value { + justify-content: 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..0983b2f 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,38 @@ +/* +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 */ .listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + display: none; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; +@media screen and (max-width: 1024px) { + :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) { + margin-top: 24px !important; + } } .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; + margin: 0; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; + font-size: 16px; + line-height: 22px; + font-weight: 400; + color: #929292; + margin-bottom: 16px; } +.installments .installments-discount, +.installments .installmentValue { + font-weight: 700; +} \ 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..cba35d6 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,50 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.QuantitySelectorContainer { + margin-bottom: 16px; +} + +:global(.vtex-numeric-stepper__minus-button), +:global(.vtex-numeric-stepper__plus-button) { + background-color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; + border-radius: 0; +} + +:global(.vtex-numeric-stepper__minus-button) { + border-top: 1px; + border-left: 1px; + border-bottom: 1px; + border-style: solid; + border-color: #cccccc; +} + +:global(.vtex-numeric-stepper__plus-button) { + border-top: 1px; + border-right: 1px; + border-bottom: 1px; + border-style: solid; + border-color: #cccccc; +} + +:global(.vtex-numeric-stepper__input) { + width: 32px; + border-top: 1px; + border-bottom: 1px; + border-style: solid; + border-right: none; + border-left: none; + border-color: #cccccc; + color: #929292; + outline: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..0abdbf6 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,31 @@ -.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; - } +/* +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 */ +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 0 0 8px; } - -.brandName { - font-weight: 600; +.nameContainer .brandName { + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; + line-height: 25px; + color: #000000; } +@media screen and (max-width: 1024px) { + .nameContainer .brandName { + font-size: 14px; + line-height: 19px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..b734d82 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,38 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.paragraph--carousel-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin: 0; +} +@media screen and (max-width: 1024px) { + .paragraph--carousel-title { + padding-top: 16px; + } +} +@media screen and (min-width: 280px) and (max-width: 768px) { + .paragraph--carousel-title { + font-size: 20px; + } +} + +.wrapper--labelCep { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.wrapper--labelCep .paragraph--labelCep { + margin: 0; +} +@media screen and (min-width: 280px) and (max-width: 768px) { + .wrapper--labelCep .paragraph--labelCep { + margin: 16px 0 0; + } +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.shelf.css similarity index 69% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.shelf.css index 5e37ba5..cd805d2 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.shelf.css @@ -7,10 +7,8 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.title { + font-weight: 400; + font-size: 24px; + line-height: 38px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..875005a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,129 @@ +/* +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 */ .sliderLayoutContainer { - justify-content: center; + width: 94%; + margin: auto; + padding: 0; +} +@media screen and (min-width: 1920px) { + .sliderLayoutContainer { + width: 62%; + } +} +@media screen and (max-width: 1024px) { + .sliderLayoutContainer { + width: 100%; + padding: 0 40px; + } +} +.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; +} +.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + width: 105%; + max-height: unset !important; + object-fit: contain; +} +.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.slideChildrenContainer { + padding-right: 16px; } -.sliderTrackContainer { - max-width: 100%; +:global(.vtex-store-components-3-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + margin: 0; + padding-bottom: 8px; +} +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-listPrice) { + font-size: 12px; + line-height: 16px; + } +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before { + content: "de "; +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after { + content: " por"; +} + +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) { + font-size: 18px; + line-height: 25px; + } +} + +:global(.vtex-slider-layout-0-x-sliderRightArrow) { + visibility: hidden; +} +:global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); + margin: 0 40px 0 0; +} +@media screen and (min-width: 1920px) { + :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + margin: 0; + } +} + +:global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; +} +:global(.vtex-slider-layout-0-x-sliderLeftArrow)::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png); + margin: 0 0 0 40px; +} +@media screen and (min-width: 1920px) { + :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before { + margin: 0; + } } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; + bottom: -30px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.paginationDotsContainer .paginationDot { + background-color: #000000; } +.paginationDotsContainer .paginationDot--isActive { + background-color: white; + border: 1px solid #000000; + width: 17px !important; + height: 17px !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..21221ed 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 @@ -7,6 +8,564 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + padding: 0 40px; + margin: 0; +} +@media screen and (min-width: 1920px) { + .container { + margin: 6px 360px; + padding: 0; + } +} + +.productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + margin-top: 32px; + text-align: left; + } +} + +.productImageTag--main { + max-height: max-content !important; + max-width: 100%; +} + +.carouselGaleryThumbs { + display: block; + margin-top: 16px; + margin-right: 16px; + max-height: 90px; +} + +.thumbImg { + border-radius: 8px; + height: 90px; + width: 100%; + max-width: 90px; +} + +.carouselThumbBorder { + height: 90px; + width: 90px; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + max-width: 90px; + width: 90px !important; + margin-right: 16px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + order: 2; + margin-bottom: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .diagonalCross { + color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross { + color: #d5d5d5; + top: 5px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; + transform: rotateY(180deg); +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer { + margin-bottom: 8px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + order: 1; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorItem--selected .diagonalCross { + color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + border-color: #989898; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + border-color: #000000; + top: -2px; + left: 0; + right: 0; + bottom: 0; + z-index: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { + color: #d5d5d5; + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; + transform: rotateY(180deg); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue { + display: none; +} + +.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku { + color: #000000; +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorItem { + margin: 0 16px 0 0; +} + +.shippingContainer { + display: flex; + position: relative; + width: 409px; + height: 49px; + margin-top: 16px; +} +@media (max-width: 1024px) { + .shippingContainer { + margin: 16px 0; + } +} +@media (max-width: 560px) { + .shippingContainer { + width: 296px; + margin-bottom: 40px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; + margin: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + width: 280px; + height: 49px; +} +@media (max-width: 560px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + width: 247px; + } +} +@media (max-width: 280px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + width: 151px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0px; + height: 49px; + border-right: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: -57px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000 !important; +} +@media (max-width: 560px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + top: 45px; + right: -4px; + } +} +@media (max-width: 280px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + right: 96px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + font-size: 0; + background: #000000; + width: 49px; + height: 49px; + border: none; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button):hover { + opacity: 0.8; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; + padding: 0; +} + +:global(.vtex-button__label) { + height: fit-content; +} + +.shippingTable { + display: flex; + flex-direction: column; + border: none; + padding: 4px 0; +} +@media screen and (max-width: 1024px) { + .shippingTable { + margin-bottom: 12px; + } +} +.shippingTable .shippingTableHead { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + min-width: 140px; + text-align: left; +} +@media screen and (max-width: 540px) { + .shippingTable .shippingTableHead .shippingTableHeadDeliveryName { + min-width: 100px; + } +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { + font-size: 0; + min-width: 140px; + text-align: left; +} +@media screen and (max-width: 540px) { + .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { + min-width: 100px; + } +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + font-size: 0; + min-width: 140px; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after { + content: "PRAZO"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate .shippingTableCellDeliveryPrice { + display: flex; + order: 2; +} +.shippingTable .shippingTableBody .shippingTableCell { + padding: 0; + display: flex; + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; +} +@media screen and (max-width: 540px) { + .shippingTable .shippingTableBody .shippingTableCell { + min-width: 100px; + } +} +.shippingTable .shippingTableRadioBtn { + display: none; +} + +@media (max-width: 1024px) { + .subscriberContainer { + margin-top: 24px; + } +} +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + 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-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form { + width: 100%; + margin: 0; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: " nome email" " submit submit"; + justify-content: inherit; + gap: 8px; +} +.subscriberContainer .form .content .inputName { + grid-area: nome; +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group), +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid #989898; +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 12px 14px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder, +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.subscriberContainer .form .content .inputEmail { + grid-area: email; +} +.subscriberContainer .form .content .submit { + grid-area: submit; + width: 100%; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; + background-color: #000000; + border: none; + border-radius: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button):hover { + opacity: 0.8; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; +} + .newsletter { - background: red; + display: block; + background: #000000; + margin-top: 96px; +} +.newsletter :global(.vtex-store-components-3-x-container) { + margin: auto; +} +.newsletter :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 774px; + max-width: 774px; + position: relative; +} +@media screen and (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-form) { + width: 100%; + max-width: 100%; + padding: 64px 0 32px; + } +} +.newsletter :global(.vtex-store-components-3-x-form) .label { + display: flex; + flex-direction: column; + color: #fff; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} +.newsletter :global(.vtex-store-components-3-x-form) .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-form) .label::after { + font-size: 16px; + line-height: 22px; + } +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { + padding-top: 16px; + display: flex; +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border-radius: 0; + border-bottom: 1px solid #929292; + background: transparent; + padding: 0; +} +@media screen and (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer { + padding: 0; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; + background-color: transparent; + border: none; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button):hover { + opacity: 0.8; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) { + border-bottom: 3px solid #929292; + padding: 6px 17px 12px !important; } \ 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..8f117f8 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,17 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.subscriberContainer .hideDecorators::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +.subscriberContainer :global(.vtex-styleguide-9-x-input) { + border: 1px solid red; +} \ 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..2db2f49 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,196 @@ +/* +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 */ +:global(.vtex-tab-layout-0-x-container) { + padding: 0 40px; + margin: 0; +} +@media screen and (min-width: 1920px) { + :global(.vtex-tab-layout-0-x-container) { + margin: 6px 360px; + padding: 0; + } +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList { + border-bottom: 1px solid #bfbfbf; + height: 43px; + justify-content: space-between; + padding: 0 64px; +} +@media screen and (min-width: 1920px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList { + height: 49px; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList { + border-top: 1px solid #bfbfbf; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) { + border: none; +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) { + width: 100%; + } +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover { + background-color: transparent; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: #bfbfbf; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover { + color: #929292; +} +@media screen and (min-width: 1920px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { + font-size: 24px; + line-height: 24px; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 18px; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) { + background-color: transparent; + width: 114px; + border: none; +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) { + width: 100%; + } +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { + color: #000000; + background-color: transparent; + border-bottom: 2px solid #000000; + padding: 0; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover { + color: #000000; +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { + border: none; + } +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem { + display: flex; + flex-direction: row; + gap: 32px; + align-items: flex-start; + padding: 32px 32px 16px; +} +@media (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem { + flex-direction: column; + gap: 16px; + padding: 16px 0 0 0; + border-bottom: 1px solid #bfbfbf; + } +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem .productImagesContainer { + width: 50%; + max-width: 50%; +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) { + width: 100%; + max-width: 100%; + display: block; +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) { + max-width: 50%; +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) { + max-width: 100%; + } +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-top: 0; +} +@media screen and (min-width: 1920px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) { + font-size: 32px; + line-height: 32px; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) { + font-size: 20px; + line-height: 32px; + } +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media screen and (min-width: 1920px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) { + font-size: 14px; + line-height: 19px; + } +} \ 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 deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..2eeca3b --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $white; + padding: 7px 0; + + @media screen and (max-width: 768px) { + width: 168px; + } +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..29d4ac3 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,39 @@ +// Breadcrumb + +.container { + padding: 14px 36px; + + @media screen and (min-width: 1920px) { + margin: 0px 356px; + padding: 14px 0; + } + + .link, + .term { + font-size: 14px; + line-height: 19px; + color: $gray-500; + } + + // Home + + .homeIcon { + display: none; + } + + .link::after { + content: "Home"; + font-size: 14px; + line-height: 19px; + color: $gray-500; + } + + // Outros links + + .link--1, + .link--2 { + &::after { + display: none; + } + } +} 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..456815c --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,136 @@ +.flexRowContent { + margin: 0; + padding-top: 0; + +} + +.flexRowContent--product-availability { + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + +.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--product-main { + margin: 0; + padding: 0; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + +.flexRow--deals { + background-color: $white; + 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; +} + +.stretchChildrenWidth { + margin: 0; + + @media screen and (max-width: 1024px) { + width: 100% !important; + padding: 0; + } +} + +.flexRowContent--buy-button { + height: 49px; + display: flex; + justify-content: center; +} + +.flexRowContent--buy-button :global(.vtex-button) { + background: $black; + border: none; + border-radius: 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..dc3a6b3 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,26 @@ + +// Código de identificação do produto + +.product-identifier { + + &__label { + display: none; + } + + &__separator { + display: none; + } + + &__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + + @media screen and (max-width: 1024px) { + justify-content: 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..14c2225 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,56 @@ +.listPrice { + display: none; +} + +// Preço + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) { + @media screen and (max-width: 1024px) { + margin-top: 24px !important; + } +} + +.sellingPriceValue { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $black; + margin: 0; +} + +// Informações de parcelamento + +.installments { + font-size: 16px; + line-height: 22px; + font-weight: 400; + color: $gray-500; + margin-bottom: 16px; + + .installments-discount, + .installmentValue { + font-weight: 700; + } + + // .installmentsNumber { + // font-size: 0 !important; + + // &::before { + // content: "36 x"; + // font-size: 16px; + // } + + // &::after { + // content: " de "; + // font-weight: 400; + // font-size: 16px; + // } + // } + + // .installmentValue { + // &::after { + // content: " sem juros"; + // font-weight: 400; + // } + // } +} 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..d755fda --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,53 @@ +// Quantidade de produtos + +// Container + +.QuantitySelectorContainer { + margin-bottom: 16px; +} + +// Botões + +:global(.vtex-numeric-stepper__minus-button), +:global(.vtex-numeric-stepper__plus-button) { + background-color: $white; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $black; + border-radius: 0; +} + +// Botão de - + +:global(.vtex-numeric-stepper__minus-button) { + border-top: 1px; + border-left: 1px; + border-bottom: 1px; + border-style: solid; + border-color: $gray-1000; +} + +// Botão de + + +:global(.vtex-numeric-stepper__plus-button) { + border-top: 1px; + border-right: 1px; + border-bottom: 1px; + border-style: solid; + border-color: $gray-1000; +} + +// Input + +:global(.vtex-numeric-stepper__input) { + width: 32px; + border-top: 1px; + border-bottom: 1px; + border-style: solid; + border-right: none; + border-left: none; + border-color: $gray-1000; + color: $gray-500; + outline: 0; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..f893b4d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,28 @@ +// Prateleira de produtos + +// Imagem do produto + +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} + +// Nome do produto + +.nameContainer { + padding: 0 0 8px; + + .brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $black; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..2f65099 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,36 @@ +// Título da prateleira + +.paragraph--carousel-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $gray-600; + margin: 0; + + @media screen and (max-width: 1024px) { + padding-top: 16px; + } + + @media screen and (min-width: 280px) and (max-width: 768px) { + font-size: 20px; + } +} + +// Título CEP + +.wrapper--labelCep { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-500; + + .paragraph--labelCep { + margin: 0; + + @media screen and (min-width: 280px) and (max-width: 768px) { + margin: 16px 0 0; + } + } +} 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..f9b9374 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,144 @@ +// Prateleira de produtos + +// Container + +.sliderLayoutContainer { + width: 94%; + margin: auto; + padding: 0; + + @media screen and (min-width: 1920px) { + width: 62%; + } + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 40px; + } + + :global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; + + :global(.vtex-product-summary-2-x-element) { + padding: 0; + } + } + + :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + width: 105%; + max-height: unset !important; + object-fit: contain; + } + + :global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; + } +} + +// Informações de cada produto + +.slideChildrenContainer { + // width: 314px; + padding-right: 16px; +} + +// Preço sem desconto + +:global(.vtex-store-components-3-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-300; + margin: 0; + padding-bottom: 8px; + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } + + :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; + } + + :global(.vtex-store-components-3-x-currencyContainer) { + &::before { + content: "de "; + } + + &::after { + content: " por"; + } + } +} + +// Preço com desconto + +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + + :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $black; + + @media screen and (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } + } +} + +// Arrows + +:global(.vtex-slider-layout-0-x-sliderRightArrow) { + visibility: hidden; + + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); + margin: 0 40px 0 0; + + @media screen and (min-width: 1920px) { + margin: 0; + } + } +} + +:global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; + + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png); + margin: 0 0 0 40px; + + @media screen and (min-width: 1920px) { + margin: 0; + } + } +} + +// Dots da prateleira de produtos + +.paginationDotsContainer { + align-items: center; + bottom: -30px; + + .paginationDot { + background-color: $black; + } + + .paginationDot--isActive { + background-color: white; + border: 1px solid $black; + width: 17px !important; + height: 17px !important; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..648aef4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,660 @@ -.newsletter{ - background: red; -} \ No newline at end of file +// Produto + +.container { + padding: 0 40px; + margin: 0; + + @media screen and (min-width: 1920px) { + margin: 6px 360px; + padding: 0; + } +} + +// Nome do produto + +.productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: $gray-600; + + @media screen and (max-width: 1024px) { + margin-top: 32px; + text-align: left; + } +} + +// Imagens do produto + +.productImageTag--main { + max-height: max-content !important; + max-width: 100%; + // max-width: max-content; + // max-width: 664px; +} + +.carouselGaleryThumbs { + display: block; + margin-top: 16px; + margin-right: 16px; + max-height: 90px; +} + +.thumbImg { + border-radius: 8px; + height: 90px; + width: 100%; + max-width: 90px; +} + +.carouselThumbBorder { + height: 90px; + width: 90px; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + max-width: 90px; + width: 90px !important; + margin-right: 16px; +} + +// Skus + +.skuSelectorContainer { + display: flex; + flex-direction: column; + + // Skus cor + + .skuSelectorSubcontainer--cor { + order: 2; + margin-bottom: 16px; + + .skuSelectorItem--selected { + + .diagonalCross { + color: $black; + } + } + + .skuSelectorNameContainer { + margin: 0; + } + + .frameAround, + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 50%; + // width: 48px; + // height: 48px; + } + + .frameAround { + border-color: $black; + } + + .diagonalCross { + color: $gray-900; + top: 5px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; + transform: rotateY(180deg); + } + + .skuSelectorTextContainer { + margin-bottom: 8px; + + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-500; + } + } + + .skuSelectorSelectorImageValue { + display: none; + } + } + } + + // Skus tamanho + + .skuSelectorSubcontainer--tamanho { + order: 1; + + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorOptionsList { + margin: 0; + } + + .skuSelectorItem--selected { + + .diagonalCross { + color: $black; + } + } + } + + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .frameAround, + .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; + } + + .skuSelectorInternalBox { + border-color: $gray-800; + } + + .frameAround { + border-color: $black; + top: -2px; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + } + + .diagonalCross { + color: $gray-900; + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; + transform: rotateY(180deg); + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-500; + } + } + + .skuSelectorSelectorImageValue { + display: none; + } + } + } +} + +.skuSelectorItem--size-sku--selected { + .skuSelectorItemTextValue--size-sku { + color: $black; + } +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorItem { + margin: 0 16px 0 0; +} + +// Código Postal + +.shippingContainer { + display: flex; + position: relative; + width: 409px; + height: 49px; + margin-top: 16px; + + @media (max-width: 1024px) { + margin: 16px 0; + } + + @media (max-width: 560px) { + width: 296px; + margin-bottom: 40px; + } + + :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; + margin: 0; + + :global(.vtex-input) { + width: 280px; + height: 49px; + + @media (max-width: 560px) { + width: 247px; + } + + @media (max-width: 280px) { + width: 151px; + } + + :global(.vtex-input__label) { + display: none; + } + :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0px; + height: 49px; + border-right: 0; + + :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $gray-400; + + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $gray-400; + } + } + } + } + + // Não sei meu CEP + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: -57px; + + :last-child { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: $black !important; + } + + @media (max-width: 560px) { + top: 45px; + right: -4px; + } + + @media (max-width: 280px) { + right: 96px; + } + + :global(.vtex__icon-external-link) { + display: none; + } + } + } + + :global(.vtex-button) { + font-size: 0; + background: $black; + width: 49px; + height: 49px; + border: none; + border-radius: 0; + cursor: pointer; + + &:hover { + opacity: 0.8; + } + + :global(.vtex-button__label)::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $white; + padding: 0; + } + } +} + +:global(.vtex-button__label) { + height: fit-content; +} + +// Informações de entrega + +.shippingTable { + display: flex; + flex-direction: column; + border: none; + padding: 4px 0; + + @media screen and (max-width: 1024px) { + margin-bottom: 12px; + } + + .shippingTableHead { + display: flex; + flex-direction: row; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + padding: 0; + } + + .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + text-transform: uppercase; + min-width: 140px; + text-align: left; + + @media screen and (max-width: 540px) { + min-width: 100px; + } + } + + .shippingTableHeadDeliveryEstimate { + font-size: 0; + min-width: 140px; + text-align: left; + + @media screen and (max-width: 540px) { + min-width: 100px; + } + + &::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + } + } + + .shippingTableHeadDeliveryPrice { + font-size: 0; + min-width: 140px; + text-align: left; + + &::after { + content: "PRAZO"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; + + .shippingTableCellDeliveryPrice { + display: flex; + order: 2; + } + } + } + + .shippingTableCell { + padding: 0; + display: flex; + color: $gray-400; + font-weight: 400; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; + + @media screen and (max-width: 540px) { + min-width: 100px; + } + } + } + + .shippingTableRadioBtn { + display: none; + } +} + +// Formulário de produto indisponível + +.subscriberContainer { + + @media (max-width: 1024px) { + margin-top: 24px + } + + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $gray-50; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-50; + } + } + + .form { + width: 100%; + margin: 0; + + .content { + display: grid; + grid-template-areas: + " nome email" + " submit submit"; + justify-content: inherit; + gap: 8px; + + .inputName { + grid-area: nome; + } + + .inputName, + .inputEmail { + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid $gray-800; + + :global(.vtex-styleguide-9-x-input) { + padding: 12px 14px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $gray-800; + + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $gray-800; + } + } + } + } + + .inputEmail { + grid-area: email; + } + + .submit { + grid-area: submit; + width: 100%; + + :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; + background-color: $black; + border: none; + border-radius: 0; + + &:hover { + opacity: 0.8; + } + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $white; + } + } + } + } + } +} + +// Newsletter + +.newsletter { + + display: block; + background: $black; + margin-top: 96px; + + :global(.vtex-store-components-3-x-container) { + margin: auto; + } + + :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 774px; + max-width: 774px; + position: relative; + + @media screen and (max-width: 1024px) { + width: 100%; + max-width: 100%; + padding: 64px 0 32px; + } + + .label { + display: flex; + flex-direction: column; + color: $white; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + color: $gray-500; + + @media screen and (max-width: 1024px) { + font-size: 16px; + line-height: 22px; + } + } + } + + :global(.vtex-store-components-3-x-inputGroup) { + padding-top: 16px; + display: flex; + + :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $gray-500; + border-radius: 0; + border-bottom: 1px solid $gray-500; + background: transparent; + padding: 0; + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } + } + } + } + + .buttonContainer { + padding: 0; + + :global(.vtex-button) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $white; + background-color: transparent; + border: none; + + &:hover { + opacity: 0.8; + } + } + + :global(.vtex-button__label) { + border-bottom: 3px solid $gray-500; + padding: 6px 17px 12px !important; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..cada9fb --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,214 @@ +// Descrição do produto + +:global(.vtex-tab-layout-0-x-container) { + padding: 0 40px; + margin: 0; + + @media screen and (min-width: 1920px) { + margin: 6px 360px; + padding: 0; + } + + // Header descrição do produto + + .listContainer--tabList { + border-bottom: 1px solid $gray-100; + height: 43px; + justify-content: space-between; + padding: 0 64px; + + @media screen and (min-width: 1920px) { + height: 49px; + } + + @media screen and (max-width: 1024px) { + border-top: 1px solid $gray-100; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } + + // Títulos do header da descrição do produto + + .listItem { + @media screen and (max-width: 1024px) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + + :global(.vtex-button) { + border: none; + + @media screen and (max-width: 1024px) { + width: 100%; + } + + &:hover { + background-color: transparent; + } + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: $gray-100; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; + + &:hover { + color: $gray-500; + } + + @media screen and (min-width: 1920px) { + font-size: 24px; + line-height: 24px; + } + + @media screen and (max-width: 1024px) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 18px; + } + } + } + + // Título ativo do header da descrição do produto + + .listItemActive { + @media screen and (max-width: 1024px) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + + :global(.vtex-button) { + background-color: transparent; + width: 114px; + border: none; + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + :global(.vtex-button__label) { + color: $black; + background-color: transparent; + border-bottom: 2px solid $black; + padding: 0; + + &:hover { + color: $black; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + } + + @media screen and (max-width: 1024px) { + border: none; + } + } + } + } + + // Container do conteúdo + + :global(.vtex-tab-layout-0-x-contentContainer) { + .contentItem { + display: flex; + flex-direction: row; + gap: 32px; + align-items: flex-start; + padding: 32px 32px 16px; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 16px; + padding: 16px 0 0 0; + border-bottom: 1px solid $gray-100; + } + + // Imagem da descrição do produto + + .productImagesContainer { + width: 50%; + max-width: 50%; + } + + :global(.vtex-store-components-3-x-productImageTag) { + width: 100%; + max-width: 100%; + display: block; + // max-width: 872px; + + // @media screen and (max-width: 1024px) { + // width: 100% !important; + // max-width: 100%; + // } + } + + // Conteúdo de texto da descrição do produto + + :global(.vtex-rich-text-0-x-container--description-rich-text) { + max-width: 50%; + + @media screen and (max-width: 1024px) { + max-width: 100%; + } + + // Título da descrição do produto + + :global(.vtex-rich-text-0-x-heading) { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: $gray-600; + margin-top: 0; + + @media screen and (min-width: 1920px) { + font-size: 32px; + line-height: 32px; + } + + @media screen and (max-width: 1024px) { + font-size: 20px; + line-height: 32px; + } + } + + // Texto descrição do produto + + :global(.vtex-rich-text-0-x-paragraph) { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $gray-500; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..3a1288a 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,31 +1,35 @@ -$color-black: #292929; +// Colors -$color-white: #fff; +$white: #fff; -$color-gray: #6c6c6c; -$color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; -$color-gray4: #c4c4c4; -$color-gray5: #e5e5e5; +$gray-50: #868686; +$gray-100: #bfbfbf; +$gray-200: #b9b9b9; +$gray-300: #bababa; +$gray-400: #afafaf; +$gray-500: #929292; +$gray-600: #575757; +$gray-700: #202020; +$gray-800: #989898; +$gray-900: #d5d5d5; +$gray-1000: #cccccc; -$color-blue: #4267b2; - -$color-green: #4caf50; +$black: #000000; /* 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;