anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 93 commits from feature/challenge-vtex-io into develop 2023-02-03 17:14:03 +00:00
Conversation 0 Commits 93 Files Changed 68 +31 -91
2 changed files with 31 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d79ba8ead0 - Show all commits

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

@ -7,18 +7,21 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.carouselContainer {
display: flex;
flex-direction: column-reverse;
width: 97.064%;
height: 770px;
}
.carouselGaleryThumbs { .carouselGaleryThumbs {
position: relative; margin-top: 16px;
display: flex; }
flex-direction: row; .carouselGaleryThumbs .productImagesThumb {
width: 13.554% !important; width: 10% !important;
height: 10% !important;
margin-right: 16px;
width: 90px !important;
height: 90px !important;
}
.carouselGaleryThumbs .productImagesThumb .figure,
.carouselGaleryThumbs .productImagesThumb .thumbImg {
width: 100%;
height: 100%;
border-radius: 8px;
} }
.carouselGaleryCursor { .carouselGaleryCursor {
@ -31,42 +34,9 @@
display: none; display: none;
} }
.productImagesGallerySlide {
width: 100% !important;
}
.swiper-component {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: visible;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper-style {
column-gap: 16px;
}
.productImageTag {
object-fit: cover;
}
.productImageTag--main { .productImageTag--main {
width: 664px;
object-fit: unset !important; object-fit: unset !important;
max-height: 664px !important; max-height: 664px !important;
height: 664px; height: 664px;
} }
.productImagesThumb {
margin: 16px 0 0;
}
.thumbImg,
.thumbImg--video,
.figure,
.figure--video {
height: 100%;
border-radius: 8px;
}

62
styles/sass/pages/product/store-components/vtex.store-components.scss
View File

@ -1,19 +1,22 @@
//product-image //product-image
.carouselContainer {
display: flex;
flex-direction: column-reverse;
width: 97.064%;
height: 770px;
}
.carouselGaleryThumbs { .carouselGaleryThumbs {
position: relative; margin-top: 16px;
display: flex; .productImagesThumb {
flex-direction: row; width: 10% !important;
width: 13.554% !important; height: 10% !important;
} margin-right: 16px;
width: 90px !important;
height: 90px !important;
.figure,
.thumbImg {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
.carouselGaleryCursor { .carouselGaleryCursor {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -24,42 +27,9 @@
display: none; display: none;
} }
.productImagesGallerySlide {
width: 100% !important;
}
.swiper-component {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: visible;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper-style {
column-gap: 16px;
}
.productImageTag {
object-fit: cover;
}
.productImageTag--main { .productImageTag--main {
width: 664px;
object-fit: unset !important; object-fit: unset !important;
max-height: 664px !important; max-height: 664px !important;
height: 664px; height: 664px;
} }
.productImagesThumb {
margin: 16px 0 0;
}
.thumbImg,
.thumbImg--video,
.figure,
.figure--video {
height: 100%;
border-radius: 8px;
}