From 6e9c8561f2d9afdd0a4401af931bd91a9a7756f6 Mon Sep 17 00:00:00 2001 From: Patrick Date: Fri, 10 Feb 2023 23:55:20 -0300 Subject: [PATCH] feat: adiciona ultra wide --- styles/css/vtex.flex-layout.css | 17 ++++++++- styles/css/vtex.product-price.css | 5 +++ styles/css/vtex.slider-layout.css | 38 +++++++++++++++++++ styles/css/vtex.store-components.css | 12 ++++++ styles/css/vtex.tab-layout.css | 12 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 13 ++++++- .../pages/product/vtex.product-price.scss | 4 ++ .../pages/product/vtex.slider-layout.scss | 36 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 11 ++++++ .../sass/pages/product/vtex.tab-layout.scss | 11 ++++++ 10 files changed, 156 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index beae004..ff6abb2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,14 +8,27 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.flexRow--product-container :global(.vtex-store-components-3-x-container) { - padding: 0; +@media (min-width: 1921px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0; + } +} +@media (min-width: 1921px) { + .flexRow--product-container .stretchChildrenWidth { + padding: 0; + } } .flexRowContent--product-container { margin: 0; padding: 16px 40px; } +@media (min-width: 1921px) { + .flexRowContent--product-container { + width: 1920px; + gap: 32px; + } +} @media (max-width: 1024px) { .flexRowContent--product-container { flex-direction: column; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 3f1fda2..1d48bfa 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -75,4 +75,9 @@ font-size: 24px; line-height: 33px; color: #000000; +} +@media (min-width: 1921px) { + .sellingPrice { + font-size: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 8dd384b..a84512f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,6 +12,11 @@ width: 1300px; margin: auto; } +@media (min-width: 1921px) { + .sliderTrackContainer { + width: 1920px; + } +} @media (max-width: 1024px) { .sliderTrackContainer { width: 944px; @@ -22,6 +27,22 @@ .sliderTrack--carousel { padding: 0 28px; } +@media (min-width: 1921px) { + .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) { + max-width: 434px !important; + height: 543px !important; + } +} +@media (min-width: 1921px) { + .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-imageContainer) { + width: 100%; + height: 434px; + } + .sliderTrack--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + width: 100% !important; + max-height: 434px !important; + } +} .paginationDotsContainer { align-items: center; @@ -45,6 +66,11 @@ .sliderRightArrow--carousel { right: 50px; } +@media (min-width: 1920px) { + .sliderRightArrow--carousel { + right: 0; + } +} @media (max-width: 768px) { .sliderRightArrow--carousel { right: 10px; @@ -63,6 +89,11 @@ .sliderLeftArrow--carousel { left: 50px; } +@media (min-width: 1920px) { + .sliderLeftArrow--carousel { + left: 0; + } +} @media (max-width: 768px) { .sliderLeftArrow--carousel { left: 10px; @@ -85,4 +116,11 @@ .slide--carousel { padding: 0 6px; } +} + +@media (min-width: 1920px) { + .sliderLayoutContainer { + width: 1920px; + margin: auto; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5a2b343..9a17123 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,13 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media (min-width: 1921px) { + :global(.vtex-store-components-3-x-container) { + margin: auto !important; + max-width: 1920px; + } +} + .productNameContainer--quickview { text-align: right; color: #575757; @@ -274,6 +281,11 @@ display: flex; } +@media (min-width: 1921px) { + .productImagesGallerySlide { + width: 100% !important; + } +} @media (max-width: 1024px) { .productImagesGallerySlide { width: 100% !important; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0bda497..a9d9a0e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -67,6 +67,12 @@ width: 632px; height: 632px; } +@media (min-width: 1921px) { + .contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) { + width: 904px; + height: 904px; + } +} @media (max-width: 1024px) { .contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) { width: 100%; @@ -81,6 +87,12 @@ display: flex; gap: 120px; } +@media (min-width: 1921px) { + .listContainer { + width: 1840px; + gap: 260px; + } +} @media (max-width: 1360px) { .listContainer { gap: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f084e95..e5d87e4 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,12 +1,23 @@ .flexRow--product-container { :global(.vtex-store-components-3-x-container) { - padding: 0; + @media (min-width: 1921px) { + padding: 0; + } + } + .stretchChildrenWidth { + @media (min-width: 1921px) { + padding: 0; + } } } .flexRowContent--product-container { margin: 0; padding: 16px 40px; + @media (min-width: 1921px) { + width: 1920px; + gap: 32px; + } @media (max-width: 1024px) { flex-direction: column; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index c9b23e5..7049fcd 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -67,4 +67,8 @@ font-size: 24px; line-height: 33px; color: #000000; + + @media (min-width: 1921px) { + font-size: 25px; + } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 4bad053..b1dfbba 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -3,6 +3,10 @@ width: 1300px; margin: auto; + @media (min-width: 1921px) { + width: 1920px; + } + @media (max-width: 1024px) { width: 944px; padding: 28px; @@ -11,6 +15,24 @@ .sliderTrack--carousel { padding: 0 28px; + + :global(.vtex-product-summary-2-x-containerNormal) { + @media (min-width: 1921px) { + max-width: 434px !important; + height: 543px !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + @media (min-width: 1921px) { + width: 100%; + height: 434px; + + :global(.vtex-product-summary-2-x-imageNormal) { + width: 100% !important; + max-height: 434px !important; + } + } + } + } } .paginationDotsContainer { @@ -34,6 +56,9 @@ .sliderRightArrow--carousel { right: 50px; + @media (min-width: 1920px) { + right: 0; + } @media (max-width: 768px) { right: 10px; } @@ -52,6 +77,10 @@ .sliderLeftArrow--carousel { left: 50px; + + @media (min-width: 1920px) { + left: 0; + } @media (max-width: 768px) { left: 10px; } @@ -74,3 +103,10 @@ padding: 0 6px; } } + +.sliderLayoutContainer { + @media (min-width: 1920px) { + width: 1920px; + margin: auto; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3f8c6b5..eaf0f97 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,10 @@ +:global(.vtex-store-components-3-x-container) { + @media (min-width: 1921px) { + margin: auto !important; + max-width: 1920px; + } +} + .productNameContainer--quickview { text-align: right; color: #575757; @@ -265,6 +272,10 @@ } .productImagesGallerySlide { + @media (min-width: 1921px) { + width: 100% !important; + } + @media (max-width: 1024px) { width: 100% !important; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index ed723a1..74f0363 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -53,6 +53,11 @@ width: 632px; height: 632px; + @media (min-width: 1921px) { + width: 904px; + height: 904px; + } + @media (max-width: 1024px) { width: 100%; height: auto; @@ -67,6 +72,12 @@ margin: auto; display: flex; gap: 120px; + + @media (min-width: 1921px) { + width: 1840px; + gap: 260px; + } + @media (max-width: 1360px) { gap: 0; justify-content: space-around;