From 6bbf6cc778e5ef79a2824a34cc55811741934356 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Tue, 24 Jan 2023 11:33:36 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Finaliza=C3=A7=C3=A3o=20coluna=20da=20d?= =?UTF-8?q?ireita=20pdp=20Desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/DescriptionSection.tsx | 3 + react/SKUSelectorPDP.tsx | 3 + react/components/descont-pix/index.tsx | 1 + react/components/descont-pix/styles.css | 1 + .../components/description-section/index.tsx | 33 ++ .../components/description-section/styles.css | 37 +++ react/components/installments/index.tsx | 1 - react/components/product-reference/index.tsx | 13 + react/components/sku-selector-pdp/index.tsx | 11 + react/components/sku-selector-pdp/styles.css | 3 + store/blocks/pdp/product.jsonc | 39 ++- store/interfaces.json | 6 + styles/css/vtex.flex-layout.css | 16 + styles/css/vtex.product-quantity.css | 43 +++ styles/css/vtex.store-components.css | 244 +++++++++++++++ .../product/agenciamagma.store-theme.scss | 1 - .../sass/pages/product/vtex.flex-layout.scss | 17 + .../pages/product/vtex.product-quantity.scss | 38 +++ .../pages/product/vtex.store-components.scss | 294 ++++++++++++++++++ 20 files changed, 794 insertions(+), 11 deletions(-) create mode 100644 react/DescriptionSection.tsx create mode 100644 react/SKUSelectorPDP.tsx create mode 100644 react/components/description-section/index.tsx create mode 100644 react/components/description-section/styles.css create mode 100644 react/components/sku-selector-pdp/index.tsx create mode 100644 react/components/sku-selector-pdp/styles.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/DescriptionSection.tsx b/react/DescriptionSection.tsx new file mode 100644 index 0000000..c0b282f --- /dev/null +++ b/react/DescriptionSection.tsx @@ -0,0 +1,3 @@ +import { DescriptionSection } from "./components/description-section"; + +export default DescriptionSection; diff --git a/react/SKUSelectorPDP.tsx b/react/SKUSelectorPDP.tsx new file mode 100644 index 0000000..aa22d81 --- /dev/null +++ b/react/SKUSelectorPDP.tsx @@ -0,0 +1,3 @@ +import { SkuSelectorPDP } from "./components/sku-selector-pdp"; + +export default SkuSelectorPDP; diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx index b08725c..af25c9a 100644 --- a/react/components/descont-pix/index.tsx +++ b/react/components/descont-pix/index.tsx @@ -9,6 +9,7 @@ export const DescontPix: FC = () => { let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice); sellingPrice = (sellingPrice - (sellingPrice/10)); + return (
Desconto no PIX diff --git a/react/components/descont-pix/styles.css b/react/components/descont-pix/styles.css index fd310bc..99984d3 100644 --- a/react/components/descont-pix/styles.css +++ b/react/components/descont-pix/styles.css @@ -2,6 +2,7 @@ display: flex; align-items: center; margin-top: 8px; + margin-bottom: 16px; } .containerDescontPix img { diff --git a/react/components/description-section/index.tsx b/react/components/description-section/index.tsx new file mode 100644 index 0000000..8cc0e57 --- /dev/null +++ b/react/components/description-section/index.tsx @@ -0,0 +1,33 @@ +import React, { FC } from 'react' +import { useProduct } from 'vtex.product-context' +import styles from "./styles.css"; + +export const DescriptionSection: FC = () => { + + const productContextValue = useProduct(); + + const imageProduct = productContextValue?.product?.items[0].images[0].imageUrl; + const imageProductAlt = productContextValue?.product?.productName; + const descriptionProduct = productContextValue?.product?.description; + return ( +
+ + +
+ {imageProductAlt} +
+

Descrição do produto

+

{descriptionProduct}

+
+
+
+ ); +} diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css new file mode 100644 index 0000000..3aaf8fe --- /dev/null +++ b/react/components/description-section/styles.css @@ -0,0 +1,37 @@ +.containerDescriptionSection{ + display: flex; + flex-direction: column; + padding: 0 40px; +} + +.containerDescriptionSectionNav{ + display: flex; + list-style: none; + padding: 0 64px; + justify-content: space-between; +} + +.linkContainer{ + width: 114px; + height: 38px; + display: grid; + place-items: center; + + border-bottom: 2px solid #000000; +} + +.linkContainer a:active{ + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + text-decoration: none; +} + +/* .active{ + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + text-decoration: none; +} */ diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx index 0ee84ad..2bf9072 100644 --- a/react/components/installments/index.tsx +++ b/react/components/installments/index.tsx @@ -5,7 +5,6 @@ import styles from "./styles.css"; export const Installments: FC = () => { const productContextValue = useProduct(); - console.log(productContextValue?.product?.priceRange.sellingPrice) let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4; diff --git a/react/components/product-reference/index.tsx b/react/components/product-reference/index.tsx index 220b937..d8cc358 100644 --- a/react/components/product-reference/index.tsx +++ b/react/components/product-reference/index.tsx @@ -4,6 +4,19 @@ import styles from "./styles.css"; export const ProductReference: FC = () => { + // MODIFICAÇÂO DE TITULOS DE ALGUNS ELEMENTOS + // if (typeof document !== 'undefined') { + // const titleSizeSKU = document.querySelectorAll(".vtex-store-components-3-x-skuSelectorName"); + // titleSizeSKU[1].innerHTML = "Outros Tamanhos:" + // titleSizeSKU[0].innerHTML = "Outras Cores" + // } + + if (typeof document !== 'undefined') { + const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); + inputCEP?.setAttribute("placeholder", "Digite seu CEP") + console.log(inputCEP); + } + const productContextValue = useProduct(); console.log(productContextValue) diff --git a/react/components/sku-selector-pdp/index.tsx b/react/components/sku-selector-pdp/index.tsx new file mode 100644 index 0000000..8411caa --- /dev/null +++ b/react/components/sku-selector-pdp/index.tsx @@ -0,0 +1,11 @@ + + +export const SkuSelectorPDP = () => { + + if (typeof document !== 'undefined') { + const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); + console.log(inputCEP); + } + + return null; +} diff --git a/react/components/sku-selector-pdp/styles.css b/react/components/sku-selector-pdp/styles.css new file mode 100644 index 0000000..3a99065 --- /dev/null +++ b/react/components/sku-selector-pdp/styles.css @@ -0,0 +1,3 @@ +.containerSKUSelector{ + display: flex; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a6c716..1784b91 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,6 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", + "description-section", "flex-layout.row#description", "flex-layout.row#specifications-title", "product-specification-group#table", @@ -118,18 +119,40 @@ "flex-layout.row#selling-price", "installments", "descont-pix", - "product-separator", - "product-identifier.product", + // "product-separator", + // "product-identifier.product", + // "sku-selector-pdp", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#quantity-and-buy-button", + // "product-quantity", + // "product-assembly-options", + // "product-gifts", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, + "flex-layout.row#quantity-and-buy-button": { + "props": { + "blockClass": "container-quantity-and-buy-button" + }, + "children": [ + "product-quantity", + "buy-button" + ] + }, + "product-quantity": { + "props": { + "width": "100%" + } + }, + + "buy-button": { + "props": { + "width": "100%" + } + }, "product-reference": { "props": { "blockClass": "title-product-reference" diff --git a/store/interfaces.json b/store/interfaces.json index d6ae06d..e23f04a 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -11,6 +11,12 @@ "descont-pix": { "component": "DescontPix" }, + "sku-selector-pdp": { + "component": "SKUSelectorPDP" + }, + "description-section": { + "component": "DescriptionSection" + }, "html": { "component": "html", "composition": "children" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d48e47d..2149ee4 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -28,4 +28,20 @@ .flexRowContent { margin: 0; +} + +.flexRowContent--container-quantity-and-buy-button { + display: grid; + grid-template-columns: 128px 1fr; + gap: 10px; + margin-bottom: 16px; +} +.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) { + background-color: #000000; + border: 0; + border-radius: 0; +} + +.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..9c2c0d0 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,43 @@ +/* +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 */ +.quantitySelectorContainer { + margin-top: 6px; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + height: 49px; + margin: 0; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__input), .quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 100%; + background: transparent; + border: 0; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-container) { + height: 49px; + border: 1px solid #CCCCCC; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + font-weight: 400; + font-size: 16px; + line-height: 22px; + 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 c60db02..da11a98 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -35,10 +36,253 @@ max-width: none; } +.skuSelectorNameContainer { + margin: 0; +} + .productNameContainer { text-align: right; font-weight: 300; font-size: 20px; line-height: 34px; color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "Outras cores"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "Outros tamanhos:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorOptionsList { + display: flex; + gap: 16px; + margin: 0; + margin-bottom: 2px; +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem { + margin: 0; + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .frameAround { + border-color: #000000; + border-radius: 50%; + border-width: 2px; + z-index: 5; + bottom: 0; + top: 0; + left: 0; + right: 0; +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper { + padding: 0; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage { + width: 48px; + height: 48px; +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage .diagonalCross { + background: #D5D5D5; + top: 48%; + left: 1%; + width: 46px; + height: 1px; + transform: rotate(-45deg); +} +.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000000; +} +.skuSelectorContainer .diagonalCross { + background: #D5D5D5; + top: 46%; + left: 1%; + width: 38px; + height: 1px; + transform: rotate(-45deg); +} + +.buyButtonText { + font-size: 0; +} +.buyButtonText::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +.shippingContainer { + width: 409px; + position: relative; + display: grid; + grid-template-areas: "label button notCep"; + grid-template-columns: 56.4792% max-content 1fr; + margin-bottom: 16px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + grid-area: label; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + padding: 0 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :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-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + grid-area: notCep; + position: absolute; + right: 0; + top: 43px; + padding: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000000; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + height: 49px; + border-radius: 0; + box-sizing: border-box; +} +.shippingContainer :global(.vtex-button) { + grid-area: button; + width: max-content; + height: max-content; + background-color: #000000; + margin-top: 27px; + margin-left: -2px; + border-radius: 0; + border: 0; + padding: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + width: 49px; + height: 49px; + padding: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; +} + +.shippingTable { + border: 0; + padding: 0; + margin: 0; + width: max-content; +} +.shippingTable .shippingTableHead { + display: table-caption; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-areas: "entrega frete prazo"; + grid-template-columns: 1fr 1fr 1fr; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + color: #202020; + text-transform: uppercase; + padding: 0; + padding-bottom: 15px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + grid-area: entrega; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: prazo; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + grid-area: frete; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableBody { + display: table-cell; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-areas: "entrega frete prazo"; + grid-template-columns: 1fr 1fr 1fr; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0; + padding-bottom: 15px; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + grid-area: prazo; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 8b13789..e69de29 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1 +0,0 @@ - diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 6e64dba..fe5872e 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -23,3 +23,20 @@ .flexRowContent{ margin: 0; } + +.flexRowContent--container-quantity-and-buy-button{ + display: grid; + grid-template-columns: 128px 1fr; + gap: 10px; + margin-bottom: 16px; + + :global(.vtex-button){ + background-color: #000000; + border: 0; + border-radius: 0; + } +} + +.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){ + width: 100%; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..315dec8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,38 @@ +.quantitySelectorContainer{ + margin-top: 6px; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer{ + height: 49px; + margin: 0; + + :global(.vtex-numeric-stepper__input), :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){ + width: 100%; + height: 100%; + background: transparent; + border: 0; + } + + :global(.vtex-numeric-stepper-container){ + height: 49px; + border: 1px solid #CCCCCC; + } + + :global(.vtex-numeric-stepper__input){ + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } + + :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){ + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b70f851..02a70da 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -29,6 +29,10 @@ max-width: none; } +.skuSelectorNameContainer{ + margin: 0; +} + .productNameContainer{ text-align: right; font-weight: 300; @@ -36,3 +40,293 @@ line-height: 34px; color: #575757; } + + +.skuSelectorContainer{ + display: flex; + flex-direction: column-reverse; + + .skuSelectorSubcontainer--cor{ + .skuSelectorName { + font-size: 0; + &::after{ + content: "Outras cores"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + } + + .skuSelectorSubcontainer--tamanho{ + .skuSelectorName { + font-size: 0; + &::after{ + content: "Outros tamanhos:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + } + + + .skuSelectorSelectorImageValue{ + display: none; + } + + .skuSelectorOptionsList{ + display: flex; + gap: 16px; + margin: 0; + margin-bottom: 2px; + + .skuSelectorItem{ + margin: 0; + width: 40px; + height: 40px; + + .frameAround{ + border-color: #000000; + border-radius: 50%; + border-width: 2px; + z-index: 5; + + bottom: 0; + top: 0; + left: 0; + right: 0; + } + + .skuSelectorInternalBox{ + border: 1px solid #989898; + border-radius: 50%; + + .valueWrapper{ + padding: 0; + color: rgba(185, 185, 185, 0.6); + } + } + + } + + .skuSelectorItemImage{ + width: 48px; + height: 48px; + + .diagonalCross{ + background: #D5D5D5; + top: 48%; + left: 1%; + width: 46px; + height: 1px; + transform: rotate(-45deg); + } + } + + .skuSelectorItem--selected{ + .skuSelectorInternalBox{ + .valueWrapper{ + color: #000000; + } + } + } +} + +.diagonalCross{ + background: #D5D5D5; + top: 46%; + left: 1%; + width: 38px; + height: 1px; + transform: rotate(-45deg); +} +} + +.buyButtonText{ + font-size: 0; + &::after{ + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} + +.shippingContainer{ + width: 409px; + position: relative; + display: grid; + grid-template-areas: "label button notCep"; + grid-template-columns: 56.4792% max-content 1fr; + margin-bottom: 16px; + + :global(.vtex-input__label){ + font-size: 0; + &::after{ + content: "CALCULAR FRETE:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + + :global(.vtex-address-form__postalCode){ + padding: 0; + :global(.vtex-input){ + grid-area: label; + + :global(.vtex-input-prefix__group){ + :global(.vtex-address-form-4-x-input){ + padding: 0 16px; + &::placeholder{ + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + } + } + :global(.vtex-input__suffix){ + display: none; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL){ + grid-area: notCep; + position: absolute; + right: 0; + top: 43px; + padding: 0; + + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + + :last-child{ + color: #000000; + } + + :global(.vtex__icon-external-link){ + display: none; + } + } + + :global(.vtex-input-prefix__group){ + height: 49px; + border-radius: 0; + box-sizing: border-box; + } + } + + :global(.vtex-button){ + grid-area: button; + width: max-content; + height: max-content; + background-color: #000000; + margin-top: 27px; + margin-left: -2px; + border-radius: 0; + border: 0; + padding: 0; + + :global(.vtex-button__label){ + font-size: 0; + width: 49px; + height: 49px; + padding: 0; + &::after{ + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + } + } + } +} + +.shippingTable { + border: 0; + padding: 0; + margin: 0; + width: max-content; + + .shippingTableHead { + display: table-caption; + text-align: left; + + .shippingTableRow{ + display: grid; + grid-template-areas: "entrega frete prazo"; + grid-template-columns: 1fr 1fr 1fr; + .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice{ + font-weight: 400; + font-size: 14px; + color: #202020; + text-transform: uppercase; + + padding: 0; + padding-bottom: 15px; + } + + .shippingTableHeadDeliveryName{ + grid-area: entrega; + } + + .shippingTableHeadDeliveryEstimate{ + grid-area: prazo; + } + + .shippingTableHeadDeliveryPrice{ + grid-area: frete; + } + + .shippingTableHeadDeliveryPrice{ + font-size: 0; + &::after{ + content: "FRETE"; + font-weight: 400; + font-size: 14px; + color: #202020; + text-transform: uppercase; + } + } + } + + + } + + .shippingTableBody{ + display: table-cell; + + .shippingTableRow{ + display: grid; + grid-template-areas: "entrega frete prazo"; + grid-template-columns: 1fr 1fr 1fr; + + .shippingTableCell{ + padding: 0; + padding-bottom: 15px; + + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + + .shippingTableRadioBtn{ + display: none; + } + + .shippingTableCellDeliveryEstimate{ + grid-area: prazo; + } + } + } +}