carloswinter/challenge-vtex-io-carlos-winter
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'development' (#4) from development into master

Browse Source 
Reviewed-on: #4
This commit is contained in:
Carlos Eduardo T. Winter 2023-02-10 19:23:58 +00:00
commit b59df583ec
51 changed files with 4264 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Example.tsx Normal file
View File

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

BIN
assets/images/pix-106 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
html.ts Normal file
View File

@ -0,0 +1 @@
export { Html as default } from "./components/Html"

11
index.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}

3
manifest.json
View File

@ -66,7 +66,8 @@
"vtex.tab-layout": "0.x", "vtex.tab-layout": "0.x",
"vtex.condition-layout": "2.x", "vtex.condition-layout": "2.x",
"vtex.css-handles": "1.x", "vtex.css-handles": "1.x",
"vtex.product-context": "0.x" "vtex.product-context": "0.x",
"vtex.store-newsletter": "1.x"
}, },
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
} }

2
react/Example.tsx
View File

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

3
react/Pix.tsx Normal file
View File

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

3
react/Placeholder.tsx Normal file
View File

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

1
react/Prices.tsx Normal file
View File

@ -0,0 +1 @@
export { default } from "./components/Prices/Prices";

80
react/components/Html/index.tsx
View File

@ -1,41 +1,53 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles"; import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const; const CSS_HANDLES = ["html"] as const;
type HtmlProps = { type HtmlProps = {
children?: ReactNode, children?: ReactNode;
/** /**
* Qual tag Html que deseja que seja usar * Qual tag Html que deseja que seja usar
* *
* @default div * @default div
*/ */
tag?: keyof React.ReactHTML tag?: keyof React.ReactHTML;
/** /**
* Classes CSS extras que deseja adicionar. * Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/) * Feito para uso de [classes do tachyons](https://tachyons.io/)
*/ */
tachyonsClasses?: string tachyonsClasses?: string;
/** /**
* Se caso quiser usar esse componente * Se caso quiser usar esse componente
* para adicinar um texto simples * para adicinar um texto simples
*/ */
text?: string text?: string;
/** /**
* Tag ID para * Tag ID para
*/ */
testId?: string testId?: string;
} };
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { export const Html = ({
const { handles } = useCssHandles(CSS_HANDLES); children = null,
tag = "div",
const props = { text = "",
className: `${handles.html} ${classes}`, tachyonsClasses: classes = "",
"data-testid": testId testId,
}; }: HtmlProps) => {
const Children = <>{children}{text}</>; const { handles } = useCssHandles(CSS_HANDLES);
const Element = React.createElement(tag, props, Children);
const props = {
return <>{Element}</>; className: `${handles.html} ${classes}`,
"data-testid": testId,
};
const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children);
return <>{Element}</>;
}; };

6
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,6 @@
[class*="html--cart-content"] {
display: flex;
gap: 10px;
margin-top: 8px;
margin-bottom: 16px;
}

37
react/components/Pix/Pix.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
const pix = {
pixValue: Number(
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.TotalValuePlusInterestRate
),
};
const pixPrice = (pix.pixValue = pix.pixValue * 0.9)
.toFixed(2)
.toString()
.replace(".", ",");
return (
<>
<div className={styles.PricesWrapperRow}>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logo-pix-carloswinter.svg"
alt="Imagem Pix"
/>
</figure>
<p className={styles.PricesCol}>
<span className={styles.PixFullValue}>R${pixPrice}</span>
<span className={styles.PixPercent}>10% de desconto</span>
</p>
</div>
</>
);
};
export default Pix;

38
react/components/Pix/pixImg.svg Normal file
View File

