SabrinaMiranda/challenge-vtex-io-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

112
styles/css/vtex.flex-layout.css
View File

@ -1,98 +1,18 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
/*
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 */
.flexRowContent {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.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;
}
.stretchChildrenWidth {
width: 100% !important;
}

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

@ -9,4 +9,58 @@
/* Grid breakpoints */
.newsletter {
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;
}
}

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

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

9
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

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

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

@ -1,3 +1,45 @@
.newsletter{
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;
}
}