develop #2

Merged
Rhayllon_Daudt merged 8 commits from develop into master 2023-02-11 02:55:53 +00:00
48 changed files with 2289 additions and 264 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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",
@ -34,10 +33,10 @@
"vtex.my-account": "1.x",
"vtex.flex-layout": "0.x",
"vtex.rich-text": "0.x",
"vtex.product-identifier": "0.x",
"vtex.store-drawer": "0.x",
"vtex.locale-switcher": "0.x",
"vtex.product-quantity": "1.x",
"vtex.product-identifier": "0.x",
"vtex.breadcrumb": "1.x",
"vtex.sticky-layout": "0.x",
"vtex.product-customizer": "2.x",

3
react/Pix.tsx Normal file
View File

@ -0,0 +1,3 @@
import Pix from "./components/Pix/Pix";
export default Pix;

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

View File

@ -0,0 +1,10 @@
[class*="html--wrapperQuantity"] {
display: flex;
margin-bottom: 16px;
}
@media screen and (max-width: 375px) {
[class*="html--wrapperQuantity"] {
flex-direction: column;
}
}

View File

@ -0,0 +1,42 @@
import React from 'react'
import { useProduct } from 'vtex.product-context'
// import { useCssHandles } from 'vtex.css-handles'
import styles from "./styles.css"
const Pix = () => {
const product = useProduct()
let pixValueTotal:any = product?.product?.priceRange?.sellingPrice?.lowPrice;
let pixValueTotalNumber = parseFloat(pixValueTotal);
let porcentagemDesconto = 10;
let desconto = (pixValueTotalNumber / 100)* porcentagemDesconto;
let pixValueDesconto = (pixValueTotal - desconto).toFixed(2);
let pixValueDescontoVirgula = pixValueDesconto.replace(".", ",")
// const CSS_HANDLES = [
// "wrapperComponentPix",
// "imagePix",
// "wrapperTexts",
// "wrapperTexts__value",
// "wrapperTexts__descontoPorcentagem",
// ]
// const handles = useCssHandles(CSS_HANDLES)
if (typeof document !== "undefined") {
const input = document.querySelector(".vtex-address-form-4-x-input");
input?.setAttribute("placeholder", "Digite seu CEP");
}
return (
<div className={styles.wrapperComponentPix}>
<img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />
<div className={styles.wrapperTexts}>
<p className={styles.wrapperTexts__value}>R$ {pixValueDescontoVirgula} </p>
<p className={styles.wrapperTexts__descontoPorcentagem}>10% de desconto</p>
</div>
</div>
)
}
export default Pix

View File

@ -0,0 +1,29 @@
.wrapperComponentPix{
display: flex;
margin: 8px 0 16px 0;
align-items: center;
}
.wrapperTexts__value{
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.wrapperTexts__descontoPorcentagem{
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}
.imagePix{
height: 24px;
}
.wrapperTexts{
margin-left: 26px;
}

4
react/typings/css.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.css" {
const css: any;
export default css;
}

7
react/typings/global.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export interface TimeSplit {
hours: string
minutes: string
seconds: string
}
type GenericObject = Record<string, any>

6
react/typings/graphql.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
declare module "*.graphql" {
import { DocumentNode } from "graphql";
const value: DocumentNode;
export default value;
}

15
react/typings/storefront.d.ts vendored Normal file
View File

@ -0,0 +1,15 @@
import { FunctionComponent } from "react";
declare global {
interface StorefrontFunctionComponent<P = GenericObject>
extends FunctionComponent<P> {
getSchema?(props: P): GenericObject
schema?: GenericObject
}
interface StorefrontComponent<P = GenericObject, S = GenericObject>
extends Component<P, S> {
getSchema?(props: P): GenericObject
schema: GenericObject
}
}

View File

@ -0,0 +1 @@
declare module "vtex.css-handles"

103
react/typings/vtex.order-manager.d.ts vendored Normal file
View File