@ -0,0 +1,38 @@
<svg width="66" height="25" viewBox="0 0 66 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11153_9060)">
<path d="M27.2383 22.5291V8.76401C27.2383 7.54791 27.7106 6.38162 28.5512 5.52171C29.3918 4.6618 30.532 4.17871 31.7209 4.17871L35.6936 4.18438C36.8793 4.18682 38.0157 4.67041 38.8533 5.52902C39.6908 6.38762 40.1611 7.55107 40.1609 8.76401V11.6933C40.1609 12.9095 39.6887 14.0758 38.848 14.9359C38.0074 15.7959 36.8673 16.2791 35.6783 16.2793H30.0632" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.2734 4.17773H42.9969C43.4849 4.17773 43.9529 4.37602 44.2979 4.72897C44.6429 5.08191 44.8368 5.56061 44.8368 6.05975V16.3414" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.4659 2.58511L43.6845 1.78511C43.6384 1.73799 43.6018 1.68204 43.5769 1.62046C43.5519 1.55888 43.5391 1.49287 43.5391 1.4262C43.5391 1.35954 43.5519 1.29353 43.5769 1.23195C43.6018 1.17037 43.6384 1.11442 43.6845 1.0673L44.4659 0.268012C44.5591 0.172687 44.6856 0.119141 44.8174 0.119141C44.9493 0.119141 45.0757 0.172687 45.169 0.268012L45.9497 1.0673C45.9958 1.11442 46.0323 1.17037 46.0573 1.23195C46.0822 1.29353 46.0951 1.35954 46.0951 1.4262C46.0951 1.49287 46.0822 1.55888 46.0573 1.62046C46.0323 1.68204 45.9958 1.73799 45.9497 1.78511L45.1655 2.58511C45.1194 2.63228 45.0646 2.66971 45.0044 2.69524C44.9441 2.72078 44.8795 2.73392 44.8143 2.73392C44.7491 2.73392 44.6845 2.72078 44.6242 2.69524C44.564 2.66971 44.5092 2.63228 44.4631 2.58511" fill="#32BCAD"/>
<path d="M48.1445 4.16895H49.8535C50.7325 4.16857 51.5757 4.52541 52.1976 5.16097L56.1953 9.25026C56.3184 9.3763 56.4645 9.47629 56.6254 9.54452C56.7863 9.61274 56.9587 9.64785 57.1329 9.64785C57.307 9.64785 57.4795 9.61274 57.6404 9.54452C57.8012 9.47629 57.9474 9.3763 58.0705 9.25026L62.0536 5.17656C62.3613 4.86182 62.7267 4.61221 63.1288 4.44199C63.5309 4.27177 63.9619 4.18429 64.3971 4.18453H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.1445 16.2518H49.8535C50.7325 16.2521 51.5757 15.8952 52.1976 15.2597L56.1953 11.1704C56.444 10.9162 56.7813 10.7734 57.1329 10.7734C57.4845 10.7734 57.8217 10.9162 58.0705 11.1704L62.0536 15.2449C62.6753 15.8803 63.5182 16.2371 64.3971 16.2369H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.05 18.8639C16.6284 18.8655 16.2106 18.7816 15.8209 18.617C15.4311 18.4525 15.0771 18.2105 14.7793 17.9052L11.4993 14.5479C11.3833 14.4344 11.229 14.3711 11.0684 14.3711C10.9079 14.3711 10.7536 14.4344 10.6376 14.5479L7.34647 17.9144C7.04884 18.2202 6.69493 18.4626 6.30518 18.6276C5.91543 18.7927 5.49757 18.8771 5.07574 18.876H4.43359L8.5899 23.1275C9.21326 23.7638 10.0579 24.1212 10.9386 24.1212C11.8192 24.1212 12.6638 23.7638 13.2872 23.1275L17.4518 18.8668L17.05 18.8639Z" fill="#32BCAD"/>
<path d="M5.07644 6.99927C5.49827 6.99812 5.91614 7.0825 6.30589 7.24755C6.69565 7.41259 7.04956 7.65502 7.34716 7.96083L10.6383 11.3281C10.7527 11.4447 10.9076 11.5102 11.0691 11.5102C11.2307 11.5102 11.3856 11.4447 11.5 11.3281L14.7793 7.97358C15.0767 7.6674 15.4305 7.42467 15.8203 7.25948C16.2101 7.0943 16.6281 7.00994 17.0501 7.01131H17.4449L13.2803 2.75126C12.9719 2.43569 12.6057 2.18535 12.2028 2.01456C11.7998 1.84377 11.3678 1.75586 10.9316 1.75586C10.4954 1.75586 10.0635 1.84377 9.66049 2.01456C9.2575 2.18535 8.89136 2.43569 8.58297 2.75126L4.43359 6.99927H5.07644Z" fill="#32BCAD"/>
<path d="M20.8892 10.5358L18.3726 7.96153C18.3158 7.98526 18.2552 7.99777 18.1938 7.99838H17.0495C16.454 7.9999 15.8831 8.24182 15.4611 8.67154L12.1817 12.0239C11.8864 12.3254 11.4862 12.4948 11.0689 12.4948C10.6516 12.4948 10.2514 12.3254 9.95605 12.0239L6.66426 8.65879C6.2423 8.22881 5.67145 7.98663 5.07586 7.98492H3.67103C3.61313 7.98358 3.55591 7.97183 3.502 7.9502L0.969429 10.5358C0.347392 11.1735 -0.00195312 12.0375 -0.00195312 12.9383C-0.00195312 13.8391 0.347392 14.7032 0.969429 15.3408L3.49646 17.9257C3.55026 17.9037 3.60754 17.8919 3.66548 17.891H5.07586C5.67144 17.8892 6.24226 17.6471 6.66426 17.2172L9.95535 13.8506C10.5504 13.2427 11.5874 13.2427 12.1817 13.8506L15.4611 17.2044C15.8831 17.6341 16.454 17.876 17.0495 17.8776H18.1938C18.2552 17.878 18.3159 17.8905 18.3726 17.9144L20.8892 15.3401C21.1977 15.0246 21.4424 14.6501 21.6094 14.2379C21.7764 13.8257 21.8623 13.3838 21.8623 12.9376C21.8623 12.4914 21.7764 12.0496 21.6094 11.6374C21.4424 11.2251 21.1977 10.8506 20.8892 10.5351" fill="#32BCAD"/>
<path d="M30.6567 21.3593C30.4487 21.3686 30.2422 21.4007 30.0409 21.455V22.294C30.1949 22.3492 30.357 22.377 30.5202 22.3762C30.9317 22.3762 31.1264 22.2344 31.1264 21.8638C31.1264 21.5152 30.9671 21.3593 30.6567 21.3593ZM29.9023 22.9182V21.258H30.0153L30.027 21.3289C30.2369 21.2718 30.4518 21.2364 30.6685 21.2233C30.8187 21.2125 30.9677 21.2567 31.089 21.348C31.2275 21.4656 31.2746 21.6555 31.2746 21.8624C31.2746 22.0693 31.2053 22.2833 31.0114 22.396C30.8634 22.4715 30.6995 22.5088 30.5341 22.5044C30.3669 22.5033 30.2007 22.4773 30.0409 22.4272V22.9154L29.9023 22.9182Z" fill="#939598"/>
<path d="M32.3051 21.3543C31.8943 21.3543 31.7107 21.4861 31.7107 21.8567C31.7107 22.2145 31.8915 22.3761 32.3051 22.3761C32.7186 22.3761 32.8974 22.2457 32.8974 21.8758C32.8974 21.518 32.7166 21.3543 32.3051 21.3543ZM32.8343 22.3761C32.6958 22.4767 32.5143 22.5057 32.3051 22.5057C32.0959 22.5057 31.9082 22.4746 31.7745 22.3761C31.6242 22.2677 31.5625 22.0926 31.5625 21.8666C31.5625 21.6406 31.6242 21.4648 31.7745 21.3543C31.9082 21.2558 32.0917 21.2246 32.3051 21.2246C32.5184 21.2246 32.6979 21.2558 32.8343 21.3543C32.9867 21.4648 33.0456 21.6448 33.0456 21.8638C33.0456 22.0827 32.9846 22.2677 32.8343 22.3761Z" fill="#939598"/>
<path d="M34.7809 22.4716L34.3223 21.4647H34.3133L33.8617 22.4716H33.7349L33.25 21.2578H33.4024L33.809 22.2768H33.8187L34.2607 21.2578H34.3874L34.8405 22.2768H34.8502L35.2471 21.2578H35.3974L34.9084 22.4716H34.7809Z" fill="#939598"/>
<path d="M36.2814 21.351C35.9004 21.351 35.7715 21.5246 35.748 21.7762H36.8148C36.803 21.4998 36.6644 21.351 36.2814 21.351ZM36.2765 22.5053C36.0486 22.5053 35.9004 22.4713 35.7826 22.3707C35.6441 22.2481 35.5977 22.0703 35.5977 21.8662C35.5977 21.6621 35.6607 21.4644 35.8186 21.3468C35.9568 21.2579 36.1184 21.2151 36.2814 21.2242C36.4475 21.2139 36.6128 21.2549 36.7559 21.3418C36.927 21.4595 36.9602 21.6664 36.9602 21.9016H35.7445C35.7494 22.1518 35.829 22.3728 36.2897 22.3728C36.4956 22.3673 36.7008 22.3436 36.9027 22.302V22.4295C36.6974 22.4727 36.4888 22.4976 36.2793 22.5039" fill="#939598"/>
<path d="M37.3594 22.4712V21.2574H37.4716L37.4834 21.3282C37.7348 21.263 37.8526 21.2227 38.0736 21.2227H38.0902V21.3573H38.0569C37.8713 21.3573 37.7584 21.3835 37.4979 21.4529V22.4698L37.3594 22.4712Z" fill="#939598"/>
<path d="M38.8946 21.351C38.5143 21.351 38.3848 21.5246 38.3613 21.7762H39.428C39.4163 21.4998 39.2777 21.351 38.8946 21.351ZM38.8898 22.5053C38.6619 22.5053 38.5144 22.4713 38.3966 22.3707C38.258 22.2481 38.2109 22.0703 38.2109 21.8662C38.2109 21.6621 38.2747 21.4644 38.4319 21.3468C38.5701 21.2581 38.7317 21.2153 38.8946 21.2242C39.0608 21.2139 39.2261 21.2549 39.3692 21.3418C39.541 21.4595 39.577 21.6664 39.577 21.9016H38.3564C38.3613 22.1518 38.4409 22.3728 38.9016 22.3728C39.1078 22.3673 39.3131 22.3436 39.5153 22.302V22.4295C39.31 22.4727 39.1014 22.4976 38.8919 22.5039" fill="#939598"/>
<path d="M41.0931 21.4356C40.939 21.3806 40.7769 21.353 40.6137 21.3541C40.2023 21.3541 40.0076 21.4958 40.0076 21.8664C40.0076 22.2171 40.1676 22.3709 40.4773 22.3709C40.6852 22.361 40.8915 22.3295 41.0931 22.2767V21.4356ZM41.1194 22.4715L41.107 22.4007C40.8972 22.4583 40.6823 22.4939 40.4655 22.5069C40.3151 22.5185 40.1657 22.474 40.045 22.3815C39.9065 22.2639 39.8594 22.074 39.8594 21.8678C39.8594 21.651 39.9286 21.4469 40.1226 21.3363C40.2708 21.259 40.4357 21.221 40.602 21.2258C40.7683 21.2282 40.9336 21.2539 41.0931 21.3023V20.7461H41.2316V22.4715H41.1194Z" fill="#939598"/>
<path d="M43.2641 21.359C43.0561 21.3683 42.8497 21.4004 42.6483 21.4547V22.2915C42.802 22.3483 42.9643 22.3769 43.1277 22.3759C43.5391 22.3759 43.7338 22.2341 43.7338 21.8635C43.7338 21.5149 43.5745 21.359 43.2641 21.359ZM43.6188 22.3971C43.471 22.4726 43.3074 22.5098 43.1422 22.5055C42.9615 22.5044 42.7821 22.4735 42.6109 22.4141L42.604 22.4715H42.5098V20.7461H42.6483V21.325C42.8539 21.2712 43.0641 21.2375 43.2759 21.2244C43.4261 21.2136 43.5751 21.2578 43.6964 21.3491C43.8349 21.4667 43.882 21.6566 43.882 21.8635C43.882 22.0705 43.8128 22.2844 43.6188 22.3971Z" fill="#939598"/>
<path d="M44.0663 22.9359V22.8041C44.1356 22.8112 44.1979 22.8162 44.2423 22.8162C44.4141 22.8162 44.5194 22.7652 44.6136 22.566L44.6586 22.4697L44.0352 21.2559H44.1959L44.7272 22.3039H44.7362L45.2412 21.2559H45.3991L44.7313 22.6192C44.6094 22.8665 44.4778 22.948 44.2354 22.948C44.1781 22.9477 44.121 22.9437 44.0642 22.9359" fill="#939598"/>
<path d="M47.3137 21.779H46.8538V22.2041H47.3137C47.631 22.2041 47.7509 22.168 47.7509 21.9915C47.7509 21.8016 47.586 21.779 47.311 21.779H47.3137ZM47.2279 21.093H46.8524V21.5253H47.2306C47.543 21.5253 47.6677 21.487 47.6677 21.307C47.6677 21.1143 47.5098 21.0945 47.2279 21.0945V21.093ZM47.9427 22.3614C47.773 22.472 47.5687 22.4762 47.1953 22.4762H46.4922V20.8252H47.1787C47.5008 20.8252 47.6982 20.8294 47.8624 20.9308C47.9169 20.964 47.9613 21.0123 47.9904 21.07C48.0196 21.1277 48.0323 21.1927 48.0272 21.2574C48.0272 21.4303 47.958 21.5458 47.773 21.6231V21.6323C47.9808 21.6805 48.1138 21.7889 48.1138 22.022C48.119 22.0886 48.1057 22.1553 48.0755 22.2145C48.0452 22.2737 47.9992 22.3229 47.9427 22.3565" fill="#939598"/>
<path d="M49.5179 21.9618C49.3793 21.9498 49.2408 21.9427 49.0905 21.9427C48.8487 21.9427 48.7635 21.993 48.7635 22.1064C48.7635 22.2197 48.8328 22.2693 49.0198 22.2693C49.1878 22.2637 49.3548 22.2399 49.5179 22.1985V21.9618ZM49.5872 22.4713L49.5781 22.4004C49.3681 22.461 49.1519 22.4967 48.9339 22.5067C48.808 22.5154 48.6824 22.4842 48.5744 22.4174C48.528 22.3776 48.4919 22.3265 48.4695 22.2689C48.447 22.2113 48.4389 22.1489 48.4457 22.0873C48.4526 22.0257 48.4742 21.9668 48.5088 21.9158C48.5433 21.8649 48.5897 21.8235 48.6437 21.7953C48.7684 21.7351 48.9353 21.7301 49.0884 21.7301C49.2124 21.7301 49.3793 21.7372 49.5179 21.7471V21.7251C49.5179 21.5352 49.396 21.4729 49.0621 21.4729C48.9332 21.4729 48.7753 21.48 48.625 21.4941V21.249C48.7919 21.2348 48.9803 21.2256 49.1355 21.2256C49.3433 21.2256 49.556 21.2419 49.6897 21.3383C49.8234 21.4346 49.8518 21.5742 49.8518 21.7542V22.4727L49.5872 22.4713Z" fill="#939598"/>
<path d="M51.399 22.4717V21.8021C51.399 21.581 51.2888 21.5016 51.0914 21.5016C50.9275 21.5091 50.7649 21.5347 50.6065 21.5781V22.4724H50.2754V21.2579H50.5455L50.5573 21.3351C50.7639 21.2729 50.9768 21.2358 51.1919 21.2246C51.3379 21.2126 51.483 21.2571 51.5985 21.3493C51.692 21.4357 51.7273 21.5562 51.7273 21.7291V22.4717H51.399Z" fill="#939598"/>
<path d="M52.6648 22.5057C52.5117 22.5057 52.3448 22.4838 52.2229 22.3782C52.0774 22.2577 52.0352 22.0685 52.0352 21.8638C52.0352 21.6717 52.0961 21.462 52.2769 21.3444C52.4252 21.2459 52.608 21.2246 52.7985 21.2246C52.9371 21.2246 53.0687 21.2338 53.2142 21.248V21.508C53.0943 21.496 52.9509 21.4868 52.8359 21.4868C52.5207 21.4868 52.3725 21.5874 52.3725 21.8666C52.3725 22.1281 52.4833 22.2414 52.7417 22.2414C52.9092 22.2358 53.0759 22.215 53.2398 22.1791V22.4285C53.0502 22.4737 52.8567 22.4995 52.6621 22.5057" fill="#939598"/>
<path d="M54.2203 21.479C53.9051 21.479 53.7666 21.5803 53.7666 21.8567C53.7666 22.133 53.9051 22.2506 54.2203 22.2506C54.5355 22.2506 54.6692 22.1522 54.6692 21.8758C54.6692 21.5995 54.5355 21.479 54.2203 21.479ZM54.7891 22.3782C54.6436 22.4788 54.4531 22.5057 54.2203 22.5057C53.9876 22.5057 53.7929 22.4767 53.6495 22.3782C53.4847 22.2677 53.4258 22.0848 53.4258 21.8666C53.4258 21.6483 53.4847 21.462 53.6495 21.3514C53.7929 21.253 53.9827 21.2246 54.2203 21.2246C54.4579 21.2246 54.6436 21.253 54.7891 21.3514C54.9532 21.462 55.01 21.6476 55.01 21.8638C55.01 22.0799 54.9511 22.2677 54.7891 22.3782Z" fill="#939598"/>
<path d="M56.9229 22.5061C56.7234 22.5061 56.5073 22.4721 56.3452 22.3353C56.1526 22.1716 56.0938 21.9194 56.0938 21.648C56.0938 21.4049 56.1693 21.1165 56.42 20.9486C56.6154 20.8189 56.8571 20.792 57.1017 20.792C57.2804 20.792 57.4639 20.804 57.6634 20.821V21.1165C57.4923 21.1024 57.2804 21.0903 57.1162 21.0903C56.6576 21.0903 56.463 21.2682 56.463 21.648C56.463 22.0278 56.6438 22.2078 56.9818 22.2078C57.2234 22.1992 57.4636 22.1662 57.6988 22.1093V22.4026C57.4441 22.4628 57.1842 22.4975 56.9229 22.5061Z" fill="#939598"/>
<path d="M58.673 21.4409C58.3959 21.4409 58.292 21.5422 58.2705 21.7243H59.0699C59.0602 21.5273 58.9473 21.4409 58.673 21.4409ZM58.6231 22.5038C58.4284 22.5038 58.2518 22.4797 58.1202 22.3692C57.9886 22.2586 57.9297 22.0687 57.9297 21.8618C57.9297 21.6769 57.9886 21.47 58.1534 21.3495C58.2989 21.2439 58.4846 21.2227 58.673 21.2227C58.842 21.2227 59.0415 21.2418 59.187 21.3452C59.3775 21.482 59.3948 21.6939 59.3948 21.9433H58.2684C58.2754 22.1289 58.3716 22.2487 58.7055 22.2487C58.9176 22.244 59.129 22.2231 59.338 22.1863V22.4244C59.1021 22.4702 58.8631 22.4968 58.6231 22.5038Z" fill="#939598"/>
<path d="M60.8697 22.4717V21.8021C60.8697 21.581 60.7595 21.5016 60.5621 21.5016C60.3982 21.5091 60.2357 21.5347 60.0772 21.5781V22.4724H59.7461V21.2579H60.0163L60.028 21.3351C60.2346 21.2729 60.4475 21.2358 60.6626 21.2246C60.8086 21.2126 60.9537 21.2571 61.0692 21.3493C61.1627 21.4357 61.198 21.5562 61.198 21.7291V22.4717H60.8697Z" fill="#939598"/>
<path d="M62.1438 22.5052C61.9837 22.5052 61.8383 22.4592 61.7586 22.3316C61.6933 22.2214 61.6628 22.0932 61.6713 21.9646V21.5097H61.4316V21.2574H61.6713L61.7067 20.8896H61.999V21.2574H62.4666V21.5097H61.999V21.8994C61.9946 21.9778 62.0056 22.0564 62.0315 22.1304C62.0669 22.2119 62.1444 22.2431 62.2483 22.2431C62.3278 22.2416 62.4071 22.2335 62.4853 22.219V22.462C62.3725 22.487 62.2577 22.5015 62.1424 22.5052" fill="#939598"/>
<path d="M62.791 22.4714V21.2576H63.0612L63.073 21.3348C63.2625 21.269 63.4604 21.2317 63.6604 21.2243C63.6744 21.2234 63.6886 21.2234 63.7026 21.2243V21.5183C63.6652 21.5183 63.6202 21.5183 63.5876 21.5183C63.4305 21.519 63.2741 21.5399 63.1221 21.5807V22.4771L62.791 22.4714Z" fill="#939598"/>
<path d="M64.9084 21.9618C64.7698 21.9498 64.6313 21.9427 64.4803 21.9427C64.2385 21.9427 64.154 21.993 64.154 22.1064C64.154 22.2197 64.2233 22.2693 64.4096 22.2693C64.5778 22.2637 64.745 22.2399 64.9084 22.1985V21.9618ZM64.9776 22.4713L64.9679 22.4004C64.7579 22.461 64.5417 22.4967 64.3237 22.5067C64.1978 22.5154 64.0722 22.4842 63.9642 22.4174C63.9205 22.3832 63.8857 22.3386 63.8628 22.2875C63.8398 22.2363 63.8295 22.1802 63.8326 22.1241C63.8294 22.055 63.8468 21.9865 63.8826 21.9278C63.9183 21.869 63.9707 21.8228 64.0328 21.7953C64.1575 21.7351 64.3237 21.7301 64.4768 21.7301C64.6015 21.7301 64.7684 21.7372 64.907 21.7471V21.7251C64.907 21.5352 64.7844 21.4729 64.4512 21.4729C64.3216 21.4729 64.1644 21.48 64.0141 21.4941V21.249C64.181 21.2348 64.3687 21.2256 64.5239 21.2256C64.7317 21.2256 64.9444 21.2419 65.0781 21.3383C65.2118 21.4346 65.2402 21.5742 65.2402 21.7542V22.4727L64.9776 22.4713Z" fill="#939598"/>
<path d="M65.6641 20.7461H65.9959V22.4715H65.6641V20.7461Z" fill="#939598"/>
</g>
<defs>
<clipPath id="clip0_11153_9060">
<rect width="66" height="24" fill="white" transform="translate(0 0.119141)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

