feat: faz a estilização do bloco product-images

This commit is contained in:
Sabrina Miranda 2023-01-27 10:46:17 -03:00
parent 7971f1888c
commit 681b3f8534
7 changed files with 139 additions and 106 deletions

View File

@ -60,7 +60,7 @@
"blockClass": "product" "blockClass": "product"
}, },
"children": [ "children": [
"flex-layout.row#product-image", "html#product-image",
"product-bookmark", "product-bookmark",
"product-specification-badges" "product-specification-badges"
] ]
@ -78,26 +78,32 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%",
"rowGap": 0 "rowGap": 0
} }
}, },
"flex-layout.row#product-image": { "html#product-image": {
"props":{
"tag": "div",
"testId": "product-images",
"blockClass": "product-image"
},
"children": ["product-images"] "children": ["product-images"]
}, },
"product-images": { "product-images": {
"props": { "props": {
"aspectRatio": { "aspectRatio": "1:1",
"desktop": "auto", "displayThumbnailsArrows": false,
"phone": "16:9" "thumbnailsOrientation": "horizontal",
}, "showNavigationArrows": false,
"displayThumbnailsArrows": true "showPaginationDots": false,
"thumbnailAspectRatio": "1:1"
} }
}, },
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"rowGap": 0 "rowGap": 0,
"blockClass": "right-col"
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",

View File

@ -9,6 +9,7 @@
/* Grid breakpoints */ /* Grid breakpoints */
.container { .container {
padding: 0 40px; padding: 0 40px;
margin-bottom: 16px;
} }
.container .homeIcon { .container .homeIcon {
display: none; display: none;

View File

@ -1,98 +1,18 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent {
padding-top: 0;
padding-bottom: 0;
margin: 0;
} }
@media screen and (min-width: 40em) { .stretchChildrenWidth {
.flexRowContent--menu-link, width: 100% !important;
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
} }

View File

@ -10,3 +10,57 @@
.newsletter { .newsletter {
background: red; background: red;
} }
.container {
padding: 0 40px;
}
.thumbImg,
.figure,
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.productImagesThumb {
width: 90px !important;
height: 90px !important;
margin: 0 16px 0 0;
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
max-height: 100% !important;
margin-bottom: 16px;
}
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 664px;
margin: 0;
}
@media screen and (min-width: 1920px) {
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 904px;
}
}
@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 500px;
}
}

View File

@ -1,5 +1,6 @@
.container { .container {
padding: 0 40px; padding: 0 40px;
margin-bottom: 16px;
.homeIcon { .homeIcon {
display: none; display: none;

View File

@ -0,0 +1,9 @@
.flexRowContent {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.stretchChildrenWidth {
width: 100% !important;
}

View File

@ -1,3 +1,45 @@
.newsletter{ .newsletter{
background: red; background: red;
} }
.container {
padding: 0 40px;
}
.thumbImg,
.figure,
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.productImagesThumb {
width: 90px !important;
height: 90px !important;
margin: 0 16px 0 0;
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
max-height: 100% !important;
margin-bottom: 16px;
}
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 664px;
margin: 0;
@media screen and (min-width: 1920px) {
max-width: 904px;
}
@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
max-width: 500px;
}
}