Merge pull request 'Entrega do Desafio' (#7) from feature/challenge-vtex-io into develop

Reviewed-on: #7
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-07 12:12:26 +00:00
commit 79ef508315
38 changed files with 694 additions and 462 deletions

3
react/Authors.tsx Normal file
View File

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

View File

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

View File

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

View File

@ -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;

View 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;
}

View File

@ -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&nbsp;</span>
de&nbsp;
<span style={{fontWeight: "700"}}>
R$&nbsp;
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
</span>{" "}
sem juros
</p>
);
};
export default InstallmentProduct;

View File

@ -1,7 +0,0 @@
.PriceContent {
margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

View File

@ -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"
/> />

View 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;
}
}

View File

@ -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$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")} R$&nbsp;{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>

View File

@ -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;

View File

@ -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"

View 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
View File

@ -1,7 +0,0 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}

View File

@ -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
View File

@ -0,0 +1,4 @@
declare module "*.css" {
const css: any;
export default css;
}

7
react/typings/global.d.ts vendored Normal file
View 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
View 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
View 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
}
}

View File

@ -0,0 +1 @@
declare module "vtex.css-handles"

103
react/typings/vtex.order-manager.d.ts vendored Normal file
View 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
View 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
View File

@ -0,0 +1,9 @@
declare module "vtex.styleguide" {
import { ComponentType } from "react";
export const Input: ComponentType<InputProps>;
interface InputProps {
[key: string]: any
}
}

View File

@ -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",

View File

@ -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"]

View File

@ -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"
] ]
}, },

View File

@ -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"]
}, },

View File

@ -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"
} }
} }

View File

@ -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;

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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
}
}
}
}
}
} }
} }
} }

View File

@ -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;
} }