forked from M3-Academy/challenge-vtex-io
feat(pdp): adiciona menu estilizado de tab layout #6
@ -41,3 +41,74 @@
|
|||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #929292;
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="thumbImg"] {
|
||||||
|
width: auto;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*mexer*/
|
||||||
|
[class*="productImagesThumb"] [class*="w-20 w-20 w-20"] {
|
||||||
|
width: 13% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="buttonClicker"] [class*="button"] {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="buttonClicker"] [class*="buttonText"] {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="buttonClicker"] [class*="buttonText"]::after {
|
||||||
|
content: "ADICIONAR À SACOLA";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listContainer--pdp-decriptions-list"] {
|
||||||
|
border-bottom: 1px solid #bfbfbf;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] [class*="button__label"] {
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] [class*="c-action-primary"] {
|
||||||
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] [class*="c-on-action-primary"],
|
||||||
|
[class*="c-on-base--inverted"] {
|
||||||
|
color: black;
|
||||||
|
border-bottom: 5px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"]
|
||||||
|
[class*="hover-c-on-action-primary"]:hover {
|
||||||
|
color: black;
|
||||||
|
border-bottom: 5px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] [class*="bg-action-primary"],
|
||||||
|
[class*="b--action-primary"] {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="listItem--pdp-description-button"] {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
@ -257,7 +257,8 @@
|
|||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
"marginBottom": 7
|
"marginBottom": 7,
|
||||||
|
"blockClass": "buttonClicker"
|
||||||
},
|
},
|
||||||
"children": ["add-to-cart-button"]
|
"children": ["add-to-cart-button"]
|
||||||
},
|
},
|
||||||
@ -305,25 +306,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// "tab-layout#home":
|
|
||||||
// "children": [
|
|
||||||
// "tab-list#home",
|
|
||||||
// "tab-content#home"
|
|
||||||
// ],
|
|
||||||
// "props": {
|
|
||||||
// "blockClass": "home",
|
|
||||||
// "defaultActiveTabId": "home1"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
|
|
||||||
"flex-layout.row#product-image-description": {
|
"flex-layout.row#product-image-description": {
|
||||||
"children": ["product-images#description-image"]
|
"children": ["product-images#description-image"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-image-description2": {
|
|
||||||
"children": ["product-images#description-image"]
|
|
||||||
},
|
|
||||||
|
|
||||||
"product-images#description-image": {
|
"product-images#description-image": {
|
||||||
"props": {
|
"props": {
|
||||||
"aspectRatio": {
|
"aspectRatio": {
|
||||||
@ -341,46 +327,111 @@
|
|||||||
"blockClass": "pdp-descriptions",
|
"blockClass": "pdp-descriptions",
|
||||||
"defaultActiveTabId": "pdp-descriptions1"
|
"defaultActiveTabId": "pdp-descriptions1"
|
||||||
},
|
},
|
||||||
"children": ["tab-list#pdp-descriptions", "tab-content#pdp-descripitions"]
|
"children": ["tab-list#pdp-descriptions", "tab-content#pdp-descriptions"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"tab-list#pdp-descriptions": {
|
"tab-list#pdp-descriptions": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-list.item#pdp-descripitions1",
|
"tab-list.item#pdp-descriptions1",
|
||||||
"tab-list.item#pdp-descripitions2"
|
"tab-list.item#pdp-descriptions2",
|
||||||
]
|
"tab-list.item#pdp-descriptions3",
|
||||||
|
"tab-list.item#pdp-descriptions4",
|
||||||
|
"tab-list.item#pdp-descriptions5"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pdp-decriptions-list"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#pdp-descripitions1": {
|
"tab-list.item#pdp-descriptions1": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "pdp-descriptions1",
|
"tabId": "pdp-descriptions1",
|
||||||
"label": "Descrição",
|
"label": "Descrição",
|
||||||
"defaultActiveTab": true
|
"defaultActiveTab": true,
|
||||||
|
"blockClass": "pdp-description-button"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#pdp-descripitions2": {
|
"tab-list.item#pdp-descriptions2": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "pdp-descriptions2",
|
"tabId": "pdp-descriptions2",
|
||||||
"label": "Descrição"
|
"label": "Descrição",
|
||||||
|
"blockClass": "pdp-description-button"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdp-descriptions3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions3",
|
||||||
|
"label": "Descrição",
|
||||||
|
"blockClass": "pdp-description-button"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdp-descriptions4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions4",
|
||||||
|
"label": "Descrição",
|
||||||
|
"blockClass": "pdp-description-button"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#pdp-descriptions5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions5",
|
||||||
|
"label": "Descrição",
|
||||||
|
"blockClass": "pdp-description-button"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"tab-content#pdp-descripitions": {
|
"tab-content#pdp-descriptions": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-content.item#pdp-descriptions1",
|
"tab-content.item#pdp-descriptions1",
|
||||||
"tab-content.item#pdp-descripitions2"
|
"tab-content.item#pdp-descriptions2",
|
||||||
|
"tab-content.item#pdp-descriptions3",
|
||||||
|
"tab-content.item#pdp-descriptions4",
|
||||||
|
"tab-content.item#pdp-descriptions5"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"tab-content.item#pdp-descriptions1": {
|
"tab-content.item#pdp-descriptions1": {
|
||||||
"children": ["flex-layout.row#product-image-description"],
|
"children": [
|
||||||
|
"flex-layout.row#product-image-description",
|
||||||
|
"flex-layout.row#description"
|
||||||
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "pdp-descriptions1"
|
"tabId": "pdp-descriptions1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-content.item#pdp-descripitions2": {
|
"tab-content.item#pdp-descriptions2": {
|
||||||
"children": ["flex-layout.row#product-image-description2"],
|
"children": [
|
||||||
|
"flex-layout.row#product-image-description",
|
||||||
|
"flex-layout.row#description"
|
||||||
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "pdp-descripitions2"
|
"tabId": "pdp-descriptions2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#pdp-descriptions3": {
|
||||||
|
"children": [
|
||||||
|
"flex-layout.row#product-image-description",
|
||||||
|
"flex-layout.row#description"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#pdp-descriptions4": {
|
||||||
|
"children": [
|
||||||
|
"flex-layout.row#product-image-description",
|
||||||
|
"flex-layout.row#description"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#pdp-descriptions5": {
|
||||||
|
"children": [
|
||||||
|
"flex-layout.row#product-image-description",
|
||||||
|
"flex-layout.row#description"
|
||||||
|
],
|
||||||
|
"props": {
|
||||||
|
"tabId": "pdp-descriptions5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user