forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #2
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user