From 0415e4e9c7230845bc4e7bf70deb8f592c30b71f Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 7 Feb 2023 10:52:20 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20scss=20prateleira=20sujest=C3=B5es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/style.css | 4 +-- store/blocks/pdp/product.jsonc | 27 ++++++++++++-- styles/css/vtex.flex-layout.css | 3 ++ styles/css/vtex.slider-layout.css | 33 +++++++++-------- styles/css/vtex.store-components.css | 4 +++ .../sass/pages/product/vtex.flex-layout.scss | 4 +++ .../pages/product/vtex.slider-layout.scss | 35 ++++++++++--------- .../pages/product/vtex.store-components.scss | 2 ++ .../sass/pages/product/vtex.tab-layout.scss | 1 - 9 files changed, 74 insertions(+), 39 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 003005c..93d430b 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,11 +1,11 @@ -[class*='html'] { +[class*='html--Quantity-Button'] { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } -[class*='html'] > [class*='button'] { +[class*='html--Quantity-Button'] > [class*='button'] { width: 100%; height: 49px; background: #000; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8d282b1..d5e78fa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -58,7 +58,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-images", "product-bookmark", "product-specification-badges" ] @@ -81,9 +81,13 @@ } }, - "flex-layout.row#product-image": { + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { @@ -118,6 +122,12 @@ ] }, + "shipping-simulator": { + "props": { + "testId": "shipping-simulator" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -145,6 +155,9 @@ } }, "html#quantityAndButton": { + "props": { + "blockClass": "Quantity-Button" + }, "children": ["product-quantity", "add-to-cart-button"] }, @@ -322,6 +335,14 @@ ] }, + "product-summary-image": { + "props": { + "aspectRatio": { + "desktop": "1:1" + } + } + }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { @@ -330,7 +351,7 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 2501f7c..ab2cb17 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -20,6 +20,9 @@ .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; } +.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; +} .flexRowContent { margin-bottom: 0; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 7216b8c..03890a2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -8,19 +8,28 @@ /* Media Query M3 */ /* Grid breakpoints */ .sliderLayoutContainer { - padding: 16px 40px 113px; + padding: 0 40px 32px; + margin-bottom: 32px; +} +.sliderLayoutContainer .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; +} +.sliderLayoutContainer .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; } .sliderLayoutContainer .sliderTrackContainer { - padding: 0 40px 36px; + margin: 0 auto; + width: 94%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack { - width: 450% !important; gap: 16px; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { margin: 0; - width: 100%; - max-width: none !important; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { padding: 0; @@ -28,22 +37,13 @@ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { display: flex; order: 1; - width: fit-content; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) { - background-color: #ededed; -} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { - width: fit-content; - min-width: 314.4px; - height: fit-content; - min-height: 314.4px; - max-height: 314.4px; - border-radius: 0; - background-color: #ededed; + width: 100%; + height: 100%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { display: flex; @@ -138,7 +138,6 @@ } .sliderLayoutContainer .paginationDotsContainer { align-items: center; - bottom: 113px; } .sliderLayoutContainer .paginationDotsContainer .paginationDot { width: 10px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6b60e6b..a0989dd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,8 +9,12 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { + margin-top: 32px; background: black; } +.newsletter .container { + padding: 32px 0 16px 0; +} .newsletter .container .form .label { font-size: 0; display: flex; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 617257b..4fe41e9 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -15,6 +15,10 @@ :global(.vtex-store-components-3-x-container) { padding: 0 32px; } + + .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; + } } .flexRowContent { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 36c3bb6..4efa614 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,42 +1,45 @@ .sliderLayoutContainer { - padding: 16px 40px 113px; + padding: 0 40px 32px; + margin-bottom: 32px; + + .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; + } + + .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; + } .sliderTrackContainer { - padding: 0 40px 36px; + margin: 0 auto; + width: 94%; .sliderTrack { - width: 450% !important; gap: 16px; .slide { .slideChildrenContainer { :global(.vtex-product-summary-2-x-container) { margin: 0; - width: 100%; - max-width: none !important; :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; order: 1; - width: fit-content; :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; } :global(.vtex-product-summary-2-x-imageContainer) { - background-color: #ededed; - :global(.vtex-product-summary-2-x-imageNormal) { - width: fit-content; - min-width: 314.4px; - height: fit-content; - min-height: 314.4px; - max-height: 314.4px; - border-radius: 0; - background-color: #ededed; + width: 100%; + height: 100%; } } } @@ -149,7 +152,7 @@ } .paginationDotsContainer { align-items: center; - bottom: 113px; + // bottom: -32px; .paginationDot { width: 10px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2d51094..c478808 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,8 @@ .newsletter { + margin-top: 32px; background: black; .container { + padding: 32px 0 16px 0; .form { .label { font-size: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 558055b..a1f9c43 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -4,7 +4,6 @@ flex-direction: row; justify-content: space-around; padding: 0 40px; - // column-gap: 197.5px; &::after { content: '';