fix: description tab-layout
This commit is contained in:
parent
4d40da32a0
commit
a67889e624
@ -3,13 +3,114 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"html#breadcrumb",
|
"html#breadcrumb",
|
||||||
"condition-layout.product#availability",
|
"condition-layout.product#availability",
|
||||||
"flex-layout.row#description",
|
// "flex-layout.row#description",
|
||||||
|
"tab-layout#description",
|
||||||
// "flex-layout.row#specifications-title",
|
// "flex-layout.row#specifications-title",
|
||||||
// "product-specification-group#table",
|
// "product-specification-group#table",
|
||||||
"shelf.relatedProducts",
|
"shelf.relatedProducts",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"tab-layout#description": {
|
||||||
|
"children": ["tab-list#description", "tab-content#description"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list#description": {
|
||||||
|
"children": [
|
||||||
|
"tab-list.item#description1",
|
||||||
|
"tab-list.item#description2",
|
||||||
|
"tab-list.item#description3",
|
||||||
|
"tab-list.item#description4",
|
||||||
|
"tab-list.item#description5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#description1": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description1",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#description2": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description2",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#description3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description3",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#description4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description4",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#description5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description5",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content#description": {
|
||||||
|
"children": [
|
||||||
|
"tab-content.item#description1",
|
||||||
|
"tab-content.item#description2",
|
||||||
|
"tab-content.item#description3",
|
||||||
|
"tab-content.item#description4",
|
||||||
|
"tab-content.item#description5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#description1": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#description2": {
|
||||||
|
"children": [],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#description3": {
|
||||||
|
"children": [],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#description4": {
|
||||||
|
"children": [],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#description5": {
|
||||||
|
"children": [],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
"props": {
|
"props": {
|
||||||
"tag": "section",
|
"tag": "section",
|
||||||
@ -30,8 +131,28 @@
|
|||||||
"props": {
|
"props": {
|
||||||
"marginBottom": 7
|
"marginBottom": 7
|
||||||
},
|
},
|
||||||
"children": ["product-description"]
|
"children": ["product-images#description", "flex-layout.col#description"]
|
||||||
},
|
},
|
||||||
|
"product-description#notitle": {
|
||||||
|
"props": {
|
||||||
|
"showTitle": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"flex-layout.col#description": {
|
||||||
|
"props": {
|
||||||
|
"preventVerticalStretch": true,
|
||||||
|
"rowGap": 5
|
||||||
|
},
|
||||||
|
"children": ["product-description", "product-description#notitle"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-images#description": {
|
||||||
|
"props": {
|
||||||
|
"displayMode": "first-image"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"condition-layout.product#availability": {
|
"condition-layout.product#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"conditions": [
|
"conditions": [
|
||||||
@ -179,12 +300,6 @@
|
|||||||
"children": ["add-to-cart-button"]
|
"children": ["add-to-cart-button"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"add-to-cart-button": {
|
|
||||||
"props": {
|
|
||||||
"blockClass": "add-to-cart-button"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"flex-layout.row#product-availability": {
|
"flex-layout.row#product-availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"colGap": 7,
|
"colGap": 7,
|
||||||
|
@ -330,4 +330,18 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
}
|
}
|
34
styles/css/vtex.tab-layout.css
Normal file
34
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
.listContainer {
|
||||||
|
border-bottom: solid 1px #b9b9b9;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 64px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer :global(.vtex-button) {
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #b9b9b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive {
|
||||||
|
border-bottom: solid 2px black;
|
||||||
|
margin-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive :global(.vtex-button) {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
@ -332,3 +332,18 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Descrição do produto
|
||||||
|
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
.productDescriptionText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
25
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
25
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.listContainer {
|
||||||
|
border-bottom: solid 1px #b9b9b9;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 64px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer :global(.vtex-button) {
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #b9b9b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive {
|
||||||
|
border-bottom: solid 2px black;
|
||||||
|
margin-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive :global(.vtex-button) {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user