diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1706b60..ca093e9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -316,7 +316,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" }, "children": [] diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fd74ea1..6ca4d50 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -48,4 +48,8 @@ display: flex; flex-direction: column; } + .flexRowContent .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 128134d..0b08252 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -29,4 +29,10 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .product-identifier--productReference { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 72afeb0..20531bb 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,8 +15,21 @@ } }*/ .sliderLayoutContainer { - width: 95%; + width: 100%; padding: 0 16px 0 16px; display: flex; justify-content: center; +} +.sliderLayoutContainer .paginationDot { + background: black; +} +.sliderLayoutContainer .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background: white; + border: 0.5px solid black; +} +.sliderLayoutContainer .paginationDotsContainer { + display: flex; + align-items: center; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f9bd86b..3141e90 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,24 +10,23 @@ /* Grid breakpoints */ .container { max-width: 100%; - margin: 0 40px 0 40px !important; + padding: 0 40px 0 40px; } .productImageTag { max-height: none !important; } -/* -.productImagesGallerySlide { - .productImageTag { - width: 800px; - } -} -*/ .productImagesThumb { + width: 100%; + max-width: 90px; margin-right: 16px; } +.thumbImg { + height: 90px; +} + .productBrand { display: flex; justify-content: flex-end; @@ -270,6 +269,10 @@ line-height: 22px; color: #929292; } +.productDescriptionContainer .productDescriptionText .container { + margin: 0 0 0 0 !important; + padding: 0 0 0 0 !important; +} .newsletter { background: black; @@ -376,4 +379,10 @@ display: flex; flex-direction: column; } + .productBrand { + justify-content: flex-start; + } + .product-identifier--productReference { + justify-content: none; + } } \ 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 cf13ac1..9bb0e4a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -41,5 +41,9 @@ .flexRowContent { display: flex; flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index fec8794..619122b 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -17,3 +17,8 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index a233b64..565499c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -5,10 +5,23 @@ } }*/ .sliderLayoutContainer { - width: 95%; + width: 100%; padding: 0 16px 0 16px; display: flex; justify-content: center; + .paginationDot { + background: black; + } + .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background: white; + border: 0.5px solid black; + } + .paginationDotsContainer { + display: flex; + align-items: center; + } } @media screen and (max-width: 1024px) and (min-width: 768px) { } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ddb4e2b..25c7ca1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,21 +1,19 @@ .container { max-width: 100%; - margin: 0 40px 0 40px !important; + padding: 0 40px 0 40px; } .productImageTag { max-height: none !important; } -/* -.productImagesGallerySlide { - .productImageTag { - width: 800px; - } -} -*/ .productImagesThumb { + width: 100%; + max-width: 90px; margin-right: 16px; } +.thumbImg { + height: 90px; +} .productBrand { display: flex; @@ -257,6 +255,10 @@ color: #575757; } .productDescriptionText { + .container { + margin: 0 0 0 0 !important; + padding: 0 0 0 0 !important; + } font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -369,4 +371,10 @@ display: flex; flex-direction: column; } + .productBrand { + justify-content: flex-start; + } + .product-identifier--productReference { + justify-content: none; + } }