From b1ebdf3c7ec7c3a4062632ce95cc45522102d2fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Mon, 30 Jan 2023 19:25:05 -0300 Subject: [PATCH] feat(pdp): Adiciona tablayout e newletter mobile --- react/{Pix.tsx => Pix.ts} | 0 react/components/Html/styles.css | 18 +++ react/components/Pix/Pix.module.css | 2 +- react/components/Pix/Pix.tsx | 2 +- store/blocks/pdp/product-tablayout.jsonc | 109 ++++++++++++++ store/blocks/pdp/product.jsonc | 142 ++---------------- styles/css/vtex.flex-layout.css | 16 +- styles/css/vtex.product-price.css | 12 ++ styles/css/vtex.product-summary.css | 8 +- styles/css/vtex.rich-text.css | 6 + styles/css/vtex.slider-layout.css | 21 +++ styles/css/vtex.store-components.css | 119 +++++++++++++-- styles/css/vtex.tab-layout.css | 27 ++++ .../sass/pages/product/vtex.flex-layout.scss | 12 +- .../pages/product/vtex.product-price.scss | 8 + .../pages/product/vtex.product-summary.scss | 6 +- styles/sass/pages/product/vtex.rich-text.scss | 4 + .../pages/product/vtex.slider-layout.scss | 15 ++ .../pages/product/vtex.store-components.scss | 105 ++++++++++--- .../sass/pages/product/vtex.tab-layout.scss | 23 ++- styles/sass/utils/_vars.scss | 1 + 21 files changed, 488 insertions(+), 168 deletions(-) rename react/{Pix.tsx => Pix.ts} (100%) create mode 100644 store/blocks/pdp/product-tablayout.jsonc diff --git a/react/Pix.tsx b/react/Pix.ts similarity index 100% rename from react/Pix.tsx rename to react/Pix.ts diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index fcb9543..c99d5dc 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -4,6 +4,12 @@ line-height: 19px; text-align: end; } +@media screen and (max-width: 1024px) { + [class*="html--codigo"] { + text-align: left; + margin-bottom: 24px; + } +} [class*="html--description-container"] { display: flex; @@ -11,10 +17,22 @@ margin-right: 32px; gap: 32px; } +@media screen and (max-width: 1024px) { + [class*="html--description-container"] { + flex-direction: column; + margin: 0; + gap: 16px; + } +} [class*="html--image-container"] { width: 49.82%; } +@media screen and (max-width: 1024px) { + [class*="html--image-container"] { + width: 100%; + } +} [class*="html--qtd-btn"] { display: flex; diff --git a/react/components/Pix/Pix.module.css b/react/components/Pix/Pix.module.css index b91551c..f28658b 100644 --- a/react/components/Pix/Pix.module.css +++ b/react/components/Pix/Pix.module.css @@ -11,7 +11,7 @@ } .price { - margin: 0; + margin: 0 0 -5px 0; font-weight: 700; font-size: 18px; line-height: 25px; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index fa4ef0d..2a87d86 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -3,7 +3,7 @@ import { useProduct } from "vtex.product-context"; import styles from "./Pix.module.css"; const Pix = () => { - if (typeof document !== undefined) { + if (typeof document !== "undefined") { const input = document.querySelector(".vtex-address-form-4-x-input"); input?.setAttribute("placeholder", "Digite seu CEP"); } diff --git a/store/blocks/pdp/product-tablayout.jsonc b/store/blocks/pdp/product-tablayout.jsonc new file mode 100644 index 0000000..6bdf545 --- /dev/null +++ b/store/blocks/pdp/product-tablayout.jsonc @@ -0,0 +1,109 @@ +{ + "tab-layout#details": { + "children": ["tab-list#details", "tab-content#details"], + "props": { + "blockClass": "details", + "defaultActiveTabId": "details1" + } + }, + "tab-list#details": { + "children": [ + "tab-list.item#details1", + "tab-list.item#details2", + "tab-list.item#details3", + "tab-list.item#details4", + "tab-list.item#details5" + ] + }, + "tab-list.item#details1": { + "props": { + "tabId": "details1", + "label": "Descrição", + "blockClass": "descricao", + "defaultActiveTab": true + } + }, + "tab-list.item#details2": { + "props": { + "tabId": "details2", + "label": "Descrição" + } + }, + "tab-list.item#details3": { + "props": { + "tabId": "details3", + "label": "Descrição" + } + }, + "tab-list.item#details4": { + "props": { + "tabId": "details4", + "label": "Descrição" + } + }, + "tab-list.item#details5": { + "props": { + "tabId": "details5", + "label": "Descrição" + } + }, + "tab-content#details": { + "children": [ + "tab-content.item#details1", + "tab-content.item#details2", + "tab-content.item#details3", + "tab-content.item#details4", + "tab-content.item#details5" + ] + }, + "tab-content.item#details1": { + "children": ["html#description"], + "props": { + "tabId": "details1" + } + }, + "tab-content.item#details2": { + "children": ["html#description"], + "props": { + "tabId": "details2" + } + }, + "tab-content.item#details3": { + "children": ["html#description"], + "props": { + "tabId": "details3" + } + }, + "tab-content.item#details4": { + "children": ["html#description"], + "props": { + "tabId": "details4" + } + }, + "tab-content.item#details5": { + "children": ["html#description"], + "props": { + "tabId": "details5" + } + }, + + "html#description": { + "props": { + "tag": "section", + "testId": "description", + "blockClass": "description-container" + }, + "children": ["html#description-image", "product-description"] + }, + "html#description-image": { + "props": { "blockClass": "image-container" }, + "children": ["product-images#description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "description-imagem" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 32a9a9c..817dd89 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -42,7 +42,7 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, /*"fullWidth": false,*/ @@ -50,114 +50,6 @@ } }, - "tab-layout#details": { - "children": ["tab-list#details", "tab-content#details"], - "props": { - "blockClass": "details", - "defaultActiveTabId": "details1" - } - }, - "tab-list#details": { - "children": [ - "tab-list.item#details1", - "tab-list.item#details2", - "tab-list.item#details3", - "tab-list.item#details4", - "tab-list.item#details5" - ] - }, - "tab-list.item#details1": { - "props": { - "tabId": "details1", - "label": "Descrição", - "blockClass": "descricao", - "defaultActiveTab": true - } - }, - "tab-list.item#details2": { - "props": { - "tabId": "details2", - "label": "Descrição" - } - }, - "tab-list.item#details3": { - "props": { - "tabId": "details3", - "label": "Descrição" - } - }, - "tab-list.item#details4": { - "props": { - "tabId": "details4", - "label": "Descrição" - } - }, - "tab-list.item#details5": { - "props": { - "tabId": "details5", - "label": "Descrição" - } - }, - "tab-content#details": { - "children": [ - "tab-content.item#details1", - "tab-content.item#details2", - "tab-content.item#details3", - "tab-content.item#details4", - "tab-content.item#details5" - ] - }, - "tab-content.item#details1": { - "children": ["html#description"], - "props": { - "tabId": "details1" - } - }, - "tab-content.item#details2": { - "children": ["html#description"], - "props": { - "tabId": "details2" - } - }, - "tab-content.item#details3": { - "children": ["html#description"], - "props": { - "tabId": "details3" - } - }, - "tab-content.item#details4": { - "children": ["html#description"], - "props": { - "tabId": "details4" - } - }, - "tab-content.item#details5": { - "children": ["html#description"], - "props": { - "tabId": "details5" - } - }, - - "html#description": { - "props": { - "tag": "section", - "testId": "description", - "blockClass": "description-container" - }, - "children": ["html#description-image", "product-description"] - }, - "html#description-image": { - "props": { "blockClass": "image-container" }, - "children": ["product-images#description"] - }, - "product-images#description": { - "props": { - "displayMode": "first-image", - "zoomMode": "disabled", - "blockClass": "description-imagem" - } - }, - "breadcrumb#pdp": { "props": { "blockClass": "testebread", @@ -165,14 +57,6 @@ } }, - /*"html#breadcrumb": { - "props": { - "tag": "section", - "testId": "breadcrumbs", - "blockClass": "pdp-breadcrumb" - }, - "children": ["breadcrumb"] - },*/ "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -198,14 +82,15 @@ "Else": "flex-layout.row#product-availability" } }, + "flex-layout.row#product-main": { "props": { - "colGap": 7, + /*"colGap": 7,*/ /*"rowGap": 7, "marginTop": 5, "marginBottom": 7, - "paddingBottom": 7*/ - "blockClass": "containerteste" + "paddingBottom": 7,*/ + "blockClass": "container-produto" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -233,8 +118,9 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "51%", - "rowGap": 0 + "width": "50%", + "rowGap": 0, + "blockClass": "stack-container" } }, "flex-layout.row#product-image": { @@ -247,11 +133,11 @@ "thumbnailAspectRatio": "1:1", "thumbnailMaxHeight": 90, "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, "aspectRatio": { - "desktop": "1:1", - "phone": "16:9" + "desktop": "auto" }, - "displayThumbnailsArrows": false + "blockClass": "images-container" } }, "flex-layout.col#right-col": { @@ -337,12 +223,12 @@ "flex-layout.row#product-availability": { "props": { - "colGap": 7, + /*"colGap": 7,*/ /*"rowGap": 7, "marginTop": 5, "marginBottom": 7, - "paddingBottom": 7*/ - "blockClass": "containerteste" + "paddingBottom": 7,*/ + "blockClass": "container-produto" }, "children": [ "flex-layout.col#stack", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index bdff5c4..ef5baf9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,6 +11,11 @@ .flexRowContent--name { text-align: end; } +@media screen and (max-width: 1024px) { + .flexRowContent--name { + text-align: left; + } +} .flexRowContent--preco { font-style: normal; @@ -21,7 +26,16 @@ margin: 0; } -.flexRow--containerteste { +.flexRow--container-produto { padding-left: 40px; padding-right: 40px; +} + +.flexRowContent--container-produto { + gap: 32px; +} +@media screen and (max-width: 1024px) { + .flexRowContent--container-produto { + display: block; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 8939bde..00361d0 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -31,6 +31,12 @@ color: #bababa; margin-bottom: 8px; } +@media screen and (max-width: 1024px) { + .listPrice--summary { + font-size: 12px; + line-height: 16px; + } +} .listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before { content: "de "; } @@ -43,4 +49,10 @@ font-size: 24px; line-height: 33px; color: #000000; +} +@media screen and (max-width: 1024px) { + .sellingPrice--summary { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 2c96590..bd4fa5d 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -11,7 +11,7 @@ text-align: center; padding-top: 8px; padding-bottom: 8px; - min-height: 66px; + /*min-height: 66px;*/ } .nameContainer .productBrand { font-weight: 400; @@ -19,6 +19,12 @@ line-height: 25px; color: #000000; } +@media screen and (max-width: 1024px) { + .nameContainer .productBrand { + font-size: 14px; + line-height: 19px; + } +} .spacer { display: none; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 765a2aa..4bcdad9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -17,4 +17,10 @@ font-size: 24px; line-height: 38px; color: #575757; +} +@media screen and (max-width: 768px) { + .container--title-prateleira .paragraph--title-prateleira { + font-size: 20px; + line-height: 38px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 3c4bc25..ab81519 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,6 +15,16 @@ .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { width: 97.1773%; } +@media screen and (max-width: 1024px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + width: 97.63%; + } +} +@media screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + width: 89.73%; + } +} .paginationDotsContainer--prateleira { align-items: center; @@ -36,10 +46,21 @@ margin-left: 8px; margin-bottom: 32px; } +@media screen and (max-width: 768px) { + .slide--prateleira { + margin-left: 4px; + margin-right: 4px; + } +} .sliderArrows--prateleira { margin: 14px; } +@media screen and (max-width: 1024px) { + .sliderArrows--prateleira { + margin: 28px; + } +} .sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) { max-width: unset !important; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 62158b1..92b9ecf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -47,6 +47,14 @@ width: 100%; } +.productImagesGallerySlide--images-container { + width: 100% !important; +} + +/* +.swiper-slide-active { + width: 100%; +}*/ /*:global(.vtex-store-components-3-x-productImageTag) { width: 664px; height: 664px; @@ -76,10 +84,10 @@ margin-left: -5px; } -.skuSelectorSubcontainer--tamanho .skuSelectorName { +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { font-size: 0; } -.skuSelectorSubcontainer--tamanho .skuSelectorName::after { +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { content: "OUTROS TAMANHOS"; font-style: normal; font-weight: 400; @@ -167,10 +175,20 @@ align-items: end; margin-top: 16px; } +@media screen and (max-width: 768px) { + .shippingContainer { + margin-bottom: 24px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) { position: relative; padding: 0; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: 100%; + } +} .shippingContainer :global(.vtex-input__error) { position: absolute; margin-top: 2px; @@ -195,6 +213,11 @@ .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) { width: 231px; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) { + width: 100%; + } +} .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators)::placeholder { font-weight: 400; font-size: 12px; @@ -212,6 +235,12 @@ align-items: center; text-decoration-line: underline; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + top: 76px; + right: -50px; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000000; } @@ -264,14 +293,14 @@ padding: 0; } .shippingTableHead .shippingTableHeadDeliveryName { - min-width: 110px; + width: 110px; } .shippingTableHead .shippingTableHeadDeliveryEstimate { order: 3; } .shippingTableHead .shippingTableHeadDeliveryPrice { display: flex; - min-width: 110px; + width: 110px; font-size: 0; } .shippingTableHead .shippingTableHeadDeliveryPrice::after { @@ -294,10 +323,10 @@ padding: 15px 4px 0 0; } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { - min-width: 110px; + width: 110px; } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { - min-width: 110px; + width: 110px; } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { order: 3; @@ -309,10 +338,21 @@ flex-direction: column; width: 49.82%; } +@media screen and (max-width: 1024px) { + .productDescriptionContainer--descricao { + width: 100%; + } +} .container--descricao { margin: 0; } +@media screen and (max-width: 1024px) { + .container--descricao { + border-bottom: 1px solid #bfbfbf; + padding-bottom: 16px; + } +} .productDescriptionTitle--descricao { font-weight: 400; @@ -321,6 +361,11 @@ color: #575757; margin-bottom: 8px; } +@media screen and (max-width: 1024px) { + .productDescriptionTitle--descricao { + font-size: 20px; + } +} .content--descricao { font-weight: 400; @@ -328,6 +373,12 @@ line-height: 22px; color: #929292; } +@media screen and (max-width: 1024px) { + .content--descricao { + font-size: 14px; + line-height: 19px; + } +} .subscriberContainer { position: relative; @@ -424,16 +475,29 @@ background-color: #000000; border-bottom: 1px solid #fff; } +@media screen and (max-width: 1024px) { + .newsletter--newsletter { + padding: 64px 16px 32px 16px; + } +} +@media screen and (max-width: 768px) { + .newsletter--newsletter { + margin-top: 32px; + } +} .container--newsletter { - /*width: 53.75%;*/ - width: 774px; + width: 53.75%; color: #fff; max-width: unset; } +@media screen and (max-width: 1024px) { + .container--newsletter { + width: 100%; + } +} .form--newsletter { - position: relative; max-width: unset; } .form--newsletter :global(.vtex-styleguide-9-x-noAppearance) { @@ -447,40 +511,69 @@ padding-bottom: 4px; align-items: flex-end; } +@media screen and (max-width: 1024px) { + .form--newsletter :global(.vtex-input-prefix__group) { + padding-left: 18px; + padding-bottom: 12px; + } +} .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) { font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } +@media screen and (max-width: 1024px) { + .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) { + font-size: 12px; + line-height: 16px; + } +} .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder { font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } +@media screen and (max-width: 1024px) { + .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder { + font-size: 12px; + line-height: 16px; + } +} .label--newsletter { font-weight: 400; font-size: 24px; line-height: 38px; color: #fff; + display: flex; + flex-direction: column; } .label--newsletter::after { content: "Receba ofertas e novidades por e-mail"; - position: absolute; - right: 234px; - top: 50px; + margin-top: 16px; font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } +@media screen and (max-width: 1024px) { + .label--newsletter::after { + font-size: 16px; + line-height: 22px; + } +} .inputGroup--newsletter { - margin-top: 40px; + margin-top: 16px; padding: 0; } +@media screen and (max-width: 768px) { + .inputGroup--newsletter { + display: flex; + } +} .buttonContainer--newsletter { margin: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 1ac50e0..010903c 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -19,6 +19,18 @@ justify-content: space-around; align-items: end; } +@media screen and (max-width: 1024px) { + .listContainer { + margin-top: 16px; + padding-bottom: 8px; + padding-top: 5px; + border-bottom: 1px solid #b9b9b9; + border-top: 1px solid #b9b9b9; + flex-direction: column; + align-items: initial; + margin-bottom: 16px; + } +} .listItem { background-color: transparent; @@ -47,10 +59,25 @@ .listItemActive { border-bottom: 2px solid #000000; } +.listItemActive :global(.vtex-button__label) { + color: #000000; + margin: 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .listItemActive { + border: none; + } +} .listItemActive--descricao { border-bottom: 2px solid #000000; } +@media screen and (max-width: 1024px) { + .listItemActive--descricao { + border: none; + } +} .listItemActive--descricao :global(.vtex-button) { border: none; border-radius: 0%; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 04b5380..35fdc7d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,6 +1,9 @@ /*NOME PRODUTO*/ .flexRowContent--name { text-align: end; + @media screen and (max-width: 1024px) { + text-align: left; + } } .flexRowContent--preco { @@ -12,7 +15,14 @@ margin: 0; } -.flexRow--containerteste { +.flexRow--container-produto { padding-left: 40px; padding-right: 40px; } + +.flexRowContent--container-produto { + gap: 32px; + @media screen and (max-width: 1024px) { + display: block; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index f905c46..3226561 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -25,6 +25,10 @@ line-height: 19px; color: $color-gray11; margin-bottom: 8px; + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } :global(.vtex-product-price-1-x-currencyCode--summary) { &::before { @@ -45,4 +49,8 @@ font-size: 24px; line-height: 33px; color: $color-black-100; + @media screen and (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 4186706..6897f05 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -2,13 +2,17 @@ text-align: center; padding-top: 8px; padding-bottom: 8px; - min-height: 66px; + /*min-height: 66px;*/ .productBrand { font-weight: 400; font-size: 18px; line-height: 25px; color: $color-black-100; + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 639c62d..0f3392e 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -8,5 +8,9 @@ font-size: 24px; line-height: 38px; color: $color-gray8; + @media screen and (max-width: 768px) { + font-size: 20px; + line-height: 38px; + } } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 6ee42df..68ec06e 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -5,6 +5,12 @@ .sliderTrackContainer--prateleira { width: 97.1773%; + @media screen and (max-width: 1024px) { + width: 97.63%; + } + @media screen and (max-width: 768px) { + width: 89.73%; + } } } @@ -32,10 +38,19 @@ margin-right: 8px; margin-left: 8px; margin-bottom: 32px; + + @media screen and (max-width: 768px) { + margin-left: 4px; + margin-right: 4px; + } } .sliderArrows--prateleira { margin: 14px; + + @media screen and (max-width: 1024px) { + margin: 28px; + } } .sliderLayoutContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c161231..41be173 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -37,6 +37,13 @@ .productImagesGallerySlide { width: 100%; } +.productImagesGallerySlide--images-container { + width: 100% !important; +} +/* +.swiper-slide-active { + width: 100%; +}*/ /*:global(.vtex-store-components-3-x-productImageTag) { width: 664px; @@ -71,16 +78,20 @@ } .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; + .skuSelectorNameContainer { + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; - &::after { - content: "OUTROS TAMANHOS"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: color-gray6; + &::after { + content: "OUTROS TAMANHOS"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: color-gray6; + } + } } } } @@ -184,10 +195,16 @@ display: flex; align-items: end; margin-top: 16px; + @media screen and (max-width: 768px) { + margin-bottom: 24px; + } :global(.vtex-address-form__postalCode) { position: relative; padding: 0; + @media screen and (max-width: 768px) { + width: 100%; + } } :global(.vtex-input__error) { @@ -217,6 +234,9 @@ :global(.vtex-address-form-4-x-hideDecorators) { width: 231px; + @media screen and (max-width: 768px) { + width: 100%; + } &::placeholder { font-weight: 400; @@ -237,6 +257,10 @@ display: flex; align-items: center; text-decoration-line: underline; + @media screen and (max-width: 768px) { + top: 76px; + right: -50px; + } :last-child { color: $color-black-100; @@ -300,7 +324,7 @@ } .shippingTableHeadDeliveryName { - min-width: 110px; + width: 110px; } .shippingTableHeadDeliveryEstimate { @@ -309,7 +333,7 @@ .shippingTableHeadDeliveryPrice { display: flex; - min-width: 110px; + width: 110px; font-size: 0; &::after { content: "FRETE"; @@ -336,11 +360,11 @@ } .shippingTableCellDeliveryName { - min-width: 110px; + width: 110px; } .shippingTableCellDeliveryPrice { - min-width: 110px; + width: 110px; } .shippingTableCellDeliveryEstimate { @@ -356,10 +380,18 @@ justify-content: left; flex-direction: column; width: 49.82%; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .container--descricao { margin: 0; + @media screen and (max-width: 1024px) { + border-bottom: 1px solid $color-gray9; + padding-bottom: 16px; + } } .productDescriptionTitle--descricao { font-weight: 400; @@ -367,12 +399,19 @@ line-height: 32px; color: $color-gray8; margin-bottom: 8px; + @media screen and (max-width: 1024px) { + font-size: 20px; + } } .content--descricao { font-weight: 400; font-size: 16px; line-height: 22px; color: $color-gray6; + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } } //PRODUTO INDISPONIVEL @@ -483,16 +522,23 @@ padding-bottom: 16px; background-color: $color-black-100; border-bottom: 1px solid $color-white; + @media screen and (max-width: 1024px) { + padding: 64px 16px 32px 16px; + } + @media screen and (max-width: 768px) { + margin-top: 32px; + } } .container--newsletter { - /*width: 53.75%;*/ - width: 774px; + width: 53.75%; color: $color-white; max-width: unset; + @media screen and (max-width: 1024px) { + width: 100%; + } } .form--newsletter { - position: relative; max-width: unset; :global(.vtex-styleguide-9-x-noAppearance) { @@ -506,18 +552,30 @@ border-radius: 0%; padding-bottom: 4px; align-items: flex-end; + @media screen and (max-width: 1024px) { + padding-left: 18px; + padding-bottom: 12px; + } :global(.vtex-styleguide-9-x-hideDecorators) { font-weight: 400; font-size: 18px; line-height: 25px; color: $color-gray6; + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } &::placeholder { font-weight: 400; font-size: 18px; line-height: 25px; color: $color-gray6; + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } } } } @@ -528,21 +586,28 @@ font-size: 24px; line-height: 38px; color: $color-white; + display: flex; + flex-direction: column; &::after { content: "Receba ofertas e novidades por e-mail"; - position: absolute; - right: 234px; - top: 50px; + margin-top: 16px; font-weight: 400; font-size: 18px; line-height: 25px; color: $color-gray6; + @media screen and (max-width: 1024px) { + font-size: 16px; + line-height: 22px; + } } } .inputGroup--newsletter { - margin-top: 40px; + margin-top: 16px; padding: 0; + @media screen and (max-width: 768px) { + display: flex; + } } .buttonContainer--newsletter { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index bfa2b87..e79f8e8 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -6,10 +6,20 @@ .listContainer { border-bottom: 1px solid $color-gray9; margin-bottom: 32px; - display: flex; justify-content: space-around; align-items: end; + + @media screen and (max-width: 1024px) { + margin-top: 16px; + padding-bottom: 8px; + padding-top: 5px; + border-bottom: 1px solid $color-gray12; + border-top: 1px solid $color-gray12; + flex-direction: column; + align-items: initial; + margin-bottom: 16px; + } } .listItem { @@ -41,10 +51,21 @@ .listItemActive { border-bottom: 2px solid $color-black-100; + :global(.vtex-button__label) { + color: $color-black-100; + margin: 0; + padding: 0; + } + @media screen and (max-width: 1024px) { + border: none; + } } .listItemActive--descricao { border-bottom: 2px solid $color-black-100; + @media screen and (max-width: 1024px) { + border: none; + } :global(.vtex-button) { border: none; border-radius: 0%; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 67cc4d0..2e8afbe 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,7 @@ $color-gray8: #575757; $color-gray9: #bfbfbf; $color-gray10: #868686; $color-gray11: #bababa; +$color-gray12: #b9b9b9; $color-blue: #4267b2;