feat: adição placeholder no input]

This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-01 19:12:53 -03:00
parent d3bd6e5795
commit 5a15c8b3cb
14 changed files with 88 additions and 38 deletions

3
react/Placeholder.tsx Normal file
View File

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

View File

@ -8,7 +8,7 @@
[class*='html'] > [class*='button'] { [class*='html'] > [class*='button'] {
width: 100%; width: 100%;
height: 49px; height: 49px;
margin-right: 40px; /* margin-right: 40px; */
background: #000; background: #000;
border: #000; border: #000;
} }

View File

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

View File

@ -4,8 +4,8 @@
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"tab-layout#desc", "tab-layout#desc",
"flex-layout.row#specifications-title", // "flex-layout.row#specifications-title",
"product-specification-group#table", // "product-specification-group#table",
"shelf.relatedProducts", "shelf.relatedProducts",
"product-questions-and-answers" "product-questions-and-answers"
] ]
@ -78,7 +78,8 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "46%", "width": "51%",
// "maxHeight": 664,
"rowGap": 0 "rowGap": 0
} }
}, },
@ -111,6 +112,7 @@
"pix", "pix",
"sku-selector", "sku-selector",
"html#quantityAndButton", "html#quantityAndButton",
"Placeholder",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"availability-subscriber", "availability-subscriber",

View File

@ -12,5 +12,8 @@
"Parcelamento": { "Parcelamento": {
"component": "Parcelamento" "component": "Parcelamento"
},
"Placeholder": {
"component": "Placeholder"
} }
} }

View File

@ -7,7 +7,15 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.stretchChildrenWidth { :global(.vtex-store-components-3-x-container) {
margin: 0; padding: 0 40px;
padding: 0; }
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
max-height: 664px !important;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container {
display: none;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper {
display: none;
} }

View File

@ -10,7 +10,6 @@
.product-identifier { .product-identifier {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-right: 40px;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

24
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,24 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.title {
font-size: 0;
}
.title::before {
content: "Você também pode gostar:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}

View File

@ -11,15 +11,9 @@
background: red; background: red;
} }
.carouselGaleryThumbs {
width: 59.24%;
padding-left: 40px;
}
.productBrand { .productBrand {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-right: 37px;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
@ -94,12 +88,6 @@
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
padding: 0; padding: 0;
} }
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::before {
content: "Digite seu cep";
height: 16px;
width: 16px;
background: red;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex; display: flex;
position: absolute; position: absolute;

View File

@ -13,7 +13,6 @@
font-size: 16px; font-size: 16px;
color: #929292; color: #929292;
} }
.homeLink:hover::before { .homeLink:hover::before {
color: #0f3e99; color: #0f3e99;
} }

View File

@ -1,4 +1,15 @@
.stretchChildrenWidth { :global(.vtex-store-components-3-x-container) {
margin: 0; padding: 0 40px;
padding: 0;
:global(.vtex-store-components-3-x-productImageTag) {
max-height: 664px !important;
}
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
.swiper-container {
display: none;
.swiper-wrapper {
display: none;
}
}
}
} }

View File

@ -1,7 +1,7 @@
.product-identifier { .product-identifier {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-right: 40px; // margin-right: 40px;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;

View File

@ -0,0 +1,16 @@
.title {
font-size: 0;
}
.title::before {
content: 'Você também pode gostar:';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}

View File

@ -2,15 +2,10 @@
background: red; background: red;
} }
.carouselGaleryThumbs {
width: 59.24%;
padding-left: 40px;
}
.productBrand { .productBrand {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-right: 37px; // margin-right: 37px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-style: normal; font-style: normal;
@ -98,13 +93,6 @@
:global(.vtex-address-form-4-x-input) { :global(.vtex-address-form-4-x-input) {
padding: 0; padding: 0;
} }
:global(.vtex-address-form-4-x-input)::before {
content: 'Digite seu cep';
height: 16px;
width: 16px;
background: red;
}
} }
} }