50
react/components/Pix/styles.css Normal file
View File

@ -0,0 +1,50 @@
.html {
background-color: transparent !important;
}
.AllPriceTimesText {
font-style: normal;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.PriceTimes {
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.PixButton {
width: 40px;
height: 40px;
background: black;
}
.PricesWrapperRow {
margin-top: 8px;
display: flex;
gap: 26px;
}
figure {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.PricesCol {
display: flex;
flex-direction: column;
}
.PixFullValue {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.PixPercent {
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}

8
react/components/Placeholder/Placeholder.tsx Normal file
View File

@ -0,0 +1,8 @@
const Placeholder = () => {
if (typeof document !== "undefined") {
const m3Input = document.querySelector(".vtex-address-form-4-x-input");
m3Input?.setAttribute("placeholder", "Digite seu CEP");
}
return null;
};
export default Placeholder;

58
react/components/Prices/Prices.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from "react";
import styles from "./styles.css";
import { useProduct } from "vtex.product-context";
export default function Prices() {
const product = useProduct();
console.log(product);
return (
<div>
<span className={styles.fullPrice}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].TotalValuePlusInterestRate.toString().replace(
".",
","
)}{" "}
</span>
<div className={styles.installmentsNumber}>
<span className={styles.BiginstallmentsNumberText}>
{
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments
}{" "}
x
</span>
<span className={styles.installmentsNumberText}> de </span>
<span className={styles.BiginstallmentsNumberText}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toString().replace(
".",
","
)}
</span>
<span className={styles.installmentsNumberText}> sem juros</span>
</div>
<div className={styles.pixWrapper}>
<img className={styles.pixImage}
src="https://agenciamagma.vteximg.com.br/arquivos/pix-daviklein.svg"
alt="pix-image"
/>
<div className={styles.PixValues}>
<span className={styles.PixValuesPrice}>
R${" "}
{(
Number(
product?.selectedItem?.sellers[0].commertialOffer
.Installments[0].TotalValuePlusInterestRate
) * 0.9
)
.toFixed(2)
.toString()
.replace(".", ",")}
</span>
<span className={styles.PixValuesText}>10 % de desconto</span>
</div>
</div>
</div>
);
}

65
react/components/Prices/styles.css Normal file
View File

@ -0,0 +1,65 @@
.pixWrapper {
display: flex;
}
.fullPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installmentsNumberText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.BiginstallmentsNumberText {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.pixWrapper {
display: flex;
gap: 26px;
margin-top: 8px;
}
.pixImage {
width: 66px;
height: 24px;
align-self: center;
}
.PixValues {
display: flex;
flex-direction: column;
}
.PixValuesPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.PixValuesText {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}

0
react/custom.d.ts vendored Normal file
View File

11
react/index.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}

8
store/blocks/home/home.jsonc
View File

@ -2,9 +2,9 @@
"store.home": { "store.home": {
"blocks": [ "blocks": [
"list-context.image-list#demo", "list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files. "example-component",
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ /* You can make references to blocks defined in other files.
"flex-layout.row#deals", * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
"__fold__", "__fold__",
"rich-text#shelf-title", "rich-text#shelf-title",
"flex-layout.row#shelf", "flex-layout.row#shelf",
@ -40,7 +40,7 @@
"phone": 1 "phone": 1
}, },
"infinite": true, "infinite": true,
"showNavigationArrows": "desktopOnly", "showNavigationArrows": "never",
"blockClass": "carousel" "blockClass": "carousel"
} }
}, },

259
store/blocks/pdp/product.jsonc
View File

@ -5,11 +5,63 @@
"condition-layout.product#availability", "condition-layout.product#availability",
"flex-layout.row#description", "flex-layout.row#description",
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"product-specification-group#table", // "product-specification-group#table",
"shelf.relatedProducts", // "shelf.relatedProducts",
"product-questions-and-answers" "product-questions-and-answers",
"list-context.product-list#demo1",
"product-questions-and-answers",
"newsletter"
] ]
}, },
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["html#slider-layout"]
},
"product-summary.shelf#demo1": {
"children": [
"html#sliderPrateleira"
// "product-summary-name",
// "product-summary-description",
// "product-summary-image",
// "product-summary-price",
// "product-summary-sku-selector",
// "product-summary-buy-button"
]
},
"html#sliderPrateleira": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "prateleira-flexcol"
},
"children": [
"product-summary-image",
"product-summary-name",
"product-list-price",
"product-selling-price"
]
},
"html#slider-layout": {
"props": {
"testId": "product-summary-list",
"blockClass": "slider-layout-wrapper"
},
"children": ["slider-layout#demo-products"]
},
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "always",
"blockClass": "carousel"
}
},
"html#breadcrumb": { "html#breadcrumb": {
"props": { "props": {
"tag": "section", "tag": "section",
@ -19,18 +71,94 @@
"children": ["breadcrumb"] "children": ["breadcrumb"]
}, },
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"props": {
"props": {
"marginBottom": 7,
"marginTop": 7
}
},
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
"rich-text#specifications": { "rich-text#specifications": {
"props": { "props": {
"text": "##### Product Specifications" "text": "##### Você também pode gostar:",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"blockClass": "specifications-texto"
} }
}, },
"flex-layout.row#description": { "flex-layout.row#description": {
"props": { "props": {
"marginBottom": 7 "marginBottom": 7
}, },
"children": ["product-description"] "children": ["html#product-description"]
},
"html#product-description": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
}
},
"tab-content#description": {
"children": ["product-images#description", "product-description"]
},
"product-images#description": {
"props": {
"displayMode": "first-image",
"zoomMode": "disable",
"blockClass": "imageDescricao"
}
},
"tab-list#description": {
"props": {
"blockClass": "listaDescricao"
},
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "Descrição"
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição"
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição"
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição"
}
}, },
"condition-layout.product#availability": { "condition-layout.product#availability": {
"props": { "props": {
@ -78,20 +206,30 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%", "width": "50%",
"rowGap": 0 "rowGap": 0
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"children": ["html#product-images"]
},
"html#product-images": {
"props": {
"testId": "product-images"
},
"children": ["product-images"] "children": ["product-images"]
}, },
"product-images": { "product-images": {
"props": { "props": {
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "auto",
"testId": "",
"phone": "16:9" "phone": "16:9"
}, },
"displayThumbnailsArrows": true "displayThumbnailsArrows": false,
"showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal"
} }
}, },
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
@ -100,23 +238,94 @@
"rowGap": 0 "rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "html#product-name",
"html#codigo",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings", "html#selling-price",
"flex-layout.row#selling-price", // "flex-layout.row#selling-price",
"product-installments", "html#product-installments",
"product-separator", "html#pix-component",
"product-identifier.product", "html#sku-selector",
"sku-selector", // "html#product-quantity",
"product-quantity", // "html#add-to-cart-button",
"html#cart-content",
"Placeholder",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "html#shipping-simulator"
"share#default"
] ]
}, },
"html#product-name": {
"props": {
"marginBottom": 3,
"testId": "product-name",
"blockClass": "productName"
},
"children": ["vtex.store-components:product-name"]
},
"html#codigo": {
"props": {
"blockClass": "codigo",
"testId": "product-code"
},
"children": ["product-identifier.product"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"html#pix-component": {
"props": {
"testId": "pix-price",
"blockClass": "pix"
},
"children": ["pix-component"]
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button",
"blockClass": "addButton"
},
"children": ["flex-layout.row#buy-button"]
},
"html#product-quantity": {
"props": {
"testId": "product-quantity"
},
"children": ["product-quantity"]
},
"html#cart-content": {
"props": {
"blockClass": "cart-content"
},
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator",
"blockClass": "shippingSimulator"
},
"children": ["shipping-simulator"]
},
"flex-layout.row#product-name": { "flex-layout.row#product-name": {
"props": { "props": {
@ -128,14 +337,16 @@
"sku-selector": { "sku-selector": {
"props": { "props": {
"variationsSpacing": 3, "variationsSpacing": 3,
"showValueNameForImageVariation": true "showValueNameForImageVariation": true,
"blockClass": "sku-selector"
} }
}, },
"flex-layout.row#buy-button": { "flex-layout.row#buy-button": {
"props": { "props": {
"marginTop": 4, "marginTop": 4,
"marginBottom": 7 "marginBottom": 7,
"blockClass": "buyButton"
}, },
"children": ["add-to-cart-button"] "children": ["add-to-cart-button"]
}, },
@ -159,10 +370,10 @@
"blockClass": "info-availability" "blockClass": "info-availability"
}, },
"children": [ "children": [
"flex-layout.row#product-name", "html#product-name",
"product-identifier.product", "html#codigo",
"sku-selector", "flex-layout.row#availability",
"flex-layout.row#availability" "html#sku-selector"
] ]
}, },
"flex-layout.row#availability": { "flex-layout.row#availability": {

11
store/blocks/product-price.jsonc
View File

@ -4,11 +4,9 @@
"colGap": 2, "colGap": 2,
"preserveLayoutOnMobile": true, "preserveLayoutOnMobile": true,
"preventHorizontalStretch": true, "preventHorizontalStretch": true,
"marginBottom": 4 "marginBottom": 0
}, },
"children": [ "children": ["product-selling-price"]
"product-selling-price"
]
}, },
"flex-layout.row#list-price-savings": { "flex-layout.row#list-price-savings": {
@ -19,9 +17,6 @@
"marginBottom": 2, "marginBottom": 2,
"marginTop": 5 "marginTop": 5
}, },
"children": [ "children": ["product-list-price", "product-price-savings"]
"product-list-price",
"product-price-savings"
]
} }
} }

34
store/blocks/product-summary/quickview.json
View File

@ -1,9 +1,6 @@
{ {
"modal-trigger#quickview": { "modal-trigger#quickview": {
"children": [ "children": ["icon-expand", "modal-layout#quickview"],
"icon-expand",
"modal-layout#quickview"
],
"props": { "props": {
"blockClass": "quickview" "blockClass": "quickview"
} }
@ -35,11 +32,7 @@
} }
}, },
"flex-layout.col#quickviewPrice": { "flex-layout.col#quickviewPrice": {
"children": [ "children": ["flex-layout.row#selling-price", "product-installments"]
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments"
]
}, },
"modal-actions#quickview": { "modal-actions#quickview": {
"props": { "props": {
@ -63,9 +56,7 @@
}, },
"flex-layout.col#quickview-product-quantity": { "flex-layout.col#quickview-product-quantity": {
"children": [ "children": ["product-summary-quantity#quickview"]
"product-summary-quantity#quickview"
]
}, },
"product-summary-quantity#quickview": { "product-summary-quantity#quickview": {
"props": { "props": {
@ -74,18 +65,14 @@
} }
}, },
"flex-layout.col#quickview-add-to-card-button": { "flex-layout.col#quickview-add-to-card-button": {
"children": [ "children": ["add-to-cart-button"],
"add-to-cart-button"
],
"props": { "props": {
"width": "grow" "width": "grow"
} }
}, },
"flex-layout.row#quickview-actions-2": { "flex-layout.row#quickview-actions-2": {
"children": [ "children": ["link.product#button-pdp"]
"link.product#button-pdp"
]
}, },
"link.product#button-pdp": { "link.product#button-pdp": {
"props": { "props": {
@ -107,15 +94,10 @@
} }
}, },
"flex-layout.col#quickview-images": { "flex-layout.col#quickview-images": {
"children": [ "children": ["product-images#quickview"]
"product-images#quickview"
]
}, },
"flex-layout.col#quickview-product-details": { "flex-layout.col#quickview-product-details": {
"children": [ "children": ["modal-content#quickview", "modal-actions#quickview"],
"modal-content#quickview",
"modal-actions#quickview"
],
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"blockClass": "quickviewDetails" "blockClass": "quickviewDetails"
@ -134,7 +116,7 @@
"blockClass": "quickview" "blockClass": "quickview"
} }
}, },
"product-images#quickview" : { "product-images#quickview": {
"props": { "props": {
"blockClass": "quickview", "blockClass": "quickview",
"showNavigationArrows": true "showNavigationArrows": true

6
store/interfaces.json
View File

@ -2,8 +2,14 @@
"example-component": { "example-component": {
"component": "Example" "component": "Example"
}, },
"pix-component": {
"component": "Pix"
},
"html": { "html": {
"component": "html", "component": "html",
"composition": "children" "composition": "children"
},
"Placeholder": {
"component": "Placeholder"
} }
} }

465
styles/configs/font-faces.css Normal file
View File

@ -0,0 +1,465 @@
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4taVIGxA.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4kaVIGxA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4saVIGxA.woff2)
format("woff2");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4jaVIGxA.woff2)
format("woff2");
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4iaVIGxA.woff2)
format("woff2");
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4vaVIGxA.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4uaVIGxA.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-stretch: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}

688
styles/configs/style.json
View File

@ -1,349 +1,351 @@
{ {
"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],
], "customMedia": [
"spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], { "s": 20 },
"customMedia": [ {
{ "s": 20 }, "ns": {
{ "ns": { "value": 40,
"value": 40, "minWidth": true
"minWidth": true }
} },
}, {
{ "m": { "m": {
"value": 40, "value": 40,
"minWidth": true "minWidth": true
} }
}, },
{ "l": { {
"value": 64, "l": {
"minWidth": true "value": 64,
} "minWidth": true
}, }
{ "xl": { },
"value": 80, {
"minWidth": true "xl": {
} "value": 80,
} "minWidth": true
], }
"colors": { }
"black-90": "rgba(0,0,0,.9)", ],
"black-80": "rgba(0,0,0,.8)", "colors": {
"black-70": "rgba(0,0,0,.7)", "black-90": "rgba(0,0,0,.9)",
"black-60": "rgba(0,0,0,.6)", "black-80": "rgba(0,0,0,.8)",
"black-50": "rgba(0,0,0,.5)", "black-70": "rgba(0,0,0,.7)",
"black-40": "rgba(0,0,0,.4)", "black-60": "rgba(0,0,0,.6)",
"black-30": "rgba(0,0,0,.3)", "black-50": "rgba(0,0,0,.5)",
"black-20": "rgba(0,0,0,.2)", "black-40": "rgba(0,0,0,.4)",
"black-10": "rgba(0,0,0,.1)", "black-30": "rgba(0,0,0,.3)",
"black-05": "rgba(0,0,0,.05)", "black-20": "rgba(0,0,0,.2)",
"black-025": "rgba(0,0,0,.025)", "black-10": "rgba(0,0,0,.1)",
"black-0125": "rgba(0,0,0,.0125)", "black-05": "rgba(0,0,0,.05)",
"black-025": "rgba(0,0,0,.025)",
"black-0125": "rgba(0,0,0,.0125)",
"white-90": "rgba(255,255,255,.9)", "white-90": "rgba(255,255,255,.9)",
"white-80": "rgba(255,255,255,.8)", "white-80": "rgba(255,255,255,.8)",
"white-70": "rgba(255,255,255,.7)", "white-70": "rgba(255,255,255,.7)",
"white-60": "rgba(255,255,255,.6)", "white-60": "rgba(255,255,255,.6)",
"white-50": "rgba(255,255,255,.5)", "white-50": "rgba(255,255,255,.5)",
"white-40": "rgba(255,255,255,.4)", "white-40": "rgba(255,255,255,.4)",
"white-30": "rgba(255,255,255,.3)", "white-30": "rgba(255,255,255,.3)",
"white-20": "rgba(255,255,255,.2)", "white-20": "rgba(255,255,255,.2)",
"white-10": "rgba(255,255,255,.1)", "white-10": "rgba(255,255,255,.1)",
"white-05": "rgba(255,255,255,.05)", "white-05": "rgba(255,255,255,.05)",
"white-025": "rgba(255,255,255,.025)", "white-025": "rgba(255,255,255,.025)",
"white-0125": "rgba(255,255,255,.0125)" "white-0125": "rgba(255,255,255,.0125)"
},
"semanticColors": {
"background": {
"base": "#ffffff",
"base--inverted": "#03044e",
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#f2f4f5",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"hover-background": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"active-background": {
"action-primary": "#0c389f",
"action-secondary": "#d2defc",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"text": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"link": "#0F3E99",
"emphasis": "#f71963",
"disabled": "#979899",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"visited-text": {
"link": "#0c389f"
},
"hover-text": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"link": "#0c389f",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0"
},
"active-text": {
"link": "#0c389f",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0"
},
"border": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#e3e4e6",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"hover-border": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"active-border": {
"action-primary": "#0c389f",
"action-secondary": "#d2defc",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"on": {
"base": "#3f3f40",
"base--inverted": "#ffffff",
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"disabled": "#979899",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a",
"muted-1": "#ffffff",
"muted-2": "#ffffff",
"muted-3": "#3f3f40",
"muted-4": "#3f3f40",
"muted-5": "#3f3f40"
},
"hover-on": {
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a"
},
"active-on": {
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a"
}
},
"borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
"borderRadius": [0, 0.125, 0.25, 0.5, 1],
"widths": [1, 2, 4, 8, 16],
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
"heights": [1, 2, 4, 8, 16],
"sizes": [
{ "name": "small", "value": 2 },
{ "name": "regular", "value": 2.5 },
{ "name": "large", "value": 3 }
],
"typography": {
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
}, },
"semanticColors": { "heading-2": {
"background": { "fontFamily": "Open Sans, sans-serif",
"base": "#ffffff", "fontWeight": "700",
"base--inverted": "#03044e", "fontSize": "2.25rem",
"action-primary": "#0F3E99", "textTransform": "initial",
"action-secondary": "#eef3f7", "letterSpacing": "0"
"emphasis": "#f71963",
"disabled": "#f2f4f5",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"hover-background": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"active-background": {
"action-primary": "#0c389f",
"action-secondary": "#d2defc",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"text": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"link": "#0F3E99",
"emphasis": "#f71963",
"disabled": "#979899",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"visited-text": {
"link": "#0c389f"
},
"hover-text": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"link": "#0c389f",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0"
},
"active-text": {
"link": "#0c389f",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0"
},
"border": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#e3e4e6",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"hover-border": {
"action-primary": "#072c75",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#e13232",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"active-border": {
"action-primary": "#0c389f",
"action-secondary": "#d2defc",
"emphasis": "#dd1659",
"success": "#8bc34a",
"success--faded": "#eafce3",
"danger": "#ff4c4c",
"danger--faded": "#ffe6e6",
"warning": "#ffb100",
"warning--faded": "#fff6e0",
"muted-1": "#727273",
"muted-2": "#979899",
"muted-3": "#cacbcc",
"muted-4": "#e3e4e6",
"muted-5": "#f2f4f5"
},
"on": {
"base": "#3f3f40",
"base--inverted": "#ffffff",
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"disabled": "#979899",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a",
"muted-1": "#ffffff",
"muted-2": "#ffffff",
"muted-3": "#3f3f40",
"muted-4": "#3f3f40",
"muted-5": "#3f3f40"
},
"hover-on": {
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a"
},
"active-on": {
"action-primary": "#ffffff",
"action-secondary": "#0F3E99",
"emphasis": "#ffffff",
"success": "#ffffff",
"success--faded": "#3f3f40",
"danger": "#ffffff",
"danger--faded": "#3f3f40",
"warning": "#ffffff",
"warning--faded": "#1a1a1a"
}
}, },
"borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], "heading-3": {
"borderRadius": [0, 0.125, 0.25, 0.5, 1], "fontFamily": "Open Sans, sans-serif",
"widths": [1, 2, 4, 8, 16], "fontWeight": "700",
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], "fontSize": "1.75rem",
"heights": [1, 2, 4, 8, 16], "textTransform": "initial",
"sizes": [ "letterSpacing": "0"
{"name": "small", "value": 2},
{"name": "regular", "value": 2.5},
{"name": "large", "value": 3}
],
"typography":{
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"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",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"code": {
"fontFamily": "Consolas, monaco, monospace",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
}
}
}, },
"opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] "heading-4": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"code": {
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
}
}
},
"opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
} }

44
styles/css/agenciamagma.store-theme.css
View File

@ -12,5 +12,47 @@
} }
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
background-color: green; background-color: transparent;
}
.html--addButton {
width: 100%;
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none !important;
}
.html--prateleira-flexcol {
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 1024px) {
.html--prateleira-flexcol {
gap: 8px;
}
}
@media (min-width: 2560px) {
.html--prateleira-flexcol {
min-width: 434.4px;
min-height: 568.4px;
}
}
.html--slider-layout-wrapper {
max-width: 96rem;
margin: auto;
}
@media (min-width: 2560px) {
.html--slider-layout-wrapper {
margin: 0 350px !important;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.html--cart-content {
flex-direction: column;
}
} }

75
styles/css/store-components.css Normal file
View File

@ -0,0 +1,75 @@
/*
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 */
.newsletter {
background: black;
}
.newsletter .container .form .label {
font-size: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.newsletter .container .form .label::before {
content: "Assine nossa newsletter";
font-size: 24px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
line-height: 38px;
color: #ffffff;
}
.newsletter .container .form .label::after {
content: "Receba ofertas e novidades por e-mail";
white-space: pre;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.newsletter .container .form .inputGroup {
display: flex;
justify-content: center;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
border-radius: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
background: black;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
width: 774px;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before {
content: "Digite seu e-mail";
font-size: 16px;
color: white;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
background: black;
border: none;
border-bottom: 3px gray solid;
border-radius: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}

12
styles/css/vtex.add-to-cart-button.css Normal file
View File

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

49
styles/css/vtex.breadcrumb.css Normal file
View File

@ -0,0 +1,49 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.container {
align-items: baseline;
max-width: 96rem;
margin: auto;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 2560px) {
.container {
max-width: 100%;
margin: 0 320px;
}
}
.container .homeLink {
padding: 0;
}
.container .homeLink .homeIcon {
display: none;
}
.container .homeLink::before {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .arrow--1 .link {
font-size: 0;
}
.container .arrow--1 .link::before {
content: "Sapatos";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

187
styles/css/vtex.flex-layout.css
View File

@ -1,98 +1,115 @@
.flexRowContent--menu-link, @charset "UTF-8";
.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 */
/* Grid breakpoints */
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
}
:global(.vtex-breadcrumb-1-x-container) :nth-child(n) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-breadcrumb-1-x-container) :global(.vtex-breadcrumb-1-x-term) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
} }
@media screen and (min-width: 40em) { :global(.vtex-telemarketing-2-x-wrapper) :global(.vtex-store-components-3-x-container) {
.flexRowContent--menu-link, margin: auto;
.flexRowContent--main-header { }
padding: 0 1rem;
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 2560px) {
:global(.vtex-store-components-3-x-container) {
max-width: 100%;
margin: 0 320px;
} }
} }
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
@media screen and (min-width: 80rem) { padding-right: 0 !important;
.flexRowContent--menu-link, overflow: hidden;
.flexRowContent--main-header {
padding: 0 0.25rem;
}
} }
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex; display: flex;
max-height: 100%; flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
flex-direction: column;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
} }
.flexColChild--quickviewDetails:first-child { .addButton {
overflow-y: auto; width: 100%;
height: 66% !important;
overflow-x: hidden;
} }
.flexColChild--quickviewDetails:last-child { .flexRow--buyButton {
height: 34% !important; width: 100%;
}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
} }
.flexRow--addToCartRow { @media screen and (max-width: 1024px) {
padding-bottom: 1rem; :global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
} }
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
height: 74px !important;
}
}

