From 18b7d2dbca58d85aad4994052e9df94c43e2087b Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Mon, 30 Jan 2023 23:52:47 -0300 Subject: [PATCH 1/2] feat: adiciona newsletter, estlizacao e responsividade na pag de produto --- manifest.json | 4 +- react/PixDiscount.tsx | 3 + react/components/Html/styles.css | 62 ++++- react/components/PixDiscount/PixDiscount.tsx | 29 +++ .../components/PixDiscount/styles.module.css | 35 +++ react/typings/css.d.ts | 4 + react/typings/global.d.ts | 7 + react/typings/graphql.d.ts | 6 + react/typings/storefront.d.ts | 15 ++ react/typings/vtex.css-handles.ts | 1 + react/typings/vtex.order-manager.d.ts | 103 ++++++++ react/typings/vtex.render-runtime.d.ts | 38 +++ react/typings/vtex.styleguide.d.ts | 9 + store/blocks/minicart.jsonc | 1 - store/blocks/pdp/product.jsonc | 227 ++++++++++++------ store/interfaces.json | 3 + styles/css/vtex-store-newsletter.css | 32 +++ styles/css/vtex.flex-layout.css | 97 ++++---- styles/css/vtex.product-identifier.css | 2 +- styles/css/vtex.product-quantity.css | 8 +- styles/css/vtex.rich-text.css | 72 +++++- styles/css/vtex.store-components.css | 65 +++-- styles/css/vtex.store-newsletter.css | 94 ++++++++ styles/css/vtex.tab-layout.css | 41 +++- .../sass/pages/product/vtex.flex-layout.scss | 90 +++---- .../pages/product/vtex.product-quantity.scss | 6 +- styles/sass/pages/product/vtex.rich-text.scss | 63 +++++ .../pages/product/vtex.store-components.scss | 42 +++- .../pages/product/vtex.store-newsletter.scss | 77 ++++++ .../sass/pages/product/vtex.tab-layout.scss | 32 ++- styles/sass/utils/_vars.scss | 8 +- 31 files changed, 1063 insertions(+), 213 deletions(-) create mode 100644 react/PixDiscount.tsx create mode 100644 react/components/PixDiscount/PixDiscount.tsx create mode 100644 react/components/PixDiscount/styles.module.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/global.d.ts create mode 100644 react/typings/graphql.d.ts create mode 100644 react/typings/storefront.d.ts create mode 100644 react/typings/vtex.css-handles.ts create mode 100644 react/typings/vtex.order-manager.d.ts create mode 100644 react/typings/vtex.render-runtime.d.ts create mode 100644 react/typings/vtex.styleguide.d.ts create mode 100644 styles/css/vtex-store-newsletter.css create mode 100644 styles/css/vtex.store-newsletter.css create mode 100644 styles/sass/pages/product/vtex.store-newsletter.scss 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/PixDiscount.tsx b/react/PixDiscount.tsx new file mode 100644 index 0000000..f53e7ea --- /dev/null +++ b/react/PixDiscount.tsx @@ -0,0 +1,3 @@ +import PixDiscount from "./components/PixDiscount/PixDiscount"; + +export default PixDiscount; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a19bc6a..b259a58 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,20 +1,76 @@ -@media(min-width:769px){ - [class*="html--buy-button"]{ +/* + CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO +*/ +[class*="html--buy-button"] :global(.vtex-button) { + min-height: 49px; + padding: 12px 64px; + background: #000; + color: #FFF; + border: none; + border-radius: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; display: flex; - } + align-items: center; + text-align: center; } + +[class*="html--buy-button"]{ + display: flex; + margin: 16px 0; +} + +[class*="html--buy-button"] :global(.vtex-button__label) { + padding: 0 !important; +} + @media(max-width: 768px){ [class*="html--buy-button"]{ display: block; + margin: 16px 0; } } +/* + DESCRIÇÃO DO PRODUTO SELECIONADO +*/ [class*="html--image-description"] { margin-right: 16px; width: 100%; } +@media(max-width: 1024px){ + [class*="html--image-description"] { + margin: 0; + } +} + [class*="html--container-description"] { margin: 32px 32px 16px 32px; } +@media(max-width: 1024px){ + [class*="html--container-description"] { + margin: 16px 0; + } +} +/* + NEWSLETTER +*/ +[class*="html--container-form-input"] { + display: flex; + margin-bottom: 16px; + position: relative; + width: 53.75%; +} + +@media(max-width: 1024px){ + [class*="html--container-form-input"] { + display: flex; + padding: 0 40px; + margin-bottom: 32px; + position: relative; + width: 100%; + } +} diff --git a/react/components/PixDiscount/PixDiscount.tsx b/react/components/PixDiscount/PixDiscount.tsx new file mode 100644 index 0000000..0387cb5 --- /dev/null +++ b/react/components/PixDiscount/PixDiscount.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.module.css"; + +const PixDiscount = () => { + + const productContextValue = useProduct(); + const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + const discount = (Number(productPrice) * 10) / 100; + const totalDiscount = Number(productPrice) - Number(discount.toFixed(2)); + + + return ( +
+
+
+ Imagem Pix +
+
+ +
+

R$ {totalDiscount.toFixed(2)}

+

10% de desconto

+
+
+ ) +} + +export default PixDiscount; diff --git a/react/components/PixDiscount/styles.module.css b/react/components/PixDiscount/styles.module.css new file mode 100644 index 0000000..48a71c8 --- /dev/null +++ b/react/components/PixDiscount/styles.module.css @@ -0,0 +1,35 @@ +.wrapper { + display: flex; + margin: 8px 0 16px 0; + height: 39px; +} +.container-img{ + margin-right: 26px; + display: flex; + align-items: center; +} +.figure-pix{ + margin: 0; + height: 24px; +} + +.img-pix { + height: 24px; + width: 100%; +} + +.price-pix{ + margin: 0; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.discount{ + margin: 0; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

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

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 800b870..1366c10 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -3,7 +3,6 @@ "props": { "addToCartFeedback": "customEvent", "customPixelEventId": "add-to-cart-button", - "blockClass": "button", "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fe68660..fd2f18b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#description", - "list-context.product-list#prateleira" + "list-context.product-list#prateleira", + "newsletter-form#container-newsletter" ] }, @@ -21,17 +22,87 @@ }, /* - DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description) + IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO +*/ +"condition-layout.product#availability": { + "props": { + "blockClass": "availability", + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "flex-layout.row#product-main", + "Else": "flex-layout.row#product-availability" + } +}, +"flex-layout.row#product-main": { + "props": { + "blockClass":"main" + }, + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] +}, + +"stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] +}, + +"product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } +}, + +"flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "blockClass": "stack", + "width": "50%", + "rowGap": 0 + } +}, +"flex-layout.row#product-image": { + "children": ["product-images"] +}, +"product-images": { + "props": { + "thumbnailsOrientation": "horizontal", + "showPaginationDots": false, + "showNavigationArrows": false, + "aspectRatio": { + "desktop": "auto", + "phone": "auto" + }, + "displayThumbnailsArrows": true + } +}, + +/* + DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION) */ "html#container-description": { "props": { "tag": "div", "blockClass": "container-description" + }, "children": ["flex-layout.row#product-description"] }, "flex-layout.row#product-description": { + "props": { + "blockClass": "product-description" + }, "children": ["html#image-description", "flex-layout.row#description"] }, @@ -149,92 +220,92 @@ */ "list-context.product-list#prateleira": { "blocks": ["product-summary.shelf#prateleira"], - "children": ["slider-layout#demo-products"] -}, - -"product-summary.shelf#prateleira": { - "children": [ - "stack-layout#prodsum", - "product-summary-name", - "product-list-price", - "product-selling-price" - ] -}, - -/* - IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO -*/ - "condition-layout.product#availability": { - "props": { - "blockClass": "availability", - "conditions": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" - } - }, - "flex-layout.row#product-main": { - "props": { - "blockClass":"main", - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["rich-text#prateleira","slider-layout#prateleira"] }, - "stack-layout": { - "props": { - "blockClass": "product" - }, + "product-summary.shelf#prateleira": { "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" + "stack-layout#prodsum", + "product-summary-name", + "product-list-price", + "product-selling-price" ] }, - "product-specification-badges": { + "rich-text#prateleira": { "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:", + "blockClass": "title-prateleira" + } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "slider-layout#prateleira": { "props": { - "blockClass": "stack", - "width": "50%", - "rowGap": 0 - } - }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { - "props": { - "thumbnailsOrientation": "horizontal", - "showPaginationDots": false, - "showNavigationArrows": false, - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 }, - "displayThumbnailsArrows": true + "infinite": true, + "fullWidth": false, + "blockClass": "prateleira" } }, /* - INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..) + NEWSLETTER + */ + "newsletter-form#container-newsletter": { + "props": { + "blockClass": "container-newsletter" + }, + + "children": [ + "rich-text#subscriber-newsletter", + "rich-text#offer-newsletter", + "html#container-form-input" + ] + }, + + "rich-text#subscriber-newsletter": { + "props": { + "blockClass": "subscriber-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Assine nossa newsletter" + } + }, + + "rich-text#offer-newsletter": { + "props": { + "blockClass": "offer-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Receba ofertas e novidades por e-mail" + } + }, + "html#container-form-input": { + "props": { + "blockClass": "container-form-input" + }, + "children": ["newsletter-input-email", "newsletter-submit"] + }, + + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu e-mail" + } + }, + "newsletter-submit": { + "props": { + "submitButtonLabel": "Enviar" + } + }, + + /* + INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..) */ "flex-layout.col#right-col": { "props": { @@ -247,6 +318,7 @@ "product-identifier.product", "flex-layout.row#selling-price", "product-installments#parcelaProduct", + "pix-discount", "availability-subscriber", "sku-selector", "html#buy-button", @@ -263,6 +335,7 @@ "product-installments#parcelaProduct": { "props": { + "installmentsCriteria": "max-quantity-without-interest", "markers": ["discount", "x"], "blockClass": "divider", "message": "{installmentsNumber} x de {installmentValue} sem juros" @@ -288,12 +361,12 @@ "children": ["product-quantity","add-to-cart-button"] }, + /* + ASSINANTES DE PRODUTOS INDISPONIVEIS + */ "flex-layout.row#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability" }, "children": [ "flex-layout.col#stack", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..085dfaf 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-discount": { + "component": "PixDiscount" } } diff --git a/styles/css/vtex-store-newsletter.css b/styles/css/vtex-store-newsletter.css new file mode 100644 index 0000000..2609326 --- /dev/null +++ b/styles/css/vtex-store-newsletter.css @@ -0,0 +1,32 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000000; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid #fff; + width: 100%; + margin-bottom: 16px; + position: relative; +} +.emailInputContainer :global(.vtex-input-prefix__group) { + border: none; +} +.emailInputContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5c4d12b..49e614c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,76 +8,87 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* PREÇO PRINCIPAL DO PRODUTO */ +.flexRowContent--selling-price { + margin: 0; +} + /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .flexRowContent--main { display: block; } } -.flexRowContent--main .flexCol--stack { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth { + width: 100% !important; + } +} +.flexRowContent--main .stretchChildrenWidth .flexCol--stack { padding-left: 40px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--main .flexCol--stack { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth .flexCol--stack { padding: 0 40px; width: 100%; } } -.flexRowContent--main .flexCol--right-col { +.flexRowContent--main .stretchChildrenWidth .flexCol--right-col { padding-right: 40px; margin-left: 16px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--main .flexCol--right-col { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth .flexCol--right-col { padding: 0 40px; margin-left: 0; } } /* ASSINANTE DE PRODUTO INDISPONIVEL */ -.flexRowContent--message-availability { +.flexRowContent--product-availability { + padding: 0; + margin: 0; + padding: 0 40px; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability { + display: block; + } +} +.flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding: 0; + display: flex; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } +} +.flexRowContent--product-availability .flexCol--info-availability { + margin-left: 16px; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability .flexCol--info-availability { + margin: 0; + } +} +.flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { width: 375px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--message-availability { +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { width: 100%; } } -/* BOTAO DE ADICIONAR A SACOLA */ -.flexRowContent { - padding: 0; - margin: 0; +/* DESCRIÇÃO DO PRODUTO */ +@media only screen and (max-width: 1024px) { + .flexRowContent--product-description { + display: block; + } } -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { - padding: 0; - display: flex; -} -@media only screen and (max-width: 1023px) { - .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { +@media only screen and (max-width: 1024px) { + .flexRowContent--product-description .stretchChildrenWidth { width: 100% !important; } -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { - background-color: black; - border: none; - height: 49px; - margin-top: 8px; -} -@media only screen and (max-width: 767px) { - .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { - margin: 0 0 16px; - height: auto; - } -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - font-size: 0; -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { - font-family: "Open sans", sans-serif; - content: "ADICIONAR À SACOLA"; - font-size: 18px; - font-weight: 400; - padding: 12px 64px; - line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index d074a22..7ebd1ef 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -16,7 +16,7 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .product-identifier--productReference { justify-content: start; margin-bottom: 24px; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 00b2514..e8765a0 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,14 +10,12 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - margin-top: 8px; - margin-bottom: 16px; width: 149px; - margin-right: 10px; + margin: 0 10px 0 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .quantitySelectorContainer { - margin-bottom: 10px; + margin: 0 0 10px 0; } } .quantitySelectorContainer .quantitySelectorTitle { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..b0921a2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,74 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +/* + PRATELEIRA DE PRODUTO +*/ +.paragraph--title-prateleira { + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: 0 0 32px; + color: #575757; +} +@media only screen and (max-width: 1024px) { + .paragraph--title-prateleira { + margin: 0 0 24px; + } +} +@media only screen and (max-width: 768px) { + .paragraph--title-prateleira { + margin: 0 0 16px; + } +} + +/* + NEWSLETTER +*/ +.container--subscriber-newsletter { + justify-content: center; + width: 100%; + margin: 32px 0 16px 0; + padding: 0 40px; +} +@media only screen and (max-width: 1024px) { + .container--subscriber-newsletter { + margin: 64px 0 16px 0; + } +} +.container--subscriber-newsletter .wrapper--subscriber-newsletter { + align-items: center; +} +.container--subscriber-newsletter .wrapper--subscriber-newsletter .paragraph--subscriber-newsletter { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.container--offer-newsletter { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 16px; + padding: 0 40px; +} +.container--offer-newsletter .wrapper--offer-newsletter { + display: flex; + align-items: center; +} +.container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media only screen and (max-width: 1024px) { + .container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter { + font-size: 16px; + line-height: 22px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 066c8fa..4239de1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,24 +9,39 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0; max-width: 100%; + padding: 0; + margin: 0; } /*IMAGEM PRINCIPAL DO PRODUTO */ -.productImage { +@media only screen and (max-width: 1024px) { + .productImagesGallerySlide { + margin: 0; + } +} +.productImagesGallerySlide .productImage { margin-right: 16px; } -.productImage .productImageTag { +@media only screen and (max-width: 1024px) { + .productImagesGallerySlide .productImage { + margin: 0; + } +} +.productImagesGallerySlide .productImage .productImageTag { width: 100%; max-height: 100% !important; object-fit: contain; } - /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { margin: 16px 0; } +@media only screen and (max-width: 768px) { + .carouselGaleryThumbs { + display: block; + } +} .carouselGaleryThumbs .thumbImg { width: 90px; height: 90px; @@ -49,7 +64,7 @@ line-height: 34px; color: #575757; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .productNameContainer--quickview { text-align: start; } @@ -156,7 +171,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ width: 374.65px; margin-top: 16px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) { width: 100%; max-width: 100%; @@ -167,7 +182,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin-right: 10.08px; margin-bottom: 15px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { width: 49%; } @@ -191,7 +206,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-weight: 400; margin-bottom: 15px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { width: -webkit-fill-available; margin: 0 0 0 8px; @@ -239,7 +254,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingContainer { display: flex; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer { display: block; position: relative; @@ -250,7 +265,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ align-items: center; padding: 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { display: block; } @@ -270,7 +285,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 49px; border-radius: 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { width: 100%; } @@ -285,7 +300,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 16px; text-decoration: underline; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { left: 0; margin-top: 8px; @@ -301,20 +316,22 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingContainer :global(.vtex-button) { height: 49px; width: 49px; - margin-top: auto !important; + margin-top: 27px !important; position: relative; right: 148px; font-size: 0; border-radius: 0; + background-color: #000000; + border: none; cursor: pointer; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-button) { height: 49px !important; margin: 0 !important; position: absolute; - right: 0px; - top: 26px; + right: 0; + top: 27px; } } .shippingContainer :global(.vtex-button)::before { @@ -350,7 +367,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 19px; color: #202020; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { margin-right: 32px; } @@ -367,7 +384,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-size: 0; margin-right: 30px; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { margin-right: 32px; } @@ -391,7 +408,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 16px; color: #afafaf; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { margin-right: 22px; } @@ -428,6 +445,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .productDescriptionContainer { margin-left: 16px; } +@media only screen and (max-width: 1024px) { + .productDescriptionContainer { + margin: 0; + } +} .productDescriptionContainer .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -436,6 +458,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin-bottom: 8px; color: #575757; } +@media only screen and (max-width: 1024px) { + .productDescriptionContainer .productDescriptionTitle { + margin-top: 16px; + } +} .productDescriptionContainer .productDescriptionText { font-weight: 400; font-size: 16px; diff --git a/styles/css/vtex.store-newsletter.css b/styles/css/vtex.store-newsletter.css new file mode 100644 index 0000000..7c6d545 --- /dev/null +++ b/styles/css/vtex.store-newsletter.css @@ -0,0 +1,94 @@ +/* +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 */ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000000; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid #929292; + width: 100%; + position: relative; + height: 32px; +} +.emailInputContainer :global(.vtex-input) { + display: flex; + width: 100%; + height: 32px; +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + right: 0; + margin-right: 16px; +} +@media only screen and (max-width: 768px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input__error) { + width: 100%; + top: 32px; + left: 18px; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + width: 100%; +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0 0 7px 0; + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} +@media only screen and (max-width: 1024px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0 0 16px 16px; + } +} +@media only screen and (max-width: 768px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0 0 16px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } +} + +.formSubmitContainer { + height: 32px; + border-bottom: 3px solid #bfbfbf; +} +@media only screen and (max-width: 1024px) { + .formSubmitContainer { + right: 40px; + } +} +.formSubmitContainer :global(.vtex-button) { + background-color: transparent; + border: none; + display: flex; +} +.formSubmitContainer :global(.vtex-button) :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + padding: 0 16px 13px 16px; + padding-top: 0 !important; + padding-bottom: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4732012..f9e2f13 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -16,18 +16,39 @@ border-bottom: 1px solid #b9b9b9; justify-content: space-between; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer { + padding: 0; + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-top: 16px; + padding-top: 16px; + } +} .container--description .listContainer .listItem { margin: 0; padding: 0; height: 38px; width: 114px; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem { + width: 100%; + margin-bottom: 16px; + } +} .container--description .listContainer .listItem :global(.vtex-button) { background-color: transparent; border: none; color: #bfbfbf; width: 100%; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) { + display: flex; + justify-content: flex-start; + } +} .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0 !important; height: 38px; @@ -35,8 +56,26 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; + border-bottom: 2px solid transparent; } .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { - color: black; + color: #000000; border-bottom: 2px solid #000000; +} +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { + border-bottom: none; + } +} +.container--description .listContainer .listItemActive { + color: #000000; + border-bottom: 2px solid #000000; +} +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItemActive { + border-bottom: none; + } +} +.container--description .listContainer .listItemActive :global(.vtex-button) { + color: #000000; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 0c0916a..821c251 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,65 +1,73 @@ +/* PREÇO PRINCIPAL DO PRODUTO */ +.flexRowContent--selling-price { + margin: 0; +} + /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ .flexRowContent--main { @include mq(md, max) { display: block; } - .flexCol--stack { - padding-left: 40px; + .stretchChildrenWidth { @include mq(md, max) { - padding: 0 40px; - width: 100%; + width: 100% !important; } - } - .flexCol--right-col { - padding-right: 40px; - margin-left: 16px; - @include mq(md, max) { - padding: 0 40px; - margin-left: 0; + .flexCol--stack { + padding-left: 40px; + @include mq(md, max) { + padding: 0 40px; + width: 100%; + } + } + .flexCol--right-col { + padding-right: 40px; + margin-left: 16px; + @include mq(md, max) { + padding: 0 40px; + margin-left: 0; + } } } } /* ASSINANTE DE PRODUTO INDISPONIVEL */ -.flexRowContent--message-availability { - width: 375px; - @include mq(md, max) { - width: 100%; - } -} - -/* BOTAO DE ADICIONAR A SACOLA */ -.flexRowContent { +.flexRowContent--product-availability { padding: 0; margin: 0; + padding: 0 40px; + @include mq(md, max) { + display: block; + } :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { padding: 0; display: flex; @include mq(md, max) { width: 100% !important; } - :global(.vtex-button) { - background-color: black; - border: none; - height: 49px; - margin-top: 8px; - @include mq(sm, max) { - margin: 0 0 16px; - height: auto; - } - :global(.vtex-button__label) { - :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - font-size: 0; - &::after { - font-family: "Open sans", sans-serif; - content: "ADICIONAR À SACOLA"; - font-size: 18px; - font-weight: 400; - padding: 12px 64px; - line-height: 22px; - } - } + } + + .flexCol--info-availability { + margin-left: 16px; + @include mq(md, max) { + margin: 0; + } + .flexRowContent--message-availability { + width: 375px; + @include mq(md, max) { + width: 100%; } } } } + +/* DESCRIÇÃO DO PRODUTO */ +.flexRowContent--product-description { + @include mq(md, max) { + display: block; + } + .stretchChildrenWidth { + @include mq(md, max) { + width: 100% !important; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index d151f90..2d1a27d 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,12 +1,10 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - margin-top: 8px; - margin-bottom: 16px; width: 149px; - margin-right: 10px; + margin: 0 10px 0 0; @include mq(sm, max) { - margin-bottom: 10px; + margin: 0 0 10px 0; } .quantitySelectorTitle { display: none; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..dc59baa 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,63 @@ +/* + PRATELEIRA DE PRODUTO +*/ +.paragraph--title-prateleira { + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: 0 0 32px; + color: $color-gray13; + @include mq(md, max) { + margin: 0 0 24px; + } + + @include mq(sm, max) { + margin: 0 0 16px; + } +} + +/* + NEWSLETTER +*/ +.container--subscriber-newsletter { + justify-content: center; + width: 100%; + margin: 32px 0 16px 0; + padding: 0 40px; + @include mq(md, max) { + margin: 64px 0 16px 0; + } + .wrapper--subscriber-newsletter { + align-items: center; + .paragraph--subscriber-newsletter { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; + } + } +} + +.container--offer-newsletter { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 16px; + padding: 0 40px; + .wrapper--offer-newsletter { + display: flex; + align-items: center; + .paragraph--offer-newsletter { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray14; + @include mq(md, max) { + font-size: 16px; + line-height: 22px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7555852..ec37454 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,21 +1,35 @@ .container { - padding: 0; max-width: 100%; + padding: 0; + margin: 0; } /*IMAGEM PRINCIPAL DO PRODUTO */ -.productImage { - margin-right: 16px; - .productImageTag { - width: 100%; - max-height: 100% !important; - object-fit: contain; +.productImagesGallerySlide { + @include mq(md, max) { + margin: 0; + } + .productImage { + margin-right: 16px; + @include mq(md, max) { + margin: 0; + } + .productImageTag { + width: 100%; + max-height: 100% !important; + object-fit: contain; + @include mq(sm, max) { + } + } } } /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { margin: 16px 0; + @include mq(sm, max) { + display: block; + } .thumbImg { width: 90px; @@ -302,19 +316,21 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ :global(.vtex-button) { height: 49px; width: 49px; - margin-top: auto !important; + margin-top: 27px !important; position: relative; right: 148px; font-size: 0; border-radius: 0; + background-color: $color-black-padrao; + border: none; cursor: pointer; @include mq(sm, max) { height: 49px !important; margin: 0 !important; position: absolute; - right: 0px; - top: 26px; + right: 0; + top: 27px; } &::before { content: "OK"; @@ -430,6 +446,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* DESCRIÇÃO DO PRODUTO */ .productDescriptionContainer { margin-left: 16px; + @include mq(md, max) { + margin: 0; + } .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -437,6 +456,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 40px; margin-bottom: 8px; color: $color-gray13; + @include mq(md, max) { + margin-top: 16px; + } } .productDescriptionText { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.store-newsletter.scss b/styles/sass/pages/product/vtex.store-newsletter.scss new file mode 100644 index 0000000..f6bcfac --- /dev/null +++ b/styles/sass/pages/product/vtex.store-newsletter.scss @@ -0,0 +1,77 @@ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: $color-black-padrao; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid $color-gray14; + width: 100%; + position: relative; + height: 32px; + :global(.vtex-input) { + display: flex; + width: 100%; + height: 32px; + :global(.vtex-input__error) { + position: absolute; + right: 0; + margin-right: 16px; + @include mq(sm, max) { + width: 100%; + top: 32px; + left: 18px; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } + } + :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + width: 100%; + :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0 0 7px 0; + color: $color-white; + font-weight: 400; + font-size: 18px; + line-height: 25px; + @include mq(md, max) { + padding: 0 0 16px 16px; + } + @include mq(sm, max) { + padding: 0 0 16px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + } + } +} + +.formSubmitContainer { + height: 32px; + border-bottom: 3px solid $color-gray12; + @include mq(md, max) { + right: 40px; + } + :global(.vtex-button) { + background-color: transparent; + border: none; + display: flex; + :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + padding: 0 16px 13px 16px; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 2ae2070..57ebfc2 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,17 +5,32 @@ padding: 0 80px; border-bottom: 1px solid $color-gray11; justify-content: space-between; + @include mq(md, max) { + padding: 0; + flex-direction: column; + border-top: 1px solid $color-gray11; + margin-top: 16px; + padding-top: 16px; + } .listItem { margin: 0; padding: 0; height: 38px; width: 114px; + @include mq(md, max) { + width: 100%; + margin-bottom: 16px; + } :global(.vtex-button) { background-color: transparent; border: none; color: $color-gray12; width: 100%; + @include mq(md, max) { + display: flex; + justify-content: flex-start; + } :global(.vtex-button__label) { padding: 0 !important; @@ -24,12 +39,27 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; + border-bottom: 2px solid transparent; &:hover { - color: black; + color: $color-black-padrao; border-bottom: 2px solid $color-black-padrao; + @include mq(md, max) { + border-bottom: none; + } } } } } + + .listItemActive { + color: $color-black-padrao; + border-bottom: 2px solid $color-black-padrao; + @include mq(md, max) { + border-bottom: none; + } + :global(.vtex-button) { + color: $color-black-padrao; + } + } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index d8b21c2..a4a08a0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -27,10 +27,10 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 768px, - md: 1024px, - lg: 1920px, - xl: 1921px, + sm: 769px, + md: 1025px, + lg: 1921px, + xl: 1922px, ) !default; $z-index: ( From 753c9494fa8fa7defcd98a29b493654970e8d476 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Wed, 1 Feb 2023 01:45:09 -0300 Subject: [PATCH 2/2] feat: adiciona testeId em blocos e responsividade na pagina de produto --- react/components/Html/styles.css | 13 +- store/blocks/pdp/product.jsonc | 126 +++++++++++++++--- styles/css/vtex.flex-layout.css | 24 ++++ styles/css/vtex.product-quantity.css | 2 +- styles/css/vtex.store-components.css | 50 +++++-- styles/css/vtex.store-footer.css | 25 ++-- styles/css/vtex.store-newsletter.css | 10 +- styles/css/vtex.tab-layout.css | 20 ++- .../sass/pages/footer/vtex.store-footer.scss | 4 + .../sass/pages/product/vtex.flex-layout.scss | 24 ++++ .../pages/product/vtex.product-quantity.scss | 2 +- .../pages/product/vtex.store-components.scss | 70 ++++++---- .../pages/product/vtex.store-newsletter.scss | 10 +- .../sass/pages/product/vtex.tab-layout.scss | 14 +- styles/sass/utils/_vars.scss | 4 +- 15 files changed, 313 insertions(+), 85 deletions(-) create mode 100644 styles/sass/pages/footer/vtex.store-footer.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b259a58..a4f1b1a 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,6 +1,7 @@ /* CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO */ + [class*="html--buy-button"] :global(.vtex-button) { min-height: 49px; padding: 12px 64px; @@ -32,6 +33,11 @@ } } +[class*="html--product-quantity"] { + width: 128px; + margin-right: 10px; +} + /* DESCRIÇÃO DO PRODUTO SELECIONADO */ @@ -47,7 +53,7 @@ [class*="html--container-description"] { - margin: 32px 32px 16px 32px; + margin: 32px 32px 0px 32px; } @media(max-width: 1024px){ [class*="html--container-description"] { @@ -63,14 +69,11 @@ margin-bottom: 16px; position: relative; width: 53.75%; + padding: 0 40px; } @media(max-width: 1024px){ [class*="html--container-form-input"] { - display: flex; - padding: 0 40px; - margin-bottom: 32px; - position: relative; width: 100%; } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fd2f18b..9ae6b63 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,7 +5,7 @@ "condition-layout.product#availability", "tab-layout#description", "list-context.product-list#prateleira", - "newsletter-form#container-newsletter" + "flex-layout.row#newsletter-container" ] }, @@ -24,6 +24,7 @@ /* IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO */ + "condition-layout.product#availability": { "props": { "blockClass": "availability", @@ -72,8 +73,16 @@ } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] +}, + +"html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "thumbnailsOrientation": "horizontal", @@ -112,7 +121,21 @@ "testId": "product-images", "blockClass": "image-description" }, - "children": ["image#product"] + "children": ["html#product-image"] + }, + + "html#product-image":{ + "props": { + "testId": "product-images" + }, + "children": ["product-images#description"] + }, + + "product-images#description":{ + "props": { + "blockClass": "description", + "displayMode": "first-image" + } }, "image#product": { @@ -220,19 +243,45 @@ */ "list-context.product-list#prateleira": { "blocks": ["product-summary.shelf#prateleira"], - "children": ["rich-text#prateleira","slider-layout#prateleira"] + "children": ["rich-text#title-prateleira","slider-layout#prateleira"] }, "product-summary.shelf#prateleira": { + "children": ["html#product-summary"] + }, + + "html#product-summary": { + "props":{ + "testId": "vtex-product-summary", + "blockClass": "product-summary" + }, "children": [ "stack-layout#prodsum", - "product-summary-name", - "product-list-price", - "product-selling-price" + "product-summary-name#name-prateleira", + "product-list-price#promotion-prateleira", + "product-selling-price#price-prateleira" ] }, - "rich-text#prateleira": { + "product-summary-name#name-prateleira": { + "props": { + "blockClass": "name-prateleira" + } + }, + + "product-list-price#promotion-prateleira":{ + "props": { + "blockClass": "promotion-prateleira" + } + }, + + "product-selling-price#price-prateleira":{ + "props": { + "blockClass": "price-prateleira" + } + }, + + "rich-text#title-prateleira": { "props": { "textAlignment": "CENTER", "textPosition": "CENTER", @@ -246,7 +295,7 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "fullWidth": false, @@ -257,19 +306,22 @@ /* NEWSLETTER */ - "newsletter-form#container-newsletter": { - "props": { - "blockClass": "container-newsletter" - }, - "children": [ - "rich-text#subscriber-newsletter", - "rich-text#offer-newsletter", - "html#container-form-input" - ] + "flex-layout.row#newsletter-container":{ + "props":{ + "blockClass": "newsletter-container" + }, + "children": ["flex-layout.row#text-newsletter","newsletter-form#container-newsletter"] }, - "rich-text#subscriber-newsletter": { + "flex-layout.row#text-newsletter":{ + "props": { + "blockClass": "text-newsletter" + }, + "children": ["rich-text#newsletter-title","rich-text#offer-newsletter" ] + }, + + "rich-text#newsletter-title": { "props": { "blockClass": "subscriber-newsletter", "textAlignment": "center", @@ -286,6 +338,16 @@ "text": "Receba ofertas e novidades por e-mail" } }, + + "newsletter-form#container-newsletter": { + "props": { + "blockClass": "container-newsletter" + }, + "children": [ + "html#container-form-input" + ] + }, + "html#container-form-input": { "props": { "blockClass": "container-form-input" @@ -318,9 +380,9 @@ "product-identifier.product", "flex-layout.row#selling-price", "product-installments#parcelaProduct", - "pix-discount", + "html#pix-discount", "availability-subscriber", - "sku-selector", + "html#sku-selector", "html#buy-button", "shipping-simulator" ] @@ -342,6 +404,20 @@ } }, + "html#pix-discount":{ + "props": { + "testId": "pix-price" + }, + "children": ["pix-discount"] + }, + + "html#sku-selector":{ + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "blockClass": "sku-selector", @@ -358,7 +434,15 @@ "testId": "buy-button", "blockClass": "buy-button" }, - "children": ["product-quantity","add-to-cart-button"] + "children": ["html#product-quantity","add-to-cart-button"] + }, + + "html#product-quantity":{ + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity"] }, /* diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 49e614c..f72126c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -91,4 +91,28 @@ .flexRowContent--product-description .stretchChildrenWidth { width: 100% !important; } +} + +/* NEWSLETTER */ +.flexRow--newsletter-container { + display: flex; + align-items: center; + width: 100%; + background-color: #000000; +} +.flexRow--newsletter-container .flexRowContent--newsletter-container { + display: flex; + flex-direction: column; +} +.flexRow--newsletter-container .flexRowContent--newsletter-container .stretchChildrenWidth { + width: 100% !important; +} +.flexRow--newsletter-container .flexRowContent--newsletter-container .flexRowContent--text-newsletter { + display: flex; + flex-direction: column; +} + +/* CORREÇÃO BUG SCROLL DA PAG */ +:global(.vtex-store-footer) { + margin: 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e8765a0..8fa6cf2 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,7 +10,7 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - width: 149px; + width: 100%; margin: 0 10px 0 0; } @media only screen and (max-width: 768px) { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4239de1..61fb3af 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,6 +9,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { + width: 100%; max-width: 100%; padding: 0; margin: 0; @@ -28,11 +29,10 @@ margin: 0; } } -.productImagesGallerySlide .productImage .productImageTag { - width: 100%; +.productImagesGallerySlide .productImage .productImageTag--main { max-height: 100% !important; - object-fit: contain; } + /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { margin: 16px 0; @@ -223,6 +223,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 28px; color: #929292; } +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input__error) { + position: absolute; + bottom: 40px; + right: 0; + margin: 0; +} .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit { width: 100%; margin-bottom: 16px; @@ -237,6 +243,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ display: flex; align-items: center; justify-content: center; + cursor: pointer; } .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { content: "AVISE-ME"; @@ -270,26 +277,32 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ display: block; } } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { font-size: 0; } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { content: "CALCULAR FRETE"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { width: 280px; height: 49px; border-radius: 0; } @media only screen and (max-width: 768px) { - .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { width: 100%; } } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; margin-top: 25px; @@ -437,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } /* IMAGEM DA DESCRIÇÃO DO PRODUTO */ -.imageElement { - width: 100%; +.productImageTag--description { + max-height: 100% !important; } /* DESCRIÇÃO DO PRODUTO */ @@ -460,7 +473,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } @media only screen and (max-width: 1024px) { .productDescriptionContainer .productDescriptionTitle { - margin-top: 16px; + font-size: 20px; + } +} +@media only screen and (min-width: 1921px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; } } .productDescriptionContainer .productDescriptionText { @@ -468,4 +486,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-size: 16px; line-height: 22px; color: #929292; +} +@media only screen and (max-width: 1024px) { + .productDescriptionContainer .productDescriptionText { + font-size: 14px; + line-height: 19px; + } +} +@media only screen and (min-width: 1921px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..60c1d76 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,14 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +@charset "UTF-8"; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +/* CORREÇÃO BUG DE SCROLL NA PAGINA */ +.socialNetworksContainer { + margin: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-newsletter.css b/styles/css/vtex.store-newsletter.css index 7c6d545..d1a727d 100644 --- a/styles/css/vtex.store-newsletter.css +++ b/styles/css/vtex.store-newsletter.css @@ -13,7 +13,6 @@ justify-content: center; align-items: center; background-color: #000000; - margin-top: 64px; position: relative; } @@ -35,9 +34,6 @@ } @media only screen and (max-width: 768px) { .emailInputContainer :global(.vtex-input) :global(.vtex-input__error) { - width: 100%; - top: 32px; - left: 18px; font-size: 12px; line-height: 16px; font-weight: 400; @@ -91,4 +87,10 @@ padding: 0 16px 13px 16px; padding-top: 0 !important; padding-bottom: 0 !important; +} + +.defaultSuccessMessage { + color: white; + margin: 0 0 16px 0; + text-align: center; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index f9e2f13..8269c67 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,10 +9,11 @@ /* Grid breakpoints */ .container--description { padding: 0 40px; + margin: 16px 0; } .container--description .listContainer { display: flex; - padding: 0 80px; + padding: 0 64px; border-bottom: 1px solid #b9b9b9; justify-content: space-between; } @@ -37,6 +38,11 @@ margin-bottom: 16px; } } +@media only screen and (min-width: 1921px) { + .container--description .listContainer .listItem { + width: 142px; + } +} .container--description .listContainer .listItem :global(.vtex-button) { background-color: transparent; border: none; @@ -58,6 +64,13 @@ text-transform: capitalize; border-bottom: 2px solid transparent; } +@media only screen and (min-width: 1921px) { + .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-size: 24px; + line-height: 38px; + border-bottom: 3px solid transparent; + } +} .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { color: #000000; border-bottom: 2px solid #000000; @@ -76,6 +89,11 @@ border-bottom: none; } } +@media only screen and (min-width: 1921px) { + .container--description .listContainer .listItemActive { + border-bottom: 3px solid #000000; + } +} .container--description .listContainer .listItemActive :global(.vtex-button) { color: #000000; } \ No newline at end of file diff --git a/styles/sass/pages/footer/vtex.store-footer.scss b/styles/sass/pages/footer/vtex.store-footer.scss new file mode 100644 index 0000000..4618a7f --- /dev/null +++ b/styles/sass/pages/footer/vtex.store-footer.scss @@ -0,0 +1,4 @@ +/* CORREÇÃO BUG DE SCROLL NA PAGINA */ +.socialNetworksContainer { + margin: 0 !important; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 821c251..5d19c48 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -71,3 +71,27 @@ } } } + +/* NEWSLETTER */ +.flexRow--newsletter-container { + display: flex; + align-items: center; + width: 100%; + background-color: $color-black-padrao; + .flexRowContent--newsletter-container { + display: flex; + flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + } + .flexRowContent--text-newsletter { + display: flex; + flex-direction: column; + } + } +} + +/* CORREÇÃO BUG SCROLL DA PAG */ +:global(.vtex-store-footer) { + margin: 0 !important; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 2d1a27d..82e050a 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,7 +1,7 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - width: 149px; + width: 100%; margin: 0 10px 0 0; @include mq(sm, max) { margin: 0 0 10px 0; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ec37454..0595ee3 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,4 +1,5 @@ .container { + width: 100%; max-width: 100%; padding: 0; margin: 0; @@ -14,12 +15,8 @@ @include mq(md, max) { margin: 0; } - .productImageTag { - width: 100%; + .productImageTag--main { max-height: 100% !important; - object-fit: contain; - @include mq(sm, max) { - } } } } @@ -228,6 +225,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ color: $color-gray-6; } } + :global(.vtex-input__error) { + position: absolute; + bottom: 40px; + right: 0; + margin: 0; + } } .submit { width: 100%; @@ -242,6 +245,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ display: flex; align-items: center; justify-content: center; + cursor: pointer; &::before { content: "AVISE-ME"; color: $color-white; @@ -273,24 +277,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ @include mq(sm, max) { display: block; } - :global(.vtex-input__label) { - font-size: 0; - &::before { - content: "CALCULAR FRETE"; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-gray-6; - } - } - :global(.vtex-input-prefix__group) { - width: 280px; - height: 49px; - border-radius: 0; - @include mq(sm, max) { - width: 100%; + :global(.vtex-input) { + position: relative; + :global(.vtex-input__label) { + font-size: 0; + &::before { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + } + } + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + @include mq(sm, max) { + width: 100%; + } + } + :global(.vtex-input__error) { + position: absolute; } } + :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; margin-top: 25px; @@ -439,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } /* IMAGEM DA DESCRIÇÃO DO PRODUTO */ -.imageElement { - width: 100%; +.productImageTag--description { + max-height: 100% !important; } /* DESCRIÇÃO DO PRODUTO */ @@ -457,7 +468,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin-bottom: 8px; color: $color-gray13; @include mq(md, max) { - margin-top: 16px; + font-size: 20px; + } + @include mq(xl, min) { + font-size: 32px; } } .productDescriptionText { @@ -465,5 +479,13 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-size: 16px; line-height: 22px; color: $color-gray14; + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + } + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } } } diff --git a/styles/sass/pages/product/vtex.store-newsletter.scss b/styles/sass/pages/product/vtex.store-newsletter.scss index f6bcfac..4129e13 100644 --- a/styles/sass/pages/product/vtex.store-newsletter.scss +++ b/styles/sass/pages/product/vtex.store-newsletter.scss @@ -4,7 +4,6 @@ justify-content: center; align-items: center; background-color: $color-black-padrao; - margin-top: 64px; position: relative; } @@ -22,9 +21,6 @@ right: 0; margin-right: 16px; @include mq(sm, max) { - width: 100%; - top: 32px; - left: 18px; font-size: 12px; line-height: 16px; font-weight: 400; @@ -75,3 +71,9 @@ } } } + +.defaultSuccessMessage { + color: white; + margin: 0 0 16px 0; + text-align: center; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 57ebfc2..fd46af1 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,8 +1,9 @@ .container--description { padding: 0 40px; + margin: 16px 0; .listContainer { display: flex; - padding: 0 80px; + padding: 0 64px; border-bottom: 1px solid $color-gray11; justify-content: space-between; @include mq(md, max) { @@ -21,6 +22,9 @@ width: 100%; margin-bottom: 16px; } + @include mq(xl, min) { + width: 142px; + } :global(.vtex-button) { background-color: transparent; @@ -40,6 +44,11 @@ line-height: 38px; text-transform: capitalize; border-bottom: 2px solid transparent; + @include mq(xl, min) { + font-size: 24px; + line-height: 38px; + border-bottom: 3px solid transparent; + } &:hover { color: $color-black-padrao; border-bottom: 2px solid $color-black-padrao; @@ -57,6 +66,9 @@ @include mq(md, max) { border-bottom: none; } + @include mq(xl, min) { + border-bottom: 3px solid $color-black-padrao; + } :global(.vtex-button) { color: $color-black-padrao; } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index a4a08a0..948e5ab 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -29,8 +29,8 @@ $grid-breakpoints: ( cstm: 400, sm: 769px, md: 1025px, - lg: 1921px, - xl: 1922px, + lg: 1920px, + xl: 1921px, ) !default; $z-index: (