Merge pull request 'development' (#1) from development into master
Reviewed-on: #1
This commit is contained in:
commit
5480645531
BIN
assets/left-arrow-vitor-soares.png
Normal file
BIN
assets/left-arrow-vitor-soares.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
3
assets/left-arrow-vitor-soares.svg
Normal file
3
assets/left-arrow-vitor-soares.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="31" viewBox="0 0 12 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.000193943 15.2383L10.9291 30.1191L11.2002 27.7468L2.30458 15.2383L11.2002 2.89145L10.9291 0.519138L0.000193943 15.2383Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 251 B |
BIN
assets/pix-logo-vitor-soares.png
Normal file
BIN
assets/pix-logo-vitor-soares.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/right-arrow-vitor-soares.png
Normal file
BIN
assets/right-arrow-vitor-soares.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
@ -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",
|
||||
|
||||
2
react/Pix.tsx
Normal file
2
react/Pix.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
import Pix from "./components/Pix-bloco/Pix";
|
||||
export default Pix;
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css";
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
|
||||
58
react/components/Html/styles.css
Normal file
58
react/components/Html/styles.css
Normal file
@ -0,0 +1,58 @@
|
||||
[class*="html--buy-button"] {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
[class*="html--buy-button"] :global(.vtex-button) {
|
||||
height: 49px;
|
||||
background: black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="description-container"] {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
[class*="add-to-cart-button"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="html--product-summary"] {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
[class*="html--buy-button"] :global(.vtex-button) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="description-container"] {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
[class*="html--buy-button"] {
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[class*="html--buy-button"] :global(.vtex-button) {
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
[class*="html--shipping-simulator"] {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
[class*="html--product-summary"] {
|
||||
padding: 0 360px;
|
||||
}
|
||||
}
|
||||
40
react/components/Pix-bloco/Pix.tsx
Normal file
40
react/components/Pix-bloco/Pix.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { useProduct } from "vtex.product-context";
|
||||
import styles from "./style.module.css";
|
||||
|
||||
const Pix = () => {
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
|
||||
|
||||
cepInput?.setAttribute("placeholder", "Digite seu CEP");
|
||||
|
||||
console.log(cepInput);
|
||||
}, 1000);
|
||||
}, []);
|
||||
|
||||
const productContextValue = useProduct();
|
||||
|
||||
const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
|
||||
|
||||
const discountValue = (Number(productPrice) * 10) / 100;
|
||||
|
||||
const totalValue = Number(productPrice) - Number(discountValue);
|
||||
|
||||
return (
|
||||
<div className={styles["wrapper"]}>
|
||||
<div className={styles["container-flex"]}>
|
||||
<div className={styles["image"]}>
|
||||
<img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
|
||||
</div>
|
||||
<div className={styles["discount"]}>
|
||||
<p className={styles["value"]}>R${totalValue.toFixed(2).replace(".", ",")}</p>
|
||||
<p className={styles["text"]}>10 % de desconto</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pix;
|
||||
26
react/components/Pix-bloco/style.module.css
Normal file
26
react/components/Pix-bloco/style.module.css
Normal file
@ -0,0 +1,26 @@
|
||||
.container-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
margin: 0;
|
||||
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
|
||||
color: #929292;
|
||||
}
|
||||
4
react/typings/css.d.ts
vendored
Normal file
4
react/typings/css.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module "*.css" {
|
||||
const css: any;
|
||||
export default css;
|
||||
}
|
||||
7
react/typings/global.d.ts
vendored
Normal file
7
react/typings/global.d.ts
vendored
Normal 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
6
react/typings/graphql.d.ts
vendored
Normal 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
15
react/typings/storefront.d.ts
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
1
react/typings/vtex.css-handles.ts
Normal file
1
react/typings/vtex.css-handles.ts
Normal file
@ -0,0 +1 @@
|
||||
declare module "vtex.css-handles"
|
||||
103
react/typings/vtex.order-manager.d.ts
vendored
Normal file
103
react/typings/vtex.order-manager.d.ts
vendored
Normal 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
38
react/typings/vtex.render-runtime.d.ts
vendored
Normal 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
9
react/typings/vtex.styleguide.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
declare module "vtex.styleguide" {
|
||||
import { ComponentType } from "react";
|
||||
|
||||
export const Input: ComponentType<InputProps>;
|
||||
|
||||
interface InputProps {
|
||||
[key: string]: any
|
||||
}
|
||||
}
|
||||
@ -2,10 +2,21 @@
|
||||
"add-to-cart-button": {
|
||||
"props": {
|
||||
"addToCartFeedback": "customEvent",
|
||||
"customPixelEventId": "add-to-cart-button"
|
||||
"customPixelEventId": "add-to-cart-button",
|
||||
"blockClass": "button-buy-product"
|
||||
}
|
||||
},
|
||||
|
||||
"html#add-to-cart-button": {
|
||||
"props": {
|
||||
"testId": "add-to-cart-button",
|
||||
"blockClass": "add-to-cart-button"
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button"
|
||||
]
|
||||
},
|
||||
|
||||
"minicart.v2": {
|
||||
"props": {
|
||||
"customPixelEventId": "add-to-cart-button"
|
||||
|
||||
@ -3,13 +3,17 @@
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
"product-specification-group#table",
|
||||
"shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
"html#tab-layout",
|
||||
// "html#description",
|
||||
// "flex-layout.row#specifications-title",
|
||||
// "product-specification-group#table",
|
||||
// "shelf.relatedProducts",
|
||||
"list-context.product-list#carousel-list",
|
||||
"product-questions-and-answers",
|
||||
"newsletter"
|
||||
]
|
||||
},
|
||||
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
@ -26,12 +30,7 @@
|
||||
"text": "##### Product Specifications"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#description": {
|
||||
"props": {
|
||||
"marginBottom": 7
|
||||
},
|
||||
"children": ["product-description"]
|
||||
},
|
||||
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
"conditions": [
|
||||
@ -45,6 +44,7 @@
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"props": {
|
||||
"blockClass": "container-main-content",
|
||||
"colGap": 7,
|
||||
"rowGap": 7,
|
||||
"marginTop": 4,
|
||||
@ -60,12 +60,13 @@
|
||||
"blockClass": "product"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-image",
|
||||
"html#images",
|
||||
"product-bookmark",
|
||||
"product-specification-badges"
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
"product-specification-badges": {
|
||||
"props": {
|
||||
"specificationGroupName": "Group",
|
||||
@ -78,70 +79,340 @@
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "60%",
|
||||
// "width": "60%",
|
||||
"rowGap": 0
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
"html#images": {
|
||||
"props": {
|
||||
"testId": "product-images"
|
||||
},
|
||||
"children": ["product-images"]
|
||||
},
|
||||
|
||||
"product-images": {
|
||||
"props": {
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
},
|
||||
"displayThumbnailsArrows": true
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false,
|
||||
"displayThumbnailsArrows": false,
|
||||
"thumbnailsOrientation": "horizontal"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.col#right-col": {
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"rowGap": 0
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"html#product-name",
|
||||
"html#identifier",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
// "flex-layout.row#selling-price",
|
||||
"html#selling-price",
|
||||
"html#product-installments",
|
||||
"html#pix",
|
||||
// "product-separator",
|
||||
"html#sku-selector",
|
||||
"html#buy-button",
|
||||
// "flex-layout.row#buy-button",
|
||||
// "product-gifts",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator",
|
||||
"share#default"
|
||||
"html#shipping-simulator"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-name": {
|
||||
"html#buy-button": {
|
||||
"props": {
|
||||
"marginBottom": 3
|
||||
"blockClass": "buy-button"
|
||||
},
|
||||
"children": ["html#product-quantity", "html#add-to-cart-button"]
|
||||
},
|
||||
|
||||
"html#identifier": {
|
||||
"props": {
|
||||
"blockClass": "product-name",
|
||||
"testId": "product-code"
|
||||
},
|
||||
"children": [
|
||||
"product-identifier.product"
|
||||
]
|
||||
},
|
||||
|
||||
"html#selling-price": {
|
||||
"props": {
|
||||
"testId": "product-price"
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price"
|
||||
]
|
||||
},
|
||||
|
||||
"html#pix": {
|
||||
"props": {
|
||||
"testId": "pix-price"
|
||||
},
|
||||
"children": [
|
||||
"Pix"
|
||||
]
|
||||
},
|
||||
|
||||
"html#shipping-simulator": {
|
||||
"props": {
|
||||
"testId": "shipping-simulator",
|
||||
"blockClass": "shipping-simulator"
|
||||
},
|
||||
"children": [
|
||||
"shipping-simulator"
|
||||
]
|
||||
},
|
||||
|
||||
// DESCRIÇÃO DE PRODUTOS
|
||||
"html#tab-layout": {
|
||||
"props": {
|
||||
"testId": "product-description"
|
||||
},
|
||||
"children": [
|
||||
"tab-layout#product"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-layout#product": {
|
||||
"props": {
|
||||
"blockClass": "structure",
|
||||
"defaultActiveTabId": "product1"
|
||||
},
|
||||
"children": ["tab-list#product", "tab-content#product"]
|
||||
},
|
||||
|
||||
"tab-list#product": {
|
||||
"props": {
|
||||
"blockClass": "tab"
|
||||
},
|
||||
"children": [
|
||||
"tab-list.item#product1",
|
||||
"tab-list.item#product2",
|
||||
"tab-list.item#product3",
|
||||
"tab-list.item#product4",
|
||||
"tab-list.item#product5"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-list.item#product1": {
|
||||
"props": {
|
||||
"blockClass": "tab-render",
|
||||
"tabId": "product1",
|
||||
"label": "Descrição",
|
||||
"defaultActiveTab": true
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list.item#product2": {
|
||||
"props": {
|
||||
"blockClass": "tab-render",
|
||||
"tabId": "product2",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product3": {
|
||||
"props": {
|
||||
"blockClass": "tab-render",
|
||||
"tabId": "product3",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product4": {
|
||||
"props": {
|
||||
"blockClass": "tab-render",
|
||||
"tabId": "product4",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product5": {
|
||||
"props": {
|
||||
"blockClass": "tab-render",
|
||||
"tabId": "product5",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-content#product": {
|
||||
"props": {
|
||||
"blockClass": "content"
|
||||
},
|
||||
"children": [
|
||||
"tab-content.item#product1",
|
||||
"tab-content.item#product2",
|
||||
"tab-content.item#product3",
|
||||
"tab-content.item#product4",
|
||||
"tab-content.item#product5"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-content.item#product1": {
|
||||
"props": {
|
||||
"tabId": "product1",
|
||||
"blockClass": "content-render"
|
||||
},
|
||||
"children": ["html#description"]
|
||||
},
|
||||
|
||||
"tab-content.item#product2": {
|
||||
"props": {
|
||||
"tabId": "product2",
|
||||
"blockClass": "content-render"
|
||||
},
|
||||
"children": ["html#description"]
|
||||
},
|
||||
|
||||
"tab-content.item#product3": {
|
||||
"props": {
|
||||
"tabId": "product3",
|
||||
"blockClass": "content-render"
|
||||
},
|
||||
"children": ["html#description"]
|
||||
},
|
||||
|
||||
"tab-content.item#product4": {
|
||||
"props": {
|
||||
"tabId": "product4",
|
||||
"blockClass": "content-render"
|
||||
},
|
||||
"children": ["html#description"]
|
||||
},
|
||||
|
||||
"tab-content.item#product5": {
|
||||
"props": {
|
||||
"tabId": "product5",
|
||||
"blockClass": "content-render"
|
||||
},
|
||||
"children": ["html#description"]
|
||||
},
|
||||
|
||||
// "html#imageDescriptionContainer": {
|
||||
// "props": {
|
||||
// "blockClass": "image-description"
|
||||
// },
|
||||
// "children": ["product-images#imageDescription"]
|
||||
// },
|
||||
|
||||
"product-images#imageDescription": {
|
||||
"props": {
|
||||
"displayMode": "first-image",
|
||||
"blockClass": "img-description",
|
||||
"zoomMode": "disabled"
|
||||
}
|
||||
},
|
||||
|
||||
"html#description": {
|
||||
"props": {
|
||||
"blockClass": "description-container"
|
||||
},
|
||||
"children": ["product-images#imageDescription", "product-description"]
|
||||
},
|
||||
|
||||
|
||||
// "flex-layout.row#quantity-buy-button": {
|
||||
// "props": {
|
||||
// "blockClass": "quantity-buy-button"
|
||||
// },
|
||||
// "children": [
|
||||
// "html#product-quantity",
|
||||
// "flex-layout.row#buy-button"
|
||||
// ]
|
||||
// },
|
||||
|
||||
// CARROSSEL DE PRODUTOS
|
||||
"list-context.product-list#carousel-list": {
|
||||
"blocks": ["product-summary.shelf#carousel-shelf"],
|
||||
"children": ["html#slider"]
|
||||
},
|
||||
|
||||
"product-summary.shelf#carousel-shelf": {
|
||||
"children": [
|
||||
"html#shelf"
|
||||
]
|
||||
},
|
||||
|
||||
"html#shelf": {
|
||||
"props": {
|
||||
"testId": "vtex-product-summary"
|
||||
},
|
||||
"children": [
|
||||
"product-summary-image",
|
||||
"product-summary-name",
|
||||
"product-summary-space",
|
||||
"product-list-price",
|
||||
"product-selling-price"
|
||||
]
|
||||
},
|
||||
|
||||
"product-list-price": {
|
||||
"props": {
|
||||
"message": "de {listPriceValue} por"
|
||||
}
|
||||
},
|
||||
|
||||
"html#slider": {
|
||||
"props": {
|
||||
"testId": "product-summary-list",
|
||||
"blockClass": "product-summary"
|
||||
},
|
||||
"children": [
|
||||
"slider-layout#carousel"
|
||||
]
|
||||
},
|
||||
|
||||
"slider-layout#carousel": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "always",
|
||||
"blockClass": "carousel"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
"html#product-name": {
|
||||
"props": {
|
||||
"testId": "product-name"
|
||||
},
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
|
||||
"sku-selector": {
|
||||
"html#sku-selector": {
|
||||
"props": {
|
||||
"variationsSpacing": 3,
|
||||
"showValueNameForImageVariation": true
|
||||
}
|
||||
"showValueNameForImageVariation": true,
|
||||
"blockClass": "sku-size",
|
||||
"testId": "sku-selector"
|
||||
},
|
||||
"children": [
|
||||
"sku-selector"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"marginBottom": 7,
|
||||
"width": "73%",
|
||||
"blockClass": "buy-button-row"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
"children": ["html#product-quantity", "html#add-to-cart-button"]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-availability": {
|
||||
"props": {
|
||||
"blockClass": "container-main-content",
|
||||
"colGap": 7,
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
@ -159,10 +430,10 @@
|
||||
"blockClass": "info-availability"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
"flex-layout.row#availability"
|
||||
"html#product-name",
|
||||
"html#identifier",
|
||||
"flex-layout.row#availability",
|
||||
"html#sku-selector"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#availability": {
|
||||
@ -181,5 +452,40 @@
|
||||
"Pinterest": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-quantity": {
|
||||
"props": {
|
||||
"testId": "product-quantity"
|
||||
},
|
||||
"children": [
|
||||
"product-quantity"
|
||||
]
|
||||
},
|
||||
|
||||
"product-quantity": {
|
||||
"props": {
|
||||
"size": "large",
|
||||
"width": "28%",
|
||||
"showLabel": false
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-installments": {
|
||||
"props": {
|
||||
"installmentsCriteria": "max-quality-without-interest",
|
||||
"blockClass": "fees",
|
||||
"testId": "product-installments"
|
||||
},
|
||||
"children": [
|
||||
"product-installments"
|
||||
]
|
||||
},
|
||||
|
||||
"newsletter": {
|
||||
"props": {
|
||||
"label": "Assine nossa newsletter",
|
||||
"placeholder": "Digite seu e-mail"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,5 +5,9 @@
|
||||
"html": {
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
},
|
||||
|
||||
"Pix": {
|
||||
"component": "Pix"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -6,11 +6,14 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.html {
|
||||
background-color: red;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
background-color: green;
|
||||
background-color: none;
|
||||
}
|
||||
9
styles/css/global.css
Normal file
9
styles/css/global.css
Normal file
@ -0,0 +1,9 @@
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
23
styles/css/vtex.add-to-cart-button.css
Normal file
23
styles/css/vtex.add-to-cart-button.css
Normal file
@ -0,0 +1,23 @@
|
||||
@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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.buttonText {
|
||||
font-size: 0;
|
||||
}
|
||||
.buttonText::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
58
styles/css/vtex.breadcrumb.css
Normal file
58
styles/css/vtex.breadcrumb.css
Normal file
@ -0,0 +1,58 @@
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
padding: 0 40px 16px;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.container {
|
||||
padding: 0 360px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.homeIcon,
|
||||
.homeLink {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow--1 {
|
||||
padding-left: 0;
|
||||
}
|
||||
.arrow--1 .caretIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link--1 {
|
||||
font-size: 0px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.link--1::after {
|
||||
content: "Home";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.link--2 {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.term {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -1,98 +1,68 @@
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.5rem;
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.flexRowContent--buy-button-row :global(.vtex-button) {
|
||||
background: #000000;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
.stretchChildrenWidth {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
max-width: unset !important;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.stretchChildrenWidth {
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80rem) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.25rem;
|
||||
.flexRowContent--buy-button-row {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
|
||||
padding: 0 360px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--menu-link {
|
||||
background-color: #03044e;
|
||||
color: #fff;
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header {
|
||||
background-color: #f0f0f0;
|
||||
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--main-header-mobile {
|
||||
align-items: center;
|
||||
padding: 0.625rem 0.5rem;
|
||||
background-color: #f0f0f0;
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
@media only screen and (max-width: 1025px) {
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
12
styles/css/vtex.numeric-stepper-container.css
Normal file
12
styles/css/vtex.numeric-stepper-container.css
Normal 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 */
|
||||
.numeric-stepper__input {
|
||||
background: black;
|
||||
}
|
||||
12
styles/css/vtex.numeric-stepper.css
Normal file
12
styles/css/vtex.numeric-stepper.css
Normal 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 */
|
||||
.numeric-stepper__input {
|
||||
background: black;
|
||||
}
|
||||
@ -1,3 +1,32 @@
|
||||
.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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.product-identifier__label {
|
||||
display: none;
|
||||
}
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
.product-identifier__value {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.product-identifier__value {
|
||||
justify-content: unset;
|
||||
}
|
||||
}
|
||||
@ -1,79 +1,74 @@
|
||||
.listPrice {
|
||||
color: #727273;
|
||||
margin-bottom: .25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
color: #3f3f40;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.sellingPriceValue {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
color: #727273;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0px;
|
||||
}
|
||||
.installments .installmentsNumber--36 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments .installmentsNumber--36::after {
|
||||
content: " x de ";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments .installmentValue {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments .installmentValue::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.savings {
|
||||
font-weight: 500;
|
||||
color: #79B03A;
|
||||
.listPrice {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-bottom: 8px;
|
||||
color: #bababa;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listPrice {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2E2E2E;
|
||||
:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.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;
|
||||
@media only screen and (max-width: 1025px) {
|
||||
:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
17
styles/css/vtex.product-quantity.css
Normal file
17
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,17 @@
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.quantitySelectorContainer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -1,42 +1,99 @@
|
||||
.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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.imageNormal {
|
||||
width: 105%;
|
||||
height: 314px;
|
||||
max-height: unset;
|
||||
max-width: 314px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.imageNormal {
|
||||
height: 291.2px;
|
||||
max-width: 291.2px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.imageNormal {
|
||||
height: 124.8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
.brandName {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.brandName {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
justify-content: start;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
.priceContainer {
|
||||
padding: 0;
|
||||
}
|
||||
.priceContainer .listPriceContainer {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #bababa;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.priceContainer .listPriceContainer {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.priceContainer .listPriceContainer::after {
|
||||
content: "por";
|
||||
}
|
||||
.priceContainer .listPriceContainer .listPrice {
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
.priceContainer .sellingPriceLabel {
|
||||
display: none;
|
||||
}
|
||||
.priceContainer .installmentContainer {
|
||||
display: none;
|
||||
}
|
||||
.priceContainer .price_sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: #000000;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.priceContainer .price_sellingPrice {
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.priceContainer .sellingPriceContainer {
|
||||
padding: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
:global(.vtex-product-summary-2-x-clearLink) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
@ -6,4 +6,7 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
@ -1,31 +1,80 @@
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.sliderLayoutContainer {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.sliderLayoutContainer {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
.imageContainer {
|
||||
max-width: 314px;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: #EDEDED;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.paginationDotsContainer .paginationDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
|
||||
width: 17px !important;
|
||||
height: 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;
|
||||
.sliderRightArrow {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.sliderRightArrow::after {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
|
||||
}
|
||||
|
||||
.sliderLeftArrow {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.sliderLeftArrow::before {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.sliderLeftArrow::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -6,7 +7,710 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.newsletter {
|
||||
background: red;
|
||||
.container {
|
||||
padding: 0;
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.discountInsideContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-color: #cccccc;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
background: #fff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
background: #fff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
text-align: right;
|
||||
margin-bottom: 8px;
|
||||
color: #575757;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productNameContainer {
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.productImage .productImageTag {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
max-height: unset !important;
|
||||
object-fit: contain;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productImage .productImageTag {
|
||||
max-height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.productImagesGallerySlide {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productImagesGallerySlide {
|
||||
max-width: none !important;
|
||||
width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.carouselGaleryThumbs {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
height: 90px !important;
|
||||
width: unset !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.productImagesThumb .thumbImg {
|
||||
max-width: 90px;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor {
|
||||
margin-bottom: 16px;
|
||||
order: 2;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue,
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
|
||||
border-color: #000000;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
|
||||
content: "OUTRAS CORES";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
color: #929292;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
|
||||
display: none;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
||||
top: -2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-color: #000000;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
color: #929292;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorImageValue {
|
||||
display: none;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
bottom: 3px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemImageValue {
|
||||
max-width: 100%;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorItem--selected .diagonalCross {
|
||||
color: #000000;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross {
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorItem--sku-size {
|
||||
margin: 0 16px 0 0;
|
||||
}
|
||||
|
||||
.subscriberContainer {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.submit :global(.vtex-button) {
|
||||
background: #000000;
|
||||
height: 40px;
|
||||
margin-top: -1px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
color: rgba(185, 185, 185, 0.6);
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productImageTag {
|
||||
max-width: 100%;
|
||||
max-height: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.address-form__field .input__label {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
|
||||
margin: 0;
|
||||
}
|
||||
:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-skuSelectorSubcontainer) .diagonalCross {
|
||||
top: 7px;
|
||||
right: 2px;
|
||||
left: 1px;
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
position: relative;
|
||||
left: 32px;
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
text-decoration: underline;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.shippingContainer :global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 148px;
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
font-size: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #000000;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
min-width: 49px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-button)::after {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input__label) {
|
||||
font-size: 0px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input__label)::after {
|
||||
content: "CALCULAR FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
:global(.vtex-address-form__field--small) {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
:global(.vtex-address-form__field--small) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.shippingTable .shippingTableHead {
|
||||
display: block;
|
||||
}
|
||||
.shippingTable .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTable .shippingTableRow {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: #202020;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
padding-right: 122px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
width: auto;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 3;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: #202020;
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
width: auto;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
display: flex;
|
||||
order: 2;
|
||||
font-size: 0;
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
width: auto;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after {
|
||||
content: "FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.shippingTable .shippingTableHeadDeliveryName,
|
||||
.shippingTable .shippingTableCellDeliveryName {
|
||||
width: 23.9263%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
.shippingTable .shippingTableHeadDeliveryEstimate,
|
||||
.shippingTable .shippingTableCellDeliveryEstimate {
|
||||
width: 41.7177%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
.shippingTable .shippingTableCellDeliveryPrice,
|
||||
.shippingTable .shippingTableHeadDeliveryPrice {
|
||||
width: 14.7239%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.shippingTableBody .shippingtableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
}
|
||||
.shippingTableBody .shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 3;
|
||||
}
|
||||
.shippingTableBody .shippingTableCellDeliveryName,
|
||||
.shippingTableBody .currencyContainer,
|
||||
.shippingTableBody .shippingTableCellDeliveryEstimate {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
.shippingTableBody .shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTableBody .shippingTableCellDeliveryName {
|
||||
width: 97px;
|
||||
margin-right: 21px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 399px) {
|
||||
.shippingTableBody .shippingTableCellDeliveryPrice {
|
||||
width: 55px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscriberContainer .title {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.subscriberContainer .title::after {
|
||||
content: "Produto Indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.subscriberContainer .title .subscribeLabel {
|
||||
font-size: 0;
|
||||
}
|
||||
.subscriberContainer .title .subscribeLabel::after {
|
||||
content: "Deseja saber quando estiver disponível";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.subscriberContainer .form {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.subscriberContainer .form .content {
|
||||
display: grid;
|
||||
grid-template-areas: " nome email" " submit submit";
|
||||
justify-content: inherit;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.subscriberContainer .form .content {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
.subscriberContainer .form .content .inputName {
|
||||
grid-area: nome;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.subscriberContainer .form .content .inputEmail {
|
||||
grid-area: email;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.subscriberContainer .form .content .submit {
|
||||
grid-area: submit;
|
||||
width: 100%;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.subscriberContainer .form .content .submit :global(.vtex-button) {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
|
||||
content: "avise-me";
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.productDescriptionContainer {
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productDescriptionContainer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 8px;
|
||||
color: #575757;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
border-bottom: 1px solid #bfbfbf;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 175px;
|
||||
background: #000000;
|
||||
color: #fff;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
.newsletter .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
.newsletter .container .form {
|
||||
max-width: 774px;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.newsletter .container .form {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter .container .form {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
}
|
||||
.newsletter .container .form .label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #fff;
|
||||
}
|
||||
.newsletter .container .form .label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #929292;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter .container .form .label::after {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.newsletter :global(.vtex-store-components-3-x-inputGroup) {
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter :global(.vtex-store-components-3-x-inputGroup) {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.newsletter .buttonContainer {
|
||||
padding: 0;
|
||||
}
|
||||
.newsletter :global(.vtex-button) {
|
||||
border: none;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter :global(.vtex-button) {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
.newsletter :global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
.newsletter :global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #929292;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.newsletter :global(.vtex-styleguide-9-x-input) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
169
styles/css/vtex.tab-layout.css
Normal file
169
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,169 @@
|
||||
@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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.container--structure {
|
||||
padding: 0 40px;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.container--structure {
|
||||
padding: 0 360px;
|
||||
}
|
||||
}
|
||||
.container--structure::after {
|
||||
content: "Você também pode gostar:";
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
padding: 16px 0 32px 0;
|
||||
color: #575757;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container--structure::after {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
|
||||
width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
|
||||
max-width: unset !important;
|
||||
max-height: 944px !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
|
||||
max-width: unset !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
padding: 0 32px;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.contentContainer {
|
||||
padding: 16px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
height: 43px;
|
||||
justify-content: space-between;
|
||||
padding: 0 64px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.listContainer {
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer {
|
||||
border-top: 1px solid #b9b9b9;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 16px 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItem {
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button) {
|
||||
border: none;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItem :global(.vtex-button) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button):hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button__label) {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
text-transform: capitalize;
|
||||
padding: 0.25em 10px 0.32em;
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.listContainer .listItem :global(.vtex-button__label) {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItem :global(.vtex-button__label) {
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 !important;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItemActive {
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button) {
|
||||
background-color: #fff;
|
||||
width: 114px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItemActive :global(.vtex-button) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button__label) {
|
||||
color: #000000;
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #000000;
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.listContainer .listItemActive :global(.vtex-button__label) {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
height: fit-content;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1025px) {
|
||||
:global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,7 @@
|
||||
.html {
|
||||
background-color: red;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
background-color: green;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
|
||||
12
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
12
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.buttonText {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
49
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
49
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
@ -0,0 +1,49 @@
|
||||
.container {
|
||||
padding: 0 40px 16px ;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 0 360px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.homeIcon,
|
||||
.homeLink {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow--1 {
|
||||
padding-left: 0;
|
||||
.caretIcon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link--1 {
|
||||
font-size: 0px;
|
||||
padding-left: 0;
|
||||
|
||||
&::after {
|
||||
content: "Home";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.link--2 {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.term {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
52
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
52
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,52 @@
|
||||
.flexRowContent--buy-button-row :global(.vtex-button) {
|
||||
background: $black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stretchChildrenWidth {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
max-width: unset !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--buy-button-row {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
|
||||
padding: 0 40px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 0 360px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
|
||||
padding-right: 32px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
|
||||
gap: 32px;
|
||||
|
||||
@include mq(md, max) {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
24
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
24
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.product-identifier {
|
||||
|
||||
&__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__value {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
padding-bottom: 24px;
|
||||
|
||||
@include mq(md, max) {
|
||||
justify-content: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
styles/sass/pages/product/vtex.product-price.scss
Normal file
74
styles/sass/pages/product/vtex.product-price.scss
Normal file
@ -0,0 +1,74 @@
|
||||
.sellingPriceValue {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-size: 0px;
|
||||
|
||||
.installmentsNumber--36 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
|
||||
&::after {
|
||||
content: " x de ";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.installmentValue {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
|
||||
&::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CARROSSEL
|
||||
.listPrice {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) {
|
||||
.sellingPriceValue {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
|
||||
color: $black;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
5
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.quantitySelectorContainer {
|
||||
@include mq(sm, max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
97
styles/sass/pages/product/vtex.product-summary.scss
Normal file
97
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,97 @@
|
||||
// .imageContainer {
|
||||
// width: 314px;
|
||||
// height: 314px;
|
||||
// }
|
||||
|
||||
.imageNormal {
|
||||
width: 105%;
|
||||
height: 314px;
|
||||
max-height: unset;
|
||||
max-width: 314px;
|
||||
object-fit: contain;
|
||||
|
||||
@include mq(md, max) {
|
||||
height: 291.2px;
|
||||
max-width: 291.2px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 124.8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $black;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.priceContainer {
|
||||
padding: 0;
|
||||
|
||||
.listPriceContainer {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "por";
|
||||
}
|
||||
|
||||
.listPrice {
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.installmentContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.price_sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
|
||||
color: $black;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceContainer {
|
||||
padding: 0 0 32px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-product-summary-2-x-clearLink) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
79
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
79
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,79 @@
|
||||
.sliderLayoutContainer {
|
||||
margin-bottom: 64px;
|
||||
padding: 0 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
:global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
max-width: 314px;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: $gray-600;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.paginationDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: $black;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
background-color: $white !important;
|
||||
border: 0.5px solid $black;
|
||||
}
|
||||
|
||||
.sliderRightArrow {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
|
||||
|
||||
|
||||
// @include mq(sm, max) {
|
||||
// padding: 0 48px 0 0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.sliderLeftArrow {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// @include mq(sm, max) {
|
||||
// padding: 0 0 0 48px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,840 @@
|
||||
.newsletter{
|
||||
background: red;
|
||||
.container {
|
||||
padding: 0;
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
|
||||
@include mq(xl, min) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.discountInsideContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-color: $gray-200;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
background: $white;
|
||||
border-color: $gray-200;
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button__text) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
background: $white;
|
||||
border-color: $gray-200;
|
||||
|
||||
:global(.vtex-numeric-stepper__plus-button__text) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// TITULO E IMAGENS
|
||||
.productNameContainer {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
text-align: right;
|
||||
margin-bottom: 8px;
|
||||
|
||||
color: $gray-100;
|
||||
|
||||
@include mq(md, max) {
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.productImage {
|
||||
.productImageTag {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
max-height: unset !important;
|
||||
object-fit: contain;
|
||||
max-width: 100% !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productImagesGallerySlide {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: none !important;
|
||||
width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
height: 90px !important;
|
||||
width: unset !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 16px;
|
||||
|
||||
.thumbImg {
|
||||
max-width: 90px;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
// sku Tamanho e Cor
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
margin-bottom: 16px;
|
||||
order: 2;
|
||||
|
||||
.frameAround,
|
||||
.skuSelectorImageValue,
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.frameAround {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
.skuSelectorTextContainer {
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "OUTRAS CORES";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorSelectorImageValue {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.frameAround,
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.frameAround {
|
||||
top: -2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
.skuSelectorTextContainer {
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorImageValue {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diagonalCross {
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
bottom: 3px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.skuSelectorItemImageValue {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItem--selected {
|
||||
.skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.diagonalCross {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItemImage--sku-size {
|
||||
.diagonalCross {
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
.skuSelectorItem--sku-size {
|
||||
margin: 0 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.subscriberContainer {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.submit {
|
||||
:global(.vtex-button) {
|
||||
background: $black;
|
||||
height: 40px;
|
||||
margin-top: -1px;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItem--sku-size-selected {
|
||||
.skuSelectorItemTextValue-sku-size {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
color: rgba(185, 185, 185, 0.6);
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100%;
|
||||
max-height: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.address-form__field {
|
||||
.input__label {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
|
||||
margin: 0;
|
||||
|
||||
:global(.vtex-store-components-3-x-skuSelectorOptionsList) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-skuSelectorSubcontainer) {
|
||||
.diagonalCross {
|
||||
top: 7px;
|
||||
right: 2px;
|
||||
left: 1px;
|
||||
bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// :global(.vtex-store-components-3-x-skuSelectorItemImage) {
|
||||
// .diagonalCross {
|
||||
// top: 8px;
|
||||
// right: 3px;
|
||||
// left: 3px;
|
||||
// bottom: 7px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// CEP
|
||||
.shippingContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.vtex-input__suffix) {
|
||||
@include mq(sm, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
position: relative;
|
||||
left: 32px;
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
text-decoration: underline;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mq(sm, max) {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 148px;
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
|
||||
font-size: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: $black;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(sm, max) {
|
||||
min-width: 49px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0px;
|
||||
|
||||
&::after {
|
||||
content: "CALCULAR FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-address-form__field--small) {
|
||||
padding-bottom: 16px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// ENTREGA
|
||||
|
||||
.shippingTable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include mq(xs, max) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryName {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black-100;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding-right: 122px;
|
||||
}
|
||||
|
||||
@include mq(xs, max) {
|
||||
width: auto;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 3;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black-100;
|
||||
|
||||
@include mq(xs, max) {
|
||||
width: auto;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
display: flex;
|
||||
order: 2;
|
||||
|
||||
font-size: 0;
|
||||
|
||||
@include mq(xs, max) {
|
||||
width: auto;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "FRETE";
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $black-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryName,
|
||||
.shippingTableCellDeliveryName {
|
||||
width: 23.9263%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate,
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
width: 41.7177%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice,
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
width: 14.7239%;
|
||||
padding: 0 0 15px 0;
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableBody {
|
||||
.shippingtableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryName,
|
||||
.currencyContainer,
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryName {
|
||||
@include mq(xs, max) {
|
||||
width: 97px;
|
||||
margin-right: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
@include mq(xs, max) {
|
||||
width: 55px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// PRODUTO INDISPONÍVEL
|
||||
.subscriberContainer {
|
||||
|
||||
.title {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
content: "Produto Indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.subscribeLabel {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "Deseja saber quando estiver disponível";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-areas: " nome email"
|
||||
" submit submit";
|
||||
justify-content: inherit;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.inputName {
|
||||
grid-area: nome;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.inputEmail {
|
||||
grid-area: email;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.submit {
|
||||
grid-area: submit;
|
||||
width: 100%;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 0;
|
||||
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "avise-me";
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DESCRIÇÃO
|
||||
.productDescriptionContainer {
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
color: $gray-100;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 20px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
color: $gray;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
border-bottom: 1px solid $gray-400;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// :global(.vtex-store-components-3-x-productDescriptionContainer) {
|
||||
// width: 100% !important;
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
}
|
||||
|
||||
// :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
|
||||
// max-width: 632px;
|
||||
// width: 100%;
|
||||
// height: 632px;
|
||||
|
||||
// @include mq(md, max) {
|
||||
// max-width: unset;
|
||||
// height: 944px;
|
||||
// }
|
||||
|
||||
// @include mq(sm, max) {
|
||||
// height: unset;
|
||||
// }
|
||||
// }
|
||||
|
||||
// NEWSLETTER
|
||||
.newsletter {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 175px;
|
||||
|
||||
background: $black;
|
||||
color: $white;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
// padding-top: 32px;
|
||||
// margin: 0;
|
||||
|
||||
.form {
|
||||
max-width: 774px;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
|
||||
color: $white;
|
||||
|
||||
&::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $gray;
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-inputGroup) {
|
||||
@include mq(md, max) {
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-button ) {
|
||||
border: none;
|
||||
border-bottom: 3px solid $gray-400;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $white;
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid $gray-800;
|
||||
}
|
||||
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $gray;
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
156
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,156 @@
|
||||
.container--structure {
|
||||
padding: 0 40px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 0 360px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Você também pode gostar:";
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
padding: 16px 0 32px 0;
|
||||
|
||||
color: $gray-100;
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-productImageTag--img-description--main) {
|
||||
width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: unset !important;
|
||||
max-height: 944px !important;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
max-width: unset !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
padding: 0 32px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 16px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
height: 43px;
|
||||
justify-content: space-between;
|
||||
padding: 0 64px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
border-top: 1px solid $gray-500;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 16px 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
@include mq(md, max) {
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
border: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
color: $gray-400;
|
||||
text-transform: capitalize;
|
||||
padding: 0.25em 10px 0.32em;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 !important;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listItemActive {
|
||||
@include mq(md, max) {
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
background-color: $white;
|
||||
width: 114px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
border-bottom: 2px solid $black;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
height: fit-content;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-tab-layout-0-x-contentItem--content-render) {
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
@include mq(md, max) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,24 @@
|
||||
$color-black: #292929;
|
||||
/* Fontes */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* Cores */
|
||||
$color-black: #292929;
|
||||
$black-100: #202020;
|
||||
$black: #000000;
|
||||
|
||||
$white: #fff;
|
||||
|
||||
$gray: #929292;
|
||||
$gray-100: #575757;
|
||||
$gray-200: #cccccc;
|
||||
$gray-300: #868686;
|
||||
$gray-400: #bfbfbf;
|
||||
$gray-500: #b9b9b9;
|
||||
$gray-600: #EDEDED;
|
||||
$gray-700: #bababa;
|
||||
$gray-800: #cccccc;
|
||||
$gray-900: #afafaf;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
@ -14,12 +32,11 @@ $color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xss: 0,
|
||||
xs: 400px,
|
||||
sm: 768px,
|
||||
md: 1026px,
|
||||
xl: 1920px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user