16
styles/css/vtex.flex-layoutbreadcrumb.css Normal file
View File

@ -0,0 +1,16 @@
/*
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 */
.vtex-breadcrumb-1-x-container {
background-color: red;
}
.vtex-breadcrumb-1-x-container {
padding: 0 !important;
}

31
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,30 @@
.product-identifier--productReference { /*
margin-bottom: 1rem; 0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.product-identifier__label,
.product-identifier__separator {
display: none;
} }
.product-identifier__value {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
float: right;
margin-bottom: 24px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier__value {
float: left;
}
}

135
styles/css/vtex.product-price.css
View File

@ -1,79 +1,74 @@
.listPrice { /*
color: #727273; 0 - 600PX: Phone
margin-bottom: .25rem; 600 - 900px: Table portrait
font-size: 1rem; 900 - 1200px: Tablet landscape
} [1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.sellingPrice { .sellingPrice {
color: #3f3f40; font-style: normal;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700; font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
} }
.installments { .flexRowContent {
color: #727273; margin: 0 !important;
margin-bottom: 1rem;
} }
.savings { .listPriceValue {
font-weight: 500; text-decoration-line: line-through;
color: #79B03A; text-decoration-color: #bababa;
}
.listPriceValue::before {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "de";
margin-right: 6px;
}
.listPriceValue::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "por";
margin-left: 5px;
}
.listPriceValue .currencyCode,
.listPriceValue .currencyLiteral,
.listPriceValue .currencyInteger {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
} }
.sellingPriceValue--summary { @media screen and (max-width: 1024px) {
font-size: 1.25rem; .listPrice {
font-weight: 600; height: 19px;
color: #2E2E2E; }
} .listPriceValue .currencyCode,
.listPriceValue .currencyLiteral,
.savings--summary { .listPriceValue .currencyInteger {
background: #8BC34A; font-size: 12px;
border-radius: 1000px; line-height: 16px;
align-items: center; }
display: flex; .sellingPrice {
font-size: 18px;
padding-left: 0.5rem; line-height: 25px;
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;
} }
.currencyGroup {
color: #bababa;
}

59
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,59 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorContainer {
margin: 0;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
width: 32px;
height: 49px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #929292;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) {
height: 49px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #000000;
border-radius: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) {
height: 49px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #000000;
border-radius: 0;
background-color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

25
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,27 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.heading--specifications-texto {
margin: 0 0 16px;
}
@media (min-width: 2560px) {
.heading--specifications-texto {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
}
@media screen and (max-width: 1024px) {
.heading--specifications-texto {
font-size: 24px;
line-height: 38px;
margin: 0;
}
}
@media screen and (max-width: 376px) {
.heading--specifications-texto {
font-size: 20px;
}
}

22
styles/css/vtex.shipping-simulator.css Normal file
View File

@ -0,0 +1,22 @@
/*
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 */
.shippingContainer {
display: none !important;
}
.shippingContainer :global(.vtex-button__label) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
width: 49px;
height: 49px;
background: #000000;
}

