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

feat(product-image):ajustando thumnails conforme o figma

Browse Source 
finalizando product-images
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-30 19:51:12 -03:00
parent 9187738596
commit 9d6d696e9a
4 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/css/vtex.breadcrumb.css
View File

@ -13,6 +13,11 @@
margin-right: auto; margin-right: auto;
max-width: 96rem; max-width: 96rem;
} }
@media screen and (max-width: 64.0625em) {
.container {
padding: 0 0 0 10.67%;
}
}
.container .term, .container .termArrow { .container .term, .container .termArrow {
display: none; display: none;
} }

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

@ -69,6 +69,7 @@
align-self: stretch; align-self: stretch;
} }
.carouselContainer .productImage .productImageTag--main { .carouselContainer .productImage .productImageTag--main {
border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
} }
@ -83,7 +84,7 @@
} }
@media screen and (max-width: 64.0625em) { @media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb { .carouselGaleryThumbs .productImagesThumb {
width: 32% !important; width: 30% !important;
} }
} }
.carouselGaleryThumbs .productImagesThumb .figure { .carouselGaleryThumbs .productImagesThumb .figure {
@ -93,19 +94,15 @@
min-height: 90px; min-height: 90px;
} }
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
border-radius: 8px;
min-height: 5.54em; min-height: 5.54em;
} }
@media screen and (max-width: 64.0625em) { @media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
width: 50px;
min-height: 4.9em; min-height: 4.9em;
} }
} }
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px; width: 90px;
} }
@media screen and (max-width: 64.0625em) {
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
width: 50px;
}
}

3
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -3,6 +3,9 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 96rem; max-width: 96rem;
@media screen and (max-width: 64.0625em){
padding: 0 0 0 10.67%;
}
.term,.termArrow{ .term,.termArrow{
display: none; display: none;
} }

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

@ -65,6 +65,7 @@
margin-bottom: 1em; margin-bottom: 1em;
align-self: stretch; align-self: stretch;
&-main{ &-main{
border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
} }
} }
@ -78,25 +79,23 @@
background:white; background:white;
margin-right: 1em; margin-right: 1em;
@media screen and (max-width: 64.0625em){ @media screen and (max-width: 64.0625em){
width: 32% !important; width: 30% !important;
} }
.figure{ .figure{
width: 100%; width: 100%;
&--video{ &--video{
min-height: 90px; min-height: 90px;
.thumbImg{ .thumbImg{
border-radius: 8px;
min-height: 5.54em; min-height: 5.54em;
@media screen and (max-width: 64.0625em){ @media screen and (max-width: 64.0625em){
width: 50px;
min-height: 4.9em; min-height: 4.9em;
} }
} }
} }
.thumbImg{ .thumbImg{
border-radius: 8px;
width: 90px; width: 90px;
@media screen and (max-width: 64.0625em){
width: 50px;
}
} }
} }
} }