forked from M3-Academy/challenge-vtex-io
feat:adiciona componente desconto pix
This commit is contained in:
parent
bbbfb896d9
commit
d66e6440e9
3
react/PixPrice.tsx
Normal file
3
react/PixPrice.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import PixPrice from "./components/PixPrice/PixPrice";
|
||||||
|
|
||||||
|
export default PixPrice;
|
@ -7,6 +7,7 @@
|
|||||||
[class*="html--buy-button"] {
|
[class*="html--buy-button"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="html--buy-button"] :global(.vtex-button) {
|
[class*="html--buy-button"] :global(.vtex-button) {
|
||||||
|
35
react/components/PixPrice/PixPrice.tsx
Normal file
35
react/components/PixPrice/PixPrice.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useProduct } from "vtex.product-context";
|
||||||
|
import styles from "./styles.module.css";
|
||||||
|
|
||||||
|
const PixPrice = () => {
|
||||||
|
// document.getElementsByClassName("myText").placeholder = "Type name here..";
|
||||||
|
|
||||||
|
const productContextValue = useProduct();
|
||||||
|
|
||||||
|
const productPrice =
|
||||||
|
productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
|
||||||
|
|
||||||
|
const descount = (Number(productPrice) * 10) / 100;
|
||||||
|
|
||||||
|
const total = Number(productPrice) - Number(descount.toFixed(2));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles["pixPrice-container"]}>
|
||||||
|
<div className={styles["pixPrice-content"]}>
|
||||||
|
<div className={styles["pixPrice-img"]}>
|
||||||
|
<img
|
||||||
|
src="https://agenciamagma.vtexassets.com/arquivos/pixRafaelSampaio.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles["pixPrice-descount"]}>
|
||||||
|
<p className={styles["pixPrice-value"]}>R$ {total.toFixed(2)}</p>
|
||||||
|
<p className={styles["pixPrice-text"]}>10 % de desconto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PixPrice;
|
34
react/components/PixPrice/styles.module.css
Normal file
34
react/components/PixPrice/styles.module.css
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
.pixPrice-container {
|
||||||
|
display: flex;
|
||||||
|
height: 39px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixPrice-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixPrice-img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixPrice-value,
|
||||||
|
.pixPrice-text {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixPrice-value {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba(0, 0, 0, 0.58);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixPrice-text {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 13px;
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
@ -117,6 +117,7 @@
|
|||||||
"product-rating-summary",
|
"product-rating-summary",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
|
"PixPrice",
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
"product-gifts",
|
"product-gifts",
|
||||||
// "flex-layout.row#buy-button",
|
// "flex-layout.row#buy-button",
|
||||||
|
@ -5,5 +5,9 @@
|
|||||||
"html": {
|
"html": {
|
||||||
"component": "html",
|
"component": "html",
|
||||||
"composition": "children"
|
"composition": "children"
|
||||||
|
},
|
||||||
|
|
||||||
|
"PixPrice": {
|
||||||
|
"component": "PixPrice"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,28 @@
|
|||||||
{
|
{
|
||||||
"typeScale": [
|
"typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
|
||||||
3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
|
|
||||||
],
|
|
||||||
"spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
|
"spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
|
||||||
"customMedia": [
|
"customMedia": [
|
||||||
{ "s": 20 },
|
{ "s": 20 },
|
||||||
{ "ns": {
|
{
|
||||||
|
"ns": {
|
||||||
"value": 40,
|
"value": 40,
|
||||||
"minWidth": true
|
"minWidth": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "m": {
|
{
|
||||||
|
"m": {
|
||||||
"value": 40,
|
"value": 40,
|
||||||
"minWidth": true
|
"minWidth": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "l": {
|
{
|
||||||
|
"l": {
|
||||||
"value": 64,
|
"value": 64,
|
||||||
"minWidth": true
|
"minWidth": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "xl": {
|
{
|
||||||
|
"xl": {
|
||||||
"value": 80,
|
"value": 80,
|
||||||
"minWidth": true
|
"minWidth": true
|
||||||
}
|
}
|
||||||
@ -245,92 +247,92 @@
|
|||||||
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
|
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
|
||||||
"heights": [1, 2, 4, 8, 16],
|
"heights": [1, 2, 4, 8, 16],
|
||||||
"sizes": [
|
"sizes": [
|
||||||
{"name": "small", "value": 2},
|
{ "name": "small", "value": 2 },
|
||||||
{"name": "regular", "value": 2.5},
|
{ "name": "regular", "value": 2.5 },
|
||||||
{"name": "large", "value": 3}
|
{ "name": "large", "value": 3 }
|
||||||
],
|
],
|
||||||
"typography":{
|
"typography": {
|
||||||
"measure": [30, 34, 20],
|
"measure": [30, 34, 20],
|
||||||
"styles": {
|
"styles": {
|
||||||
"heading-1": {
|
"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",
|
"fontWeight": "700",
|
||||||
"fontSize": "3rem",
|
"fontSize": "3rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"heading-2": {
|
"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",
|
"fontWeight": "700",
|
||||||
"fontSize": "2.25rem",
|
"fontSize": "2.25rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"heading-3": {
|
"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",
|
"fontWeight": "700",
|
||||||
"fontSize": "1.75rem",
|
"fontSize": "1.75rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"heading-4": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "1.5rem",
|
"fontSize": "1.5rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"heading-5": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "1.25rem",
|
"fontSize": "1.25rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"heading-6": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "1.25rem",
|
"fontSize": "1.25rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"body": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "1rem",
|
"fontSize": "1rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"small": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "0.875rem",
|
"fontSize": "0.875rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"mini": {
|
"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",
|
"fontWeight": "normal",
|
||||||
"fontSize": "0.75rem",
|
"fontSize": "0.75rem",
|
||||||
"textTransform": "initial",
|
"textTransform": "initial",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"action": {
|
"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",
|
"fontWeight": "500",
|
||||||
"fontSize": "1rem",
|
"fontSize": "1rem",
|
||||||
"textTransform": "uppercase",
|
"textTransform": "uppercase",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"action--small": {
|
"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",
|
"fontWeight": "500",
|
||||||
"fontSize": "0.875rem",
|
"fontSize": "0.875rem",
|
||||||
"textTransform": "uppercase",
|
"textTransform": "uppercase",
|
||||||
"letterSpacing": "0"
|
"letterSpacing": "0"
|
||||||
},
|
},
|
||||||
"action--large": {
|
"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",
|
"fontWeight": "500",
|
||||||
"fontSize": "1.25rem",
|
"fontSize": "1.25rem",
|
||||||
"textTransform": "uppercase",
|
"textTransform": "uppercase",
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.flexRowContent {
|
.flexRowContent {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
|
@ -1,5 +1,20 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
.product-identifier--productReference {
|
.product-identifier--productReference {
|
||||||
margin-bottom: 24px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-identifier__value {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
@ -7,6 +7,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.newsletter {
|
.newsletter {
|
||||||
background: red;
|
background: red;
|
||||||
@ -15,6 +16,11 @@
|
|||||||
.productBrand--quickview {
|
.productBrand--quickview {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
color: #575757;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryThumbs {
|
.carouselGaleryThumbs {
|
||||||
@ -74,6 +80,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
content: "OUTRAS CORES:";
|
content: "OUTRAS CORES:";
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skuSelectorSubcontainer--tamanho {
|
.skuSelectorSubcontainer--tamanho {
|
||||||
@ -86,6 +93,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
content: "OUTROS TAMANHOS:";
|
content: "OUTROS TAMANHOS:";
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImagesThumb {
|
.productImagesThumb {
|
||||||
@ -117,6 +125,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display: block;
|
display: block;
|
||||||
content: "CALCULAR FRETE:";
|
content: "CALCULAR FRETE:";
|
||||||
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||||
@ -129,7 +138,7 @@
|
|||||||
width: 49px;
|
width: 49px;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 33.4%;
|
left: 232px;
|
||||||
top: 33%;
|
top: 33%;
|
||||||
background: #292929;
|
background: #292929;
|
||||||
border: none;
|
border: none;
|
||||||
@ -152,7 +161,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 43%;
|
left: 302px;
|
||||||
top: 36%;
|
top: 36%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -167,6 +176,7 @@
|
|||||||
.shippingTable {
|
.shippingTable {
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
max-width: 382px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHead {
|
.shippingTableHead {
|
||||||
@ -175,7 +185,6 @@
|
|||||||
|
|
||||||
.shippingTableRow {
|
.shippingTableRow {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryName {
|
.shippingTableHeadDeliveryName {
|
||||||
@ -196,7 +205,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
left: 242%;
|
left: 342%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryEstimate::after {
|
.shippingTableHeadDeliveryEstimate::after {
|
||||||
@ -213,7 +222,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
left: 138%;
|
left: 198%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryPrice::after {
|
.shippingTableHeadDeliveryPrice::after {
|
||||||
@ -229,3 +238,25 @@
|
|||||||
.shippingTableRadioBtn {
|
.shippingTableRadioBtn {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryName,
|
||||||
|
.shippingTableCellDeliveryEstimate,
|
||||||
|
.shippingTableCellDeliveryPrice {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #afafaf;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryEstimate {
|
||||||
|
position: absolute;
|
||||||
|
left: 62%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryPrice {
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
.flexRowContent {
|
.flexRowContent {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
|
11
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
11
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.product-identifier--productReference {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-identifier__value {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
@ -10,6 +10,11 @@
|
|||||||
.productBrand--quickview {
|
.productBrand--quickview {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
color: $color-gray8;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryThumbs {
|
.carouselGaleryThumbs {
|
||||||
@ -69,6 +74,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
content: "OUTRAS CORES:";
|
content: "OUTRAS CORES:";
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: $color-gray7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -83,6 +89,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
content: "OUTROS TAMANHOS:";
|
content: "OUTROS TAMANHOS:";
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: $color-gray7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -118,6 +125,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display: block;
|
display: block;
|
||||||
content: "CALCULAR FRETE:";
|
content: "CALCULAR FRETE:";
|
||||||
|
color: $color-gray7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||||
@ -130,7 +138,7 @@
|
|||||||
width: 49px;
|
width: 49px;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 33.4%;
|
left: 232px;
|
||||||
top: 33%;
|
top: 33%;
|
||||||
background: $color-black;
|
background: $color-black;
|
||||||
border: none;
|
border: none;
|
||||||
@ -153,7 +161,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 43%;
|
left: 302px;
|
||||||
top: 36%;
|
top: 36%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -168,6 +176,7 @@
|
|||||||
.shippingTable {
|
.shippingTable {
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
max-width: 382px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHead {
|
.shippingTableHead {
|
||||||
@ -176,7 +185,6 @@
|
|||||||
|
|
||||||
.shippingTableRow {
|
.shippingTableRow {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryName {
|
.shippingTableHeadDeliveryName {
|
||||||
@ -197,7 +205,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
left: 242%;
|
left: 342%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryEstimate::after {
|
.shippingTableHeadDeliveryEstimate::after {
|
||||||
@ -214,7 +222,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
left: 138%;
|
left: 198%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryPrice::after {
|
.shippingTableHeadDeliveryPrice::after {
|
||||||
@ -230,3 +238,25 @@
|
|||||||
.shippingTableRadioBtn {
|
.shippingTableRadioBtn {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryName,
|
||||||
|
.shippingTableCellDeliveryEstimate,
|
||||||
|
.shippingTableCellDeliveryPrice {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: $color-gray9;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryEstimate {
|
||||||
|
position: absolute;
|
||||||
|
left: 62%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryPrice {
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
}
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
|
||||||
|
|
||||||
$color-black: #292929;
|
$color-black: #292929;
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
@ -9,6 +11,8 @@ $color-gray4: #c4c4c4;
|
|||||||
$color-gray5: #e5e5e5;
|
$color-gray5: #e5e5e5;
|
||||||
$color-gray6: #cccccc;
|
$color-gray6: #cccccc;
|
||||||
$color-gray7: #929292;
|
$color-gray7: #929292;
|
||||||
|
$color-gray8: #575757;
|
||||||
|
$color-gray9: #afafaf;
|
||||||
|
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user