@ -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<DefaultOrderForm, "items">;
type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
items: OrderFormItem[] | null;
};
export const OrderFormContext = createContext<Context<OrderForm>>({
orderForm: DefaultOrderFormUpdated,
setOrderForm: noop,
error: undefined,
loading: false,
});
function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
const context = useContext(OrderFormContext);
if (context === undefined) {
throw new Error(
"useOrderForm must be used within a OrderFormProvider"
);
}
return context as Context<O>;
}
export type OrderFormItem = {
additionalInfo: {
brandName: string;
__typename: string;
};
attachments: Array<any>;
attachmentOfferings: Array<any>;
bundleItems: Array<any>;
parentAssemblyBinding: any;
parentItemIndex: any;
sellingPriceWithAssemblies: any;
options: any;
availability: string;
detailUrl: string;
id: string;
imageUrls: Record<string, string>;
listPrice: number;
manualPrice: any;
measurementUnit: string;
modalType: any;
name: string;
offerings: Array<any>;
price: number;
priceTags: Array<any>;
productCategories: Record<string, string>;
productCategoryIds: string;
productRefId: string;
productId: string;
quantity: number;
seller: string;
sellingPrice: number;
skuName: string;
skuSpecifications: Array<any>;
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<Record<string, never>>;
useOrderForm: typeof useOrderForm;
};
export default _default;
}
declare module "vtex.order-manager/constants" {
export * from "vtex.order-manager/react/constants";
}

38
react/typings/vtex.render-runtime.d.ts vendored Normal file
View File

@ -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<ExtensionPointProps>;
interface ChildBlockProps {
id: string
}
export const ChildBlock: ComponentType<ChildBlockProps>;
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: <TOriginalProps extends GenericObject>(
Component: ComponentType<TOriginalProps & RenderContextProps>
) => ComponentType<TOriginalProps>;
}

9
react/typings/vtex.styleguide.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module "vtex.styleguide" {
import { ComponentType } from "react";
export const Input: ComponentType<InputProps>;
interface InputProps {
[key: string]: any
}
}

View File

