refactor: reorganiza arquivos e remove comentários

This commit is contained in:
Andrea Matsunaga 2023-02-10 23:43:35 -03:00
parent ab0645c45d
commit e85f08a6f7
20 changed files with 121 additions and 382 deletions

View File

@ -22,10 +22,6 @@ const Freight = () => {
const cepButton = document.querySelector(".vtex-address-form__postalCode")
?.nextSibling;
console.log("cepInput: " + cepInput, typeof cepInput);
console.log("inputSpan: " + inputSpan, typeof inputSpan);
console.log("cepButton: " + cepButton, typeof cepButton);
setPlaceholder(cepInput, "Digite seu CEP");
appendElement(inputSpan, cepButton);
});

View File

@ -1,8 +1,6 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
// import { useQuery } from "react-apollo";
// import pixPrice from "../../graphql/pixPrice.graphql";
const PixDiscount = () => {
const productContextValue = useProduct();
@ -15,29 +13,11 @@ const PixDiscount = () => {
maximumFractionDigits: 2,
});
// console.log(productContextValue);
return (
<>
<p className={styles.pixDiscount}>{`R$ ${pixPrice}`}</p>
{/* <p>{testingApi}</p> */}
</>
);
};
export default PixDiscount;
// "vtex.search-graphql": "0.x"
// const { data } = useQuery(pixPrice, {
// variables: {
// slug: productContextValue?.product?.productName,
// },
// ssr: false,
// });
// const testingApi = fetch(
// "https://agenciamagma.dev.com.br/api/checkout/pub/orderForms/simulation"
// )
// .then((response) => response.json())
// .then((data) => console.log(data));

View File

