Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 93 commits from feature/challenge-vtex-io into develop 2023-02-03 17:14:03 +00:00
2 changed files with 31 additions and 91 deletions
Showing only changes of commit d79ba8ead0 - Show all commits

View File

@ -7,18 +7,21 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.carouselContainer {
display: flex;
flex-direction: column-reverse;
width: 97.064%;
height: 770px;
}
.carouselGaleryThumbs {
position: relative;
display: flex;
flex-direction: row;
width: 13.554% !important;
margin-top: 16px;
}
.carouselGaleryThumbs .productImagesThumb {
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 {
@ -31,42 +34,9 @@
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 {
width: 664px;
object-fit: unset !important;
max-height: 664px !important;
height: 664px;
}
.productImagesThumb {
margin: 16px 0 0;
}
.thumbImg,
.thumbImg--video,
.figure,
.figure--video {
height: 100%;
border-radius: 8px;
}

View File

@ -1,19 +1,22 @@
//product-image
.carouselContainer {
display: flex;
flex-direction: column-reverse;
width: 97.064%;
height: 770px;
}
.carouselGaleryThumbs {
position: relative;
display: flex;
flex-direction: row;
width: 13.554% !important;
}
margin-top: 16px;
.productImagesThumb {
width: 10% !important;
height: 10% !important;
margin-right: 16px;
width: 90px !important;
height: 90px !important;
.figure,
.thumbImg {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
.carouselGaleryCursor {
margin: 0;
width: 100%;
@ -24,42 +27,9 @@
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 {
width: 664px;
object-fit: unset !important;
max-height: 664px !important;
height: 664px;
}
.productImagesThumb {
margin: 16px 0 0;
}
.thumbImg,
.thumbImg--video,
.figure,
.figure--video {
height: 100%;
border-radius: 8px;
}