@ -5,6 +5,14 @@
"customPixelEventId": "add-to-cart-button"
}
},
"add-to-cart-button#addSacola": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
"text": "Adicionar à sacola",
"blockClass": "addSacola"
}
},
"minicart.v2": {
"props": {

View File

@ -3,21 +3,31 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"html#productDescription",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"rich-text#otherProductTitle",
"list-context.product-list#prateleira",
"product-questions-and-answers"
]
},
"html#breadcrumb": {
"props": {
"tag": "section",
"testId": "breadcrumbs",
"blockClass": "pdp-breadcrumb"
},
"children": ["breadcrumb"]
"children": ["breadcrumb#Pdp"]
},
"breadcrumb#Pdp": {
"props": {
"blockClass": "Pdp",
"showOnMobile": true
}
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -26,12 +36,86 @@
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"rich-text#otherProductTitle": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"text": "### Você também pode gostar:",
"textAlignment": "CENTER",
"textPosition": "CENTER",
"blockClass": "otherProdcutTitle"
}
},
"product-summary.shelf#prateleira": {
"props": {
"blockClass": "prateleiraShelf",
"testId": "vtex-product-summary"
},
"children": [
"html#productSummary"
]
},
"product-summary-image#prateleiraImg": {
"props": {
"blockClass": "prateleiraImg"
}
},
"product-summary-name#prateleira": {
"props": {
"blockClass": "prateleiraProductName"
}
},
"product-list-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"product-selling-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"slider-layout#prateleiraSlider": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "prateleiraSlider"
}
},
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#prateleira"],
"children": ["html#productSummaryList"]
},
"flex-layout.col#description": {
"props": {
"preventVerticalStretch": true
},
"children": ["product-description#1", "product-description#2"]
},
"product-description#1": {
"props": {
"blockClass": "descriptioncontent1"
}
},
"product-description#2": {
"props": {
"blockClass": "descriptioncontent2",
"showTitle": false
}
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -50,10 +134,18 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"paddingBottom": 7,
"blockClass": "productMainWrapper"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
"flex-layout.row#descriptionRow": {
"props": {
"blockClass": "descriptionRow",
"colGap": 7
},
"children": ["product-images#descriptionImg", "flex-layout.col#description"]
},
"stack-layout": {
"props": {
@ -66,6 +158,148 @@
]
},
"html#wrapperQuantity": {
"props": {
"blockClass": "wrapperQuantity"
},
"children": ["html#productQuantity", "flex-layout.row#buy-button"]
},
"product-quantity#quantityPdpItens": {
"props": {
"blockClass": "quantityPdpItens",
"showLabel": false,
"size": "large"
}
},
"tab-layout#descriptionLayout": {
"props": {
"blockClass": "descriptionLayout"
},
"children": [
"tab-list#descriptionButtonWrapper",
"tab-content#descriptionContentWrapper"
]
},
"tab-list#descriptionButtonWrapper": {
"props": {
"blockClass": "descriptionButtonWrapper"
},
"children": [
"tab-list.item#1",
"tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
]
},
"tab-content#descriptionContentWrapper": {
"props": {
"blockClass": "descriptionContentWrapper"
},
"children": [
"tab-content.item#1",
"tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
]
},
"tab-list.item#1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"blockClass": "descriptionButton",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "description2",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description3",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description4",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description5",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-content.item#1": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description1",
"blockClass": "descriptionContent"
}
},
"tab-content.item#2": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description2",
"blockClass": "descriptionContent"
}
},
"tab-content.item#3": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description3",
"blockClass": "descriptionContent"
}
},
"tab-content.item#4": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description4",
"blockClass": "descriptionContent"
}
},
"tab-content.item#5": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description5",
"blockClass": "descriptionContent"
}
},
"product-images#descriptionImg": {
"props": {
"displayMode": "first-image",
"maxHeight": 632,
"blockClass": "descriptionImg",
"width": "49%"
}
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
@ -78,20 +312,25 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "51%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
"children": ["html#productImages"]
},
"product-images": {
"product-images#imgsMain": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"displayThumbnailsArrows": true
"showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"thumbnailMaxHeight": 90,
"blockClass": "ImgsMain",
"maxHeight": 664
}
},
"flex-layout.col#right-col": {
@ -102,50 +341,148 @@
"children": [
"flex-layout.row#product-name",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"html#productCode",
"html#productPrice",
"html#productInstallments",
"html#pixPrice",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"html#skuSelector",
"html#wrapperQuantity",
"availability-subscriber",
"shipping-simulator",
"share#default"
"html#shippingSimulator"
]
},
"html#productInstallments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments#InstallmentsMainPdp"]
},
"html#pixPrice": {
"props": {
"testId": "pix-price"
},
"children": ["pix"]
},
"html#productPrice": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"html#productQuantity": {
"props": {
"testId": "product-quantity"
},
"children": ["product-quantity#quantityPdpItens"]
},
"html#addToCartButton": {
"props": {
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button#addSacola"]
},
"html#productCode": {
"props": {
"testId": "product-code"
},
"children": ["product-identifier.product#identifierMain"]
},
"html#productImages": {
"props": {
"testId": "product-images"
},
"children": ["product-images#imgsMain"]
},
"html#productName": {
"props": {
"testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"html#shippingSimulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
},
"html#skuSelector": {
"props": {
"testId": "sku-selector"
},
"children": ["sku-selector#inverseOrder"]
},
"html#productDescription": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#descriptionLayout"]
},
"html#productSummary": {
"props": {
"testId": "vtex-product-summary"
},
"children": [
"product-summary-image#prateleiraImg",
"product-summary-name#prateleira",
"product-list-price#prateleira",
"product-selling-price#prateleira"
]
},
"html#productSummaryList": {
"props": {
"testId": "product-summary-list"
},
"children": [
"slider-layout#prateleiraSlider"
]
},
"product-installments#InstallmentsMainPdp": {
"props": {
"blockClass": "InstallmentsMainPdp",
"installmentsCriteria": "max-quantity-without-interest"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
"children": ["html#productName"]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}
},
"sku-selector#inverseOrder": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true,
"blockClass": "inverseOrder"
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "buyButton"
},
"children": ["add-to-cart-button"]
"children": ["html#addToCartButton"]
},
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
"blockClass": "indisponivelWrapper"
},
"children": [
"flex-layout.col#stack",
@ -160,9 +497,9 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"product-identifier.product#identifierMain",
"flex-layout.row#availability",
"sku-selector#inverseOrder"
]
},
"flex-layout.row#availability": {
@ -172,6 +509,13 @@
"children": ["availability-subscriber"]
},
"product-identifier.product#identifierMain": {
"props": {
"label": "hide",
"idField": "productReference"
}
},
"share#default": {
"props": {
"social": {

View File

@ -4,7 +4,8 @@
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 4
"marginBottom": 4,
"blockClass": "sellPrice"
},
"children": [
"product-selling-price"

View File

@ -2,6 +2,11 @@
"example-component": {
"component": "Example"
},
"pix": {
"component": "Pix"
},
"html": {
"component": "html",
"composition": "children"

View File

@ -0,0 +1,31 @@
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-SemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-ExtraBold.ttf);
font-weight: 800;
}

View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

View File

@ -0,0 +1,13 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.product-identifier--productReference {
display: flex;
justify-content: end;
}

View File

@ -0,0 +1,47 @@
/*
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 */
.homeLink--Pdp {
padding: 0 2px 4px 2px;
}
.homeLink--Pdp::before {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.homeLink--Pdp .homeIcon--Pdp {
display: none;
}
.link--Pdp,
.term--Pdp {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container--Pdp {
padding: 0;
width: 94.44%;
margin: 0 auto;
max-width: 94rem;
}
@media screen and (max-width: 1024px) {
.container--Pdp {
width: 100%;
padding: 0 40px;
}
}

View File

@ -1,98 +1,210 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
@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 */
.flexRow--productMainWrapper {
width: 95%;
margin: 0 auto;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
@media screen and (max-width: 1024px) {
.flexRow--productMainWrapper {
width: 100%;
margin: 0;
padding: 0 40px;
}
}
@media screen and (max-width: 1024px) {
.flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
.flexRow--indisponivelWrapper {
width: 95%;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.flexRow--indisponivelWrapper {
width: 100%;
margin: 0;
padding: 0 40px;
}
}
@media screen and (max-width: 1024px) {
.flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
.flexRow--buyButton {
display: flex;
max-height: 100%;
align-items: center;
width: 100%;
margin-left: 10px;
}
@media screen and (max-width: 375px) {
.flexRow--buyButton {
margin-left: 0;
padding-top: 10px;
}
}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
height: 49px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: #000000;
color: #fff;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
.flexRowContent--sellPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
@media screen and (max-width: 1024px) {
.flexRow--descriptionRow :global(.vtex-store-components-3-x-container) {
padding: 0 !important;
}
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
.flexRowContent--productMainWrapper {
margin: 16px 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--productMainWrapper {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--productMainWrapper .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexRowContent--indisponivelWrapper {
margin: 16px 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--indisponivelWrapper {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--indisponivelWrapper .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--descriptionRow {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--descriptionRow .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) {
object-fit: unset !important;
max-height: 994px !important;
margin-bottom: 16px;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before {
content: "Produto indisponivel";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
display: grid;
grid-auto-flow: column;
max-width: 400px;
column-gap: 8px;
}
@media screen and (max-width: 1024px) {
.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
width: 100%;
}
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child {
grid-area: 2/1/2/3;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
margin: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
margin: 0;
margin-bottom: 15px;
}
.flexRow--message-availability :global(.vtex-button) {
width: 100%;
background-color: #000000;
font-size: 0;
height: 49px;
border-radius: 0;
align-items: center;
justify-content: center;
display: flex;
}
.flexRow--message-availability :global(.vtex-button)::before {
content: "Avise-me";
color: #fff;
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
.flexRow--message-availability :global(.vtex-button__label) {
display: none;
}
.flexRow--message-availability :global(.vtex-input-prefix__group) {
border-radius: 0;
border-color: #989898;
}

View File

@ -1,3 +1,9 @@
.product-identifier--productReference {
margin-bottom: 1rem;
}
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */

View File

@ -1,79 +1,37 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.listPrice--prateleira {
padding: 0 16px 8px 16px;
margin: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
.sellingPrice--prateleira--hasListPrice {
padding: 0 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
.installments--InstallmentsMainPdp {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

View File

@ -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 */
.quantitySelectorContainer--quantityPdpItens {
margin: 0;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__input) {
border: 1px solid #CCCCCC;
border-left: 0;
border-right: 0;
width: 3rem;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__plus-button) {
border: 1px solid #CCCCCC;
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: #000000;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: #000000;
}

View File

@ -1,42 +1,42 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.containerNormal--prateleiraShelf {
max-width: 315px !important;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.element--prateleiraShelf {
outline: 0;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
.nameContainer--prateleiraProductName {
padding: 16px 16px 8px 16px;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
.nameContainer--prateleiraProductName .brandName--prateleiraProductName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
line-height: 25px;
text-align: center;
color: #000000;
}
.image {
border-radius: 0.25rem;
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg {
min-height: 314px;
}
@media screen and (max-width: 1280px) {
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg {
min-height: 285px;
}
}

View File

@ -6,4 +6,11 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* Grid breakpoints */
.heading--otherProdcutTitle {
margin: 16px 0 24px 0;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

View File

@ -0,0 +1,12 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.shippingTableBody {
display: none;
}

View File

@ -1,31 +1,63 @@
.sliderLayoutContainer {
justify-content: center;
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.sliderLayoutContainer--prateleiraSlider {
width: 90.63%;
margin: 0 auto 101px auto;
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleiraSlider {
width: 100% !important;
padding: 0 63px;
}
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.sliderArrows--prateleiraSlider {
margin: 0;
padding: 0;
}
.sliderTrackContainer {
max-width: 100%;
.sliderRightArrow--prateleiraSlider {
right: -2%;
}
@media screen and (max-width: 1024px) {
.sliderRightArrow--prateleiraSlider {
right: 3.91%;
}
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.sliderLeftArrow--prateleiraSlider {
left: -2%;
}
@media screen and (max-width: 1024px) {
.sliderLeftArrow--prateleiraSlider {
left: 3.91%;
}
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.paginationDotsContainer--prateleiraSlider {
bottom: -32px;
align-items: center;
}
.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider {
height: 10px !important;
width: 10px !important;
background-color: #000000;
margin: 0 6px;
}
.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider--isActive {
height: 17px !important;
width: 17px !important;
background-color: #fff !important;
border: 0.5px solid #000000;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
}
.slide--prateleiraSlider {
padding: 0 8px;
}

View File

@ -9,4 +9,297 @@
/* Grid breakpoints */
.newsletter {
background: red;
}
.productImageTag--ImgsMain--main {
object-fit: unset !important;
}
@media screen and (max-width: 1024px) {
.productImageTag--ImgsMain--main {
max-height: 994px !important;
}
}
.productImagesThumb {
width: 13.605% !important;
margin: 0 16px 0 0;
max-width: 90px;
}
.productNameContainer--quickview {
display: flex;
justify-content: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
justify-content: flex-start;
padding-top: 32px;
}
}
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
display: flex;
justify-content: end;
margin-bottom: 24px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
justify-content: flex-start;
}
}
.skuSelectorContainer--inverseOrder {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorTextContainer::before {
content: "Outras cores:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorName,
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorNameSeparator,
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer::before {
content: "Outros Tamanhos:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder {
width: 40px;
height: 40px;
border-radius: 50%;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .frameAround--inverseOrder {
border: 2px solid #000000;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorItemTextValue--inverseOrder {
color: #000000;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorInternalBox--inverseOrder {
border: none;
}
.skuSelectorContainer--inverseOrder .skuSelectorItemTextValue--inverseOrder {
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer--inverseOrder .frameAround--inverseOrder {
border-radius: 50%;
}
.skuSelectorContainer--inverseOrder .skuSelectorInternalBox--inverseOrder {
border-radius: 50%;
width: 40px;
height: 40px;
border-color: #989898;
}
.skuSelectorContainer--inverseOrder .diagonalCross--inverseOrder {
border-radius: 50%;
}
.shippingContainer {
display: flex;
}
.shippingContainer :global(.vtex-address-form__field--small) {
display: flex;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
border: 1px solid #CCCCCC;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: relative;
left: 150px;
align-items: center;
padding-top: 16.1px;
text-decoration: underline;
}
@media screen and (max-width: 600px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: 55px;
}
}
@media screen and (max-width: 490px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -85px;
top: 50px;
}
}
@media screen and (max-width: 450px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -112px;
top: 50px;
}
}
@media screen and (max-width: 375px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -78px;
top: 50px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: black;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
.shippingContainer :global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
position: relative;
right: 129px;
margin-top: 24px;
background-color: #000000;
font-size: 0;
border: none;
border-radius: 0;
}
@media screen and (max-width: 490px) {
.shippingContainer :global(.vtex-button) {
right: 31%;
}
}
@media screen and (max-width: 425px) {
.shippingContainer :global(.vtex-button) {
right: 24%;
}
}
@media screen and (max-width: 375px) {
.shippingContainer :global(.vtex-button) {
right: 40px;
}
}
.shippingContainer :global(.vtex-button) ::before {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.shippingTable {
display: flex;
padding: 0;
margin: 0;
border: none;
flex-direction: column;
}
.shippingTable .shippingTableHead {
display: flex;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
display: flex;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
order: 1;
min-width: 145px;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
min-width: 100px;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
min-width: 70px;
}
.shippingTable .shippingTableRow {
display: flex;
gap: 32px;
margin-bottom: 15px;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryName,
.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate,
.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
display: flex;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
padding: 0;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate {
order: 1;
min-width: 145px;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryName {
min-width: 100px;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
min-width: 70px;
}
.shippingTable .shippingTableRadioBtn {
display: none;
}
.productDescriptionContainer--descriptioncontent1 {
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
@media screen and (max-width: 1024px) {
.productImagesGallerySlide--ImgsMain {
width: 100% !important;
}
}

View File

@ -0,0 +1,87 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.container--descriptionLayout {
width: 94.44%;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout {
width: 100%;
padding: 0 40px;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
padding: 0 64px;
margin-bottom: 32px;
max-width: 94rem;
margin: 0 auto 32px auto;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
padding: 16px 0 0 0;
flex-direction: column;
margin-bottom: 16px;
border-top: 1px solid #B9B9B9;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
margin: 0;
padding: 0;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) {
color: #bfbfbf;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover {
background-color: #fff;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
margin-bottom: 16px;
padding: 0 !important;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
margin-top: 2px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
background-color: #fff;
color: #000000;
border: 0;
border-bottom: 2px solid #000000;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
border: none;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 !important;
}
}

View File

@ -0,0 +1,37 @@
.homeLink--Pdp{
padding: 0 2px 4px 2px;
&::before {
content: "Home";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
}
.homeIcon--Pdp{
display: none;
}
}
.link--Pdp,
.term--Pdp{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
}
.container--Pdp{
padding: 0;
width: 94.44%;
margin: 0 auto;
max-width: 94rem;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
}
}

View File

@ -0,0 +1,203 @@
.flexRow--productMainWrapper{
width: 95%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
margin: 0;
padding: 0 40px;
}
:global(.vtex-store-components-3-x-container){
@media screen and (max-width: 1024px) {
padding: 0;
}
}
}
.flexRow--indisponivelWrapper{
width: 95%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
margin: 0;
padding: 0 40px;
}
:global(.vtex-store-components-3-x-container){
@media screen and (max-width: 1024px) {
padding: 0;
}
}
}
.flexRow--buyButton{
display: flex;
align-items: center;
width: 100%;
margin-left: 10px;
@media screen and (max-width: 375px) {
margin-left: 0;
padding-top: 10px;
}
.flexRowContent--buyButton{
margin: 0;
height: 49px;
:global(.vtex-button){
background-color: $color-black2;
color: $color-white;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}
}
}
.flexRowContent--sellPrice{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $color-black2;
margin: 0;
}
.flexRow--descriptionRow{
:global(.vtex-store-components-3-x-container) {
@media screen and (max-width: 1024px) {
padding: 0 !important;
}
}
}
.flexRowContent--productMainWrapper{
margin: 16px 0;
padding: 0;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
}
}
.flexRowContent--indisponivelWrapper{
margin: 16px 0;
padding: 0;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
}
}
.flexRowContent--descriptionRow{
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
:global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){
object-fit: unset !important;
max-height: 994px !important;
margin-bottom: 16px;
}
}
}
.flexRow--message-availability{
:global(.vtex-store-components-3-x-title){
font-size: 0;
margin: 0;
&::before {
content: "Produto indisponivel";
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray17;
}
}
:global(.vtex-store-components-3-x-subscribeLabel){
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray17;
}
}
:global(.vtex-store-components-3-x-content){
display: grid;
grid-auto-flow: column;
max-width: 400px;
column-gap: 8px;
@media screen and (max-width: 1024px) {
width: 100%;
}
:last-child{
grid-area: 2/1/2/3;
}
:global(.vtex-store-components-3-x-inputEmail){
margin: 0;
}
:global(.vtex-store-components-3-x-inputName){
margin: 0;
margin-bottom: 15px;
}
}
:global(.vtex-button){
width: 100%;
background-color: $color-black2;
font-size: 0;
height: 49px;
border-radius: 0;
align-items: center;
justify-content: center;
display: flex;
&::before {
content: "Avise-me";
color: $color-white;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
}
:global(.vtex-button__label){
display: none;
}
:global(.vtex-input-prefix__group){
border-radius: 0;
border-color: $color-gray12;
}
}

View File

@ -0,0 +1,26 @@
.listPrice--prateleira{
padding: 0 16px 8px 16px;
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray9;
}
.sellingPrice--prateleira--hasListPrice{
padding: 0 16px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
.installments--InstallmentsMainPdp{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $color-gray15;
}

View File

@ -0,0 +1,24 @@
.quantitySelectorContainer--quantityPdpItens{
margin: 0;
:global(.vtex-numeric-stepper__input ){
border: 1px solid #CCCCCC;
border-left: 0;
border-right: 0;
width: 3rem;
}
:global(.vtex-numeric-stepper__plus-button){
border: 1px solid #CCCCCC;
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: $color-black2;
}
:global(.vtex-numeric-stepper__minus-button){
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: $color-black2;
}
}

View File

@ -0,0 +1,31 @@
.containerNormal--prateleiraShelf{
max-width: 315px !important;
}
.element--prateleiraShelf{
outline: 0;
}
.nameContainer--prateleiraProductName{
padding: 16px 16px 8px 16px;
.brandName--prateleiraProductName{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: $color-black2;
}
// .nameWrapper--prateleiraProductName{
// min-height: 50px;
// }
}
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg{
min-height: 314px;
@media screen and (max-width: 1280px) {
min-height: 285px;
}
}

View File

@ -0,0 +1,7 @@
.heading--otherProdcutTitle{
margin: 16px 0 24px 0;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

View File

@ -0,0 +1,48 @@
.sliderLayoutContainer--prateleiraSlider{
width: 90.63%;
margin: 0 auto 101px auto;
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0 63px;
}
}
.sliderArrows--prateleiraSlider{
margin: 0;
padding: 0;
}
.sliderRightArrow--prateleiraSlider{
right: -2.53%;
@media screen and (max-width: 1024px) {
right: 3.91%;
}
}
.sliderLeftArrow--prateleiraSlider{
left: -2.53%;
@media screen and (max-width: 1024px) {
left: 3.91%;
}
}
.paginationDotsContainer--prateleiraSlider{
bottom: -32px;
align-items: center;
.paginationDot--prateleiraSlider{
height: 10px !important;
width: 10px !important;
background-color: $color-black2;
margin: 0 6px;
&--isActive{
height: 17px !important;
width: 17px !important;
background-color: $color-white !important;
border: 0.5px solid $color-black2;
}
}
}
.slide--prateleiraSlider{
padding: 0 8px;
}

View File

@ -1,3 +1,307 @@
.newsletter{
background: red;
}
.productImageTag--ImgsMain--main{
object-fit: unset !important;
@media screen and (max-width: 1024px) {
max-height: 994px !important;
}
}
.productImagesThumb{
width: 13.605% !important;
margin: 0 16px 0 0;
max-width: 90px;
}
.productNameContainer--quickview{
display: flex;
justify-content: end;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray14;
@media screen and (max-width: 1024px) {
justify-content: flex-start;
padding-top: 32px;
}
}
:global(.vtex-product-identifier-0-x-product-identifier--productReference){
display: flex;
justify-content: end;
margin-bottom: 24px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray13;
@media screen and (max-width: 1024px) {
justify-content: flex-start;
}
}
.skuSelectorContainer--inverseOrder{
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer--cor{
.skuSelectorTextContainer{
&::before {
content: "Outras cores:";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
text-transform: uppercase;
}
}
.skuSelectorName,
.skuSelectorNameSeparator,
.skuSelectorSelectorImageValue{
font-size: 0;
}
}
.skuSelectorSubcontainer--tamanho{
.skuSelectorTextContainer{
&::before {
content: "Outros Tamanhos:";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
text-transform: uppercase;
}
}
.skuSelectorName{
font-size: 0;
}
}
.skuSelectorItem--inverseOrder{
width: 40px;
height: 40px;
border-radius: 50%;
}
.skuSelectorItem--inverseOrder--selected{
.frameAround--inverseOrder{
border: 2px solid $color-black2;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
}
.skuSelectorItemTextValue--inverseOrder{
color: $color-black2;
}
.skuSelectorInternalBox--inverseOrder{
border: none;
}
}
.skuSelectorItemTextValue--inverseOrder{
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray11;
}
.frameAround--inverseOrder{
border-radius: 50%;
}
.skuSelectorInternalBox--inverseOrder{
border-radius: 50%;
width: 40px;
height: 40px;
border-color: $color-gray12;
}
.diagonalCross--inverseOrder{
border-radius: 50%;
// transform: rotate(-45deg);
}
}
.shippingContainer{
display: flex;
:global(.vtex-address-form__field--small){
display: flex;
}
:global(.vtex-input-prefix__group){
height: 49px;
border: 1px solid $color-gray7;
border-radius: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL){
display: flex;
position: relative;
left: 150px;
align-items: center;
padding-top: 16.1px;
text-decoration: underline;
@media screen and (max-width: 600px) {
left: 55px;
}
@media screen and (max-width: 490px) {
left: -85px;
top: 50px;
}
@media screen and (max-width: 450px) {
left: -112px;
top: 50px;
}
@media screen and (max-width: 375px) {
left: -78px;
top: 50px;
}
:last-child{
color: black;
}
}
:global(.vtex__icon-external-link){
display: none;
}
:global(.vtex-button){
display: flex;
width: 49px;
height: 49px;
position: relative;
right: 129px;
margin-top: 24px;
background-color: $color-black2;
font-size: 0;
border: none;
border-radius: 0;
@media screen and (max-width: 490px) {
right: 31%;
}
@media screen and (max-width: 425px) {
right: 24%;
}
@media screen and (max-width: 375px) {
right: 40px;
}
::before{
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: $color-white;
}
}
}
.shippingTable{
display: flex;
padding: 0;
margin: 0;
border: none;
flex-direction: column;
.shippingTableHead{
display: flex;
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
display: flex;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black3;
text-transform: uppercase;
}
.shippingTableHeadDeliveryEstimate{
order: 1;
min-width: 145px;
}
.shippingTableHeadDeliveryName{
min-width: 100px;
}
.shippingTableHeadDeliveryPrice{
min-width: 70px;
}
}
.shippingTableRow{
display: flex;
gap: 32px;
margin-bottom: 15px;
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryEstimate,
.shippingTableCellDeliveryPrice {
display: flex;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray16;
padding: 0;
}
.shippingTableCellDeliveryEstimate{
order: 1;
min-width: 145px;
}
.shippingTableCellDeliveryName{
min-width: 100px;
}
.shippingTableCellDeliveryPrice{
min-width: 70px;
}
}
.shippingTableRadioBtn{
display: none;
}
}
.productDescriptionContainer--descriptioncontent1{
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1{
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.productImagesGallerySlide--ImgsMain{
@media screen and (max-width: 1024px) {
width: 100% !important;
}
}

View File

@ -0,0 +1,76 @@
.container--descriptionLayout{
width: 94.44%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
}
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
border-bottom: 1px solid $color-gray6;
padding: 0 64px;
margin-bottom: 32px;
max-width: 94rem;
margin: 0 auto 32px auto;
@media screen and (max-width: 1024px) {
padding: 16px 0 0 0;
flex-direction: column;
margin-bottom: 16px;
border-top: 1px solid $color-gray6;
}
.listItem--descriptionButton{
margin: 0;
padding: 0;
:global(.vtex-button){
color: $color-gray8;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button):hover{
background-color: $color-white;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
@media screen and (max-width: 1024px) {
margin-bottom: 16px;
padding: 0 !important;
}
}
}
.listItemActive--descriptionButton{
margin-top: 2px;
:global(.vtex-button){
background-color: $color-white;
color: $color-black2;
border: 0;
border-bottom: 2px solid $color-black2;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
@media screen and (max-width: 1024px) {
border: none;
}
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
@media screen and (max-width: 1024px) {
padding: 0 !important;
}
}
}
}
}

View File

@ -1,4 +1,6 @@
$color-black: #292929;
$color-black2: #000000;
$color-black3: #202020;
$color-white: #fff;
@ -7,6 +9,18 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #B9B9B9;
$color-gray7: #CCCCCC;
$color-gray8: #bfbfbf;
$color-gray9: #bababa;
$color-gray10: #D5D5D5;
$color-gray11: rgba(185, 185, 185, 0.6);
$color-gray12: #989898;
$color-gray13: rgba(146, 146, 146, 0.48);
$color-gray14: #575757;
$color-gray15: #929292;
$color-gray16: #afafaf;
$color-gray17: #868686;
$color-blue: #4267b2;