Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Develop #6

Merged
Gustavo_Rallenson_Goncalves_Da_Silva merged 70 commits from Develop into master 2023-02-10 10:36:40 +00:00
Conversation 0 Commits 70 Files Changed 52 +53 -1
3 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9187738596 - Show all commits

2
store/blocks/pdp/product.jsonc
View File

@ -82,7 +82,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "1:1"
"phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,

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

@ -72,10 +72,40 @@
max-height: 100% !important;
}
.carouselGaleryThumbs {
display: block;
height: max-content;
}
.carouselGaleryThumbs .productImagesThumb {
width: max-content !important;
background: white;
margin-right: 1em;
}
@media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb {
width: 32% !important;
}
}
.carouselGaleryThumbs .productImagesThumb .figure {
width: 100%;
}
.carouselGaleryThumbs .productImagesThumb .figure--video {
min-height: 90px;
}
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 5.54em;
}
@media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
width: 50px;
min-height: 4.9em;
}
}
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
width: 90px;
}
@media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
width: 50px;
}
}

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

@ -71,11 +71,33 @@
}
}
.carouselGaleryThumbs{
display: block;
height: max-content;
.productImagesThumb{
width: max-content !important;
background:white;
margin-right: 1em;
@media screen and (max-width: 64.0625em){
width: 32% !important;
}
.figure{
width: 100%;
&--video{
min-height: 90px;
.thumbImg{
min-height: 5.54em;
@media screen and (max-width: 64.0625em){
width: 50px;
min-height: 4.9em;
}
}
}
.thumbImg{
width: 90px;
@media screen and (max-width: 64.0625em){
width: 50px;
}
}
}
}
}