feat: Cria descrição do produto desktop
This commit is contained in:
parent
90bdc0fa7f
commit
45a071299f
@ -4,7 +4,7 @@
|
|||||||
"html#breadcrumb",
|
"html#breadcrumb",
|
||||||
//"example-component",
|
//"example-component",
|
||||||
"condition-layout.product#availability",
|
"condition-layout.product#availability",
|
||||||
"flex-layout.row#description",
|
"tab-layout",
|
||||||
"flex-layout.row#specifications-title",
|
"flex-layout.row#specifications-title",
|
||||||
"product-specification-group#table",
|
"product-specification-group#table",
|
||||||
"shelf.relatedProducts",
|
"shelf.relatedProducts",
|
||||||
@ -27,12 +27,6 @@
|
|||||||
"text": "##### Product Specifications"
|
"text": "##### Product Specifications"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.row#description": {
|
|
||||||
"props": {
|
|
||||||
"marginBottom": 7
|
|
||||||
},
|
|
||||||
"children": ["product-description"]
|
|
||||||
},
|
|
||||||
"condition-layout.product#availability": {
|
"condition-layout.product#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"conditions": [
|
"conditions": [
|
||||||
@ -206,7 +200,7 @@
|
|||||||
"blockClass": "message-availability"
|
"blockClass": "message-availability"
|
||||||
},
|
},
|
||||||
"children": ["availability-subscriber"]
|
"children": ["availability-subscriber"]
|
||||||
}
|
},
|
||||||
|
|
||||||
// "share#default": {
|
// "share#default": {
|
||||||
// "props": {
|
// "props": {
|
||||||
@ -218,4 +212,108 @@
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
"product-images#2": {
|
||||||
|
"props": {
|
||||||
|
"aspectRatio": {
|
||||||
|
"desktop": "auto",
|
||||||
|
"phone": "16:9"
|
||||||
|
},
|
||||||
|
"displayMode": "first-image"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-layout": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "tabLayout"
|
||||||
|
},
|
||||||
|
"children": ["tab-list", "tab-content"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list": {
|
||||||
|
"children": [
|
||||||
|
"tab-list.item#1",
|
||||||
|
"tab-list.item#2",
|
||||||
|
"tab-list.item#3",
|
||||||
|
"tab-list.item#4",
|
||||||
|
"tab-list.item#5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content": {
|
||||||
|
"children": [
|
||||||
|
"tab-content.item#1",
|
||||||
|
"tab-content.item#2",
|
||||||
|
"tab-content.item#3",
|
||||||
|
"tab-content.item#4",
|
||||||
|
"tab-content.item#5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#1": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc1",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#2": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc2",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc3",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc4",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc5",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#1": {
|
||||||
|
"children": ["product-images#2", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#2": {
|
||||||
|
"children": ["product-images#2", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#3": {
|
||||||
|
"children": ["product-images#2", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#4": {
|
||||||
|
"children": ["product-images#2", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#5": {
|
||||||
|
"children": ["product-images#2", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Desc5"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,6 +9,20 @@
|
|||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
.productDescriptionContainer .productDescriptionText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
44
styles/css/vtex.tab-layout.css
Normal file
44
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.container--tabLayout {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer {
|
||||||
|
border-bottom: 1px solid #b9b9b9;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer .listItem {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer .listItem :global(.vtex-button__label) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer .listItemActive {
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer .listItemActive :global(.vtex-button) {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.container--tabLayout .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.container--tabLayout .contentContainer .contentItem {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 50%);
|
||||||
|
gap: 32px;
|
||||||
|
padding: 32px 32px 0;
|
||||||
|
}
|
@ -1,3 +1,20 @@
|
|||||||
|
.productDescriptionContainer {
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: $color-gray7;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: $color-gray6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
43
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
43
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
.container--tabLayout {
|
||||||
|
padding: 0 40px;
|
||||||
|
|
||||||
|
.listContainer {
|
||||||
|
border-bottom: 1px solid $color-gray13;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: $color-gray14;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive {
|
||||||
|
border-bottom: 2px solid $color-black2;
|
||||||
|
|
||||||
|
:global(.vtex-button) {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
color: $color-black2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentContainer {
|
||||||
|
.contentItem {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 50%);
|
||||||
|
gap: 32px;
|
||||||
|
padding: 32px 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -18,6 +18,8 @@ $color-gray9: #989898;
|
|||||||
$color-gray10: #afafaf;
|
$color-gray10: #afafaf;
|
||||||
$color-gray11: #d5d5d5;
|
$color-gray11: #d5d5d5;
|
||||||
$color-gray12: #868686;
|
$color-gray12: #868686;
|
||||||
|
$color-gray13: #b9b9b9;
|
||||||
|
$color-gray14: #bfbfbf;
|
||||||
|
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user