252
styles/css/vtex.slider-layout.css
View File

@ -1,31 +1,245 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.sliderLayoutContainer { .sliderLayoutContainer {
padding: 16px 40px 113px;
margin-bottom: -49px;
}
@media (min-width: 2560px) {
.sliderLayoutContainer {
width: 100%;
}
}
.sliderLayoutContainer .sliderTrackContainer {
padding: 0 24px 36px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
gap: 16px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
}
@media (min-width: 2560px) {
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
align-items: center;
max-width: 434.4px !important;
min-height: 543.4px !important;
}
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
width: 100%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
background-color: #ededed;
}
@media (min-width: 2560px) {
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
min-width: 434.4px;
min-height: 434.4px;
}
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
padding: 0;
justify-content: center; justify-content: center;
} }
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
.sliderLayoutContainer--carousel { display: flex;
background-color: #F0F0F0; max-width: 282.4px;
min-height: 450px; height: auto;
align-items: center;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
display: flex;
order: 3;
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
display: flex;
justify-content: center;
align-items: center;
text-decoration-line: line-through;
gap: 1px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-transform: lowercase;
text-decoration: none;
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-decoration: none;
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after {
content: "por";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) :nth-child(n) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
display: none;
}
.sliderLayoutContainer .paginationDotsContainer {
bottom: 113px;
align-items: center;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot {
width: 10px;
height: 10px;
background-color: #000;
border: 0.5px solid #000;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
background-color: #fff;
height: 17px !important;
width: 17px !important;
} }
.sliderTrackContainer { .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) .html--prateleira-flexcol {
max-width: 100%; display: flex;
} }
.paginationDotsContainer { @media screen and (max-width: 1024px) {
margin-top: .5rem; :global(.vtex-product-summary-2-x-productBrand) {
margin-bottom: .5rem; font-size: 14px !important;
line-height: 19px !important;
height: auto !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
margin-bottom: 4px;
}
.sliderTrackContainer {
padding: 0 24px 24px !important;
}
.sliderTrack {
gap: 12px !important;
}
.sliderLayoutContainer {
margin-bottom: -49px;
}
}
@media screen and (max-width: 376px) {
.sliderLayoutContainer {
margin-bottom: -81px;
}
.sliderTrack {
gap: 8px !important;
}
:global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 124.8px !important;
}
.sliderTrackContainer {
padding-bottom: 16px !important;
}
}
:global(.vtex-product-price-1-x-interestRate)::after {
content: "sem juros";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
} }
.layoutContainer--shelf { :global(.vtex-product-price-1-x-installments) {
margin-top: 20px; font-size: 0;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
} }
.slide--shelf { :global(.vtex-product-price-1-x-installmentValue) {
margin-bottom: 25px; font-family: "Open Sans";
padding-left: .5rem; font-style: normal;
padding-right: .5rem; font-weight: 400;
min-height: 550px; font-size: 16px;
line-height: 22px;
color: #929292;
} }
:global(.vtex-product-price-1-x-installmentValue)::before {
content: " de ";
}
:global(.vtex-product-price-1-x-installmentValue)::after {
content: " ";
}
:global(.vtex-product-price-1-x-installmentValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-weight: bold;
}
:global(.vtex-product-price-1-x-installmentsNumber) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
font-weight: bold;
color: #929292;
}
:global(.vtex-product-price-1-x-installmentsNumber)::after {
content: " x ";
}

