diff --git a/manifest.json b/manifest.json index 9ee3cc5..6f9f3e2 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", @@ -66,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/ProductText.tsx b/react/ProductText.tsx new file mode 100644 index 0000000..2cd8e94 --- /dev/null +++ b/react/ProductText.tsx @@ -0,0 +1,59 @@ +import React, { useEffect } from "react"; +import { useProduct } from "vtex.product-context"; + +const ProductText = () => { + const productContextValue = useProduct(); + const pix = productContextValue?.product?.priceRange.sellingPrice.lowPrice; + const discount = (Number(pix) * 10) / 100; + const totalPix = Number(pix) - Number(discount.toFixed(2)); + + useEffect(() => { + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); + inputCep?.setAttribute("placeholder", "Digite seu CEP"); + }); + + const fetchApi = () => { + fetch("/api/checkout/pub/orderForms/simulation", { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + items: [ + { + id: productContextValue?.selectedItem?.itemId, + quantity: productContextValue?.selectedQuantity, + seller: productContextValue?.selectedItem?.sellers[0].sellerId, + }, + ], + country: "BRA", + }), + }) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + fetchApi(); + + return ( +
+
+
+ pix image +
+
+
+
+

R$ {totalPix.toFixed(2)}

+

10% de desconto

+
+
+
+ ); +}; +export default ProductText; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index 847f910..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..92e5f64 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,68 @@ +[class*="html--buy-button"] { + display: flex; +} + +@media (max-width: 375px) { + [class*="html--buy-button"] { + display: flex; + flex-direction: column; + } +} + +[class*="html--image-home"] { + display: block; +} + +@media (max-width: 2500px) { + [class*="html--image-home"] { + margin: 0 32px 0 0; + } +} + +[class*="html--container-description"] { + margin-top: 32px; + margin-bottom: 32px; +} + +@media (max-width: 1024px) { + [class*="html--container-description"] { + margin-left: 0; + } +} + +[class*="html--container-form-input"] { + position: relative; + width: 100%; +} + +@media (max-width: 375px) { + [class*="html--container-form-input"] { + width: 100%; + } +} + +[class*="html--pix-discount"] :global(.container-pixDiscount) { + display: flex; +} + +[class*="html--pix-discount"] :global(.container-imgPix) { + margin-left: 0; + margin-right: 26px; +} + +[class*="html--pix-discount"] :global(.price-discount) { + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 24px; + color: rgba(0, 0, 0, 0.58); + margin: 8px 0 0 0; +} + +[class*="html--pix-discount"] :global(.percent-discount) { + font-family: "Open Sans", sans-serif; + font-size: 13px; + line-height: 17px; + color: #929292; + margin-top: 0; +} diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index b9e7998..c10a486 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,41 +9,41 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { + display: flex; font-size: 14px; color: #929292; - margin: 0 15px; + margin: 0 40px; } .container .homeIcon { height: 0; + display: none; } -.container .homeLink::after { +.container .homeLink::before { content: "Home"; font-family: "Open sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; } -.container .arrow--1::after { +.container .link--1 { + font-size: 0; +} +.container .link--1::before { content: "Sapatos"; font-family: "Open sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; - margin-left: 7px; } -.container .link--1 { - display: none; +.container .link--2 { + font-size: 0; } -.container .arrow--2::after { +.container .link--2::before { content: "Sandália"; font-family: "Open sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; - margin-left: 7px; -} -.container .link--2 { - display: none; } .container .termArrow, .container .term { diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,9 @@ +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e8b1663..91419b8 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 @@ -7,10 +8,21 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media only screen and (max-width: 1023px) { + .container { + padding: 0; + margin: 0 40px; + } +} .container .productBrand { display: flex; justify-content: flex-end; } +@media only screen and (max-width: 1023px) { + .container .productBrand { + justify-content: flex-start; + } +} .container .productBrand--quickview { font-family: "Open Sans", sans-serif; font-weight: 300; @@ -19,8 +31,361 @@ margin-top: 0px; color: #575757; } - -.product-identifier__label, -.product-identifier__separator { +.container .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.container .skuSelectorContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorNameSeparator { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorTextContainer { display: none; +} +.container .skuSelectorContainer .skuSelectorOptionsList { + margin-top: 8px; + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.container .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; +} +.container .skuSelectorOptionsList .skuSelectorItem--selected { + color: #000; +} +.container .skuSelectorOptionsList .frameAround { + border-radius: 50%; + border-color: #000; + margin: 3px; +} +.container .skuSelectorOptionsList .skuSelectorItemTextValue { + max-width: 100%; + display: flex; + justify-content: center; + color: #000; +} +.container .skuSelectorOptionsList .diagonalCross { + margin: 4px; + background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%); +} +.container .skuSelectorOptionsList .skuSelectorInternalBox { + border-radius: 50%; +} +.container .skuSelectorOptionsList .skuSelectorInternalBox .valueWrapper { + color: #000; +} +@media only screen and (max-width: 767px) { + .container .carouselGaleryThumbs { + display: block; + } +} +.container .carouselGaleryThumbs .thumbImg { + border-radius: 8px; + width: 90px; + height: 90px; +} +.container .carouselGaleryThumbs .productImagesThumb { + height: 100% !important; + width: 90px !important; + margin-right: 16px; +} +.container .carouselGaleryThumbs .productImagesThumbCaret { + display: none; +} +.container .subscriberContainer .title { + font-size: 0; +} +.container .subscriberContainer .title::before { + content: "Produto indisponível"; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 700; + color: #868686; + line-height: 19px; +} +.container .subscriberContainer .subscribeLabel { + font-size: 0; +} +.container .subscriberContainer .subscribeLabel::before { + content: "Deseja saber quanto estiver disponível?"; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 400; + color: #868686; + line-height: 19px; +} +.container .form { + position: relative; +} +.container .form :global(.vtex-store-components-3-x-content) { + max-width: 100%; +} +.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + width: 100%; + background-color: #000; + border: 0; +} +.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + padding-top: 12px !important; + padding-bottom: 12px !important; +} +.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::before { + content: "AVISE-ME"; + font-family: "Open sans", sans-serif; + font-size: 18px; + color: #fff; + font-weight: 600; + line-height: 24px; +} +.container .form .content .inputEmail { + margin-right: 0; +} +.container .form .content .submit { + position: absolute; + top: 100%; + left: 0; + bottom: 0; + right: 0; + height: 100%; +} +.container .productImage .productImageTag--main { + max-height: 100% !important; +} +.container .productDescriptionContainer { + color: #929292; +} +.container .productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin: 0px 0 8px 40px; +} +@media only screen and (max-width: 1023px) { + .container .productDescriptionContainer .productDescriptionTitle { + margin-left: 0; + margin-top: 16px; + } +} +.container .productDescriptionContainer .productDescriptionText { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 21px; +} +.container .productDescriptionContainer .productDescriptionText .content { + margin-left: 40px; +} +@media only screen and (max-width: 1023px) { + .container .productDescriptionContainer .productDescriptionText .content { + margin-left: 0; + } +} + +.shippingContainer { + display: flex; +} +@media only screen and (max-width: 767px) { + .shippingContainer { + display: block; + position: relative; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; + margin-top: 16px; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + display: block; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + width: 100%; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + margin-top: 25px; + position: relative; + left: 32px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + left: 0; + margin-top: 8px; + text-align: end; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + height: 49px; + width: 49px; + margin-top: 27px; + position: relative; + right: 130px; + top: 16px; + font-size: 0; + border-radius: 0; + cursor: pointer; +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-button) { + position: absolute; + right: 0px; + top: 0px; + } +} +.shippingContainer :global(.vtex-button)::before { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.shippingTable { + border: none; + padding: 0; + margin: 15px 0; +} +.shippingTable .shippingTableHead { + display: block; + text-transform: uppercase; + margin-bottom: 15px; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + margin-right: 39px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000; +} +@media only screen and (max-width: 767px) { + .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + margin-right: 32px; + } +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; + margin-right: 30px; +} +@media only screen and (max-width: 767px) { + .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + margin-right: 32px; + } +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000; +} + +.shippingTableBody .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 82px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #bababa; +} +@media only screen and (max-width: 767px) { + .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + margin-right: 22px; + } +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #bababa; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 50px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #bababa; +} +.shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0 0 15px; +} +.shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +@media only screen and (max-width: 1023px) { + .imageElement { + width: 100%; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..b8d01bf --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,53 @@ +/* +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 */ +.container { + margin: 0 40px; +} +.container .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #bababa; +} +@media only screen and (max-width: 1023px) { + .container .listContainer { + display: flex; + flex-direction: column; + } +} +.container .listContainer .listItem { + margin: 0; + padding: 0; +} +.container .listContainer .listItem :global(.vtex-button) { + background-color: transparent; + border: none; + color: #bfbfbf; +} +.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 38px; + font-weight: 400; + text-transform: capitalize; +} +@media only screen and (max-width: 1023px) { + .container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding-left: 0; + } +} +.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { + color: #000; + border-bottom: 1px solid #000; +} +@media only screen and (max-width: 1023px) { + .container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { + border: 0 !important; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss deleted file mode 100644 index 649f9e6..0000000 --- a/styles/sass/pages/product/vtex.store-components.scss +++ /dev/null @@ -1,19 +0,0 @@ -.container { - .productBrand { - display: flex; - justify-content: flex-end; - } - .productBrand--quickview { - font-family: "Open Sans", sans-serif; - font-weight: 300; - font-size: 20px; - line-height: 34px; - margin-top: 0px; - color: #575757; - } -} - -.product-identifier__label, -.product-identifier__separator { - display: none; -} diff --git a/styles/sass/pages/slider/vtex.slider-layout.scss b/styles/sass/pages/slider/vtex.slider-layout.scss new file mode 100644 index 0000000..6fe9692 --- /dev/null +++ b/styles/sass/pages/slider/vtex.slider-layout.scss @@ -0,0 +1,19 @@ +.sliderLayoutContainer { + padding: 0 67px 36px 67px; + .slide--carousel { + margin-right: 16px; + } + .paginationDotsContainer { + .paginationDot--isActive { + background-color: $color-black; + } + } +} + +.sliderRightArrow { + margin-right: 25px; +} + +.sliderLeftArrow { + margin-left: 25px; +} diff --git a/styles/sass/pages/store/vtex.store-components.scss b/styles/sass/pages/store/vtex.store-components.scss new file mode 100644 index 0000000..5ba93fe --- /dev/null +++ b/styles/sass/pages/store/vtex.store-components.scss @@ -0,0 +1,406 @@ +.container { + @include mq(md, max) { + padding: 0; + margin: 0 40px; + } + .productBrand { + display: flex; + justify-content: flex-end; + @include mq(md, max) { + justify-content: flex-start; + } + } + + .productBrand--quickview { + font-family: "Open Sans", sans-serif; + font-weight: 300; + font-size: 20px; + line-height: 34px; + margin-top: 0px; + color: $color-gray7; + } + + .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .skuSelectorName { + font-size: 0; + } + + .skuSelectorNameSeparator { + font-size: 0; + } + + .skuSelectorSubcontainer--cor { + &::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray6; + } + } + + .skuSelectorSubcontainer--tamanho { + &::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray6; + } + } + + .skuSelectorTextContainer { + display: none; + } + + .skuSelectorOptionsList { + margin-top: 8px; + margin-left: 0; + } + + .skuSelectorSelectorImageValue { + font-size: 0; + } + } + + .skuSelectorOptionsList { + .skuSelectorItem { + width: 40px; + height: 40px; + } + .skuSelectorItem--selected { + color: $color-black; + } + + .frameAround { + border-radius: 50%; + border-color: $color-black; + margin: 3px; + } + + .skuSelectorItemTextValue { + max-width: 100%; + display: flex; + justify-content: center; + color: $color-black; + } + + .diagonalCross { + margin: 4px; + background-image: linear-gradient( + to top left, + transparent 44%, + rgba(0, 0, 0, 0.3) 48%, + currentColor 48%, + currentColor 52%, + transparent 52% + ); + } + + .skuSelectorInternalBox { + border-radius: 50%; + .valueWrapper { + color: $color-black; + } + } + } + + .carouselGaleryThumbs { + @include mq(sm, max) { + display: block; + } + .thumbImg { + border-radius: 8px; + width: 90px; + height: 90px; + } + .productImagesThumb { + height: 100% !important; + width: 90px !important; + margin-right: 16px; + } + + .productImagesThumbCaret { + display: none; + } + } + + .subscriberContainer { + .title { + font-size: 0; + &::before { + content: "Produto indisponível"; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 700; + color: $color-gray8; + line-height: 19px; + } + } + + .subscribeLabel { + font-size: 0; + &::before { + content: "Deseja saber quanto estiver disponível?"; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 400; + color: $color-gray8; + line-height: 19px; + } + } + } + .form { + position: relative; + :global(.vtex-store-components-3-x-content) { + max-width: 100%; + :global(.vtex-store-components-3-x-submit) { + :global(.vtex-button) { + width: 100%; + background-color: $color-black; + border: 0; + :global(.vtex-button__label) { + font-size: 0; + padding-top: 12px !important; + padding-bottom: 12px !important; + &::before { + content: "AVISE-ME"; + font-family: "Open sans", sans-serif; + font-size: 18px; + color: $color-white; + font-weight: 600; + line-height: 24px; + } + } + } + } + } + .content { + .inputEmail { + margin-right: 0; + } + .submit { + position: absolute; + top: 100%; + left: 0; + bottom: 0; + right: 0; + height: 100%; + } + } + } + + .productImage { + .productImageTag--main { + max-height: 100% !important; + } + } + .productDescriptionContainer { + color: $color-gray6; + .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin: 0px 0 8px 40px; + @include mq(md, max) { + margin-left: 0; + margin-top: 16px; + } + } + .productDescriptionText { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 21px; + .content { + margin-left: 40px; + @include mq(md, max) { + margin-left: 0; + } + } + } + } +} + +.shippingContainer { + display: flex; + @include mq(sm, max) { + display: block; + position: relative; + } + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; + margin-top: 16px; + @include mq(sm, max) { + display: block; + } + :global(.vtex-input__label) { + font-size: 0; + &::before { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + } + } + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + @include mq(sm, max) { + width: 100%; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + margin-top: 25px; + position: relative; + left: 32px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + @include mq(sm, max) { + left: 0; + margin-top: 8px; + text-align: end; + } + :last-child { + color: $color-black; + } + :global(.vtex__icon-external-link) { + display: none; + } + } + } + :global(.vtex-button) { + height: 49px; + width: 49px; + margin-top: 27px; + position: relative; + right: 130px; + top: 16px; + font-size: 0; + border-radius: 0; + cursor: pointer; + + @include mq(sm, max) { + position: absolute; + right: 0px; + top: 0px; + } + &::before { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $color-white; + } + } +} +.shippingTable { + border: none; + padding: 0; + margin: 15px 0; + .shippingTableHead { + display: block; + text-transform: uppercase; + margin-bottom: 15px; + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableHeadDeliveryName { + margin-right: 39px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + @include mq(sm, max) { + margin-right: 32px; + } + } + + .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + } + + .shippingTableHeadDeliveryPrice { + font-size: 0; + margin-right: 30px; + @include mq(sm, max) { + margin-right: 32px; + } + &::before { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + } + } + } + } +} +.shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableCellDeliveryName { + width: 82px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + @include mq(sm, max) { + margin-right: 22px; + } + } + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + } + + .shippingTableCellDeliveryPrice { + width: 50px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + } + .shippingTableCell { + padding: 0 0 15px; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } +} + +.imageElement { + @include mq(md, max) { + width: 100%; + } +}