forked from M3-Academy/challenge-vtex-io
Merge pull request 'Develop' (#6) from Develop into master
Reviewed-on: #6
This commit is contained in:
commit
44b8e8d775
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
coverage/
|
||||||
|
*.snap.ts
|
||||||
7
.eslintrc
Normal file
7
.eslintrc
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": "vtex",
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1 +1,2 @@
|
|||||||
CHANGELOG.md
|
CHANGELOG.md
|
||||||
|
Todo.md
|
||||||
|
|||||||
1
.prettierrc
Normal file
1
.prettierrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
"@vtex/prettier-config"
|
||||||
38
assets/pixrallenson.svg
Normal file
38
assets/pixrallenson.svg
Normal 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_14402_10626)">
|
||||||
|
<path d="M27.2383 22.5286V8.76352C27.2383 7.54742 27.7106 6.38113 28.5512 5.52122C29.3918 4.66131 30.532 4.17822 31.7209 4.17822L35.6936 4.18389C36.8793 4.18633 38.0157 4.66993 38.8533 5.52853C39.6908 6.38713 40.1611 7.55059 40.1609 8.76352V11.6928C40.1609 12.909 39.6887 14.0754 38.848 14.9354C38.0074 15.7954 36.8673 16.2787 35.6783 16.2788H30.0632" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M41.2734 4.17725H42.9969C43.4849 4.17725 43.9529 4.37553 44.2979 4.72848C44.6429 5.08142 44.8368 5.56012 44.8368 6.05927V16.3409" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M44.4659 2.58462L43.6845 1.78462C43.6384 1.7375 43.6018 1.68155 43.5769 1.61997C43.5519 1.55839 43.5391 1.49238 43.5391 1.42572C43.5391 1.35905 43.5519 1.29305 43.5769 1.23146C43.6018 1.16988 43.6384 1.11393 43.6845 1.06681L44.4659 0.267524C44.5591 0.172199 44.6856 0.118652 44.8174 0.118652C44.9493 0.118652 45.0757 0.172199 45.169 0.267524L45.9497 1.06681C45.9958 1.11393 46.0323 1.16988 46.0573 1.23146C46.0822 1.29305 46.0951 1.35905 46.0951 1.42572C46.0951 1.49238 46.0822 1.55839 46.0573 1.61997C46.0323 1.68155 45.9958 1.7375 45.9497 1.78462L45.1655 2.58462C45.1194 2.6318 45.0646 2.66922 45.0044 2.69475C44.9441 2.72029 44.8795 2.73343 44.8143 2.73343C44.7491 2.73343 44.6845 2.72029 44.6242 2.69475C44.564 2.66922 44.5092 2.6318 44.4631 2.58462" fill="#32BCAD"/>
|
||||||
|
<path d="M48.1445 4.16846H49.8535C50.7325 4.16808 51.5757 4.52493 52.1976 5.16049L56.1953 9.24977C56.3184 9.37581 56.4645 9.47581 56.6254 9.54403C56.7863 9.61225 56.9587 9.64737 57.1329 9.64737C57.307 9.64737 57.4795 9.61225 57.6404 9.54403C57.8012 9.47581 57.9474 9.37581 58.0705 9.24977L62.0536 5.17607C62.3613 4.86134 62.7267 4.61172 63.1288 4.4415C63.5309 4.27129 63.9619 4.1838 64.3971 4.18405H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M48.1445 16.2513H49.8535C50.7325 16.2516 51.5757 15.8947 52.1976 15.2592L56.1953 11.17C56.444 10.9157 56.7813 10.7729 57.1329 10.7729C57.4845 10.7729 57.8217 10.9157 58.0705 11.17L62.0536 15.2444C62.6753 15.8798 63.5182 16.2367 64.3971 16.2364H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M17.05 18.863C16.6284 18.8645 16.2106 18.7806 15.8209 18.616C15.4311 18.4515 15.0771 18.2096 14.7793 17.9042L11.4993 14.5469C11.3833 14.4334 11.229 14.3701 11.0684 14.3701C10.9079 14.3701 10.7536 14.4334 10.6376 14.5469L7.34647 17.9134C7.04884 18.2192 6.69493 18.4616 6.30518 18.6267C5.91543 18.7917 5.49757 18.8761 5.07574 18.875H4.43359L8.5899 23.1266C9.21326 23.7628 10.0579 24.1202 10.9386 24.1202C11.8192 24.1202 12.6638 23.7628 13.2872 23.1266L17.4518 18.8658L17.05 18.863Z" fill="#32BCAD"/>
|
||||||
|
<path d="M5.07644 6.99829C5.49827 6.99714 5.91614 7.08152 6.30589 7.24657C6.69565 7.41161 7.04956 7.65405 7.34716 7.95985L10.6383 11.3271C10.7527 11.4437 10.9076 11.5092 11.0691 11.5092C11.2307 11.5092 11.3856 11.4437 11.5 11.3271L14.7793 7.9726C15.0767 7.66642 15.4305 7.42369 15.8203 7.2585C16.2101 7.09332 16.6281 7.00896 17.0501 7.01034H17.4449L13.2803 2.75028C12.9719 2.43471 12.6057 2.18438 12.2028 2.01358C11.7998 1.84279 11.3678 1.75488 10.9316 1.75488C10.4954 1.75488 10.0635 1.84279 9.66049 2.01358C9.2575 2.18438 8.89136 2.43471 8.58297 2.75028L4.43359 6.99829H5.07644Z" fill="#32BCAD"/>
|
||||||
|
<path d="M20.8892 10.5349L18.3726 7.96056C18.3158 7.98429 18.2552 7.99679 18.1938 7.9974H17.0495C16.454 7.99893 15.8831 8.24085 15.4611 8.67057L12.1817 12.0229C11.8864 12.3245 11.4862 12.4938 11.0689 12.4938C10.6516 12.4938 10.2514 12.3245 9.95605 12.0229L6.66426 8.65781C6.2423 8.22783 5.67145 7.98565 5.07586 7.98394H3.67103C3.61313 7.98261 3.55591 7.97085 3.502 7.94922L0.969429 10.5349C0.347392 11.1725 -0.00195312 12.0365 -0.00195312 12.9373C-0.00195312 13.8382 0.347392 14.7022 0.969429 15.3398L3.49646 17.9248C3.55026 17.9027 3.60754 17.891 3.66548 17.8901H5.07586C5.67144 17.8883 6.24226 17.6461 6.66426 17.2162L9.95535 13.8497C10.5504 13.2417 11.5874 13.2417 12.1817 13.8497L15.4611 17.2034C15.8831 17.6331 16.454 17.8751 17.0495 17.8766H18.1938C18.2552 17.877 18.3159 17.8895 18.3726 17.9134L20.8892 15.3391C21.1977 15.0237 21.4424 14.6491 21.6094 14.2369C21.7764 13.8247 21.8623 13.3828 21.8623 12.9366C21.8623 12.4904 21.7764 12.0486 21.6094 11.6364C21.4424 11.2242 21.1977 10.8496 20.8892 10.5342" fill="#32BCAD"/>
|
||||||
|
<path d="M30.6567 21.3588C30.4487 21.3682 30.2422 21.4002 30.0409 21.4545V22.2935C30.1949 22.3487 30.357 22.3765 30.5202 22.3757C30.9317 22.3757 31.1264 22.2339 31.1264 21.8633C31.1264 21.5147 30.9671 21.3588 30.6567 21.3588ZM29.9023 22.9177V21.2575H30.0153L30.027 21.3284C30.2369 21.2713 30.4518 21.2359 30.6685 21.2228C30.8187 21.212 30.9677 21.2562 31.089 21.3475C31.2275 21.4651 31.2746 21.655 31.2746 21.8619C31.2746 22.0688 31.2053 22.2828 31.0114 22.3955C30.8634 22.4711 30.6995 22.5083 30.5341 22.5039C30.3669 22.5028 30.2007 22.4768 30.0409 22.4267V22.9149L29.9023 22.9177Z" fill="#939598"/>
|
||||||
|
<path d="M32.3051 21.3538C31.8943 21.3538 31.7107 21.4856 31.7107 21.8562C31.7107 22.214 31.8915 22.3756 32.3051 22.3756C32.7186 22.3756 32.8974 22.2452 32.8974 21.8753C32.8974 21.5175 32.7166 21.3538 32.3051 21.3538ZM32.8343 22.3756C32.6958 22.4762 32.5143 22.5053 32.3051 22.5053C32.0959 22.5053 31.9082 22.4741 31.7745 22.3756C31.6242 22.2672 31.5625 22.0921 31.5625 21.8661C31.5625 21.6401 31.6242 21.4643 31.7745 21.3538C31.9082 21.2553 32.0917 21.2241 32.3051 21.2241C32.5184 21.2241 32.6979 21.2553 32.8343 21.3538C32.9867 21.4643 33.0456 21.6443 33.0456 21.8633C33.0456 22.0822 32.9846 22.2672 32.8343 22.3756Z" fill="#939598"/>
|
||||||
|
<path d="M34.7809 22.4711L34.3223 21.4642H34.3133L33.8617 22.4711H33.7349L33.25 21.2573H33.4024L33.809 22.2763H33.8187L34.2607 21.2573H34.3874L34.8405 22.2763H34.8502L35.2471 21.2573H35.3974L34.9084 22.4711H34.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.4351C40.939 21.3801 40.7769 21.3525 40.6137 21.3536C40.2023 21.3536 40.0076 21.4953 40.0076 21.8659C40.0076 22.2166 40.1676 22.3704 40.4773 22.3704C40.6852 22.3605 40.8915 22.329 41.0931 22.2762V21.4351ZM41.1194 22.471L41.107 22.4002C40.8972 22.4578 40.6823 22.4934 40.4655 22.5065C40.3151 22.518 40.1657 22.4735 40.045 22.381C39.9065 22.2634 39.8594 22.0735 39.8594 21.8673C39.8594 21.6505 39.9286 21.4464 40.1226 21.3359C40.2708 21.2586 40.4357 21.2206 40.602 21.2253C40.7683 21.2277 40.9336 21.2534 41.0931 21.3019V20.7456H41.2316V22.471H41.1194Z" fill="#939598"/>
|
||||||
|
<path d="M43.2641 21.3585C43.0561 21.3679 42.8497 21.3999 42.6483 21.4542V22.291C42.802 22.3478 42.9643 22.3764 43.1277 22.3754C43.5391 22.3754 43.7338 22.2336 43.7338 21.8631C43.7338 21.5144 43.5745 21.3585 43.2641 21.3585ZM43.6188 22.3966C43.471 22.4721 43.3074 22.5093 43.1422 22.505C42.9615 22.5039 42.7821 22.473 42.6109 22.4136L42.604 22.471H42.5098V20.7456H42.6483V21.3245C42.8539 21.2707 43.0641 21.237 43.2759 21.2239C43.4261 21.2131 43.5751 21.2573 43.6964 21.3486C43.8349 21.4662 43.882 21.6561 43.882 21.8631C43.882 22.07 43.8128 22.284 43.6188 22.3966Z" fill="#939598"/>
|
||||||
|
<path d="M44.0663 22.9354V22.8036C44.1356 22.8107 44.1979 22.8157 44.2423 22.8157C44.4141 22.8157 44.5194 22.7647 44.6136 22.5656L44.6586 22.4692L44.0352 21.2554H44.1959L44.7272 22.3034H44.7362L45.2412 21.2554H45.3991L44.7313 22.6187C44.6094 22.866 44.4778 22.9475 44.2354 22.9475C44.1781 22.9472 44.121 22.9432 44.0642 22.9354" 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.4712V21.8016C51.399 21.5805 51.2888 21.5011 51.0914 21.5011C50.9275 21.5086 50.7649 21.5342 50.6065 21.5777V22.4719H50.2754V21.2574H50.5455L50.5573 21.3346C50.7639 21.2724 50.9768 21.2353 51.1919 21.2241C51.3379 21.2121 51.483 21.2566 51.5985 21.3488C51.692 21.4352 51.7273 21.5557 51.7273 21.7286V22.4712H51.399Z" fill="#939598"/>
|
||||||
|
<path d="M52.6648 22.5053C52.5117 22.5053 52.3448 22.4833 52.2229 22.3777C52.0774 22.2572 52.0352 22.0681 52.0352 21.8633C52.0352 21.6712 52.0961 21.4615 52.2769 21.3439C52.4252 21.2454 52.608 21.2241 52.7985 21.2241C52.9371 21.2241 53.0687 21.2333 53.2142 21.2475V21.5076C53.0943 21.4955 52.9509 21.4863 52.8359 21.4863C52.5207 21.4863 52.3725 21.5869 52.3725 21.8661C52.3725 22.1276 52.4833 22.241 52.7417 22.241C52.9092 22.2354 53.0759 22.2145 53.2398 22.1786V22.428C53.0502 22.4732 52.8567 22.499 52.6621 22.5053" fill="#939598"/>
|
||||||
|
<path d="M54.2203 21.4785C53.9051 21.4785 53.7666 21.5798 53.7666 21.8562C53.7666 22.1325 53.9051 22.2502 54.2203 22.2502C54.5355 22.2502 54.6692 22.1517 54.6692 21.8753C54.6692 21.599 54.5355 21.4785 54.2203 21.4785ZM54.7891 22.3777C54.6436 22.4783 54.4531 22.5053 54.2203 22.5053C53.9876 22.5053 53.7929 22.4762 53.6495 22.3777C53.4847 22.2672 53.4258 22.0844 53.4258 21.8661C53.4258 21.6479 53.4847 21.4615 53.6495 21.351C53.7929 21.2525 53.9827 21.2241 54.2203 21.2241C54.4579 21.2241 54.6436 21.2525 54.7891 21.351C54.9532 21.4615 55.01 21.6471 55.01 21.8633C55.01 22.0794 54.9511 22.2672 54.7891 22.3777Z" fill="#939598"/>
|
||||||
|
<path d="M56.9229 22.5051C56.7234 22.5051 56.5073 22.4711 56.3452 22.3343C56.1526 22.1706 56.0938 21.9184 56.0938 21.647C56.0938 21.4039 56.1693 21.1156 56.42 20.9476C56.6154 20.8179 56.8571 20.791 57.1017 20.791C57.2804 20.791 57.4639 20.8031 57.6634 20.8201V21.1156C57.4923 21.1014 57.2804 21.0893 57.1162 21.0893C56.6576 21.0893 56.463 21.2672 56.463 21.647C56.463 22.0268 56.6438 22.2068 56.9818 22.2068C57.2234 22.1982 57.4636 22.1653 57.6988 22.1083V22.4016C57.4441 22.4619 57.1842 22.4965 56.9229 22.5051Z" fill="#939598"/>
|
||||||
|
<path d="M58.673 21.4404C58.3959 21.4404 58.292 21.5417 58.2705 21.7238H59.0699C59.0602 21.5269 58.9473 21.4404 58.673 21.4404ZM58.6231 22.5033C58.4284 22.5033 58.2518 22.4792 58.1202 22.3687C57.9886 22.2581 57.9297 22.0682 57.9297 21.8613C57.9297 21.6764 57.9886 21.4695 58.1534 21.349C58.2989 21.2434 58.4846 21.2222 58.673 21.2222C58.842 21.2222 59.0415 21.2413 59.187 21.3448C59.3775 21.4815 59.3948 21.6934 59.3948 21.9428H58.2684C58.2754 22.1285 58.3716 22.2482 58.7055 22.2482C58.9176 22.2435 59.129 22.2226 59.338 22.1859V22.4239C59.1021 22.4698 58.8631 22.4963 58.6231 22.5033Z" fill="#939598"/>
|
||||||
|
<path d="M60.8697 22.4712V21.8016C60.8697 21.5805 60.7595 21.5011 60.5621 21.5011C60.3982 21.5086 60.2357 21.5342 60.0772 21.5777V22.4719H59.7461V21.2574H60.0163L60.028 21.3346C60.2346 21.2724 60.4475 21.2353 60.6626 21.2241C60.8086 21.2121 60.9537 21.2566 61.0692 21.3488C61.1627 21.4352 61.198 21.5557 61.198 21.7286V22.4712H60.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.7456H65.9959V22.471H65.6641V20.7456Z" fill="#939598"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_14402_10626">
|
||||||
|
<rect width="66" height="24" fill="white" transform="translate(0 0.118652)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 15 KiB |
1
docs/Task.txt
Normal file
1
docs/Task.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
NOME-DO-BLOCO#INDENTIFICADOR
|
||||||
43
docs/Todo.md
Normal file
43
docs/Todo.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
# Projeto
|
||||||
|
|
||||||
|
--- {cm:2023-01-25}
|
||||||
|
|
||||||
|
- [x] (a) inciando projeto {cm:2023-01-25}
|
||||||
|
|
||||||
|
|
||||||
|
os Requisitos cobrados serão: {cm:2023-02-07}
|
||||||
|
|
||||||
|
# Dev
|
||||||
|
|
||||||
|
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07}
|
||||||
|
|
||||||
|
- FIXME [Blocos que devem ser ajustado e desenvolvidos](testeid){
|
||||||
|
|
||||||
|
- [x] 1. BreadCrumb; {cm:2023-01-31}
|
||||||
|
|
||||||
|
- [x] 2. todo o bloco de imagens do produto, {cm:2023-01-31}
|
||||||
|
|
||||||
|
- HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens {cm:2023-02-03}
|
||||||
|
|
||||||
|
- HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, {cm:2023-02-07}
|
||||||
|
|
||||||
|
- HACK 5. prateleira de produtos, {cm:2023-02-07}
|
||||||
|
|
||||||
|
- HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) {cm:2023-02-10}
|
||||||
|
|
||||||
|
- HACK 7.Fazer o cep {cm:2023-02-10}
|
||||||
|
|
||||||
|
- FIXME COLOCAR OS TESTESID!!!!!
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
# Requisitos
|
||||||
|
|
||||||
|
{cm:2023-01-25}
|
||||||
|
|
||||||
|
* FIXME Bloco de Preço com Desconto deve ser CUSTOM {cm:2023-02-10}
|
||||||
|
|
||||||
|
* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. {cm:2023-02-10}
|
||||||
|
|
||||||
|
* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. {cm:2023-02-10}
|
||||||
@ -15,7 +15,6 @@
|
|||||||
"postreleasy": "vtex publish --verbose"
|
"postreleasy": "vtex publish --verbose"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"agenciamagma.store-theme": "5.x",
|
|
||||||
"vtex.store": "2.x",
|
"vtex.store": "2.x",
|
||||||
"vtex.store-header": "2.x",
|
"vtex.store-header": "2.x",
|
||||||
"vtex.product-summary": "2.x",
|
"vtex.product-summary": "2.x",
|
||||||
|
|||||||
57
package.json
57
package.json
@ -1,44 +1,61 @@
|
|||||||
{
|
{
|
||||||
|
"name": "challenge-vtex-io-Gustavo-Rallenson",
|
||||||
|
"private": true,
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"main": "gulpfile.js",
|
|
||||||
"directories": {
|
|
||||||
"doc": "docs"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
|
||||||
"lint": "eslint ./ --fix",
|
"lint": "eslint ./ --fix",
|
||||||
|
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
|
||||||
|
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
||||||
"scss": "gulp storefront"
|
"scss": "gulp storefront"
|
||||||
},
|
},
|
||||||
"repository": {
|
"husky": {
|
||||||
"type": "git",
|
"hooks": {
|
||||||
"url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git"
|
"pre-commit": "lint-staged"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{ts,js,tsx,jsx}": [
|
||||||
|
"eslint --fix",
|
||||||
|
"prettier --write"
|
||||||
|
],
|
||||||
|
"*.{json,graphql,gql}": [
|
||||||
|
"prettier --write"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"keywords": [],
|
|
||||||
"author": "",
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||||
|
"@typescript-eslint/parser": "^4.18.0",
|
||||||
|
"@vtex/prettier-config": "0.1.4",
|
||||||
|
"concurrently": "^6.0.0",
|
||||||
"eslint": "^7.22.0",
|
"eslint": "^7.22.0",
|
||||||
"eslint-config-prettier": "^8.1.0",
|
"eslint-config-prettier": "^8.1.0",
|
||||||
|
"eslint-config-vtex": "12.3.2",
|
||||||
|
"eslint-config-vtex-react": "^6.2.1",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"eslint-plugin-prettier": "^3.3.1",
|
||||||
|
"eslint-plugin-react": "^7.23.1",
|
||||||
"glob": "^7.1.6",
|
"glob": "^7.1.6",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-sass": "^5.0.0",
|
"gulp-sass": "^5.0.0",
|
||||||
"gulp-wait": "0.0.2",
|
"gulp-wait": "0.0.2",
|
||||||
"sass": "^1.37.5",
|
|
||||||
"concurrently": "^6.0.0",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
|
||||||
"@typescript-eslint/parser": "^4.18.0",
|
|
||||||
"@vtex/prettier-config": "0.1.4",
|
|
||||||
"eslint-config-vtex": "12.3.2",
|
|
||||||
"eslint-config-vtex-react": "^6.2.1",
|
|
||||||
"eslint-plugin-react": "^7.23.1",
|
|
||||||
"husky": "^5.2.0",
|
"husky": "^5.2.0",
|
||||||
"lint-staged": "10.1.1",
|
"lint-staged": "10.1.1",
|
||||||
"prettier": "2.0.2",
|
"prettier": "2.0.2",
|
||||||
|
"sass": "^1.37.5",
|
||||||
"typescript": "3.8.3"
|
"typescript": "3.8.3"
|
||||||
},
|
},
|
||||||
|
"main": "gulpfile.js",
|
||||||
|
"directories": {
|
||||||
|
"doc": "docs"
|
||||||
|
},
|
||||||
|
"repository": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git",
|
||||||
|
"keywords": [],
|
||||||
|
"author": "Rallenson <Rallenson900@gmail.com>",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"husky": "^5.2.0",
|
"husky": "^5.2.0",
|
||||||
"react": "^17.0.2"
|
"react": "^17.0.2",
|
||||||
}
|
"vtex": "^3.0.0"
|
||||||
|
},
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Desafio-VtexIO"
|
||||||
}
|
}
|
||||||
3
react/CEP.tsx
Normal file
3
react/CEP.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import CEP from "./components/ProductContext/cep";
|
||||||
|
|
||||||
|
export default CEP;
|
||||||
3
react/Pix.tsx
Normal file
3
react/Pix.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Pix from "./components/ProductContext/Pix";
|
||||||
|
|
||||||
|
export default Pix;
|
||||||
3
react/Placeholder.tsx
Normal file
3
react/Placeholder.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Placeholder from "./components/ProductContext/Placeholder";
|
||||||
|
|
||||||
|
export default Placeholder;
|
||||||
@ -2,7 +2,7 @@ import React from 'react'
|
|||||||
|
|
||||||
const Example = () => {
|
const Example = () => {
|
||||||
return (
|
return (
|
||||||
<div>Example</div>
|
<div>Example um</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
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 = {
|
||||||
|
|||||||
214
react/components/Html/styles.css
Normal file
214
react/components/Html/styles.css
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
/* [class*=html--pdp-breadcrumb]{
|
||||||
|
} */
|
||||||
|
.html--pdp-pixPrice{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 28.972%;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div{
|
||||||
|
display: flex;
|
||||||
|
gap: 26px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div img{
|
||||||
|
width: 66px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div span[datatype='span_wrapper']{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div span[datatype='span_wrapper'] p{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class="pix_wrapper-price"]{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: rgba(0, 0, 0, 0.58);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class='pix_wrapper-Discount']{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #929292;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.html--pdp-productMain,.html--availability{
|
||||||
|
padding-right: 2.778%;
|
||||||
|
padding-left: 2.778%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.html--card-button{
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
}
|
||||||
|
.html--buy-button{
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.html--buy-button :global(.vtex-button){
|
||||||
|
display: block;
|
||||||
|
background: black;
|
||||||
|
height: 49px;
|
||||||
|
max-width: 97.05%;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.html--pdp-section_descriptions{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
padding: 0px 40px 0px 40px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
.html--buy-button :global(.vtex-button){
|
||||||
|
max-width: 766px;
|
||||||
|
width: 96%;
|
||||||
|
}
|
||||||
|
.html--pdp-productMain,.html--availability{
|
||||||
|
padding-right: 12.5393%;
|
||||||
|
padding-left: 12.5393%;
|
||||||
|
margin: 0;
|
||||||
|
gap: 32px;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
.html--pdp-section_descriptions{
|
||||||
|
padding: 0px 12.5393% 0px 12.5393%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
|
||||||
|
padding-left: 28px;
|
||||||
|
}
|
||||||
|
.html--pdp-section_descriptions{
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.html--pdp-section_descriptions :after{
|
||||||
|
border-bottom: 1px solid rgba(185, 185, 185, 1);
|
||||||
|
}
|
||||||
|
.html--pdp-departamens div ul li button{
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(191, 191, 191, 1);
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){
|
||||||
|
min-width: 17px;
|
||||||
|
min-height: 17px;
|
||||||
|
border: 0.5px solid black;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 375px){
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
|
||||||
|
min-width: 100% !important;
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.html--buy-button{
|
||||||
|
align-items: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.html--buy-button :global(.vtex-button){
|
||||||
|
max-width: 93.662%;
|
||||||
|
width: 100%;
|
||||||
|
height: 74px;
|
||||||
|
}
|
||||||
|
.html--buy-button :global(.vtex-button) :global(.vtex-button__label){
|
||||||
|
padding-left: 21.92%;
|
||||||
|
padding-right: 21.92%;
|
||||||
|
padding-top: 12px !important;
|
||||||
|
padding-bottom: 12px !important;
|
||||||
|
}
|
||||||
|
.html--pdp-productMain,.html--availability{
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
|
||||||
|
width: 89.23%;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
|
||||||
|
border-bottom: 1px solid rgba(185, 185, 185, 1);
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
|
||||||
|
min-width: 296px;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
|
||||||
|
align-items: center;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.html--pdp-departamens div ul{
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: end;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-address-form__postalCode-forgottenURL) a{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
:global(.vtex-address-form__postalCode-forgottenURL) a span{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
43
react/components/ProductContext/Pix.tsx
Normal file
43
react/components/ProductContext/Pix.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useProduct } from 'vtex.product-context';
|
||||||
|
|
||||||
|
type price = {
|
||||||
|
discountRate:number
|
||||||
|
}
|
||||||
|
const Pix = ({ discountRate}:price) => {
|
||||||
|
const { product } = useProduct()
|
||||||
|
|
||||||
|
let pixprice = product?.priceRange.sellingPrice.lowPrice
|
||||||
|
let desconto = discountRate >= 0 ? discountRate : 10;
|
||||||
|
let finalprice = pixprice - (pixprice/desconto)
|
||||||
|
let RoundedNumber = Number(Math.round(finalprice * 100) / 100);
|
||||||
|
const formattedNumber = RoundedNumber.toLocaleString('pt-BR', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<div className='pix_wrapper'>
|
||||||
|
<img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />
|
||||||
|
<span datatype='span_wrapper'>
|
||||||
|
<p className='pix_wrapper-price'>
|
||||||
|
R$ {formattedNumber}
|
||||||
|
</p>
|
||||||
|
<p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
Pix.schema = {
|
||||||
|
title:"Pix-Price",
|
||||||
|
description:"quantos % o pagamento via pix irá proporcionar",
|
||||||
|
type:"object",
|
||||||
|
properties:{
|
||||||
|
discountRate:{
|
||||||
|
title: "Pix-Price",
|
||||||
|
description:"quantos % o pagamento via pix irá proporcionar",
|
||||||
|
type:"number",
|
||||||
|
default:10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Pix
|
||||||
22
react/components/ProductContext/Placeholder.tsx
Normal file
22
react/components/ProductContext/Placeholder.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Placeholder = () => {
|
||||||
|
if (typeof document !== "undefined") {
|
||||||
|
const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
|
||||||
|
const placeholdertamanho = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--tamanho .vtex-store-components-3-x-skuSelectorName");
|
||||||
|
const placeholdercor = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--cor .vtex-store-components-3-x-skuSelectorName");
|
||||||
|
console.log(placeholdertamanho)
|
||||||
|
if(placeholdertamanho){
|
||||||
|
placeholdertamanho.textContent = "OUTROS TAMANHOS:";
|
||||||
|
}
|
||||||
|
if(placeholdercor){
|
||||||
|
placeholdercor.textContent = "OUTRAS CORES:";
|
||||||
|
}
|
||||||
|
Placeholder?.setAttribute("Placeholder","Digite seu CEP")
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Placeholder;
|
||||||
50
react/components/ProductContext/cep.tsx
Normal file
50
react/components/ProductContext/cep.tsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const CEP = () => {
|
||||||
|
function handleButtonClick(){
|
||||||
|
setTimeout(() => {
|
||||||
|
if (typeof document !== "undefined"){
|
||||||
|
const tr = document.querySelector('.vtex-store-components-3-x-shippingTableRow');
|
||||||
|
const trRow = document.querySelectorAll('.vtex-store-components-3-x-shippingTableBody .vtex-store-components-3-x-shippingTableRow ');
|
||||||
|
const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate');
|
||||||
|
const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate');
|
||||||
|
const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice');
|
||||||
|
if(tdEstimate){
|
||||||
|
tdEstimate.forEach((row) => {
|
||||||
|
if(row.parentNode){
|
||||||
|
row.parentNode.removeChild(row);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
trRow.forEach((row, index) => {
|
||||||
|
const td = tdEstimate[index];
|
||||||
|
row.appendChild(td);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(tr){
|
||||||
|
if(thEstimate){
|
||||||
|
thEstimate.textContent = "PRAZO";
|
||||||
|
tr.removeChild(thEstimate);
|
||||||
|
tr.appendChild(thEstimate);
|
||||||
|
}
|
||||||
|
if(thPrice){
|
||||||
|
thPrice.textContent = "FRETE";
|
||||||
|
tr.removeChild(thPrice);
|
||||||
|
tr.insertBefore(thPrice,thEstimate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
if (typeof document !== "undefined") {
|
||||||
|
const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button");
|
||||||
|
if (btnCep) {
|
||||||
|
btnCep.addEventListener('click', handleButtonClick);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default CEP;
|
||||||
@ -23,12 +23,6 @@
|
|||||||
"@types/react": "^16.9.31",
|
"@types/react": "^16.9.31",
|
||||||
"@vtex/tsconfig": "^0.4.4",
|
"@vtex/tsconfig": "^0.4.4",
|
||||||
"graphql": "^14.6.0",
|
"graphql": "^14.6.0",
|
||||||
"typescript": "3.9.7",
|
"typescript": "3.9.7"
|
||||||
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
|
|
||||||
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
|
|
||||||
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
|
|
||||||
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
|
|
||||||
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
|
|
||||||
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,10 +2,16 @@
|
|||||||
"extends": "@vtex/tsconfig",
|
"extends": "@vtex/tsconfig",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"noEmitOnError": false,
|
"noEmitOnError": false,
|
||||||
"lib": ["dom"],
|
"lib": [
|
||||||
|
"dom"
|
||||||
|
],
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"target": "es2017"
|
"target": "es2017"
|
||||||
},
|
},
|
||||||
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
|
"include": [
|
||||||
|
"./typings/*.d.ts",
|
||||||
|
"./**/*.tsx",
|
||||||
|
"./**/*.ts"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
@ -774,30 +774,6 @@ use-isomorphic-layout-effect@^1.1.2:
|
|||||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||||
|
|
||||||
"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
|
|
||||||
version "1.0.0"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
|
|
||||||
|
|
||||||
"vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
|
|
||||||
version "0.10.0"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
|
|
||||||
|
|
||||||
"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime":
|
|
||||||
version "8.130.0"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98"
|
|
||||||
|
|
||||||
"vtex.responsive-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout":
|
|
||||||
version "0.1.2"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout#e33f23a78afb3ffb8ff8aedc77b1ca6728583e72"
|
|
||||||
|
|
||||||
"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text":
|
|
||||||
version "0.14.0"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text#fd31249116da1e0f1caeaa00a44035afa9c91703"
|
|
||||||
|
|
||||||
"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide":
|
|
||||||
version "9.145.0"
|
|
||||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide#41dfb32af8756eb5528dbd452e47003a8f67fe8c"
|
|
||||||
|
|
||||||
yaml@^1.10.0:
|
yaml@^1.10.0:
|
||||||
version "1.10.2"
|
version "1.10.2"
|
||||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
||||||
|
|||||||
@ -1,15 +1,221 @@
|
|||||||
{
|
{
|
||||||
"store.product": {
|
"store.product": {
|
||||||
"children": [
|
"children": [
|
||||||
|
"html#Placeholder",
|
||||||
|
"html#CEP",
|
||||||
"html#breadcrumb",
|
"html#breadcrumb",
|
||||||
"condition-layout.product#availability",
|
"condition-layout.product#availability",
|
||||||
"flex-layout.row#description",
|
"html#departaments",
|
||||||
"flex-layout.row#specifications-title",
|
"flex-layout.row#specifications-title",
|
||||||
"product-specification-group#table",
|
"html#carousel"
|
||||||
"shelf.relatedProducts",
|
|
||||||
"product-questions-and-answers"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"html#Pix": {
|
||||||
|
"props": {
|
||||||
|
"testId": "pix-price",
|
||||||
|
"blockClass": "pdp-pixPrice"
|
||||||
|
},
|
||||||
|
"children": ["Pix"]
|
||||||
|
},
|
||||||
|
"html#Placeholder": {
|
||||||
|
"children": ["Placeholder"]
|
||||||
|
},
|
||||||
|
"html#CEP": {
|
||||||
|
"children": ["CEP"]
|
||||||
|
},
|
||||||
|
"html#tab-layout": {
|
||||||
|
"props": {
|
||||||
|
"testId": "tab-layout"
|
||||||
|
},
|
||||||
|
"children": ["tab-layout#pdp"]
|
||||||
|
},
|
||||||
|
"tab-layout#pdp": {
|
||||||
|
"children": [
|
||||||
|
"tab-list#pdp",
|
||||||
|
"tab-content#pdp",
|
||||||
|
"tab-content#pdp2",
|
||||||
|
"tab-content#pdp3",
|
||||||
|
"tab-content#pdp4",
|
||||||
|
"tab-content#pdp5"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-tabLayout",
|
||||||
|
"defaultActiveTabId": "descrição1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list#pdp": {
|
||||||
|
"children": [
|
||||||
|
"tab-list.item#pdpsection1",
|
||||||
|
"tab-list.item#pdpsection2",
|
||||||
|
"tab-list.item#pdpsection3",
|
||||||
|
"tab-list.item#pdpsection4",
|
||||||
|
"tab-list.item#pdpsection5"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-tabSections"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdpsection1": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição1",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdpsection2": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição2",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdpsection3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição3",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdpsection4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição4",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdpsection5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição5",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#descriptionpdp": {
|
||||||
|
"children": ["html#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#pdp": {
|
||||||
|
"children": ["tab-content.item#descriptionpdp"]
|
||||||
|
},
|
||||||
|
"tab-content.item#descriptionpdp2": {
|
||||||
|
"children": ["html#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#pdp2": {
|
||||||
|
"children": ["tab-content.item#descriptionpdp2"]
|
||||||
|
},
|
||||||
|
"tab-content.item#descriptionpdp3": {
|
||||||
|
"children": ["html#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#pdp3": {
|
||||||
|
"children": ["tab-content.item#descriptionpdp3"]
|
||||||
|
},
|
||||||
|
"tab-content.item#descriptionpdp4": {
|
||||||
|
"children": ["html#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#pdp4": {
|
||||||
|
"children": ["tab-content.item#descriptionpdp4"]
|
||||||
|
},
|
||||||
|
"tab-content.item#descriptionpdp5": {
|
||||||
|
"children": ["html#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "descrição5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#pdp5": {
|
||||||
|
"children": ["tab-content.item#descriptionpdp5"]
|
||||||
|
},
|
||||||
|
"html#prateleira": {
|
||||||
|
"props": {
|
||||||
|
"testId": "vtex-product-summary"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
"stack-layout#pdp",
|
||||||
|
"product-summary-name",
|
||||||
|
"product-list-price#summary",
|
||||||
|
"html#selling-price",
|
||||||
|
"flex-layout.row#selling-price-savingspdp"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"html#carousel": {
|
||||||
|
"children": ["flex-layout.row#shelfpdp"]
|
||||||
|
},
|
||||||
|
"flex-layout.row#shelfpdp": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-carrousel"
|
||||||
|
},
|
||||||
|
"children": ["list-context.product-list#pdp"]
|
||||||
|
},
|
||||||
|
"list-context.product-list#pdp": {
|
||||||
|
"blocks": ["product-summary.shelf#Pdp"],
|
||||||
|
"children": ["html#slider"],
|
||||||
|
"props": {
|
||||||
|
"orderBy": "OrderByTopSaleDESC"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"html#slider": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-summary-list"
|
||||||
|
},
|
||||||
|
"children": ["slider-layout#demo-products#pdp"]
|
||||||
|
},
|
||||||
|
"slider-layout#demo-products#pdp": {
|
||||||
|
"props": {
|
||||||
|
"itemsPerPage": {
|
||||||
|
"desktop": 4,
|
||||||
|
"tablet": 3,
|
||||||
|
"phone": 2
|
||||||
|
},
|
||||||
|
"infinite": true,
|
||||||
|
"fullWidth": true,
|
||||||
|
"blockClass": "pdp-carrousel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"product-summary.shelf#Pdp": {
|
||||||
|
"children": [
|
||||||
|
"html#prateleira"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"flex-layout.row#selling-price-savingspdp": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-price",
|
||||||
|
"colGap": 2,
|
||||||
|
"preserveLayoutOnMobile": true,
|
||||||
|
"preventHorizontalStretch": true,
|
||||||
|
"marginBottom": 4
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
"product-selling-price#summary",
|
||||||
|
"product-price-savings#summary"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"product-summary-name": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-name"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"stack-layout#pdp": {
|
||||||
|
"children": [
|
||||||
|
"product-summary-image#shelfpdp",
|
||||||
|
"modal-trigger#quickview" // Check quickview.jsonc
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-summary-image#shelfpdp": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-imgpdp",
|
||||||
|
"showBadge": false,
|
||||||
|
"aspectRatio": "1:1",
|
||||||
|
"maxHeight": 334.4
|
||||||
|
}
|
||||||
|
},
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
"props": {
|
"props": {
|
||||||
"tag": "section",
|
"tag": "section",
|
||||||
@ -18,19 +224,27 @@
|
|||||||
},
|
},
|
||||||
"children": ["breadcrumb"]
|
"children": ["breadcrumb"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#specifications-title": {
|
"flex-layout.row#specifications-title": {
|
||||||
"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:",
|
||||||
|
"blockClass": "pdp-specifications"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.row#description": {
|
"flex-layout.row#description": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginBottom": 7
|
"width": "66%"
|
||||||
},
|
},
|
||||||
"children": ["product-description"]
|
"children": ["product-images#description", "product-description"]
|
||||||
|
},
|
||||||
|
"product-description": {
|
||||||
|
"props": {
|
||||||
|
"collapseContent": false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"condition-layout.product#availability": {
|
"condition-layout.product#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -39,20 +253,31 @@
|
|||||||
"subject": "isProductAvailable"
|
"subject": "isProductAvailable"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"Then": "flex-layout.row#product-main",
|
"Then": "html#product-main",
|
||||||
"Else": "flex-layout.row#product-availability"
|
"Else": "html#product-availability"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"html#product-main": {
|
||||||
|
"props": {
|
||||||
|
"tag": "div",
|
||||||
|
"testId": "Product-Images",
|
||||||
|
"blockClass": "pdp-productMain"
|
||||||
|
},
|
||||||
|
"children": ["html#stack", "html#right-col"]
|
||||||
|
},
|
||||||
"flex-layout.row#product-main": {
|
"flex-layout.row#product-main": {
|
||||||
"props": {
|
"props": {
|
||||||
|
"blockClass": "pdp-flexProduct",
|
||||||
"colGap": 7,
|
"colGap": 7,
|
||||||
"rowGap": 7,
|
"rowGap": 7,
|
||||||
"marginTop": 4,
|
"marginTop": 0,
|
||||||
"marginBottom": 7,
|
"marginBottom": 0,
|
||||||
"paddingTop": 7,
|
"paddingTop": 0,
|
||||||
"paddingBottom": 7
|
"paddingBottom": 0,
|
||||||
},
|
"paddingright": 0,
|
||||||
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
|
"paddingleft": 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"stack-layout": {
|
"stack-layout": {
|
||||||
@ -75,56 +300,150 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.col#stack": {
|
"html#departaments": {
|
||||||
|
"props": {
|
||||||
|
"tag": "div",
|
||||||
|
"testId": "product-description",
|
||||||
|
"blockClass": "pdp-section_descriptions"
|
||||||
|
},
|
||||||
|
"children": ["html#tab-layout"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"html#description": {
|
||||||
|
"props": {
|
||||||
|
"tag": "div",
|
||||||
|
"testId": "description",
|
||||||
|
"blockClass": "pdp-descriptions"
|
||||||
|
},
|
||||||
|
"children": ["flex-layout.row#description"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"html#stack": {
|
||||||
"children": ["stack-layout"],
|
"children": ["stack-layout"],
|
||||||
"props": {
|
"props": {
|
||||||
"width": "60%",
|
"width": "50%",
|
||||||
"rowGap": 0
|
"blockClass": "StackLayout",
|
||||||
|
"testId": "product-images"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-image": {
|
"flex-layout.row#product-image": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "product-image"
|
||||||
|
},
|
||||||
"children": ["product-images"]
|
"children": ["product-images"]
|
||||||
},
|
},
|
||||||
"product-images": {
|
"product-images": {
|
||||||
"props": {
|
"props": {
|
||||||
|
"testid": "product-images",
|
||||||
"aspectRatio": {
|
"aspectRatio": {
|
||||||
"desktop": "auto",
|
"desktop": "auto",
|
||||||
"phone": "16:9"
|
"phone": "auto"
|
||||||
},
|
},
|
||||||
"displayThumbnailsArrows": true
|
"showNavigationArrows": false,
|
||||||
|
"showPaginationDots": false,
|
||||||
|
"displayThumbnailsArrows": false,
|
||||||
|
"thumbnailsOrientation": "horizontal"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.col#right-col": {
|
"product-images#description": {
|
||||||
"props": {
|
"props": {
|
||||||
"preventVerticalStretch": true,
|
"blockClass": "img-description",
|
||||||
"rowGap": 0
|
"maxHeight": 872,
|
||||||
|
"testid": "product-images",
|
||||||
|
"aspectRatio": {
|
||||||
|
"desktop": "1:1",
|
||||||
|
"phone": "auto"
|
||||||
|
},
|
||||||
|
"showNavigationArrows": false,
|
||||||
|
"showPaginationDots": false,
|
||||||
|
"thumbnailVisibility": "hiden",
|
||||||
|
"displayMode": "first-image",
|
||||||
|
"zoomMode": "disabled"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"html#right-col": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-InfoBuy"
|
||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"html#product-name",
|
||||||
"product-rating-summary",
|
"product-rating-summary",
|
||||||
"flex-layout.row#list-price-savings",
|
"flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"html#product-installments",
|
||||||
"product-separator",
|
"html#Pix",
|
||||||
"product-identifier.product",
|
"html#sku-selector",
|
||||||
"sku-selector",
|
|
||||||
"product-quantity",
|
|
||||||
"product-assembly-options",
|
"product-assembly-options",
|
||||||
"product-gifts",
|
"product-gifts",
|
||||||
"flex-layout.row#buy-button",
|
"html#buy-button",
|
||||||
"availability-subscriber",
|
"availability-subscriber",
|
||||||
"shipping-simulator",
|
"html#shipping-simulator",
|
||||||
"share#default"
|
"share#default"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"html#shipping-simulator": {
|
||||||
"flex-layout.row#product-name": {
|
|
||||||
"props": {
|
"props": {
|
||||||
"marginBottom": 3
|
"testId": "shipping-simulator"
|
||||||
},
|
},
|
||||||
"children": ["vtex.store-components:product-name"]
|
"children": ["shipping-simulator"]
|
||||||
|
},
|
||||||
|
"html#product-installments": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-installments"
|
||||||
|
},
|
||||||
|
"children": ["product-installments"]
|
||||||
|
},
|
||||||
|
"product-installments": {
|
||||||
|
"props": {
|
||||||
|
"message": "{installmentsNumber} de {installmentValue} sem juros"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"html#selling-price": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-price"
|
||||||
|
},
|
||||||
|
"children": ["product-selling-price#summarypdp"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-selling-price#summarypdp": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "desconto",
|
||||||
|
"message": "de {sellingPriceWithTax} por"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"html#product-name": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-name"
|
||||||
|
},
|
||||||
|
"children": ["flex-layout.row#product-name"]
|
||||||
|
},
|
||||||
|
"flex-layout.row#product-name": {
|
||||||
|
"props": {
|
||||||
|
"marginBottom": 3,
|
||||||
|
"blockClass": "title"
|
||||||
|
},
|
||||||
|
"children": ["html#código", "vtex.store-components:product-name"]
|
||||||
|
},
|
||||||
|
"html#código": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-code"
|
||||||
|
},
|
||||||
|
"children": ["product-identifier.product"]
|
||||||
|
},
|
||||||
|
"product-identifier.product": {
|
||||||
|
"props": {
|
||||||
|
"label": "hide" //'default' | 'custom' | 'hide'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"html#sku-selector": {
|
||||||
|
"props": {
|
||||||
|
"testId": "sku-selector"
|
||||||
|
},
|
||||||
|
"children": ["sku-selector"]
|
||||||
|
},
|
||||||
"sku-selector": {
|
"sku-selector": {
|
||||||
"props": {
|
"props": {
|
||||||
"variationsSpacing": 3,
|
"variationsSpacing": 3,
|
||||||
@ -133,36 +452,56 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"children": ["html#product-quantity", "add-to-cart-button"]
|
||||||
"marginTop": 4,
|
|
||||||
"marginBottom": 7
|
|
||||||
},
|
|
||||||
"children": ["add-to-cart-button"]
|
|
||||||
},
|
},
|
||||||
|
"html#buy-button": {
|
||||||
"flex-layout.row#product-availability": {
|
|
||||||
"props": {
|
"props": {
|
||||||
"colGap": 7,
|
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
"marginBottom": 7,
|
"marginBottom": 7,
|
||||||
"paddingTop": 7
|
"blockClass": "buy-button"
|
||||||
},
|
},
|
||||||
"children": [
|
"children": ["html#product-quantity", "html#add-to-cart-button#pdp"]
|
||||||
"flex-layout.col#stack",
|
|
||||||
"flex-layout.col#right-col-availability"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"flex-layout.col#right-col-availability": {
|
"html#product-quantity": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-quantity"
|
||||||
|
},
|
||||||
|
"children": ["product-quantity"]
|
||||||
|
},
|
||||||
|
"product-quantity": {
|
||||||
|
"props": {
|
||||||
|
"width": "20%",
|
||||||
|
"showLabel": false,
|
||||||
|
"size": "regular"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"html#add-to-cart-button#pdp": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "card-button",
|
||||||
|
"testId": "add-to-cart-button"
|
||||||
|
},
|
||||||
|
"children": ["add-to-cart-button#pdp"]
|
||||||
|
},
|
||||||
|
"add-to-cart-button#pdp": {
|
||||||
|
"props": {
|
||||||
|
"text": "ADICIONAR À SACOLA"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"html#product-availability": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "availability"
|
||||||
|
},
|
||||||
|
"children": ["html#stack", "html#right-col-availability"]
|
||||||
|
},
|
||||||
|
"html#right-col-availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"preventVerticalStretch": true,
|
|
||||||
"rowGap": 0,
|
|
||||||
"blockClass": "info-availability"
|
"blockClass": "info-availability"
|
||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"html#product-name",
|
||||||
"product-identifier.product",
|
"flex-layout.row#availability",
|
||||||
"sku-selector",
|
"sku-selector"
|
||||||
"flex-layout.row#availability"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"flex-layout.row#availability": {
|
"flex-layout.row#availability": {
|
||||||
@ -172,13 +511,19 @@
|
|||||||
"children": ["availability-subscriber"]
|
"children": ["availability-subscriber"]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"availability-subscriber": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "message-availability"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"share#default": {
|
"share#default": {
|
||||||
"props": {
|
"props": {
|
||||||
"social": {
|
"social": {
|
||||||
"Facebook": true,
|
"Facebook": false,
|
||||||
"WhatsApp": true,
|
"WhatsApp": false,
|
||||||
"Twitter": false,
|
"Twitter": false,
|
||||||
"Pinterest": true
|
"Pinterest": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,27 @@
|
|||||||
{
|
{
|
||||||
"flex-layout.row#selling-price": {
|
"flex-layout.row#selling-price": {
|
||||||
"props": {
|
"props": {
|
||||||
|
"blockClass": "price-image",
|
||||||
"colGap": 2,
|
"colGap": 2,
|
||||||
"preserveLayoutOnMobile": true,
|
"preserveLayoutOnMobile": true,
|
||||||
"preventHorizontalStretch": true,
|
"preventHorizontalStretch": true,
|
||||||
"marginBottom": 4
|
"marginBottom": 4
|
||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"product-selling-price"
|
"html#selling--price"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"html#selling--price":{
|
||||||
|
"props":{
|
||||||
|
"testId": "product-price"
|
||||||
|
},
|
||||||
|
"children": ["product-selling-price"]
|
||||||
|
},
|
||||||
|
"product-selling-price#ProducyImage":{
|
||||||
|
"props":{
|
||||||
|
"blockClass": "price"
|
||||||
|
}
|
||||||
|
},
|
||||||
"flex-layout.row#list-price-savings": {
|
"flex-layout.row#list-price-savings": {
|
||||||
"props": {
|
"props": {
|
||||||
"colGap": 2,
|
"colGap": 2,
|
||||||
@ -20,8 +31,8 @@
|
|||||||
"marginTop": 5
|
"marginTop": 5
|
||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"product-list-price",
|
"product-price-savings",
|
||||||
"product-price-savings"
|
"product-list-price"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,6 +2,16 @@
|
|||||||
"example-component": {
|
"example-component": {
|
||||||
"component": "Example"
|
"component": "Example"
|
||||||
},
|
},
|
||||||
|
"Pix": {
|
||||||
|
"component": "Pix"
|
||||||
|
},
|
||||||
|
"Placeholder": {
|
||||||
|
"component": "Placeholder"
|
||||||
|
},
|
||||||
|
"CEP": {
|
||||||
|
"component": "CEP"
|
||||||
|
},
|
||||||
|
|
||||||
"html": {
|
"html": {
|
||||||
"component": "html",
|
"component": "html",
|
||||||
"composition": "children"
|
"composition": "children"
|
||||||
|
|||||||
43
styles/css/vtex.breadcrumb.css
Normal file
43
styles/css/vtex.breadcrumb.css
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*
|
||||||
|
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 {
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-right: 4%;
|
||||||
|
padding-left: 4%;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.container {
|
||||||
|
padding-right: 14.063%;
|
||||||
|
padding-left: 14.063%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container .term, .container .termArrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container .term, .container .arrow, .container .homeLink {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
.container .homeLink::before {
|
||||||
|
content: "HOME";
|
||||||
|
}
|
||||||
|
.container .homeLink .homeIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -1,22 +1,43 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 40em) {
|
.flexRowContent--title .stretchChildrenWidth {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--product-image {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.flexRowContent--product-image .stretchChildrenWidth {
|
||||||
|
max-width: max-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (min-width: 1280px) {
|
||||||
@media screen and (min-width: 80rem) {
|
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
padding: 0 0.25rem;
|
padding: 0 0.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent--menu-link {
|
.flexRowContent--menu-link {
|
||||||
background-color: #03044e;
|
background-color: #03044e;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -96,3 +117,113 @@
|
|||||||
.flexRow--addToCartRow {
|
.flexRow--addToCartRow {
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.vtex-shelf-1-x-slide) :global(.vtex-store-components-3-x-discountInsideContainer) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-shelf-1-x-slide) :global(.vtex-product-price-1-x-savings) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-shelf-1-x-slide) :global(.vtex-button) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-shelf-1-x-slide) .flexCol--m3-shelf-badges {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--title {
|
||||||
|
align-items: end;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--title {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
|
||||||
|
top: 33%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
|
||||||
|
max-width: 11.2px;
|
||||||
|
max-height: 29.6px;
|
||||||
|
top: 37%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel) {
|
||||||
|
left: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel) {
|
||||||
|
right: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
|
||||||
|
width: 4.9344% !important;
|
||||||
|
height: max-content;
|
||||||
|
min-height: max-content;
|
||||||
|
max-width: 274px;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 392px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
|
||||||
|
max-width: 96rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRow--pdp-price .flexRowContent--pdp-price {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRow--price-image :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) {
|
||||||
|
color: #000000;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--message-availability :global(.vtex-store-components-3-x-title) {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.flexRowContent--message-availability :global(.vtex-store-components-3-x-title)::after {
|
||||||
|
content: "Produto indisponível";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #868686;
|
||||||
|
}
|
||||||
|
.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after {
|
||||||
|
content: "Deseja saber quando estiver disponível?";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #868686;
|
||||||
|
}
|
||||||
@ -7,10 +7,6 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.html {
|
.textInputValue, .productAssemblyGroupNameRow {
|
||||||
background-color: red;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
|
||||||
background-color: green;
|
|
||||||
}
|
}
|
||||||
@ -1,3 +1,21 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
.product-identifier--productReference {
|
.product-identifier--productReference {
|
||||||
margin-bottom: 1rem;
|
display: block;
|
||||||
|
text-align: end;
|
||||||
|
padding-right: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.product-identifier--productReference {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,6 +1,15 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
.listPrice {
|
.listPrice {
|
||||||
color: #727273;
|
color: #727273;
|
||||||
margin-bottom: .25rem;
|
margin-bottom: 0.25rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -14,11 +23,6 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
|
||||||
color: #727273;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savings {
|
.savings {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #79B03A;
|
color: #79B03A;
|
||||||
@ -35,7 +39,6 @@
|
|||||||
border-radius: 1000px;
|
border-radius: 1000px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
@ -55,7 +58,7 @@
|
|||||||
|
|
||||||
.listPrice--summary {
|
.listPrice--summary {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
font-size: .875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.installments--summary {
|
.installments--summary {
|
||||||
@ -77,3 +80,71 @@
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.vtex-shelf-1-x-slide) .listPrice {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savings, .listPriceValue {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installments {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
.installments .installmentsNumber, .installments .installmentValue {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.installments .installmentsNumber::after {
|
||||||
|
content: "x";
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPriceValue--summary-pdp {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.sellingPriceValue--summary-pdp {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPrice--desconto {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5px;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #BABABA;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.sellingPrice--desconto {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sellingPrice--desconto .sellingPriceValue--desconto {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.sellingPrice--desconto .sellingPriceValue--desconto {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
39
styles/css/vtex.product-quantity.css
Normal file
39
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
.quantitySelectorStepper {
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 3.5px 0;
|
||||||
|
}
|
||||||
|
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
|
||||||
|
border: none;
|
||||||
|
max-width: 28px;
|
||||||
|
}
|
||||||
|
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantitySelectorContainer {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 128px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
@ -1,3 +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 */
|
||||||
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
@ -11,12 +20,11 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 40em) {
|
@media screen and (max-width: 1024px) {
|
||||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nameContainer {
|
.nameContainer {
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
@ -40,3 +48,40 @@
|
|||||||
.image {
|
.image {
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nameContainer {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.nameContainer .productNameContainer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.nameContainer .productNameContainer--pdp-name {
|
||||||
|
max-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.image--pdp-imgpdp {
|
||||||
|
min-width: 334.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameContainer--pdp-name {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productBrand--pdp-name {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.productBrand--pdp-name {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,3 +7,19 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
.container--pdp-specifications {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.container--pdp-specifications .wrapper--pdp-specifications .heading {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.container--pdp-specifications .wrapper--pdp-specifications .heading {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,10 +1,12 @@
|
|||||||
.stackItem--product {
|
/*
|
||||||
width: 100%;
|
0 - 600PX: Phone
|
||||||
min-height: 257px
|
600 - 900px: Table portrait
|
||||||
}
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
.stackItem--quickview {
|
1800px + : Big desktop
|
||||||
right: 0;
|
*/
|
||||||
top: 0;
|
/* Media Query M3 */
|
||||||
left: auto;
|
/* Grid breakpoints */
|
||||||
|
.stackItem {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
@ -7,6 +7,450 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.newsletter {
|
.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue {
|
||||||
background: red;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.productImagesContainer--carousel .productImagesGallerySlide {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.productImagesContainer--carousel .carouselGaleryCursor {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productNameContainer--quickview {
|
||||||
|
padding-right: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer {
|
||||||
|
max-width: 93.663%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer {
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
|
||||||
|
height: 40.61px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorItemImage {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.skuSelectorContainer .skuSelectorItemImage {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorItem--selected .diagonalCross {
|
||||||
|
color: #000000;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorItem--selected .frameAround {
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 2px solid #000000;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .frameAround {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
z-index: 5;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorName {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--cor {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorInternalBox {
|
||||||
|
border: 2px solid #B9B9B9;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer .diagonalCross {
|
||||||
|
border: 1px solid #D5D5D5;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productNameContainer--quickview {
|
||||||
|
text-align: end;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.productNameContainer--quickview {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContainer {
|
||||||
|
max-width: 906px;
|
||||||
|
}
|
||||||
|
.carouselContainer .productImage {
|
||||||
|
max-width: 85.238%;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.carouselContainer .productImage {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.carouselContainer .productImage {
|
||||||
|
min-width: 296px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 375px) {
|
||||||
|
.carouselContainer .productImage {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselContainer .productImage .productImageTag- {
|
||||||
|
max-height: 100% !important;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.carouselContainer .productImage .productImageTag--main {
|
||||||
|
border-radius: 8px;
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.carouselContainer .productImage .productImageTag--main {
|
||||||
|
max-height: 100% !important;
|
||||||
|
max-width: 98.657%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.productImageTag--img-description {
|
||||||
|
max-width: 872px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselGaleryThumbs {
|
||||||
|
display: block;
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs .productImagesThumb {
|
||||||
|
height: 100% !important;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.carouselGaleryThumbs .productImagesThumb {
|
||||||
|
width: 30% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs .productImagesThumb .figure {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs .productImagesThumb .figure--video {
|
||||||
|
min-height: 90px;
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 5.54em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productDescriptionContainer .content {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) {
|
||||||
|
.productDescriptionContainer .content {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.productDescriptionContainer .content {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 19px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.form {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form .content {
|
||||||
|
width: 65.532%;
|
||||||
|
height: 108px;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.form .content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form .content .inputName, .form .content .inputEmail {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 150px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.form .content .inputName, .form .content .inputEmail {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form .submit {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
grid-column: span 2;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
.form .submit :global(.vtex-button) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #000000;
|
||||||
|
width: 308px;
|
||||||
|
height: 49px;
|
||||||
|
}
|
||||||
|
.form .submit :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.form .submit :global(.vtex-button) :global(.vtex-button__label)::after {
|
||||||
|
content: "AVISE-ME";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.form :global(.vtex-styleguide-9-x-input) {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding: 14px 14px 16px;
|
||||||
|
color: #989898;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingContainer {
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
align-items: end;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.shippingContainer {
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 93.665%;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||||
|
display: grid;
|
||||||
|
grid-column: 1/2;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 230px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-button) {
|
||||||
|
display: block;
|
||||||
|
grid-column: 2/3;
|
||||||
|
background: #000000;
|
||||||
|
width: 100%;
|
||||||
|
height: max-content;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
font-size: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
|
||||||
|
content: "ok";
|
||||||
|
padding: 14px;
|
||||||
|
min-height: 21px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input) {
|
||||||
|
grid-column: 1/2;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
height: 49px;
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
|
||||||
|
color: #AFAFAF;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 16.5px 16px;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
|
||||||
|
font-size: 0;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
|
||||||
|
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-forgottenURL) {
|
||||||
|
width: max-content;
|
||||||
|
position: absolute;
|
||||||
|
grid-column: 3/4;
|
||||||
|
right: 0;
|
||||||
|
bottom: 25%;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 32px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||||
|
margin-left: 0;
|
||||||
|
grid-column: 1/4;
|
||||||
|
left: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTable {
|
||||||
|
border: 0;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead {
|
||||||
|
display: table-row-group;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #202020;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell, .shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel, .shippingTable .shippingTableBody .shippingTableRow .currencyContainer {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #AFAFAF;
|
||||||
|
text-align: start;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
@ -4,7 +4,7 @@
|
|||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 640px) {
|
@media only screen and (min-width: 280px) {
|
||||||
.videoContainer {
|
.videoContainer {
|
||||||
height: 700px;
|
height: 700px;
|
||||||
}
|
}
|
||||||
|
|||||||
62
styles/css/vtex.tab-layout.css
Normal file
62
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
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--pdp-tabSections::after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid rgb(185, 185, 185);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.listContainer--pdp-tabSections {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.listContainer--pdp-tabSections::before {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid rgb(185, 185, 185);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer--pdp-tabSections {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.listContainer--pdp-tabSections {
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listContainer--pdp-tabSections .listItem {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.listContainer--pdp-tabSections .listItem :global(.vtex-button) {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgb(191, 191, 191);
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
.listContainer--pdp-tabSections .listItemActive {
|
||||||
|
border-bottom: 1px solid #000000;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.listContainer--pdp-tabSections .listItemActive {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listContainer--pdp-tabSections .listItemActive :global(.vtex-button) {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
.html {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
36
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
36
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
.container{
|
||||||
|
padding-top:16px;
|
||||||
|
padding-right: 4%;
|
||||||
|
padding-left: 4%;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
padding-right: 14.063%;
|
||||||
|
padding-left: 14.063%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.term,.termArrow{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.term,.arrow,.homeLink{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: $color-gray6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeLink{
|
||||||
|
&::before{
|
||||||
|
content: "HOME";
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeIcon{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
222
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
222
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
.flexRowContent--menu-link,
|
||||||
|
.flexRowContent--main-header {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
.flexRowContent--title{
|
||||||
|
.stretchChildrenWidth{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRowContent--product-image{
|
||||||
|
justify-content: flex-end;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
.stretchChildrenWidth{
|
||||||
|
max-width: max-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
.flexRowContent--menu-link,
|
||||||
|
.flexRowContent--main-header {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1280px) {
|
||||||
|
.flexRowContent--menu-link,
|
||||||
|
.flexRowContent--main-header {
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexColChild--quickviewDetails:first-child {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 66% !important;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexColChild--quickviewDetails:last-child {
|
||||||
|
height: 34% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRow--addToCartRow {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-shelf-1-x-slide){
|
||||||
|
:global(.vtex-store-components-3-x-discountInsideContainer){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-product-price-1-x-savings){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-button){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.flexCol--m3-shelf-badges{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.flexRowContent--m3-shelf-price-selling-savings{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRowContent--title{
|
||||||
|
align-items: end;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.flexRowContent--pdp-carrousel{
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
|
||||||
|
top: 33%;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
max-width: 11.2px;
|
||||||
|
max-height: 29.6px;
|
||||||
|
top: 37%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel){
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
left: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel){
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
right: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
width: 4.9344% !important;
|
||||||
|
height: max-content;
|
||||||
|
min-height: max-content;
|
||||||
|
max-width: 274px;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
height: 100%;
|
||||||
|
max-height: 392px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRow--pdp-carrousel{
|
||||||
|
:global(.vtex-store-components-3-x-container){
|
||||||
|
max-width: 100%;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
max-width: 96rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRow--pdp-price{
|
||||||
|
.flexRowContent--pdp-price{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRow--price-image{
|
||||||
|
:global(.vtex-product-price-1-x-sellingPrice--hasListPrice){
|
||||||
|
color: #000000;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flexRowContent--message-availability{
|
||||||
|
:global(.vtex-store-components-3-x-title){
|
||||||
|
font-size: 0;
|
||||||
|
&::after{
|
||||||
|
content: "Produto indisponível";
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #868686;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-store-components-3-x-subscribeLabel){
|
||||||
|
font-size: 0;
|
||||||
|
&::after{
|
||||||
|
content: "Deseja saber quando estiver disponível?";
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #868686;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
styles/sass/pages/product/vtex.product-customizer.scss
Normal file
3
styles/sass/pages/product/vtex.product-customizer.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.textInputValue,.productAssemblyGroupNameRow{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
12
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
12
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.product-identifier{
|
||||||
|
&--productReference{
|
||||||
|
display: block;
|
||||||
|
text-align: end;
|
||||||
|
padding-right: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
33
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
33
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
.quantitySelectorStepper{
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 3.5px 0;
|
||||||
|
:global(.vtex-numeric-stepper-wrapper){
|
||||||
|
:global(.vtex-numeric-stepper-container){
|
||||||
|
:global(.vtex-numeric-stepper__input){
|
||||||
|
border: none;
|
||||||
|
max-width: 28px;
|
||||||
|
}
|
||||||
|
:global(.vtex-numeric-stepper__plus-button){
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-numeric-stepper__plus-button__text){
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
:global(.vtex-numeric-stepper__minus-button__text){
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
:global(.vtex-numeric-stepper__minus-button){
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quantitySelectorContainer{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 128px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
75
styles/sass/pages/product/vtex.product-summary.scss
Normal file
75
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameContainer {
|
||||||
|
justify-content: start;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brandName {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #2E2E2E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageContainer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
.nameContainer{
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
.productNameContainer{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productNameContainer--pdp-name{
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
max-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image--pdp-imgpdp{
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
min-width: 334.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nameContainer--pdp-name{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.productBrand--pdp-name{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
.container{
|
||||||
|
&--pdp-specifications{
|
||||||
|
justify-content: center;
|
||||||
|
.wrapper--pdp-specifications{
|
||||||
|
.heading{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #575757;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
styles/sass/pages/product/vtex.stack-layout.scss
Normal file
3
styles/sass/pages/product/vtex.stack-layout.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.stackItem{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
@ -1,3 +1,421 @@
|
|||||||
.newsletter{
|
.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{
|
||||||
background: red;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.productImagesContainer--carousel{
|
||||||
|
.productImagesGallerySlide{
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselGaleryCursor{
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productNameContainer--quickview{
|
||||||
|
padding-right: 40px !important;
|
||||||
|
}
|
||||||
|
.skuSelectorContainer{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
.skuSelectorSubcontainer{
|
||||||
|
max-width: 93.663%;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
.skuSelectorOptionsList{
|
||||||
|
height: 40.61px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skuSelectorItemImage{
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skuSelectorItem--selected{
|
||||||
|
.diagonalCross{
|
||||||
|
color: #000000;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.frameAround{
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 2px solid #000000
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.frameAround{
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
z-index: 5;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.skuSelectorName{
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
}
|
||||||
|
.skuSelectorSubcontainer-{
|
||||||
|
&-cor{
|
||||||
|
height: 75px;
|
||||||
|
.skuSelectorOptionsList{
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-tamanho{
|
||||||
|
.frameAround{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
.skuSelectorItemTextValue{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.skuSelectorInternalBox{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorInternalBox{
|
||||||
|
border: 2px solid #B9B9B9;
|
||||||
|
}
|
||||||
|
.skuSelectorItemImageValue,.skuSelectorInternalBox{
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diagonalCross{
|
||||||
|
border: 1px solid #D5D5D5;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productNameContainer--quickview{
|
||||||
|
text-align: end;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #575757;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselContainer{
|
||||||
|
max-width: 906px;
|
||||||
|
.productImage{
|
||||||
|
max-width:85.238%;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
min-width: 296px;
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 375px){
|
||||||
|
min-width: 0;
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
|
.productImageTag-{
|
||||||
|
max-height: 100% !important;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
align-self: stretch;
|
||||||
|
&-main{
|
||||||
|
border-radius: 8px;
|
||||||
|
max-height: 100% !important;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
max-height: 100% !important;
|
||||||
|
max-width: 98.657%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImageTag--img-description{
|
||||||
|
max-width: 872px;
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs{
|
||||||
|
display: block;
|
||||||
|
height: max-content;
|
||||||
|
.productImagesThumb{
|
||||||
|
height: 100% !important;
|
||||||
|
margin-right: 1em;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
width: 30% !important;
|
||||||
|
}
|
||||||
|
.figure{
|
||||||
|
width: 100%;
|
||||||
|
&--video{
|
||||||
|
min-height: 90px;
|
||||||
|
.thumbImg{
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 5.54em;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.thumbImg{
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productDescriptionContainer{
|
||||||
|
.productDescriptionTitle{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
@media screen and (min-width: 1920px){
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 19px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form{
|
||||||
|
width: max-content;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
width: 65.532%;
|
||||||
|
height: 108px;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.inputName,.inputEmail{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 150px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit{
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
grid-column: span 2;
|
||||||
|
grid-row: 2;
|
||||||
|
:global(.vtex-button){
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #000000;
|
||||||
|
width: 308px;
|
||||||
|
height: 49px;
|
||||||
|
:global(.vtex-button__label){
|
||||||
|
font-size: 0;
|
||||||
|
&::after{
|
||||||
|
content: "AVISE-ME";
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-styleguide-9-x-input ){
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding: 14px 14px 16px;
|
||||||
|
color: #989898;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingContainer{
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
align-items: end;
|
||||||
|
width: max-content;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 93.665%;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
:global(.vtex-address-form__postalCode ){
|
||||||
|
display: grid;
|
||||||
|
grid-column: 1 / 2;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 230px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-button){
|
||||||
|
display: block;
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
background: #000000;
|
||||||
|
width: 100%;
|
||||||
|
height: max-content;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
:global(.vtex-button__label){
|
||||||
|
font-size: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
&::after{
|
||||||
|
content: "ok";
|
||||||
|
padding: 14px;
|
||||||
|
min-height: 21px;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-input){
|
||||||
|
grid-column: 1 / 2;
|
||||||
|
:global(.vtex-input-prefix__group){
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
height: 49px;
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
:global(.vtex-address-form-4-x-input){
|
||||||
|
color: #AFAFAF;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 16.5px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.vtex-input__label){
|
||||||
|
font-size: 0;
|
||||||
|
width:max-content;
|
||||||
|
&::after{
|
||||||
|
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-address-form__postalCode-forgottenURL){
|
||||||
|
width: max-content;
|
||||||
|
position: absolute;
|
||||||
|
grid-column: 3 / 4;
|
||||||
|
right: 0;
|
||||||
|
bottom: 25%;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 32px;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration-line:underline;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
margin-left: 0;
|
||||||
|
grid-column:1 / 4;
|
||||||
|
left: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingTable{
|
||||||
|
border: 0;
|
||||||
|
width: max-content;
|
||||||
|
.shippingTableHead{
|
||||||
|
display: table-row-group;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #202020;
|
||||||
|
.shippingTableRow{
|
||||||
|
width: 100%;
|
||||||
|
.shippingTableHeadDeliveryName,.shippingTableHeadDeliveryEstimate,.shippingTableHeadDeliveryPrice{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingTableBody{
|
||||||
|
.shippingTableRow{
|
||||||
|
.shippingTableCell{
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.shippingTableCellDeliveryName{
|
||||||
|
.shippingTableLabel{
|
||||||
|
.shippingTableRadioBtn{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shippingTableCell,.shippingTableLabel,.currencyContainer{
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #AFAFAF;
|
||||||
|
text-align: start;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
48
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
48
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
.listContainer--pdp-tabSections{
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid rgba(185, 185, 185, 1);
|
||||||
|
};
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
flex-direction: column;
|
||||||
|
&::before{
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid rgba(185, 185, 185, 1);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
.listContainer--pdp-tabSections{
|
||||||
|
margin-bottom: 32px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: end;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.listItem{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
:global(.vtex-button){
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(191, 191, 191, 1);
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-transform: initial;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
.listItemActive{
|
||||||
|
border-bottom: 1px solid #000000;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-button){
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
137
styles/sass/pages/vtex.product-price.scss
Normal file
137
styles/sass/pages/vtex.product-price.scss
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
.listPrice {
|
||||||
|
color: #727273;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPrice {
|
||||||
|
color: #3f3f40;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPriceValue {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.savings {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #79B03A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPriceValue--summary {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2E2E2E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savings--summary {
|
||||||
|
background: #8BC34A;
|
||||||
|
border-radius: 1000px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
vertical-align: baseline;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savings-discount--summary {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
vertical-align: baseline;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listPrice--summary {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installments--summary {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savings--summaryPercentage {
|
||||||
|
background: #0f3e99;
|
||||||
|
border-radius: 1000px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savingsPercentage--summaryPercentage {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
vertical-align: baseline;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-shelf-1-x-slide){
|
||||||
|
.listPrice{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.savings,.listPriceValue{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.installments{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
.installmentsNumber,.installmentValue{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.installmentsNumber{
|
||||||
|
&::after{
|
||||||
|
content: "x";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sellingPriceValue--summary-pdp{
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sellingPrice--desconto{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5px;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
font-family: 'Open Sans',sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #BABABA;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
.sellingPriceValue--desconto{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
@media screen and (max-width: 1024px){
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -24,7 +24,7 @@
|
|||||||
} //375px
|
} //375px
|
||||||
}
|
}
|
||||||
@if $breakpoint == phone {
|
@if $breakpoint == phone {
|
||||||
@media only screen and (max-width: 37.5em) {
|
@media only screen and (max-width:1024px) {
|
||||||
@content;
|
@content;
|
||||||
} //600px
|
} //600px
|
||||||
}
|
}
|
||||||
@ -39,7 +39,7 @@
|
|||||||
} //1200px
|
} //1200px
|
||||||
}
|
}
|
||||||
@if $breakpoint == big-desktop {
|
@if $breakpoint == big-desktop {
|
||||||
@media only screen and (min-width: 112.5em) {
|
@media only screen and (min-width: 1900px) {
|
||||||
@content;
|
@content;
|
||||||
} //1800px
|
} //1800px
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,7 @@ $color-gray2: #7d7d7d;
|
|||||||
$color-gray3: #f0f0f0;
|
$color-gray3: #f0f0f0;
|
||||||
$color-gray4: #c4c4c4;
|
$color-gray4: #c4c4c4;
|
||||||
$color-gray5: #e5e5e5;
|
$color-gray5: #e5e5e5;
|
||||||
|
$color-gray6: #929292;
|
||||||
|
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user