@ -1,7 +1,5 @@
.pixDiscount {
/* background-color: red; */
margin: 0;
/* font-family: "Open Sans"; */
font-weight: 700;
font-size: 18px;
color: rgba(0, 0, 0, 0.58);

View File

@ -0,0 +1,104 @@
{
"html#product-description": {
"props": {
"tag": "section",
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": {
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
},
"children": ["tab-list#description", "tab-content#description"]
},
"tab-list#description": {
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-content#description": {
"children": [
"tab-content.item#description1",
"tab-content.item#description2",
"tab-content.item#description3",
"tab-content.item#description4",
"tab-content.item#description5"
]
},
"tab-content.item#description1": {
"props": {
"tabId": "description1"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description2": {
"props": {
"tabId": "description2"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description3": {
"props": {
"tabId": "description3"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description4": {
"props": {
"tabId": "description4"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description5": {
"props": {
"tabId": "description5"
},
"children": ["product-images", "product-description"]
}
}

View File

@ -6,9 +6,9 @@
"html#product-description",
"html#shelf-container",
"flex-layout.row#newsletter-wrapper"
// "newsletter-form"
]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -18,109 +18,6 @@
"children": ["breadcrumb"]
},
"html#product-description": {
"props": {
"tag": "section",
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": {
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
},
"children": ["tab-list#description", "tab-content#description"]
},
"tab-list#description": {
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-content#description": {
"children": [
"tab-content.item#description1",
"tab-content.item#description2",
"tab-content.item#description3",
"tab-content.item#description4",
"tab-content.item#description5"
]
},
"tab-content.item#description1": {
"props": {
"tabId": "description1"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description2": {
"props": {
"tabId": "description2"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description3": {
"props": {
"tabId": "description3"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description4": {
"props": {
"tabId": "description4"
},
"children": ["product-images", "product-description"]
},
"tab-content.item#description5": {
"props": {
"tabId": "description5"
},
"children": ["product-images", "product-description"]
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -141,7 +38,6 @@
},
"children": ["html#product-images", "flex-layout.col#right-col"]
},
"html#product-images": {
"props": {
"tag": "section",
@ -150,7 +46,6 @@
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
@ -163,7 +58,6 @@
"maxHeight": 2560
}
},
"flex-layout.col#right-col": {
"props": {
"width": "50%",
@ -171,33 +65,17 @@
"blockClass": "right-col"
},
"children": [
// "html#product-name",
"flex-layout.row#product-name",
"html#codigo",
// "product-rating-summary",
// "flex-layout.row#selling-price",
"html#selling-price",
"html#product-installments",
// "flex-layout.row#list-price-savings",
"html#pix-price",
"html#sku-selector",
// "product-assembly-options",
// "product-gifts",
"flex-layout.row#quantity-buy",
// "availability-subscriber",
"html#shipping-simulator"
]
},
"html#product-name": {
"props": {
"testId": "product-name",
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,
@ -205,10 +83,16 @@
},
"children": ["html#product-name"]
},
"html#product-name": {
"props": {
"testId": "product-name",
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"html#codigo": {
"props": {
// "blockClass": "codigo",
"testId": "product-code"
},
"children": ["product-identifier.product"]
@ -223,31 +107,23 @@
"html#pix-price": {
"props": {
"tag": "div",
"testId": "pix-price",
"blockClass": "pix-price"
},
"children": ["image#pix-logo", "flex-layout.col#pix-discount"]
},
// "flex-layout.col#pix-image": {
// "children": ["image#pix-logo"]
// },
"image#pix-logo": {
"props": {
"src": "https://agenciamagma.vteximg.com.br/arquivos/pix-andreamm.svg",
"blockClass": "pix-logo"
}
},
"flex-layout.col#pix-discount": {
"children": ["pix-discount", "product-price-savings"],
"props": {
"blockClass": "pix-discount"
}
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
@ -255,12 +131,6 @@
"children": ["sku-selector"]
},
// "sku-selector": {
// "props": {
// // "showValueNameForImageVariation": true
// }
// },
"flex-layout.row#quantity-buy": {
"props": {
"blockClass": "quantity-buy",
@ -269,21 +139,18 @@
},
"children": ["html#product-quantity", "flex-layout.col#buy-button"]
},
"html#product-quantity": {
"props": {
"testId": "product-quantity"
},
"children": ["product-quantity#quantity"]
},
"product-quantity#quantity": {
"props": {
// "blockClass": "quantity"
"showLabel": false
}
},
"flex-layout.col#buy-button": {
"props": {
"blockClass": "buy-button",
@ -291,13 +158,17 @@
},
"children": ["html#add-to-cart-button"]
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button#product"]
},
"add-to-cart-button#product": {
"props": {
"text": "ADICIONAR À SACOLA"
}
},
"flex-layout.row#buy-button": {
"props": {
@ -307,12 +178,6 @@
"children": ["add-to-cart-button#product"]
},
"add-to-cart-button#product": {
"props": {
"text": "ADICIONAR À SACOLA"
}
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator",
@ -337,7 +202,6 @@
"props": {
"width": "50%",
"preventVerticalStretch": true,
// "rowGap": 0,
"blockClass": "info-availability"
},
"children": [
@ -360,26 +224,22 @@
},
"children": ["rich-text#see-also", "list-context.product-list"]
},
"rich-text#see-also": {
"props": {
"text": "#### Você também pode gostar:",
"blockClass": "see-also"
}
},
"list-context.product-list": {
"blocks": ["product-summary.shelf"],
"children": ["html#slider"]
},
"html#slider": {
"props": {
"testId": "product-summary-list"
},
"children": ["slider-layout#related-products"]
},
"slider-layout#related-products": {
"props": {
"itemsPerPage": {
@ -390,10 +250,7 @@
"infinite": true,
"showNavigationArrows": "always",
"blockClass": "carousel"
// "fullWidth": false
}
// ,
// "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
},
"flex-layout.row#newsletter-wrapper": {
@ -406,11 +263,6 @@
"newsletter-form"
]
},
// "flex-layout.row#input-submit": {
// "children": ["newsletter-form"]
// },
"rich-text#newsletter-title": {
"props": {
"text": "Assine nossa newsletter",
@ -429,68 +281,6 @@
"newsletter-input-email": {
"props": {
"placeholderText": "Digite seu e-mail"
// "width": "90%"
}
}
// "newsletter": {
// "children": ["rich-text#newsletter-title", "newsletter-form"]
// },
// "rich-text#newsletter-title": {
// "props": {
// "text": "Assine nossa newsletter"
// }
// },
// "flex-layout.row#newsletter-wrapper": {
// "props": {
// "blockClass": "newsletter-wrapper"
// },
// "children": [
// "rich-text#newsletter-title",
// "rich-text#newsletter-subtitle",
// "newsletter-form"
// ]
// },
// "newsletter-form": {
// "children": [
// "rich-text#newsletter-title",
// "rich-text#newsletter-subtitle",
// "newsletter-input-email",
// "newsletter-submit"
// ]
// }
// "newsletter-form": {
// "children": [
// "rich-text#newsletter-title",
// "rich-text#newsletter-subtitle",
// // "newsletter-input-email",
// // "newsletter-submit"
// "flex-layout.row#newsletter-form"
// ]
// },
// "flex-layout.row#newsletter-form": {
// "props": {
// "blockClass": "newsletter-form",
// "preventHorizontalStretch": true,
// "preventVerticalStretch": true,
// "horizontalAlign": "center"
// },
// "children": [
// "rich-text#newsletter-title",
// "rich-text#newsletter-subtitle",
// "newsletter-form"
// ]
// }
// "newsletter-form": {
// "children": ["newsletter-input-email", "newsletter-submit"]
// }
// "newsletter-input-email": {
// "props": {
// "placeholderText": "Digite seu e-mail"
// // "width": "90%"
// }
}

View File

@ -105,7 +105,4 @@
.flexRowContent--newsletter-form {
border-bottom: 1px solid #929292;
justify-content: space-between;
}
.flexRowContent--newsletter-form .pr0 {
height: fit-content;
}

View File

@ -16,7 +16,6 @@
.installments {
margin-bottom: 8px;
font-family: "Open Sans";
font-size: 16px;
line-height: 22px;
color: #929292;

View File

@ -129,6 +129,7 @@
}
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
margin: 0;
border: 1px solid #989898;
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {

View File

@ -1,7 +0,0 @@
// .html {
// background-color: red;
// }
// .html--pdp-breadcrumb {
// background-color: green;
// }

View File

@ -20,8 +20,6 @@
/* ----- RIGHT-COL ----- */
.flexCol--right-col,
.flexCol--info-availability {
// background-color: red;
.flexRowContent--product-name {
text-align: right;
@ -35,8 +33,7 @@
}
@include mq(md, max) {
// background-color: cyan;
margin-top: 32px; //tem horas que fica com margem dobrada (mt + gap?)
margin-top: 32px;
}
}
@ -64,7 +61,6 @@
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
// font-family: "Open Sans";
font-weight: 400;
font-size: 18px;
line-height: 25px;
@ -82,13 +78,8 @@
/* ----- NEWSLETTER ----- */
.flexRow--newsletter-wrapper {
padding: 32px 0 16px;
// width: 30.23%;
// margin: 0 auto;
// background: red; //#000000;
border-bottom: 1px solid #ffffff;
background: #000000;
// display: flex;
// justify-content: center;
@include mq(lg, max) {
padding: 64px 16px 32px;
@ -100,19 +91,12 @@
}
.flexRowContent--newsletter-wrapper {
// background-color: yellow;
flex-direction: column;
align-items: center;
}
}
.flexRowContent--newsletter-form {
// width: 774px; // 54.97%;
// margin: 0 auto;
border-bottom: 1px solid #929292;
justify-content: space-between;
.pr0 {
height: fit-content;
}
}

View File

@ -1,7 +1,6 @@
.product-identifier--productReference {
display: flex;
justify-content: flex-end;
// background-color: yellow;
margin-bottom: 24px;
@include mq(lg, max) {
@ -14,8 +13,6 @@
}
.product-identifier__value {
// font-family: "Open Sans";
// font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);

View File

@ -1,6 +1,4 @@
.sellingPriceValue {
// background-color: yellowgreen;
// font-family: "Open Sans";
font-weight: 700;
font-size: 25px;
line-height: 38px;
@ -9,7 +7,6 @@
.installments {
margin-bottom: 8px;
font-family: "Open Sans";
font-size: 16px;
line-height: 22px;
color: #929292;
@ -21,7 +18,6 @@
}
.savings {
// font-family: "Open Sans";
font-weight: 300;
font-size: 13px;
color: #929292;
@ -29,13 +25,8 @@
/* ----- SHELF ----- */
.listPrice--summary {
// background-color: red;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 14px;
line-height: 19px;
// text-align: center;
text-decoration-line: line-through;
color: #bababa;
@ -47,12 +38,8 @@
.sellingPrice--summary {
padding-top: 8px;
// background-color: white;
.sellingPriceValue--summary {
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;

View File

@ -1,8 +1,6 @@
.container {
// background-color: green;
margin: 0;
border-radius: 0;
max-width: 1000px !important;
.element {
@ -18,13 +16,11 @@
.imageContainer {
// background: #ededed;
// background-color: yellow;
width: 100%;
.image {
// background: #ededed;
object-fit: cover !important;
// background-color: red;
}
}

View File

@ -3,8 +3,6 @@
.headingLevel4 {
margin: 16px 0 32px;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
@ -29,9 +27,6 @@
.paragraph {
margin: 0;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #ffffff;
@ -44,9 +39,6 @@
.paragraph {
margin: 0;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;

View File

@ -1,5 +1,4 @@
.sliderLayoutContainer--carousel {
// background-color: aqua;
padding: 0 59.2px 113px;
@include mq(xl, min) {
@ -15,7 +14,6 @@
}
.sliderArrows {
// background-color: blue !important;
padding: 0;
margin: 0;
@ -55,7 +53,6 @@
}
.paginationDotsContainer {
// background-color: lightgreen;
bottom: 64px;
gap: 12px;
align-items: center;

View File

@ -22,7 +22,7 @@
display: block;
.productImagesThumb {
width: 90px !important; // 13.5543% !important (em 1440px);
width: 90px !important;
height: 100% !important;
margin-right: 16px;
margin-bottom: 0;
@ -57,11 +57,7 @@
}
/* ----- RIGHT-COL ----- */
// .productNameContainer {
// }
.productBrand--quickview {
// font-family: "Open Sans";
font-weight: 300;
font-size: 20px;
line-height: 34px;
@ -75,13 +71,11 @@
}
.skuSelectorContainer {
// background-color: red;
display: flex;
flex-direction: column;
.skuSelectorSubcontainer {
&--tamanho {
// background-color: yellow;
order: 1;
margin-bottom: 10px;
@ -104,7 +98,6 @@
}
&--cor {
// background-color: cyan;
order: 2;
margin-bottom: 16px;
@ -144,8 +137,6 @@
.skuSelectorItem {
margin: 0;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -156,7 +147,7 @@
.skuSelectorInternalBox {
margin: 0;
// border: 1px solid #989898;
border: 1px solid #989898;
border-radius: 50%;
.diagonalCross {
@ -172,9 +163,6 @@
.skuSelectorItemTextValue {
padding: 10px;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
@ -206,7 +194,6 @@
}
.shippingContainer {
// background-color: cyan;
width: 61.6%;
@include mq(xl, min) {
@ -233,8 +220,6 @@
}
:global(.vtex-input__label) {
// font-family: "Open Sans";
// font-weight: 400;
font-size: 0;
color: #929292;
@ -253,12 +238,9 @@
}
:global(.vtex-address-form-4-x-input) {
// background-color: yellow;
width: 82.5%;
height: fit-content;
padding: 16.5px 16px;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
@ -290,12 +272,9 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
// background-color: yellow;
padding-top: 27.5px;
display: flex;
align-items: center;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
@ -332,57 +311,39 @@
.shippingTableHead {
display: table-header-group;
text-align: left;
// font-family: "Open Sans";
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #202020;
}
// .shippingTableBody {
// // background-color: orange;
// }
.shippingTableCell {
padding: 0;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
// text-align: left;
// &:last-child {
// padding-right: 0;
// }
}
.shippingTableRow {
padding-bottom: 15px;
display: grid;
// grid-template-rows: auto;
grid-template-columns: 33.74% 24.54% 41.72%;
// grid-template-columns: 23.92% 14.72% 41.72%;
// gap: 32px;
grid-template-areas:
"entregaTHead freteTHead prazoTHead"
"entregaTBody freteTBody prazoTBody";
.shippingTableHeadDeliveryName {
// background-color: cyan;
grid-area: entregaTHead;
font-weight: 400;
}
.shippingTableHeadDeliveryEstimate {
// background-color: yellow;
grid-area: prazoTHead;
font-weight: 400;
}
.shippingTableHeadDeliveryPrice {
// background-color: magenta;
grid-area: freteTHead;
font-weight: 400;
font-size: 0;
@ -420,11 +381,9 @@
/* ----- INFO-AVAILABILITY ----- */
.subscriberContainer {
// background-color: red;
margin-bottom: 16px;
.title {
// font-family: "Open Sans";
margin: 0;
font-size: 0;
color: #868686;
@ -438,7 +397,6 @@
}
.subscribeLabel {
// font-family: "Open Sans";
font-size: 0;
color: #868686;
@ -451,12 +409,9 @@
}
.form {
// background-color: cyan;
margin: 0;
.content {
// background-color: yellowgreen;
// width: 100% !important;
width: 57.74%;
margin-top: 16px;
display: grid;
@ -491,9 +446,6 @@
:global(.vtex-styleguide-9-x-input) {
border-radius: 0;
padding: 12px 14px;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
@ -503,7 +455,6 @@
.submit {
grid-area: submit;
margin: 0;
// width: 100%;
:global(.vtex-button) {
width: 100%;
@ -513,11 +464,7 @@
}
:global(.vtex-button__label) {
// font-family: "Open Sans";
// font-style: normal;
font-size: 0;
// display: flex;
// align-items: center;
text-transform: uppercase;
color: #ffffff;
@ -539,9 +486,6 @@
.productDescriptionContainer {
.productDescriptionTitle {
margin-bottom: 8px;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@ -557,9 +501,6 @@
}
.productDescriptionText {
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
@ -579,8 +520,6 @@
width: 100%;
margin: 0;
padding: 12px 0;
// font-family: "Open Sans";
// font-style: normal;
font-weight: 600;
font-size: 18px;
color: #ffffff;

View File

@ -34,7 +34,6 @@
:global(.vtex-button__label) {
padding: 0 16px !important;
// font-family: "Open Sans";
font-weight: 400;
font-size: 18px;
line-height: 38px;
@ -84,7 +83,6 @@
}
@include mq(lg, max) {
// background-color: yellow;
padding: 16px 0;
border-bottom: 1px solid #bfbfbf;
display: flex;

View File

@ -1,5 +1,4 @@
.container {
// background: green;
padding: 0 40px 16px;
.link {
@ -21,7 +20,6 @@
.homeLink {
position: relative;
// background-color: yellow;
.homeIcon {
visibility: hidden;

View File

@ -2,7 +2,6 @@
display: flex;
width: 53.75%;
margin: 0 auto;
// padding-bottom: 16px;
.emailInputContainer {
height: fit-content;
@ -16,10 +15,6 @@
:global(.vtex-styleguide-9-x-input) {
padding: 0 0 7px;
// background-color: yellow;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
@ -46,8 +41,6 @@
:global(.vtex-button__label) {
padding: 0 16px 10px !important;
border: 0;
// font-family: "Open Sans";
// font-style: normal;
font-size: 0;
color: #ffffff;