From a08f527d28e4cf45f9bd1ae481cf7a3165973223 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 2 Feb 2023 15:43:33 -0300 Subject: [PATCH] feat: adiciona css 375px --- react/components/Html/styles.css | 22 +++++++- store/blocks/pdp/product-description.jsonc | 5 ++ store/blocks/pdp/product.jsonc | 10 ++-- styles/css/vtex.flex-layout.css | 20 +++++++- styles/css/vtex.product-summary.css | 27 +++++++++- styles/css/vtex.slider-layout.css | 22 ++++++++ styles/css/vtex.store-components.css | 48 +++++++++++++---- .../sass/pages/product/vtex.flex-layout.scss | 36 +++++++++---- .../pages/product/vtex.product-summary.scss | 30 ++++++++++- .../pages/product/vtex.slider-layout.scss | 25 +++++++++ .../pages/product/vtex.store-components.scss | 51 +++++++++++++++---- 11 files changed, 255 insertions(+), 41 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 0131dd6..3f4a754 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -25,6 +25,24 @@ padding: 0 40px; } -[class*="html--descriptionText"] { - width: 100%; +@media (max-width: 1024px) { + [class*="html--buy-button"] { + margin-bottom: 16px; + } + + [class*="html--descriptionText"] { + width: 100%; + } +} + +@media (max-width: 463px) { + [class*="html--buy-button"] { + flex-direction: column; + gap: 0; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 74px; + padding: 0 64px; + } } diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc index ee7f091..320ddf3 100644 --- a/store/blocks/pdp/product-description.jsonc +++ b/store/blocks/pdp/product-description.jsonc @@ -112,5 +112,10 @@ "displayMode": "first-image", "zoomMode": "disabled" } + }, + "product-description": { + "props": { + "collapseContent": false + } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0d802e0..f24a6f2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -252,11 +252,11 @@ ] }, - "product-summary-image": { - "props": { - "showBadge": false - } - }, + // "product-summary-image": { + // "props": { + // "showBadge": false + // } + // }, "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d48d387..8b17523 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -114,11 +114,29 @@ padding-bottom: 1rem; } +.flexRowContent { + gap: 32px; +} + .flexRowContent--product-container { - width: 94.973%; + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; +} +.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth { + padding: 0; } @media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } .flexRowContent--product-container { width: 100%; } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index e8bf9af..093e0b5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,20 +9,45 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .imageWrapper { - height: 314px; display: flex; justify-content: center; align-items: center; } +.image { + width: 314.4px; + height: 314.4px; +} + .brandName { font-style: normal; font-weight: 400; + font-size: 18px; line-height: 25px; text-align: center; color: #000000; } +.nameContainer { + padding: 16px 0 0 0; +} + .containerNormal { max-width: 314px !important; +} + +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + .image { + width: 291.2px; + height: 291.2px; + } +} +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index cc09d05..815dddb 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -27,6 +27,11 @@ background: transparent; } +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + .sliderLayoutContainer--shelf { padding-left: 40px !important; padding-right: 40px !important; @@ -54,4 +59,21 @@ .sliderRightArrow--shelf::before { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); +} + +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } +} +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + .sliderRightArrow--shelf { + margin-right: 0; + } + .sliderTrack--shelf { + gap: 8px !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2d3b657..d8af38a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,11 +13,6 @@ background: red; } -.container { - display: flex; - justify-content: center; -} - .productBrand--quickview { display: flex; justify-content: end; @@ -30,6 +25,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 150%; display: block; } @@ -195,6 +191,7 @@ .shippingTableRow { position: relative; + width: 100%; } .shippingTableHeadDeliveryName { @@ -215,7 +212,7 @@ font-size: 0; position: absolute; top: 5%; - left: 342%; + left: 61%; } .shippingTableHeadDeliveryEstimate::after { @@ -232,7 +229,7 @@ font-size: 0; position: absolute; top: 5%; - left: 198%; + left: 36%; } .shippingTableHeadDeliveryPrice::after { @@ -263,7 +260,7 @@ .shippingTableCellDeliveryEstimate { position: absolute; - left: 62%; + left: 61%; } .shippingTableCellDeliveryPrice { @@ -275,6 +272,10 @@ margin: 0; } +.skuSelectorNameContainer { + margin-bottom: 0; +} + :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; @@ -352,6 +353,10 @@ color: #fff; } +.inputGroup--pageProduct { + display: flex; +} + .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -363,6 +368,10 @@ padding: 0; } +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + .subscriberContainer { margin-top: 43px; } @@ -464,14 +473,19 @@ width: 100% !important; } +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + @media (max-width: 1024px) { - .container { - padding: 0 40px; - } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .price_sellingPrice { + font-size: 18px; + } .container--pageProduct { width: 96%; } @@ -479,4 +493,16 @@ width: 100%; max-width: 100%; } +} +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index cbdd8db..79d8d4e 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -106,20 +106,38 @@ padding-bottom: 1rem; } +.flexRowContent { + gap: 32px; +} + .flexRowContent--product-container { - width: 94.973%; + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; + + .stretchChildrenWidth { + padding: 0; + } } @media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } .flexRowContent--product-container { width: 100%; - .flexRowContent { - flex-direction: column; - } - - .stretchChildrenWidth { - width: 100% !important; - padding: 0; - } + } + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 0; } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 8fd4851..8218452 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,18 +1,46 @@ .imageWrapper { - height: 314px; + // height: 245px; display: flex; justify-content: center; align-items: center; } +.image { + width: 314.4px; + height: 314.4px; +} + .brandName { font-style: normal; font-weight: 400; + font-size: 18px; line-height: 25px; text-align: center; color: $color-black; } +.nameContainer { + padding: 16px 0 0 0; +} + .containerNormal { max-width: 314px !important; } + +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + + .image { + width: 291.2px; + height: 291.2px; + } +} + +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 9019e7c..9e3e4e1 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -17,6 +17,11 @@ background: transparent; } +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + .sliderLayoutContainer--shelf { padding-left: 40px !important; padding-right: 40px !important; @@ -47,3 +52,23 @@ content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } } + +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } +} + +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + + .sliderRightArrow--shelf { + margin-right: 0; + } + + .sliderTrack--shelf { + gap: 8px !important; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0c2f72c..eeee669 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,11 +2,6 @@ background: red; } -.container { - display: flex; - justify-content: center; -} - .productBrand--quickview { display: flex; justify-content: end; @@ -19,6 +14,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 150%; display: block; } @@ -190,6 +186,7 @@ .shippingTableRow { position: relative; + width: 100%; } .shippingTableHeadDeliveryName { @@ -210,7 +207,7 @@ font-size: 0; position: absolute; top: 5%; - left: 342%; + left: 61%; } .shippingTableHeadDeliveryEstimate::after { @@ -227,7 +224,7 @@ font-size: 0; position: absolute; top: 5%; - left: 198%; + left: 36%; } .shippingTableHeadDeliveryPrice::after { @@ -258,7 +255,7 @@ .shippingTableCellDeliveryEstimate { position: absolute; - left: 62%; + left: 61%; } .shippingTableCellDeliveryPrice { @@ -270,6 +267,10 @@ margin: 0; } +.skuSelectorNameContainer { + margin-bottom: 0; +} + :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; @@ -347,6 +348,10 @@ color: $color-white; } +.inputGroup--pageProduct { + display: flex; +} + .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -358,6 +363,10 @@ padding: 0; } +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + .subscriberContainer { margin-top: 43px; @@ -476,15 +485,21 @@ width: 100% !important; } +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + @media (max-width: 1024px) { - .container { - padding: 0 40px; - } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .price_sellingPrice { + font-size: 18px; + } + .container--pageProduct { width: 96%; } @@ -496,3 +511,17 @@ } } } + +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } +} -- 2.34.1