608
styles/css/vtex.store-components.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -8,5 +9,610 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .newsletter {
background: red; background: black;
}
.newsletter .container .form .label {
font-size: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.newsletter .container .form .label::before {
content: "Assine nossa newsletter";
font-size: 24px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
line-height: 38px;
color: #ffffff;
}
.newsletter .container .form .label::after {
content: "Receba ofertas e novidades por e-mail";
white-space: pre;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
@media (max-width: 350px) {
.newsletter .container .form .label::after {
white-space: unset;
}
}
.newsletter .container .form .inputGroup {
display: flex;
justify-content: center;
}
.newsletter .container .form .inputGroup :global(.vtex-input) {
width: 686px;
}
@media (max-width: 1024px) {
.newsletter .container .form .inputGroup :global(.vtex-input) {
width: 100%;
}
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
border-radius: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
background: black;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
width: 774px;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before {
content: "Digite seu e-mail";
font-size: 16px;
color: white;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
width: 88px;
background: black;
border: none;
border-bottom: 3px gray solid;
border-radius: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
.productBrand {
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-bottom: 8px;
float: right;
color: #575757;
}
.productImageTag {
object-fit: unset !important;
max-height: 100% !important;
width: 100%;
}
:global(.vtex-store-components-3-x-productImageTag--zoom) {
display: none;
}
:global(.vtex-stack-layout-0-x-stackItem) {
min-height: unset;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "OUTROS TAMANHOS: ";
color: #929292;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
border: 1px solid #989898;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
color: #000000;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator,
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "OUTRAS CORES:";
color: #929292;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector {
border: 2px solid #000000;
border-radius: 24px;
z-index: 5;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox {
border-radius: 24px;
}
.shippingContainer {
position: relative;
}
:global(.vtex-tab-layout-0-x-contentContainer) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 32px;
gap: 32px;
}
:global(.vtex-tab-layout-0-x-contentContainer) .productImagesContainer {
width: 50%;
}
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer {
width: 50%;
}
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
}
}
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}
@media (min-width: 2560px) {
:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText :first-child {
margin: 0;
}
}
.carouselGaleryThumbs {
margin-top: 16px;
}
@media (max-width: 639px) {
.carouselGaleryThumbs {
display: block;
}
}
.carouselGaleryThumbs :first-child {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
height: 90px !important;
width: 90px !important;
margin-bottom: 0;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
height: 90px;
width: 90px;
border-radius: 8px;
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 0;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: calc(100% - 47px);
flex-direction: column;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
display: flex;
flex-direction: column;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
margin-top: 8px;
margin-right: -49px;
justify-content: right;
position: static;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000;
line-height: normal;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
display: none;
}
.shippingContainer :global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
align-self: end;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
}
@media (max-width: 540px) {
.shippingContainer :global(.vtex-button) {
align-self: center;
bottom: 0;
}
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
.shippingTable {
border: 0;
width: auto;
}
.shippingTable .shippingTableHead {
display: block;
}
.shippingTable .shippingTableHead .shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
padding: 0;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
text-align: left;
grid-area: A;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
grid-area: C;
text-align: left;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
text-align: left;
grid-area: B;
font-size: 0;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
content: "Valor";
font-size: 14px;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
margin-top: 15px;
}
.shippingTable .shippingTableBody .shippingTableRow :nth-child(n) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn {
display: none;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
grid-area: A;
text-transform: capitalize;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
white-space: nowrap;
grid-area: C;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
grid-area: B;
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
}
.productBrand {
float: left;
}
.productDescriptionTitle {
font-size: 20px !important;
line-height: 32px !important;
}
.productDescriptionText {
font-size: 14px !important;
line-height: 19px !important;
}
.container .form {
margin: 0 16px;
max-width: 992px;
}
.container .form .label {
width: 100%;
}
.container .form .label::after {
font-size: 16px !important;
line-height: 22px !important;
}
.container .form .inputGroup {
width: 100%;
}
.container .form .inputGroup :global(.vtex-styleguide-9-x-input) {
font-size: 12px !important;
line-height: 16px !important;
width: 100% !important;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-family: "Open Sans", "sans-serif";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) {
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 8px;
grid-row-gap: 13px;
}
@media (min-width: 2560px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
min-width: 765px;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
grid-area: 1/1/2/2;
margin: 0 !important;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
grid-area: 1/2/2/3;
margin: 0 !important;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) {
grid-area: 2/1/3/3;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
font-size: 0;
width: 100%;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button)::before {
content: "AVISE-ME";
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
height: 49px;
background: #000000;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
} }

