feat: adiciona ultra wide

This commit is contained in:
Patrick Reis Santos 2023-02-10 23:55:20 -03:00
parent 26381655a9
commit 6e9c8561f2
10 changed files with 156 additions and 3 deletions

View File

@ -8,14 +8,27 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
@media (min-width: 1921px) {
.flexRow--product-container :global(.vtex-store-components-3-x-container) { .flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0; padding: 0;
} }
}
@media (min-width: 1921px) {
.flexRow--product-container .stretchChildrenWidth {
padding: 0;
}
}
.flexRowContent--product-container { .flexRowContent--product-container {
margin: 0; margin: 0;
padding: 16px 40px; padding: 16px 40px;
} }
@media (min-width: 1921px) {
.flexRowContent--product-container {
width: 1920px;
gap: 32px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRowContent--product-container { .flexRowContent--product-container {
flex-direction: column; flex-direction: column;

View File

@ -76,3 +76,8 @@
line-height: 33px; line-height: 33px;
color: #000000; color: #000000;
} }
@media (min-width: 1921px) {
.sellingPrice {
font-size: 25px;
}
}

View File

@ -12,6 +12,11 @@
width: 1300px; width: 1300px;
margin: auto; margin: auto;
} }
@media (min-width: 1921px) {
.sliderTrackContainer {
width: 1920px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.sliderTrackContainer { .sliderTrackContainer {
width: 944px; width: 944px;
@ -22,6 +27,22 @@
.sliderTrack--carousel { .sliderTrack--carousel {
padding: 0 28px; 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 { .paginationDotsContainer {
align-items: center; align-items: center;
@ -45,6 +66,11 @@
.sliderRightArrow--carousel { .sliderRightArrow--carousel {
right: 50px; right: 50px;
} }
@media (min-width: 1920px) {
.sliderRightArrow--carousel {
right: 0;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.sliderRightArrow--carousel { .sliderRightArrow--carousel {
right: 10px; right: 10px;
@ -63,6 +89,11 @@
.sliderLeftArrow--carousel { .sliderLeftArrow--carousel {
left: 50px; left: 50px;
} }
@media (min-width: 1920px) {
.sliderLeftArrow--carousel {
left: 0;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.sliderLeftArrow--carousel { .sliderLeftArrow--carousel {
left: 10px; left: 10px;
@ -86,3 +117,10 @@
padding: 0 6px; padding: 0 6px;
} }
} }
@media (min-width: 1920px) {
.sliderLayoutContainer {
width: 1920px;
margin: auto;
}
}

View File

@ -8,6 +8,13 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
@media (min-width: 1921px) {
:global(.vtex-store-components-3-x-container) {
margin: auto !important;
max-width: 1920px;
}
}
.productNameContainer--quickview { .productNameContainer--quickview {
text-align: right; text-align: right;
color: #575757; color: #575757;
@ -274,6 +281,11 @@
display: flex; display: flex;
} }
@media (min-width: 1921px) {
.productImagesGallerySlide {
width: 100% !important;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.productImagesGallerySlide { .productImagesGallerySlide {
width: 100% !important; width: 100% !important;

View File

@ -67,6 +67,12 @@
width: 632px; width: 632px;
height: 632px; height: 632px;
} }
@media (min-width: 1921px) {
.contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
width: 904px;
height: 904px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) { .contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
width: 100%; width: 100%;
@ -81,6 +87,12 @@
display: flex; display: flex;
gap: 120px; gap: 120px;
} }
@media (min-width: 1921px) {
.listContainer {
width: 1840px;
gap: 260px;
}
}
@media (max-width: 1360px) { @media (max-width: 1360px) {
.listContainer { .listContainer {
gap: 0; gap: 0;

View File

@ -1,12 +1,23 @@
.flexRow--product-container { .flexRow--product-container {
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
@media (min-width: 1921px) {
padding: 0; padding: 0;
} }
} }
.stretchChildrenWidth {
@media (min-width: 1921px) {
padding: 0;
}
}
}
.flexRowContent--product-container { .flexRowContent--product-container {
margin: 0; margin: 0;
padding: 16px 40px; padding: 16px 40px;
@media (min-width: 1921px) {
width: 1920px;
gap: 32px;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
flex-direction: column; flex-direction: column;

View File

@ -67,4 +67,8 @@
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
color: #000000; color: #000000;
@media (min-width: 1921px) {
font-size: 25px;
}
} }

View File

@ -3,6 +3,10 @@
width: 1300px; width: 1300px;
margin: auto; margin: auto;
@media (min-width: 1921px) {
width: 1920px;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 944px; width: 944px;
padding: 28px; padding: 28px;
@ -11,6 +15,24 @@
.sliderTrack--carousel { .sliderTrack--carousel {
padding: 0 28px; 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 { .paginationDotsContainer {
@ -34,6 +56,9 @@
.sliderRightArrow--carousel { .sliderRightArrow--carousel {
right: 50px; right: 50px;
@media (min-width: 1920px) {
right: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
right: 10px; right: 10px;
} }
@ -52,6 +77,10 @@
.sliderLeftArrow--carousel { .sliderLeftArrow--carousel {
left: 50px; left: 50px;
@media (min-width: 1920px) {
left: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
left: 10px; left: 10px;
} }
@ -74,3 +103,10 @@
padding: 0 6px; padding: 0 6px;
} }
} }
.sliderLayoutContainer {
@media (min-width: 1920px) {
width: 1920px;
margin: auto;
}
}

View File

@ -1,3 +1,10 @@
:global(.vtex-store-components-3-x-container) {
@media (min-width: 1921px) {
margin: auto !important;
max-width: 1920px;
}
}
.productNameContainer--quickview { .productNameContainer--quickview {
text-align: right; text-align: right;
color: #575757; color: #575757;
@ -265,6 +272,10 @@
} }
.productImagesGallerySlide { .productImagesGallerySlide {
@media (min-width: 1921px) {
width: 100% !important;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100% !important; width: 100% !important;
} }

View File

@ -53,6 +53,11 @@
width: 632px; width: 632px;
height: 632px; height: 632px;
@media (min-width: 1921px) {
width: 904px;
height: 904px;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100%; width: 100%;
height: auto; height: auto;
@ -67,6 +72,12 @@
margin: auto; margin: auto;
display: flex; display: flex;
gap: 120px; gap: 120px;
@media (min-width: 1921px) {
width: 1840px;
gap: 260px;
}
@media (max-width: 1360px) { @media (max-width: 1360px) {
gap: 0; gap: 0;
justify-content: space-around; justify-content: space-around;