feat: faz o carousel do produto ficar abaixo da imagem

This commit is contained in:
Leonardo Pereira Rocha 2023-01-27 23:33:07 -03:00
parent c32372103b
commit 9a4654cf02
5 changed files with 52 additions and 15 deletions

View File

@ -1,3 +1,4 @@
[data-testeid="breadcrumb"] {
background-color: yellow;
[dataid*="product-images"] {
display: flex;
justify-content: left;
}

View File

@ -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"]
},

View File

@ -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;
}

View File

@ -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;
}

View File

@ -0,0 +1,5 @@
.stretchChildrenWidth {
display: flex;
flex-direction: column;
border: 1px solid red;
}