116
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,116 @@
/*
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 */
.listContainer--listaDescricao {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 0px 64px;
gap: 99px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
}
.listContainer--listaDescricao .listItem {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding: 0;
margin: 0;
color: #bfbfbf;
}
.listContainer--listaDescricao .listItem :global(.vtex-button) {
border-radius: 0;
border: none;
background-color: white;
padding: 0px 16px;
}
.listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
}
@media (min-width: 2560px) {
.listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
}
}
.listContainer--listaDescricao .listItemActive :global(.vtex-button) {
border-radius: 0;
border: none;
border-bottom: 2px solid #000000;
background-color: white;
padding: 0px 16px;
}
.listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #000000;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
}
@media (min-width: 2560px) {
.listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
}
}
@media screen and (max-width: 1024px) {
.listContainer--listaDescricao {
flex-direction: column;
gap: 16px;
padding: 16px 0;
border-top: 1px solid #b9b9b9;
margin-top: 16px;
}
.listItem :global(.vtex-button) {
padding: 0 !important;
}
.listItemActive :global(.vtex-button) {
padding: 0 !important;
border: none !important;
}
.contentContainer {
flex-direction: column;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-productImagesContainer) {
width: 100% !important;
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
width: 100% !important;
}
}
@media screen and (max-width: 376px) {
.listContainer--listaDescricao {
margin-bottom: 16px;
}
.contentContainer {
gap: 16px;
}
}

39
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -3,6 +3,43 @@
} }
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
background-color: green; background-color: transparent;
} }
.html--addButton {
width: 100%;
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none !important;
}
.html--prateleira-flexcol {
display: flex;
flex-direction: column;
align-items: center;
@media screen and (max-width: 1024px) {
gap: 8px;
}
@media (min-width: 2560px) {
min-width: 434.4px;
min-height: 568.4px;
}
}
.html--slider-layout-wrapper {
max-width: 96rem;
margin: auto;
@media (min-width: 2560px) {
margin: 0 350px !important;
max-width: 100%;
}
}
.html--cart-content {
@media (max-width: 1024px) {
flex-direction: column;
}
}

42
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
View File

@ -0,0 +1,42 @@
.container {
align-items: baseline;
max-width: 96rem;
margin: auto;
display: flex;
flex-wrap: wrap;
@media (min-width: 2560px) {
max-width: 100%;
margin: 0 320px;
}
.homeLink {
padding: 0;
.homeIcon {
display: none;
}
}
.homeLink::before {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.arrow--1 {
.link {
font-size: 0;
}
.link::before {
content: "Sapatos";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}

122
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,122 @@
// .flexRow {
// width: auto;
// padding: 0 40px;
// }
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
:nth-child(n) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-breadcrumb-1-x-term) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
:global(.vtex-telemarketing-2-x-wrapper) {
:global(.vtex-store-components-3-x-container) {
margin: auto;
}
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
@media (min-width: 2560px) {
max-width: 100%;
margin: 0 320px;
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding-right: 0 !important;
overflow: hidden;
}
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
@media (max-width: 1024px) {
flex-direction: column;
}
:global(.vtex-flex-layout-0-x-flexRow) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
.addButton {
width: 100%;
}
.flexRow--buyButton {
width: 100%;
.flexRowContent--buyButton {
margin: 0;
:global(.vtex-button) {
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
&::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
}
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton {
.flexRowContent--buyButton {
:global(.vtex-button) {
height: 74px !important;
}
}
}
}

20
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,20 @@
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
float: right;
margin-bottom: 24px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier__value {
float: left;
}
}

69
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,69 @@
.sellingPrice {
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.flexRowContent {
margin: 0 !important;
}
.listPriceValue {
text-decoration-line: line-through;
text-decoration-color: #bababa;
&::before {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "de";
margin-right: 6px;
}
&::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #bababa;
line-height: 19px;
content: "por";
margin-left: 5px;
}
.currencyCode,
.currencyLiteral,
.currencyInteger {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
}
@media screen and (max-width: 1024px) {
.listPrice {
height: 19px;
}
.listPriceValue {
.currencyCode,
.currencyLiteral,
.currencyInteger {
font-size: 12px;
line-height: 16px;
}
}
.sellingPrice {
font-size: 18px;
line-height: 25px;
}
}
.currencyGroup {
color: #bababa;
}

56
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,56 @@
.quantitySelectorContainer {
margin: 0;
.quantitySelectorTitle {
display: none;
}
:global(.vtex-numeric-stepper-wrapper) {
:global(.vtex-numeric-stepper-container) {
:global(.vtex-numeric-stepper__input) {
width: 32px;
height: 49px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #929292;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
:global(.vtex-numeric-stepper__plus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__plus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #000000;
border-radius: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
}
:global(.vtex-numeric-stepper__minus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__minus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #cccccc;
color: #000000;
border-radius: 0;
background-color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
}
}
}
// .quantitySelectorStepper {
// }
}

22
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,22 @@
.heading--specifications-texto {
margin: 0 0 16px;
@media (min-width: 2560px) {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
}
@media screen and (max-width: 1024px) {
.heading--specifications-texto {
font-size: 24px;
line-height: 38px;
margin: 0;
}
}
@media screen and (max-width: 376px) {
.heading--specifications-texto {
font-size: 20px;
}
}

274
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,274 @@
// .sliderLayoutContainer--carousel {
// @media (min-width: 2560px) {
// margin: 0 350px;
// }
// }
.sliderLayoutContainer {
padding: 16px 40px 113px;
margin-bottom: -49px;
@media (min-width: 2560px) {
width: 100%;
}
.sliderTrackContainer {
padding: 0 24px 36px;
.sliderTrack {
gap: 16px;
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
@media (min-width: 2560px) {
align-items: center;
max-width: 434.4px !important;
min-height: 543.4px !important;
}
:global(.vtex-product-summary-2-x-element) {
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
width: 100%;
:global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
background-color: #ededed;
@media (min-width: 2560px) {
min-width: 434.4px;
min-height: 434.4px;
}
}
}
:global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
padding: 0;
justify-content: center;
:global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
height: auto;
align-items: center;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000;
}
}
:global(.vtex-product-summary-2-x-priceContainer) {
display: flex;
order: 3;
padding: 0;
:global(.vtex-store-components-3-x-listPrice) {
display: flex;
justify-content: center;
align-items: center;
text-decoration-line: line-through;
gap: 1px;
:global(.vtex-store-components-3-x-listPriceLabel) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-transform: lowercase;
text-decoration: none;
padding: 0;
}
:global(.vtex-store-components-3-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-decoration: none;
padding: 0;
}
}
:global(.vtex-store-components-3-x-listPrice)::after {
content: "por";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
:global(.vtex-product-summary-2-x-currencyContainer) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
:nth-child(n) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
}
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
}
:global(.vtex-store-components-3-x-installmentsPrice) {
display: none;
}
}
:global(.vtex-product-summary-2-x-buyButtonContainer) {
display: none;
}
:global(.vtex-product-summary-2-x-description) {
display: none;
}
:global(.vtex-product-summary-2-x-SKUSelectorContainer) {
display: none;
}
}
}
}
}
}
}
.paginationDotsContainer {
bottom: 113px;
align-items: center;
.paginationDot {
width: 10px;
height: 10px;
background-color: #000;
border: 0.5px solid #000;
}
.paginationDot--isActive {
background-color: #fff;
height: 17px !important;
width: 17px !important;
}
}
}
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-clearLink) {
:global(.vtex-product-summary-2-x-container) {
:global(.vtex-product-summary-2-x-element) {
.html--prateleira-flexcol {
display: flex;
}
}
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-product-summary-2-x-productBrand) {
font-size: 14px !important;
line-height: 19px !important;
height: auto !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
margin-bottom: 4px;
}
.sliderTrackContainer {
padding: 0 24px 24px !important;
}
.sliderTrack {
gap: 12px !important;
}
.sliderLayoutContainer {
margin-bottom: -49px;
}
}
@media screen and (max-width: 376px) {
.sliderLayoutContainer {
margin-bottom: -81px;
}
.sliderTrack {
gap: 8px !important;
}
:global(.vtex-product-summary-2-x-imageContainer) {
:global(.vtex-product-summary-2-x-imageNormal) {
height: 124.8px !important;
}
}
.sliderTrackContainer {
padding-bottom: 16px !important;
}
}
:global(.vtex-product-price-1-x-interestRate) {
&::after {
content: "sem juros";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}
:global(.vtex-product-price-1-x-installments) {
font-size: 0;
}
:global(.vtex-product-price-1-x-installmentValue) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
&::before {
content: " de ";
}
&::after {
content: " ";
}
:global(.vtex-product-price-1-x-currencyContainer) {
font-weight: bold;
}
}
:global(.vtex-product-price-1-x-installmentsNumber) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
font-weight: bold;
color: #929292;
&::after {
content: " x ";
}
}

