forked from M3-Academy/challenge-vtex-io
hotfix: imagem description
This commit is contained in:
parent
52dee67913
commit
df51f9677d
@ -343,6 +343,9 @@
|
||||
}
|
||||
},
|
||||
"list-context.product-list#demo": {
|
||||
"props":{
|
||||
// "collection":"/m3-academy---desafio/sandalias"
|
||||
},
|
||||
"blocks": ["product-summary.shelf#demo"],
|
||||
"children": ["slider-layout#demo-product"]
|
||||
},
|
||||
|
@ -7,3 +7,31 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.container--tituloSlick {
|
||||
height: 40px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container--tituloSlick {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
.container--tituloSlick {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.container--tituloSlick .paragraph--tituloSlick {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container--tituloSlick .paragraph--tituloSlick {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
@ -1,31 +1,40 @@
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.sliderTrackContainer--carousel {
|
||||
background-color: #fff;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
.sliderTrackContainer--carousel .slide--carousel {
|
||||
padding: 0px;
|
||||
width: 434.4px !important;
|
||||
height: 543.4px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
@media (max-width: 1920px) {
|
||||
.sliderTrackContainer--carousel .slide--carousel {
|
||||
width: 314.4px !important;
|
||||
height: 448.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
@media (max-width: 1920px) {
|
||||
.sliderTrackContainer--carousel .slide--carousel {
|
||||
width: 314.4px !important;
|
||||
height: 448.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
@media (max-width: 500px) {
|
||||
.sliderTrackContainer--carousel .slide--carousel {
|
||||
width: 291.2px !important;
|
||||
height: 402.2px;
|
||||
}
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
.sliderTrackContainer--carousel .paginationDotsContainer--carousel {
|
||||
margin-bottom: 105px;
|
||||
}
|
@ -81,17 +81,20 @@
|
||||
|
||||
.productImageTag--imgDescription {
|
||||
width: 100%;
|
||||
max-height: 664px !important;
|
||||
max-width: 664px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
.productImageTag--imgDescription {
|
||||
max-width: 904px;
|
||||
max-height: 904px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.productImageTag--imgDescription {
|
||||
max-width: 944px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 944px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -0,0 +1,22 @@
|
||||
.container--tituloSlick {
|
||||
height: 40px;
|
||||
margin-bottom: 32px;
|
||||
@media (min-width: 1024px) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.paragraph--tituloSlick {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
42
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
42
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,42 @@
|
||||
.sliderTrackContainer--carousel {
|
||||
background-color: $color-white;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
.sliderTrack--carousel {
|
||||
|
||||
}
|
||||
.slide--carousel {
|
||||
padding: 0px;
|
||||
width: 434.4px !important;
|
||||
height: 543.4px;
|
||||
@media (max-width: 1920px) {
|
||||
width: 314.4px !important;
|
||||
height: 448.4px;
|
||||
}
|
||||
@media (max-width: 1920px) {
|
||||
width: 314.4px !important;
|
||||
height: 448.4px;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
width: 291.2px !important;
|
||||
height: 402.2px;
|
||||
}
|
||||
|
||||
}
|
||||
.sliderArrows--carousel {
|
||||
.caretIcon--carousel {
|
||||
}
|
||||
}
|
||||
.sliderArrows--carousel {
|
||||
.caretIcon--carousel {
|
||||
}
|
||||
}
|
||||
|
||||
.paginationDotsContainer--carousel {
|
||||
margin-bottom: 105px;
|
||||
.paginationDot--carousel {
|
||||
}
|
||||
.paginationDot--carousel--isActive {
|
||||
}
|
||||
}
|
||||
}
|
@ -18,11 +18,11 @@
|
||||
max-height: 100% !important;
|
||||
max-width: 664px;
|
||||
margin-bottom: 16px;
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
max-width: 904px;
|
||||
}
|
||||
@media (max-width:1024px) {
|
||||
max-width: 100% ;
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -67,17 +67,19 @@
|
||||
|
||||
.productImageTag--imgDescription {
|
||||
width: 100%;
|
||||
max-height: 664px !important;
|
||||
max-width: 664px;
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
max-width: 904px;
|
||||
max-height: 904px !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 944px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 944px !important;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer {
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
|
Loading…
Reference in New Issue
Block a user