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..a4f1b1a 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,20 +1,79 @@
-@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;
}
}
+[class*="html--product-quantity"] {
+ width: 128px;
+ margin-right: 10px;
+}
+
+/*
+ DESCRIÇÃO DO PRODUTO SELECIONADO
+*/
[class*="html--image-description"] {
margin-right: 16px;
width: 100%;
}
-
-[class*="html--container-description"] {
- margin: 32px 32px 16px 32px;
+@media(max-width: 1024px){
+ [class*="html--image-description"] {
+ margin: 0;
+ }
}
+
+[class*="html--container-description"] {
+ margin: 32px 32px 0px 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%;
+ padding: 0 40px;
+}
+
+@media(max-width: 1024px){
+ [class*="html--container-form-input"] {
+ 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 (
+
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..9ae6b63 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",
+ "flex-layout.row#newsletter-container"
]
},
@@ -21,17 +22,96 @@
},
/*
- 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": ["html#product-images"]
+},
+
+"html#product-images": {
+ "props": {
+ "testId": "product-images"
+ },
+ "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"]
},
@@ -41,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": {
@@ -149,92 +243,131 @@
*/
"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#title-prateleira","slider-layout#prateleira"]
},
- "stack-layout": {
- "props": {
- "blockClass": "product"
+ "product-summary.shelf#prateleira": {
+ "children": ["html#product-summary"]
+ },
+
+ "html#product-summary": {
+ "props":{
+ "testId": "vtex-product-summary",
+ "blockClass": "product-summary"
},
"children": [
- "flex-layout.row#product-image",
- "product-bookmark",
- "product-specification-badges"
+ "stack-layout#prodsum",
+ "product-summary-name#name-prateleira",
+ "product-list-price#promotion-prateleira",
+ "product-selling-price#price-prateleira"
]
},
- "product-specification-badges": {
+ "product-summary-name#name-prateleira": {
"props": {
- "specificationGroupName": "Group",
- "specificationName": "On Sale",
- "visibleWhen": "True",
- "displayValue": "SPECIFICATION_NAME"
+ "blockClass": "name-prateleira"
}
},
- "flex-layout.col#stack": {
- "children": ["stack-layout"],
+ "product-list-price#promotion-prateleira":{
"props": {
- "blockClass": "stack",
- "width": "50%",
- "rowGap": 0
+ "blockClass": "promotion-prateleira"
}
},
- "flex-layout.row#product-image": {
- "children": ["product-images"]
- },
- "product-images": {
+
+ "product-selling-price#price-prateleira":{
"props": {
- "thumbnailsOrientation": "horizontal",
- "showPaginationDots": false,
- "showNavigationArrows": false,
- "aspectRatio": {
- "desktop": "auto",
- "phone": "16:9"
+ "blockClass": "price-prateleira"
+ }
+ },
+
+ "rich-text#title-prateleira": {
+ "props": {
+ "textAlignment": "CENTER",
+ "textPosition": "CENTER",
+ "text": "Você também pode gostar:",
+ "blockClass": "title-prateleira"
+ }
+ },
+
+ "slider-layout#prateleira": {
+ "props": {
+ "itemsPerPage": {
+ "desktop": 4,
+ "tablet": 3,
+ "phone": 2
},
- "displayThumbnailsArrows": true
+ "infinite": true,
+ "fullWidth": false,
+ "blockClass": "prateleira"
}
},
/*
- INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
+ NEWSLETTER
+ */
+
+ "flex-layout.row#newsletter-container":{
+ "props":{
+ "blockClass": "newsletter-container"
+ },
+ "children": ["flex-layout.row#text-newsletter","newsletter-form#container-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",
+ "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"
+ }
+ },
+
+ "newsletter-form#container-newsletter": {
+ "props": {
+ "blockClass": "container-newsletter"
+ },
+ "children": [
+ "html#container-form-input"
+ ]
+ },
+
+ "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,8 +380,9 @@
"product-identifier.product",
"flex-layout.row#selling-price",
"product-installments#parcelaProduct",
+ "html#pix-discount",
"availability-subscriber",
- "sku-selector",
+ "html#sku-selector",
"html#buy-button",
"shipping-simulator"
]
@@ -263,12 +397,27 @@
"product-installments#parcelaProduct": {
"props": {
+ "installmentsCriteria": "max-quantity-without-interest",
"markers": ["discount", "x"],
"blockClass": "divider",
"message": "{installmentsNumber} x> de {installmentValue} sem juros"
}
},
+ "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",
@@ -285,15 +434,23 @@
"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"]
+ },
+
+ /*
+ 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..f72126c 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -8,76 +8,111 @@
*/
/* 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;
+
+/* NEWSLETTER */
+.flexRow--newsletter-container {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ background-color: #000000;
}
-@media only screen and (max-width: 767px) {
- .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
- margin: 0 0 16px;
- height: auto;
- }
+.flexRow--newsletter-container .flexRowContent--newsletter-container {
+ display: flex;
+ flex-direction: column;
}
-.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;
+.flexRow--newsletter-container .flexRowContent--newsletter-container .stretchChildrenWidth {
+ width: 100% !important;
}
-.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;
+.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-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..8fa6cf2 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;
+ width: 100%;
+ 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..61fb3af 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;
+ width: 100%;
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 {
- width: 100%;
+@media only screen and (max-width: 1024px) {
+ .productImagesGallerySlide .productImage {
+ margin: 0;
+ }
+}
+.productImagesGallerySlide .productImage .productImageTag--main {
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;
@@ -208,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;
@@ -222,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";
@@ -239,7 +261,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,31 +272,37 @@ 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;
}
}
-.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: 767px) {
- .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+@media only screen and (max-width: 768px) {
+ .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;
@@ -285,7 +313,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 +329,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 +380,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 +397,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 +421,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;
}
@@ -420,14 +450,19 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
- width: 100%;
+.productImageTag--description {
+ max-height: 100% !important;
}
/* DESCRIÇÃO DO PRODUTO */
.productDescriptionContainer {
margin-left: 16px;
}
+@media only screen and (max-width: 1024px) {
+ .productDescriptionContainer {
+ margin: 0;
+ }
+}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@@ -436,9 +471,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
margin-bottom: 8px;
color: #575757;
}
+@media only screen and (max-width: 1024px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 20px;
+ }
+}
+@media only screen and (min-width: 1921px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 32px;
+ }
+}
.productDescriptionContainer .productDescriptionText {
font-weight: 400;
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
new file mode 100644
index 0000000..d1a727d
--- /dev/null
+++ b/styles/css/vtex.store-newsletter.css
@@ -0,0 +1,96 @@
+/*
+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;
+ 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) {
+ 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;
+}
+
+.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 4732012..8269c67 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -9,25 +9,52 @@
/* 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;
}
+@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;
+ }
+}
+@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;
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 +62,38 @@
font-size: 18px;
line-height: 38px;
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: 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;
+ }
+}
+@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 0c0916a..5d19c48 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,65 +1,97 @@
+/* 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;
+ }
+ }
+}
+
+/* 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 d151f90..82e050a 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;
+ width: 100%;
+ 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..0595ee3 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,21 +1,32 @@
.container {
- padding: 0;
+ width: 100%;
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--main {
+ max-height: 100% !important;
+ }
}
}
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs {
margin: 16px 0;
+ @include mq(sm, max) {
+ display: block;
+ }
.thumbImg {
width: 90px;
@@ -214,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%;
@@ -228,6 +245,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex;
align-items: center;
justify-content: center;
+ cursor: pointer;
&::before {
content: "AVISE-ME";
color: $color-white;
@@ -259,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;
@@ -302,19 +327,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";
@@ -423,13 +450,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
- width: 100%;
+.productImageTag--description {
+ max-height: 100% !important;
}
/* DESCRIÇÃO DO PRODUTO */
.productDescriptionContainer {
margin-left: 16px;
+ @include mq(md, max) {
+ margin: 0;
+ }
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@@ -437,11 +467,25 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
height: 40px;
margin-bottom: 8px;
color: $color-gray13;
+ @include mq(md, max) {
+ font-size: 20px;
+ }
+ @include mq(xl, min) {
+ font-size: 32px;
+ }
}
.productDescriptionText {
font-weight: 400;
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
new file mode 100644
index 0000000..4129e13
--- /dev/null
+++ b/styles/sass/pages/product/vtex.store-newsletter.scss
@@ -0,0 +1,79 @@
+.newsletterForm--container-newsletter {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: $color-black-padrao;
+ 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) {
+ 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;
+ }
+ }
+}
+
+.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 2ae2070..fd46af1 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,21 +1,40 @@
.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) {
+ 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;
+ }
+ @include mq(xl, min) {
+ width: 142px;
+ }
: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 +43,35 @@
font-size: 18px;
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: 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;
+ }
+ @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 d8b21c2..948e5ab 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -27,8 +27,8 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
- sm: 768px,
- md: 1024px,
+ sm: 769px,
+ md: 1025px,
lg: 1920px,
xl: 1921px,
) !default;