forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #8
3
react/Authors.tsx
Normal file
3
react/Authors.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Authors from "./components/Authors/Authors";
|
||||||
|
|
||||||
|
export default Authors;
|
@ -1,3 +0,0 @@
|
|||||||
import Autores from "./components/Autores/Autores";
|
|
||||||
|
|
||||||
export default Autores;
|
|
@ -1,3 +0,0 @@
|
|||||||
import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct";
|
|
||||||
|
|
||||||
export default InstallmentProduct;
|
|
@ -1,17 +1,18 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import styles from "./styles.css";
|
||||||
|
|
||||||
const Autores = () => {
|
const Authors = () => {
|
||||||
return (
|
return (
|
||||||
<div className="vtex-menu-2-x-AutoresBlock">
|
<div>
|
||||||
<ul className="vtex-menu-2-x-Autores-Group">
|
<ul className={styles.AutoresGroup}>
|
||||||
<li className="vtex-menu-2-x-Autores-List">
|
<li className={styles.AutoresList}>
|
||||||
Powered by
|
Powered by
|
||||||
<img
|
<img
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone logo vtex"
|
alt="ícone logo vtex"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li className="vtex-menu-2-x-Autores-List">
|
<li className={styles.AutoresList}>
|
||||||
Developed by
|
Developed by
|
||||||
<img
|
<img
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
@ -23,4 +24,4 @@ const Autores = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Autores;
|
export default Authors;
|
20
react/components/Authors/styles.css
Normal file
20
react/components/Authors/styles.css
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
/* Footer Credits */
|
||||||
|
|
||||||
|
.AutoresGroup {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 15.73px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.AutoresList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
column-gap: 8.72px;
|
||||||
|
}
|
@ -1,27 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useProduct } from "vtex.product-context";
|
|
||||||
import styles from "./styles.css";
|
|
||||||
|
|
||||||
const InstallmentProduct = () => {
|
|
||||||
const product = useProduct();
|
|
||||||
const productWithInstallments = {
|
|
||||||
numberOfInstallments:
|
|
||||||
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
|
|
||||||
.NumberOfInstallments,
|
|
||||||
value:
|
|
||||||
product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<p className={styles.PriceContent}>
|
|
||||||
<span style={{fontWeight: "700"}}>{productWithInstallments.numberOfInstallments}x </span>
|
|
||||||
de
|
|
||||||
<span style={{fontWeight: "700"}}>
|
|
||||||
R$
|
|
||||||
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
|
|
||||||
</span>{" "}
|
|
||||||
sem juros
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InstallmentProduct;
|
|
@ -1,7 +0,0 @@
|
|||||||
.PriceContent {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #929292;
|
|
||||||
}
|
|
@ -1,65 +1,66 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import styles from "./styles.css";
|
||||||
|
|
||||||
const PaymentMethods = () => {
|
const PaymentMethods = () => {
|
||||||
return (
|
return (
|
||||||
<div className="vtex-menu-2-x-FooterRightBlock">
|
<div className={styles.FooterRightBlock}>
|
||||||
<span className="vtex-menu-2-x-SpanTitleBig">Formas de pagamento</span>
|
<span className={styles.SpanTitleBig}>Formas de pagamento</span>
|
||||||
<ul className="vtex-menu-2-x-UlGroup">
|
<ul className={styles.UlGroup}>
|
||||||
<ul className="vtex-menu-2-x-UlSecondary">
|
<ul className={styles.UlSecondary}>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone mastercard"
|
alt="ícone mastercard"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone diners"
|
alt="ícone diners"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone boleto"
|
alt="ícone boleto"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone pix"
|
alt="ícone pix"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="vtex-menu-2-x-UlSecondary">
|
<ul className={styles.UlSecondary}>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone elo"
|
alt="ícone elo"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone hipercard"
|
alt="ícone hipercard"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone visa"
|
alt="ícone visa"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img
|
<img
|
||||||
className="vtex-menu-2-x-ImgCard"
|
className={styles.ImgCard}
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
alt="ícone amex"
|
alt="ícone amex"
|
||||||
/>
|
/>
|
||||||
|
92
react/components/PaymentMethods/styles.css
Normal file
92
react/components/PaymentMethods/styles.css
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
.FooterRightBlock {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlock {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlock {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.SpanTitle {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SpanTitleBig {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.SpanTitleBig {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.SpanTitleBig {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.UlGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
row-gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.UlGroup {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.UlGroup {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.UlSecondary {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
column-gap: 8px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.ImgCard {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.ImgCard {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
@ -18,9 +18,9 @@ const Pix = () => {
|
|||||||
alt="logo pix"
|
alt="logo pix"
|
||||||
/>
|
/>
|
||||||
<div className={styles.PixDiscount}>
|
<div className={styles.PixDiscount}>
|
||||||
<span className={styles.TextPixDiscount}>
|
<p className={styles.TextPixDiscount}>
|
||||||
R$ {pixPrice?.toFixed(2).toString().replace(".", ",")}
|
R$ {pixPrice?.toFixed(2).toString().replace(".", ",")}
|
||||||
</span>
|
</p>
|
||||||
<span className={styles.TextDiscount}>10 % de desconto</span>
|
<span className={styles.TextDiscount}>10 % de desconto</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -22,10 +22,11 @@
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
color: rgba(0, 0, 0, 0.58);
|
color: rgba(0, 0, 0, 0.58);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.TextDiscount {
|
.TextDiscount {
|
||||||
font-weight: 300 ;
|
font-weight: 300;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #929292;
|
color: #929292;
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import styles from "./styles.css";
|
||||||
|
|
||||||
const Social = () => {
|
const Social = () => {
|
||||||
return (
|
return (
|
||||||
<div className="vtex-menu-2-x-FooterRightBlock">
|
<div className={styles.FooterRightBlockSocial}>
|
||||||
<span className="vtex-menu-2-x-SpanTitle">Nos siga</span>
|
<span className={styles.SpanTitleSocial}>Nos siga</span>
|
||||||
<ul className="vtex-menu-2-x-UlGroup">
|
<ul className={styles.UlGroupSocial}>
|
||||||
<ul className="vtex-menu-2-x-UlSecondary">
|
<ul className={styles.UlSecondarySocial}>
|
||||||
<li>
|
<li>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img
|
<img
|
||||||
@ -47,7 +48,7 @@ const Social = () => {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="vtex-menu-2-x-UlSecondary">
|
<ul className={styles.UlSecondarySocial}>
|
||||||
<li>
|
<li>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img
|
<img
|
||||||
@ -73,7 +74,6 @@ const Social = () => {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
{" "}
|
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img
|
<img
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/youtube-m3academy-anacarolinaduartecavalcante.svg"
|
src="https://agenciamagma.vteximg.com.br/arquivos/youtube-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
59
react/components/Social/styles.css
Normal file
59
react/components/Social/styles.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
.FooterRightBlockSocial {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlockSocial {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlockSocial {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.SpanTitleSocial {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.UlGroupSocial {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
row-gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.UlGroupSocial {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.UlGroupSocial {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.UlSecondarySocial {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
column-gap: 8px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
7
react/index.d.ts
vendored
7
react/index.d.ts
vendored
@ -1,7 +0,0 @@
|
|||||||
declare module "*.css" {
|
|
||||||
interface IClassNames {
|
|
||||||
[className: string]: string;
|
|
||||||
}
|
|
||||||
const classNames: IClassNames;
|
|
||||||
export = classNames;
|
|
||||||
}
|
|
@ -7,11 +7,5 @@
|
|||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"target": "es2017"
|
"target": "es2017"
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
|
||||||
"./typings/*.d.ts",
|
|
||||||
"./**/*.tsx",
|
|
||||||
"./**/*.ts",
|
|
||||||
"components/SwiperComponent/SwiperComponent.tsxonent.tsx",
|
|
||||||
"SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
4
react/typings/css.d.ts
vendored
Normal file
4
react/typings/css.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.css" {
|
||||||
|
const css: any;
|
||||||
|
export default css;
|
||||||
|
}
|
7
react/typings/global.d.ts
vendored
Normal file
7
react/typings/global.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export interface TimeSplit {
|
||||||
|
hours: string
|
||||||
|
minutes: string
|
||||||
|
seconds: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type GenericObject = Record<string, any>
|
6
react/typings/graphql.d.ts
vendored
Normal file
6
react/typings/graphql.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
declare module "*.graphql" {
|
||||||
|
import { DocumentNode } from "graphql";
|
||||||
|
|
||||||
|
const value: DocumentNode;
|
||||||
|
export default value;
|
||||||
|
}
|
15
react/typings/storefront.d.ts
vendored
Normal file
15
react/typings/storefront.d.ts
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { FunctionComponent } from "react";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface StorefrontFunctionComponent<P = GenericObject>
|
||||||
|
extends FunctionComponent<P> {
|
||||||
|
getSchema?(props: P): GenericObject
|
||||||
|
schema?: GenericObject
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StorefrontComponent<P = GenericObject, S = GenericObject>
|
||||||
|
extends Component<P, S> {
|
||||||
|
getSchema?(props: P): GenericObject
|
||||||
|
schema: GenericObject
|
||||||
|
}
|
||||||
|
}
|
1
react/typings/vtex.css-handles.ts
Normal file
1
react/typings/vtex.css-handles.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
declare module "vtex.css-handles"
|
103
react/typings/vtex.order-manager.d.ts
vendored
Normal file
103
react/typings/vtex.order-manager.d.ts
vendored
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
/* eslint-disable no-inner-declarations */
|
||||||
|
declare module "vtex.order-manager/OrderQueue" {
|
||||||
|
export * from "vtex.order-manager/react/OrderQueue";
|
||||||
|
export { default } from "vtex.order-manager/react/OrderQueue";
|
||||||
|
|
||||||
|
export const QueueStatus = {
|
||||||
|
PENDING: "Pending",
|
||||||
|
FULFILLED: "Fulfilled",
|
||||||
|
} as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "vtex.order-manager/OrderForm" {
|
||||||
|
import { createContext, useContext } from "react";
|
||||||
|
import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants";
|
||||||
|
import type { Context, OrderForm } from "@vtex/order-manager/src/typings";
|
||||||
|
|
||||||
|
type DefaultOrderForm = typeof DEFAULT_ORDER_FORM;
|
||||||
|
type DefaultOrderFormOmited = Omit<DefaultOrderForm, "items">;
|
||||||
|
type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
|
||||||
|
items: OrderFormItem[] | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const OrderFormContext = createContext<Context<OrderForm>>({
|
||||||
|
orderForm: DefaultOrderFormUpdated,
|
||||||
|
setOrderForm: noop,
|
||||||
|
error: undefined,
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
|
||||||
|
const context = useContext(OrderFormContext);
|
||||||
|
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error(
|
||||||
|
"useOrderForm must be used within a OrderFormProvider"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return context as Context<O>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OrderFormItem = {
|
||||||
|
additionalInfo: {
|
||||||
|
brandName: string;
|
||||||
|
__typename: string;
|
||||||
|
};
|
||||||
|
attachments: Array<any>;
|
||||||
|
attachmentOfferings: Array<any>;
|
||||||
|
bundleItems: Array<any>;
|
||||||
|
parentAssemblyBinding: any;
|
||||||
|
parentItemIndex: any;
|
||||||
|
sellingPriceWithAssemblies: any;
|
||||||
|
options: any;
|
||||||
|
availability: string;
|
||||||
|
detailUrl: string;
|
||||||
|
id: string;
|
||||||
|
imageUrls: Record<string, string>;
|
||||||
|
listPrice: number;
|
||||||
|
manualPrice: any;
|
||||||
|
measurementUnit: string;
|
||||||
|
modalType: any;
|
||||||
|
name: string;
|
||||||
|
offerings: Array<any>;
|
||||||
|
price: number;
|
||||||
|
priceTags: Array<any>;
|
||||||
|
productCategories: Record<string, string>;
|
||||||
|
productCategoryIds: string;
|
||||||
|
productRefId: string;
|
||||||
|
productId: string;
|
||||||
|
quantity: number;
|
||||||
|
seller: string;
|
||||||
|
sellingPrice: number;
|
||||||
|
skuName: string;
|
||||||
|
skuSpecifications: Array<any>;
|
||||||
|
unitMultiplier: number;
|
||||||
|
uniqueId: string;
|
||||||
|
refId: string;
|
||||||
|
isGift: boolean;
|
||||||
|
priceDefinition: {
|
||||||
|
calculatedSellingPrice: number;
|
||||||
|
total: number;
|
||||||
|
sellingPrices: Array<{
|
||||||
|
quantity: number;
|
||||||
|
value: number;
|
||||||
|
__typename: string;
|
||||||
|
}>;
|
||||||
|
__typename: string;
|
||||||
|
};
|
||||||
|
__typename: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { OrderFormProvider, useOrderForm };
|
||||||
|
declare const _default: {
|
||||||
|
OrderFormProvider: import("react").FC<Record<string, never>>;
|
||||||
|
useOrderForm: typeof useOrderForm;
|
||||||
|
};
|
||||||
|
export default _default;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "vtex.order-manager/constants" {
|
||||||
|
export * from "vtex.order-manager/react/constants";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
38
react/typings/vtex.render-runtime.d.ts
vendored
Normal file
38
react/typings/vtex.render-runtime.d.ts
vendored
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
/* Typings for `render-runtime` */
|
||||||
|
declare module "vtex.render-runtime" {
|
||||||
|
import { ComponentType, ReactElement, ReactType } from "react";
|
||||||
|
|
||||||
|
export interface NavigationOptions {
|
||||||
|
page: string
|
||||||
|
params?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RenderContextProps {
|
||||||
|
runtime: {
|
||||||
|
navigate: (options: NavigationOptions) => void
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtensionPointProps {
|
||||||
|
id: string
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExtensionPoint: ComponentType<ExtensionPointProps>;
|
||||||
|
|
||||||
|
interface ChildBlockProps {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChildBlock: ComponentType<ChildBlockProps>;
|
||||||
|
export const useChildBlock = () => GenericObject;
|
||||||
|
|
||||||
|
export const Helmet: ReactElement;
|
||||||
|
export const Link: ReactType;
|
||||||
|
export const NoSSR: ReactElement;
|
||||||
|
export const RenderContextConsumer: ReactElement;
|
||||||
|
export const canUseDOM: boolean;
|
||||||
|
export const withRuntimeContext: <TOriginalProps extends GenericObject>(
|
||||||
|
Component: ComponentType<TOriginalProps & RenderContextProps>
|
||||||
|
) => ComponentType<TOriginalProps>;
|
||||||
|
}
|
9
react/typings/vtex.styleguide.d.ts
vendored
Normal file
9
react/typings/vtex.styleguide.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
declare module "vtex.styleguide" {
|
||||||
|
import { ComponentType } from "react";
|
||||||
|
|
||||||
|
export const Input: ComponentType<InputProps>;
|
||||||
|
|
||||||
|
interface InputProps {
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
}
|
@ -55,7 +55,7 @@
|
|||||||
"html#footer-3-desktop": {
|
"html#footer-3-desktop": {
|
||||||
"children": [
|
"children": [
|
||||||
"html#footer-credits-information",
|
"html#footer-credits-information",
|
||||||
"html#footer-credits-autores"
|
"html#footer-credits-authors"
|
||||||
],
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "credits"
|
"blockClass": "credits"
|
||||||
@ -71,11 +71,11 @@
|
|||||||
"rich-text#footer-cnpj"
|
"rich-text#footer-cnpj"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"html#footer-credits-autores": {
|
"html#footer-credits-authors": {
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "autores-component"
|
"blockClass": "authors-component"
|
||||||
},
|
},
|
||||||
"children": ["autores-component"]
|
"children": ["authors-component"]
|
||||||
},
|
},
|
||||||
"rich-text#footer": {
|
"rich-text#footer": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -125,7 +125,7 @@
|
|||||||
"html#footer-1-mobile": {
|
"html#footer-1-mobile": {
|
||||||
"children": [
|
"children": [
|
||||||
"html#footer-credits-information",
|
"html#footer-credits-information",
|
||||||
"html#footer-credits-autores"
|
"html#footer-credits-authors"
|
||||||
],
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "footer-credits-information-mobile",
|
"blockClass": "footer-credits-information-mobile",
|
||||||
|
@ -7,8 +7,8 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"html#identification-product",
|
"html#identification-product",
|
||||||
// "product-rating-summary",
|
// "product-rating-summary",
|
||||||
"flex-layout.row#selling-price",
|
"html#prices",
|
||||||
"installment-product-component",
|
"html#product-installments",
|
||||||
"html#pix-component",
|
"html#pix-component",
|
||||||
// "product-separator",
|
// "product-separator",
|
||||||
"html#sku-selector",
|
"html#sku-selector",
|
||||||
@ -24,8 +24,32 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"html#prices": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-price"
|
||||||
|
},
|
||||||
|
"children": ["flex-layout.row#selling-price"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"html#product-installments": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-installments"
|
||||||
|
},
|
||||||
|
"children": ["product-installments"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-installments": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "product-installments",
|
||||||
|
"markers": ["discount"],
|
||||||
|
"message": "{installmentsNumber} de {installmentValue} sem juros",
|
||||||
|
"installmentsCriteria": "max-quantity-without-interest"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"html#product-name": {
|
"html#product-name": {
|
||||||
"props": {
|
"props": {
|
||||||
|
"testId": "product-name",
|
||||||
"marginBottom": 3
|
"marginBottom": 3
|
||||||
},
|
},
|
||||||
"children": ["vtex.store-components:product-name"]
|
"children": ["vtex.store-components:product-name"]
|
||||||
@ -35,7 +59,13 @@
|
|||||||
"props": {
|
"props": {
|
||||||
"blockClass": "identification-product-content"
|
"blockClass": "identification-product-content"
|
||||||
},
|
},
|
||||||
"children": ["html#product-name", "product-identifier.product"]
|
"children": ["html#product-name", "html#product-identifier.product"]
|
||||||
|
},
|
||||||
|
"html#product-identifier.product": {
|
||||||
|
"props": {
|
||||||
|
"testId": "product-code"
|
||||||
|
},
|
||||||
|
"children": ["product-identifier.product"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"html#pix-component": {
|
"html#pix-component": {
|
||||||
@ -88,8 +118,8 @@
|
|||||||
"children": ["add-to-cart-button"]
|
"children": ["add-to-cart-button"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"html#shipping-simulator":{
|
"html#shipping-simulator": {
|
||||||
"props":{
|
"props": {
|
||||||
"testId": "shipping-simulator"
|
"testId": "shipping-simulator"
|
||||||
},
|
},
|
||||||
"children": ["shipping-simulator"]
|
"children": ["shipping-simulator"]
|
||||||
|
@ -25,7 +25,9 @@
|
|||||||
"product-summary-image#slider-images",
|
"product-summary-image#slider-images",
|
||||||
"product-summary-name",
|
"product-summary-name",
|
||||||
// "product-summary-space",
|
// "product-summary-space",
|
||||||
"product-summary-price"
|
// "product-summary-price"
|
||||||
|
"product-list-price",
|
||||||
|
"product-selling-price"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
"html#tab-layout#description": {
|
"html#tab-layout#description": {
|
||||||
"props": {
|
"props": {
|
||||||
"testId": "tab-layout"
|
"testId": "product-description"
|
||||||
},
|
},
|
||||||
"children": ["tab-layout#description"]
|
"children": ["tab-layout#description"]
|
||||||
},
|
},
|
||||||
|
@ -6,9 +6,6 @@
|
|||||||
"component": "html",
|
"component": "html",
|
||||||
"composition": "children"
|
"composition": "children"
|
||||||
},
|
},
|
||||||
"installment-product-component": {
|
|
||||||
"component": "InstallmentProduct"
|
|
||||||
},
|
|
||||||
"pix-component": {
|
"pix-component": {
|
||||||
"component": "Pix"
|
"component": "Pix"
|
||||||
},
|
},
|
||||||
@ -21,7 +18,7 @@
|
|||||||
"payment-methods-component": {
|
"payment-methods-component": {
|
||||||
"component": "PaymentMethods"
|
"component": "PaymentMethods"
|
||||||
},
|
},
|
||||||
"autores-component": {
|
"authors-component": {
|
||||||
"component": "Autores"
|
"component": "Authors"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
.flexRow--main-header {
|
.flexRow--main-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -118,6 +119,19 @@
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
|
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
padding: 12px 64px;
|
padding: 12px 64px;
|
||||||
|
@ -149,99 +149,3 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.FooterRightBlock {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.FooterRightBlock {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.FooterRightBlock {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.FooterRightBlock .SpanTitle {
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 38px;
|
|
||||||
}
|
|
||||||
.FooterRightBlock .SpanTitleBig {
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 38px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.FooterRightBlock .SpanTitleBig {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.FooterRightBlock .SpanTitleBig {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.FooterRightBlock .UlGroup {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
row-gap: 4px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.FooterRightBlock .UlGroup {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.FooterRightBlock .UlGroup {
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.FooterRightBlock .UlGroup .UlSecondary {
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
column-gap: 8px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
|
|
||||||
width: 42px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
|
|
||||||
width: 42px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.AutoresBlock .Autores-Group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 15.73px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.AutoresBlock .Autores-Group .Autores-List {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: #ffffff;
|
|
||||||
column-gap: 8.72px;
|
|
||||||
}
|
|
@ -14,3 +14,121 @@
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.installments--product-installments {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
.installments--product-installments .installmentsNumber {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.installments--product-installments .installmentsNumber::after {
|
||||||
|
content: "x";
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
.installments--product-installments .installmentValue {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listPrice {
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
height: 19px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.listPrice {
|
||||||
|
height: 16px !important;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.listPrice {
|
||||||
|
height: 16px !important;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listPrice :global(.vtex-store-components-3-x-listPriceLabel) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.listPrice .listPriceValue {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.listPrice .listPriceValue .currencyContainer {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
color: #bababa;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.listPrice .listPriceValue .currencyContainer {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.listPrice .listPriceValue .currencyContainer {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listPrice .listPriceValue .currencyContainer::before {
|
||||||
|
content: "de ";
|
||||||
|
}
|
||||||
|
.listPrice .listPriceValue .currencyContainer::after {
|
||||||
|
content: " por";
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPrice {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.sellingPrice {
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sellingPrice .sellingPriceValue {
|
||||||
|
height: 33px;
|
||||||
|
line-height: 33px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.sellingPrice .sellingPriceValue {
|
||||||
|
line-height: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.sellingPrice .sellingPriceValue {
|
||||||
|
line-height: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sellingPrice .sellingPriceValue .currencyContainer {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.sellingPrice .sellingPriceValue .currencyContainer {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.sellingPrice .sellingPriceValue .currencyContainer {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
@ -76,22 +76,7 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
|
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
|
||||||
min-height: 448.4px;
|
height: auto;
|
||||||
}
|
|
||||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
|
|
||||||
min-height: 543.4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
|
|
||||||
min-height: 383.2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
|
|
||||||
min-height: 254.8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) {
|
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -153,89 +138,6 @@
|
|||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
|
|
||||||
row-gap: 8px;
|
|
||||||
}
|
|
||||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
|
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
|
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
color: #bababa;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before {
|
|
||||||
content: "de ";
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after {
|
|
||||||
content: " por";
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 33px;
|
|
||||||
text-align: center;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sliderLayoutContainer--carousel .sliderArrows {
|
.sliderLayoutContainer--carousel .sliderArrows {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -489,7 +489,6 @@
|
|||||||
background: #000000;
|
background: #000000;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
bottom: 1px;
|
|
||||||
}
|
}
|
||||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||||
|
|
||||||
//Header
|
//Header
|
||||||
|
|
||||||
.flexRow--main-header {
|
.flexRow--main-header {
|
||||||
@ -128,6 +130,23 @@
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Product Price
|
||||||
|
|
||||||
|
.flexRowContent {
|
||||||
|
:global(.vtex-product-price-1-x-sellingPrice) {
|
||||||
|
margin-top: 24px;
|
||||||
|
:global(.vtex-product-price-1-x-sellingPriceValue) {
|
||||||
|
height: 38px;
|
||||||
|
:global(.vtex-product-price-1-x-currencyContainer) {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Botao add Cart
|
//Botao add Cart
|
||||||
|
|
||||||
.flexRow {
|
.flexRow {
|
||||||
|
@ -127,89 +127,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.FooterRightBlock {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.SpanTitle {
|
|
||||||
color: $white;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 38px;
|
|
||||||
}
|
|
||||||
.SpanTitleBig {
|
|
||||||
color: $white;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 38px;
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.UlGroup {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
row-gap: 4px;
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.UlSecondary {
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
column-gap: 8px;
|
|
||||||
list-style: none;
|
|
||||||
.ImgCard {
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
width: 42px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
width: 42px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Footer Credits
|
|
||||||
|
|
||||||
.AutoresBlock {
|
|
||||||
.Autores-Group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 15.73px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
.Autores-List {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: $white;
|
|
||||||
column-gap: 8.72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
//dados produto
|
//Dados produto
|
||||||
|
|
||||||
.sellingPrice {
|
.sellingPrice {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -7,3 +7,108 @@
|
|||||||
color: $black;
|
color: $black;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Parcelamento
|
||||||
|
|
||||||
|
.installments--product-installments {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: $gray;
|
||||||
|
.installmentsNumber {
|
||||||
|
font-weight: 700;
|
||||||
|
&::after {
|
||||||
|
content: "x";
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.installmentValue {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Slider
|
||||||
|
|
||||||
|
.listPrice {
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
height: 19px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 19px;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
height: 16px !important;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
height: 16px !important;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
:global(.vtex-store-components-3-x-listPriceLabel) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.listPriceValue {
|
||||||
|
padding: 0;
|
||||||
|
.currencyContainer {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
color: $BABABA;
|
||||||
|
display: block;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: "de ";
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: " por";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sellingPrice {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.sellingPriceValue {
|
||||||
|
height: 33px;
|
||||||
|
line-height: 33px;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
line-height: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
line-height: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.currencyContainer {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
color: $black;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -47,16 +47,7 @@
|
|||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
:global(.vtex-product-summary-2-x-clearLink) {
|
:global(.vtex-product-summary-2-x-clearLink) {
|
||||||
min-height: 448.4px;
|
height: auto;
|
||||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
|
||||||
min-height: 543.4px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
min-height: 383.2px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
min-height: 254.8px;
|
|
||||||
}
|
|
||||||
:global(.vtex-product-summary-2-x-element) {
|
:global(.vtex-product-summary-2-x-element) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
:global(.vtex-product-summary-2-x-nameContainer) {
|
:global(.vtex-product-summary-2-x-nameContainer) {
|
||||||
@ -108,75 +99,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:global(.vtex-product-summary-2-x-priceContainer) {
|
|
||||||
padding: 0;
|
|
||||||
:global(.vtex-store-components-3-x-priceContainer) {
|
|
||||||
row-gap: 8px;
|
|
||||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
:global(.vtex-store-components-3-x-listPrice) {
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
:global(.vtex-store-components-3-x-listPriceLabel) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
:global(.vtex-store-components-3-x-listPriceValue) {
|
|
||||||
padding: 0;
|
|
||||||
:global(.vtex-product-summary-2-x-currencyContainer) {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
color: $BABABA;
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
content: "de ";
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: " por";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
:global(.vtex-store-components-3-x-sellingPriceLabel) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
:global(.vtex-store-components-3-x-sellingPrice) {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 33px;
|
|
||||||
text-align: center;
|
|
||||||
color: $black;
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 25px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -487,7 +487,6 @@
|
|||||||
background: $black;
|
background: $black;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
bottom: 1px;
|
|
||||||
:global(.vtex-button__label) {
|
:global(.vtex-button__label) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user