649
styles/sass/pages/product/vtex.store-components.scss
View File

@ -1,3 +1,646 @@
.newsletter{ .newsletter {
background: red; background: black;
} .container {
.form {
.label {
font-size: 0;
display: flex;
flex-direction: column;
gap: 8px;
&::before {
content: "Assine nossa newsletter";
font-size: 24px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
line-height: 38px;
color: #ffffff;
}
&::after {
content: "Receba ofertas e novidades por e-mail";
white-space: pre;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
@media (max-width: 350px) {
white-space: unset;
}
}
}
.inputGroup {
display: flex;
justify-content: center;
:global(.vtex-input) {
width: 686px;
@media (max-width: 1024px) {
width: 100%;
}
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
background: black;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
width: 774px;
&::before {
content: "Digite seu e-mail";
font-size: 16px;
color: white;
}
}
}
}
:global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
:global(.vtex-button) {
width: 88px;
background: black;
border: none;
border-bottom: 3px gray solid;
border-radius: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
}
}
}
}
}
.productBrand {
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
margin-bottom: 8px;
float: right;
color: #575757;
}
.productImageTag {
object-fit: unset !important;
max-height: 100% !important;
width: 100%;
}
:global(.vtex-store-components-3-x-productImageTag--zoom) {
display: none;
}
:global(.vtex-stack-layout-0-x-stackItem) {
min-height: unset;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
margin: 0;
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "OUTROS TAMANHOS: ";
color: #929292;
}
}
}
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
.skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
// border: 1px solid #989898;
.frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
border: 1px solid #989898;
.diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorItemTextValue {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.skuSelectorItemTextValue {
color: #000000;
}
}
}
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorNameContainer {
margin: 0;
.skuSelectorTextContainer {
.skuSelectorName,
.skuSelectorNameSeparator,
.skuSelectorSelectorImageValue {
font-size: 0;
}
&::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "OUTRAS CORES:";
color: #929292;
}
}
.skuSelectorOptionsList {
margin: 0;
.skuSelectorItem--sku-selector {
.frameAround--sku-selector {
border: 2px solid #000000;
border-radius: 24px;
z-index: 5;
}
.skuSelectorInternalBox {
border-radius: 24px;
}
}
}
}
}
.shippingContainer {
position: relative;
}
:global(.vtex-tab-layout-0-x-contentContainer) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 32px;
gap: 32px;
.productImagesContainer {
width: 50%;
}
.productDescriptionContainer {
width: 50%;
.productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@media (min-width: 2560px) {
font-size: 32px;
}
}
.productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
@media (min-width: 2560px) {
font-size: 18px;
line-height: 25px;
}
color: #929292;
:first-child {
@media (min-width: 2560px) {
margin: 0;
}
}
}
}
}
// .swiper-container-initialized {
// .swiper-wrapper {
.carouselGaleryThumbs {
margin-top: 16px;
@media (max-width: 639px) {
display: block;
}
:first-child {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
:first-child {
.productImagesThumb {
height: 90px !important;
width: 90px !important;
margin-bottom: 0;
.figure {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
.thumbImg {
height: 90px;
width: 90px;
border-radius: 8px;
}
}
}
}
}
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
:global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 0;
@media (max-width: 540px) {
width: calc(100% - 47px);
flex-direction: column;
}
:global(.vtex-input) {
display: flex;
flex-direction: column;
:global(.vtex-input__label) {
font-size: 0;
}
:global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-input-prefix__group) {
@media (max-width: 540px) {
width: 100%;
}
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
:global(.vtex-address-form-4-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
}
:global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
@media (max-width: 540px) {
margin-top: 8px;
margin-right: -49px;
justify-content: right;
position: static;
}
:last-child {
color: #000;
line-height: normal;
:last-child {
display: none;
}
}
}
}
:global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
align-self: end;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
@media (max-width: 540px) {
align-self: center;
bottom: 0;
}
:global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
:global(.vtex-button__label)::before {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
}
}
.shippingTable {
border: 0;
width: auto;
.shippingTableHead {
display: block;
.shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
padding: 0;
}
.shippingTableHeadDeliveryName {
text-align: left;
grid-area: A;
}
.shippingTableHeadDeliveryEstimate {
grid-area: C;
text-align: left;
}
.shippingTableHeadDeliveryPrice {
text-align: left;
grid-area: B;
font-size: 0;
&::after {
content: "Valor";
font-size: 14px;
}
}
}
}
.shippingTableBody {
.shippingTableRow {
display: grid;
grid-template-columns: 103px 56px 136px;
grid-template-areas: "A B C";
column-gap: 32px;
margin-top: 15px;
:nth-child(n) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTableCell {
padding: 0;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCellDeliveryName {
grid-area: A;
text-transform: capitalize;
}
.shippingTableCellDeliveryEstimate {
white-space: nowrap;
grid-area: C;
}
.shippingTableCellDeliveryPrice {
grid-area: B;
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
}
.productBrand {
float: left;
}
.productDescriptionTitle {
font-size: 20px !important;
line-height: 32px !important;
}
.productDescriptionText {
font-size: 14px !important;
line-height: 19px !important;
}
.container {
.form {
margin: 0 16px;
max-width: 992px;
.label {
width: 100%;
&::after {
font-size: 16px !important;
line-height: 22px !important;
}
}
.inputGroup {
width: 100%;
:global(.vtex-styleguide-9-x-input) {
font-size: 12px !important;
line-height: 16px !important;
width: 100% !important;
}
}
}
}
}
:global(.vtex-store-components-3-x-subscriberContainer) {
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-family: "Open Sans", "sans-serif";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
:global(.vtex-store-components-3-x-form) {
margin: 0;
:global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 8px;
grid-row-gap: 13px;
@media (min-width: 2560px) {
min-width: 765px;
}
:global(.vtex-store-components-3-x-inputName) {
grid-area: 1 / 1 / 2 / 2;
margin: 0 !important;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-inputEmail) {
grid-area: 1 / 2 / 2 / 3;
margin: 0 !important;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-submit) {
grid-area: 2 / 1 / 3 / 3;
:global(.vtex-button) {
font-size: 0;
width: 100%;
}
:global(.vtex-button)::before {
content: "AVISE-ME";
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
height: 49px;
background: #000000;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}
}
}
}

110
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,110 @@
.listContainer--listaDescricao {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 0px 64px;
gap: 99px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
.listItem {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding: 0;
margin: 0;
color: #bfbfbf;
:global(.vtex-button) {
border-radius: 0;
border: none;
background-color: white;
padding: 0px 16px;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
@media (min-width: 2560px) {
font-size: 24px;
}
}
}
}
.listItemActive {
:global(.vtex-button) {
border-radius: 0;
border: none;
border-bottom: 2px solid #000000;
background-color: white;
padding: 0px 16px;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #000000;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-transform: capitalize;
@media (min-width: 2560px) {
font-size: 24px;
}
}
}
}
}
@media screen and (max-width: 1024px) {
.listContainer--listaDescricao {
flex-direction: column;
gap: 16px;
padding: 16px 0;
border-top: 1px solid #b9b9b9;
margin-top: 16px;
}
.listItem {
:global(.vtex-button) {
padding: 0 !important;
}
}
.listItemActive {
:global(.vtex-button) {
padding: 0 !important;
border: none !important;
}
}
.contentContainer {
flex-direction: column;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-productImagesContainer) {
width: 100% !important;
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
width: 100% !important;
}
}
@media screen and (max-width: 376px) {
.listContainer--listaDescricao {
margin-bottom: 16px;
}
.contentContainer {
gap: 16px;
}
}

3
styles/sass/pages/vtex.add-to-cart-button.scss Normal file
View File

@ -0,0 +1,3 @@
.addButton {
width: 100%;
}