forked from M3-Academy/challenge-vtex-io
feat: faz o carousel do produto ficar abaixo da imagem
This commit is contained in:
parent
c32372103b
commit
9a4654cf02
@ -1,3 +1,4 @@
|
||||
[data-testeid="breadcrumb"] {
|
||||
background-color: yellow;
|
||||
[dataid*="product-images"] {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
|
@ -83,17 +83,34 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
"children": ["product-images"]
|
||||
"props": {},
|
||||
"children": ["html#product-images"]
|
||||
},
|
||||
"product-images": {
|
||||
"props": {
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false,
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
},
|
||||
"displayThumbnailsArrows": false
|
||||
"displayThumbnailsArrows": true
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-images": {
|
||||
"props": {
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
"tag": "section",
|
||||
"infinite": "true",
|
||||
"preventHorizontalStretch": "true",
|
||||
"verticalAlign": "bottom",
|
||||
"testId": "product-images"
|
||||
},
|
||||
"children": ["product-images"]
|
||||
},
|
||||
|
||||
"flex-layout.col#right-col": {
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
@ -142,8 +159,10 @@
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"paddingTop": 0,
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"marginBottom": 7,
|
||||
"blockClass": "button-cart"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
},
|
||||
|
@ -7,11 +7,6 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.__label {
|
||||
padding: 0;
|
||||
padding-top: 0;
|
||||
@ -35,10 +30,10 @@
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.buttonDataContainer {
|
||||
background: black;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
@ -33,3 +33,20 @@
|
||||
color: #929292;
|
||||
content: "Sapatos";
|
||||
}
|
||||
|
||||
.term {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.term::after {
|
||||
visibility: visible;
|
||||
content: "Sandálias";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
position: relative;
|
||||
right: 230px;
|
||||
}
|
||||
|
5
styles/css/vtex.condition-layout.css
Normal file
5
styles/css/vtex.condition-layout.css
Normal file
@ -0,0 +1,5 @@
|
||||
.stretchChildrenWidth {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid red;
|
||||
}
|
Loading…
Reference in New Issue
Block a user