From 50eaf17c02201333927c8bb9580c8741b5ff5140 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Tue, 31 Jan 2023 14:21:27 -0300 Subject: [PATCH] feat: Inclui placeholder no input CEP --- react/components/Pix/Pix.tsx | 8 ++++- store/blocks/pdp/product.jsonc | 4 +-- styles/css/vtex.breadcrumb.css | 5 ++-- styles/css/vtex.product-summary.css | 11 ++++--- styles/css/vtex.store-components.css | 16 ++++++++-- styles/css/vtex.tab-layout.css | 12 ++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 5 ++-- .../pages/product/vtex.product-summary.scss | 29 ++++++++++--------- .../pages/product/vtex.store-components.scss | 18 ++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 24 +++++++-------- 10 files changed, 90 insertions(+), 42 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index d6e114b..69917fa 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -1,8 +1,14 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useProduct } from "vtex.product-context"; import styles from "./style.module.css"; const Pix = () => { + useEffect(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + + cepInput?.setAttribute("placeholder", "Digite seu CEP"); + }); + const productValue = useProduct(); const priceProduct = diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dc0ddf6..0facc42 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -163,8 +163,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 4ec87c2..c88ac4a 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,11 +8,12 @@ /* Media Query M3 */ /* Grid breakpoints */ .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 { margin: 0px 356px; + padding: 14px 0; } } .container .link, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index a2fc014..13722d4 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -59,15 +59,14 @@ content: " por"; } -:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after { - display: block; +:global(.vtex-slider-layout-0-x-sliderRightArrow) { + visibility: hidden; +} +:global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); } :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; -} - -:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) { - color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b2b27a9..ef75ad2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,10 +10,12 @@ /* Grid breakpoints */ .container { padding: 0 40px; + margin: 0; } -@media screen and (min-width: 112.5em) { +@media screen and (min-width: 1920px) and (max-width: 2560px) { .container { - margin: 6px 356px; + margin: 6px 360px; + padding: 0; } } @@ -27,6 +29,7 @@ .productImageTag--main { max-height: max-content !important; + max-width: max-content; } .carouselGaleryThumbs { @@ -175,6 +178,15 @@ border-radius: 0; 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) { font-size: 0; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 3c3e217..f6b2179 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,6 +9,13 @@ /* Grid breakpoints */ :global(.vtex-tab-layout-0-x-container) { 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 { border-bottom: 1px solid #bfbfbf; @@ -55,8 +62,13 @@ align-items: flex-start; 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) { width: inherit !important; + max-width: 632px; display: block; } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 2318bbb..6744966 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,9 @@ .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; + padding: 14px 0; } .link, diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index caa47d2..b3c3c6d 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,6 +1,15 @@ // :global(.vtex-slider-layout-0-x-slide--shelf) { // 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) { width: 314px; @@ -63,15 +72,11 @@ } :global(.vtex-slider-layout-0-x-sliderRightArrow) { - // display: none; + visibility: hidden; - :global(.vtex-slider-layout-0-x-caretIcon) { - // display: none; - - &::after { - display: block; - content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); - } + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); } } @@ -79,8 +84,6 @@ display: none; } -:global(.vtex-slider-layout-0-x-paginationDotsContainer) { - :global(.vtex-slider-layout-0-x-paginationDot--shelf) { - color: $black; - } -} +// .paginationDot--container { +// color: $black; +// } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6357699..fc70e62 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,8 +1,10 @@ .container { padding: 0 40px; + margin: 0; - @media screen and (min-width: 112.5em) { - margin: 6px 356px; + @media screen and (min-width: 1920px) and (max-width: 2560px) { + margin: 6px 360px; + padding: 0; } } @@ -16,6 +18,7 @@ .productImageTag--main { max-height: max-content !important; + max-width: max-content; // max-width: 664px; } @@ -191,6 +194,17 @@ height: 49px; border-radius: 0; 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) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 9091399..40266d5 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,11 @@ :global(.vtex-tab-layout-0-x-container) { padding: 0 40px; + margin: 0; + + @media screen and (min-width: 1920px) and (max-width: 2560px) { + margin: 6px 360px; + padding: 0; + } .listContainer--tabList { border-bottom: 1px solid $gray-100; @@ -63,8 +69,14 @@ // max-width: 100%; // } + .productImagesContainer { + width: 50%; + max-width: 50%; + } + :global(.vtex-store-components-3-x-productImageTag) { width: inherit !important; + max-width: 632px; display: block; // max-width: 872px; } @@ -86,16 +98,4 @@ } } } - - // .contentItem { - // display: flex; - // flex-direction: row; - - // .productImageTag { - // width: 50%; - // } - // } - // .carouselGaleryThumbs { - // display: none; - // } }