Gabriel_Ferraz_Nogueira/challenge-vtex-io-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona css

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-06 16:54:22 -03:00
parent f86ca8b682
commit 9cc7b166bc
3 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,25 @@
"rowGap": 0
}
},
"html#prateleira": {
"props": {
"testId": "vtex-product-summary"
},
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
},
"html#imagens": {
"props": {
"testId": "product-images"
},
"children": ["product-images"]
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@ -314,14 +333,7 @@
},
"product-summary.shelf#demo1": {
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
"children": ["html#prateleira"]
},
"slider-layout#demo-products": {

25
styles/css/vtex.slider-layout.css
View File

@ -11,22 +11,39 @@
padding: 16px 40px 113px;
}
.sliderLayoutContainer .sliderTrackContainer {
padding: 0 24px 36px;
padding: 0 40px 36px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
width: 450% !important;
gap: 16px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
max-width: none !important;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: 100%;
width: fit-content;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) {
background-color: #ededed;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
width: fit-content;
min-width: 314.4px;
height: fit-content;
min-height: 314.4px;
max-height: 314.4px;
border-radius: 0;
background-color: #ededed;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;

26
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -2,9 +2,10 @@
padding: 16px 40px 113px;
.sliderTrackContainer {
padding: 0 24px 36px;
padding: 0 40px 36px;
.sliderTrack {
width: 450% !important;
gap: 16px;
.slide {
@ -12,15 +13,32 @@
:global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
max-width: none !important;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: 100%;
width: fit-content;
:global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
:global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-product-summary-2-x-imageContainer) {
background-color: #ededed;
:global(.vtex-product-summary-2-x-imageNormal) {
width: fit-content;
min-width: 314.4px;
height: fit-content;
min-height: 314.4px;
max-height: 314.4px;
border-radius: 0;
background-color: #ededed;
}
}
}
}
:global(.vtex-product-summary-2-x-nameContainer) {