feat: Inclui placeholder no input CEP
This commit is contained in:
parent
fbe6eb7bbd
commit
50eaf17c02
@ -1,8 +1,14 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useProduct } from "vtex.product-context";
|
import { useProduct } from "vtex.product-context";
|
||||||
import styles from "./style.module.css";
|
import styles from "./style.module.css";
|
||||||
|
|
||||||
const Pix = () => {
|
const Pix = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
|
||||||
|
|
||||||
|
cepInput?.setAttribute("placeholder", "Digite seu CEP");
|
||||||
|
});
|
||||||
|
|
||||||
const productValue = useProduct();
|
const productValue = useProduct();
|
||||||
|
|
||||||
const priceProduct =
|
const priceProduct =
|
||||||
|
@ -163,8 +163,8 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"flex-layout.row#product-name",
|
||||||
"product-identifier.product",
|
"product-identifier.product",
|
||||||
"sku-selector",
|
"flex-layout.row#availability",
|
||||||
"flex-layout.row#availability"
|
"sku-selector"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"flex-layout.row#availability": {
|
"flex-layout.row#availability": {
|
||||||
|
@ -8,11 +8,12 @@
|
|||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.container {
|
.container {
|
||||||
padding: 16px 36px;
|
padding: 14px 36px;
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 112.5em) {
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
.container {
|
.container {
|
||||||
margin: 0px 356px;
|
margin: 0px 356px;
|
||||||
|
padding: 14px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.container .link,
|
.container .link,
|
||||||
|
@ -59,15 +59,14 @@
|
|||||||
content: " por";
|
content: " por";
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after {
|
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
|
||||||
display: block;
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
:global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
|
||||||
|
visibility: visible;
|
||||||
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
|
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-store-components-3-x-discountInsideContainer) {
|
:global(.vtex-store-components-3-x-discountInsideContainer) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) {
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
@ -10,10 +10,12 @@
|
|||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.container {
|
.container {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 112.5em) {
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
.container {
|
.container {
|
||||||
margin: 6px 356px;
|
margin: 6px 360px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,6 +29,7 @@
|
|||||||
|
|
||||||
.productImageTag--main {
|
.productImageTag--main {
|
||||||
max-height: max-content !important;
|
max-height: max-content !important;
|
||||||
|
max-width: max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryThumbs {
|
.carouselGaleryThumbs {
|
||||||
@ -175,6 +178,15 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid #cccccc;
|
border: 1px solid #cccccc;
|
||||||
}
|
}
|
||||||
|
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
|
||||||
|
padding: 16.5px 16px;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #AFAFAF;
|
||||||
|
}
|
||||||
.shippingContainer :global(.vtex-input__label) {
|
.shippingContainer :global(.vtex-input__label) {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
@ -9,6 +9,13 @@
|
|||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
:global(.vtex-tab-layout-0-x-container) {
|
:global(.vtex-tab-layout-0-x-container) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
|
:global(.vtex-tab-layout-0-x-container) {
|
||||||
|
margin: 6px 360px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
|
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
|
||||||
border-bottom: 1px solid #bfbfbf;
|
border-bottom: 1px solid #bfbfbf;
|
||||||
@ -55,8 +62,13 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 32px 32px 16px;
|
padding: 32px 32px 16px;
|
||||||
}
|
}
|
||||||
|
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem .productImagesContainer {
|
||||||
|
width: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
|
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
|
||||||
width: inherit !important;
|
width: inherit !important;
|
||||||
|
max-width: 632px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
|
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 16px 36px;
|
padding: 14px 36px;
|
||||||
|
|
||||||
@media screen and (min-width: 112.5em) {
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
margin: 0px 356px;
|
margin: 0px 356px;
|
||||||
|
padding: 14px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link,
|
.link,
|
||||||
|
@ -1,6 +1,15 @@
|
|||||||
// :global(.vtex-slider-layout-0-x-slide--shelf) {
|
// :global(.vtex-slider-layout-0-x-slide--shelf) {
|
||||||
// width: 300px;
|
// width: 300px;
|
||||||
// }
|
// }
|
||||||
|
// :global(.vtex-slider-layout-0-x-sliderLayoutContainer) {
|
||||||
|
// margin: 0 40px;
|
||||||
|
// // margin: 0 auto;
|
||||||
|
|
||||||
|
// @media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
|
// margin: 6px 360px;
|
||||||
|
// padding: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
|
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
|
||||||
width: 314px;
|
width: 314px;
|
||||||
@ -63,15 +72,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
|
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
|
||||||
// display: none;
|
visibility: hidden;
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-caretIcon) {
|
&::after {
|
||||||
// display: none;
|
visibility: visible;
|
||||||
|
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
|
||||||
&::after {
|
|
||||||
display: block;
|
|
||||||
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -79,8 +84,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-slider-layout-0-x-paginationDotsContainer) {
|
// .paginationDot--container {
|
||||||
:global(.vtex-slider-layout-0-x-paginationDot--shelf) {
|
// color: $black;
|
||||||
color: $black;
|
// }
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
@media screen and (min-width: 112.5em) {
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
margin: 6px 356px;
|
margin: 6px 360px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,6 +18,7 @@
|
|||||||
|
|
||||||
.productImageTag--main {
|
.productImageTag--main {
|
||||||
max-height: max-content !important;
|
max-height: max-content !important;
|
||||||
|
max-width: max-content;
|
||||||
// max-width: 664px;
|
// max-width: 664px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -191,6 +194,17 @@
|
|||||||
height: 49px;
|
height: 49px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid $gray-1000;
|
border: 1px solid $gray-1000;
|
||||||
|
|
||||||
|
:global(.vtex-address-form-4-x-input) {
|
||||||
|
padding: 16.5px 16px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.vtex-input__label) {
|
:global(.vtex-input__label) {
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
:global(.vtex-tab-layout-0-x-container) {
|
:global(.vtex-tab-layout-0-x-container) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
||||||
|
margin: 6px 360px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.listContainer--tabList {
|
.listContainer--tabList {
|
||||||
border-bottom: 1px solid $gray-100;
|
border-bottom: 1px solid $gray-100;
|
||||||
@ -63,8 +69,14 @@
|
|||||||
// max-width: 100%;
|
// max-width: 100%;
|
||||||
|
|
||||||
// }
|
// }
|
||||||
|
.productImagesContainer {
|
||||||
|
width: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
:global(.vtex-store-components-3-x-productImageTag) {
|
:global(.vtex-store-components-3-x-productImageTag) {
|
||||||
width: inherit !important;
|
width: inherit !important;
|
||||||
|
max-width: 632px;
|
||||||
display: block;
|
display: block;
|
||||||
// max-width: 872px;
|
// max-width: 872px;
|
||||||
}
|
}
|
||||||
@ -86,16 +98,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .contentItem {
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: row;
|
|
||||||
|
|
||||||
// .productImageTag {
|
|
||||||
// width: 50%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .carouselGaleryThumbs {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user