PatrickReisSantos/challenge-vtex-io-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona ultra wide

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/css/vtex.flex-layout.css
View File

@ -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;

5
styles/css/vtex.product-price.css
View File

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

38
styles/css/vtex.slider-layout.css
View File

@ -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;
}
}

12
styles/css/vtex.store-components.css
View File

@ -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;

12
styles/css/vtex.tab-layout.css
View File

@ -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;

13
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -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;

4
styles/sass/pages/product/vtex.product-price.scss
View File

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

36
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -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;
}
}

11
styles/sass/pages/product/vtex.store-components.scss
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 {
text-align: right;
color: #575757;
@ -265,6 +272,10 @@
}
.productImagesGallerySlide {
@media (min-width: 1921px) {
width: 100% !important;
}
@media (max-width: 1024px) {
width: 100% !important;
}

11
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -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;