Merge pull request 'feat: added styles for mobiles devices and new hover,active effects' (#4) from feature/pdp-specifications into develop

Reviewed-on: #4
This commit is contained in:
Henrique Santos Santana 2023-02-04 13:20:15 +00:00
commit e649918e25
8 changed files with 131 additions and 23 deletions

View File

@ -32,17 +32,13 @@
"props": { "props": {
"verticalAlign": "middle" "verticalAlign": "middle"
}, },
"children": [ "children": ["assembly-option-item-quantity-selector"]
"assembly-option-item-quantity-selector"
]
}, },
"flex-layout.col#product-assembly-image": { "flex-layout.col#product-assembly-image": {
"props": { "props": {
"marginRight": 4 "marginRight": 4
}, },
"children": [ "children": ["assembly-option-item-image"]
"assembly-option-item-image"
]
}, },
"flex-layout.col#product-assembly-middle": { "flex-layout.col#product-assembly-middle": {
"props": { "props": {
@ -96,9 +92,7 @@
"horizontalAlign": "right", "horizontalAlign": "right",
"verticalAlign": "middle" "verticalAlign": "middle"
}, },
"children": [ "children": ["assembly-option-item-quantity-selector"]
"assembly-option-item-quantity-selector"
]
}, },
"assembly-option-item-customize#sec-level": { "assembly-option-item-customize#sec-level": {
"props": { "props": {

View File

@ -1,9 +1,4 @@
{ {
"list-context.product-list#pdp-shelf": {
"blocks": ["product-summary.shelf#pdp-shelf"],
"children": ["html#pdp-slider-shelf"]
},
"html#pdp-slider-shelf-title": { "html#pdp-slider-shelf-title": {
"children": ["rich-text#pdp-shelf-title"] "children": ["rich-text#pdp-shelf-title"]
}, },
@ -22,6 +17,11 @@
"children": ["list-context.product-list#pdp-shelf"] "children": ["list-context.product-list#pdp-shelf"]
}, },
"list-context.product-list#pdp-shelf": {
"blocks": ["product-summary.shelf#pdp-shelf"],
"children": ["html#pdp-slider-shelf"]
},
"rich-text#pdp-shelf-title": { "rich-text#pdp-shelf-title": {
"props": { "props": {
"text": "## Você também pode gostar:", "text": "## Você também pode gostar:",

View File

@ -1,4 +1,12 @@
{ {
"flex-layout.row#product-specifications": {
"props": {
"blockClass": "productSpecifications"
},
"children": ["tab-layout#product-specification"]
},
"tab-layout#product-specification": { "tab-layout#product-specification": {
"children": [ "children": [
"tab-list#product-specification", "tab-list#product-specification",
@ -15,7 +23,8 @@
"tab-list.item#specification-1", "tab-list.item#specification-1",
"tab-list.item#specification-2", "tab-list.item#specification-2",
"tab-list.item#specification-3", "tab-list.item#specification-3",
"tab-list.item#specification-4" "tab-list.item#specification-4",
"tab-list.item#specification-5"
] ]
}, },
@ -47,12 +56,20 @@
} }
}, },
"tab-list.item#specification-5": {
"props": {
"tabId": "productFAQsId",
"label": "FAQs"
}
},
"tab-content#product-specification": { "tab-content#product-specification": {
"children": [ "children": [
"tab-content.item#specification-1", "tab-content.item#specification-1",
"tab-content.item#specification-2", "tab-content.item#specification-2",
"tab-content.item#specification-3", "tab-content.item#specification-3",
"tab-content.item#specification-4" "tab-content.item#specification-4",
"tab-content.item#specification-5"
] ]
}, },
"tab-content.item#specification-1": { "tab-content.item#specification-1": {
@ -82,6 +99,13 @@
} }
}, },
"tab-content.item#specification-5": {
"children": ["flex-layout.row#product-specification-1"],
"props": {
"tabId": "productFAQsId"
}
},
"flex-layout.row#product-specification-1": { "flex-layout.row#product-specification-1": {
"props": { "props": {
"blockClass": "productSpecificationItemContainer", "blockClass": "productSpecificationItemContainer",

View File

@ -3,7 +3,7 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"tab-layout#product-specification", "flex-layout.row#product-specifications",
"html#pdp-slider-shelf-title", "html#pdp-slider-shelf-title",
"html#list-context-pdp-shelf", "html#list-context-pdp-shelf",
"newsletter", "newsletter",

View File

@ -138,7 +138,6 @@
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.flexRowContent--productActions { .flexRowContent--productActions {
max-height: 49px;
flex-direction: row; flex-direction: row;
} }
} }
@ -163,6 +162,10 @@
width: 99%; width: 99%;
} }
.flexRow--productSpecificationItemContainer { .flexRow--productSpecifications {
padding: 0 40px; padding: 0 40px;
}
.flexRow--productSpecificationItemContainer {
padding: 0 32px;
} }

View File

@ -7,18 +7,58 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.listContainer--ProductSpecificationTabList {
justify-content: space-around;
border-bottom: 1px solid #b9b9b9;
}
@media screen and (max-width: 1024px) {
.listContainer--ProductSpecificationTabList {
border-top: 1px solid #b9b9b9;
}
}
.listContainer--ProductSpecificationTabList .listItem {
position: relative;
padding: 0;
margin: 0;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
border-radius: 0;
color: #bfbfbf;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0 16px !important;
}
.listContainer--ProductSpecificationTabList .listItem.listItemActive :global(.vtex-button) {
background-color: transparent;
color: #000;
border: none;
}
@media screen and (min-width: 1025px) {
.listContainer--ProductSpecificationTabList .listItem.listItemActive::before {
content: "";
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background-color: #000;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.listContainer--ProductSpecificationTabList { .listContainer--ProductSpecificationTabList {
width: 100%; width: 100%;
padding: 0 40px;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 16px;
padding: 16px 0;
} }
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
width: 100%; width: 100%;
height: 38px;
} }
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) { .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
justify-content: start; justify-content: start;
padding: 0 !important;
} }
} }
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {

View File

@ -134,7 +134,6 @@
flex-direction: column; flex-direction: column;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-height: 49px;
flex-direction: row; flex-direction: row;
} }
@ -162,6 +161,10 @@
} }
} }
.flexRow--productSpecificationItemContainer { .flexRow--productSpecifications {
padding: 0 40px; padding: 0 40px;
} }
.flexRow--productSpecificationItemContainer {
padding: 0 32px;
}

View File

@ -1,16 +1,60 @@
.listContainer--ProductSpecificationTabList { .listContainer--ProductSpecificationTabList {
justify-content: space-around;
border-bottom: 1px solid #b9b9b9;
@media screen and (max-width: 1024px) {
border-top: 1px solid #b9b9b9;
}
.listItem {
position: relative;
padding: 0;
margin: 0;
:global(.vtex-button) {
border-radius: 0;
color: #bfbfbf;
:global(.vtex-button__label) {
padding: 0 16px !important;
}
}
&.listItemActive {
:global(.vtex-button) {
background-color: transparent;
color: #000;
border: none;
}
@media screen and (min-width: 1025px) {
&::before {
content: "";
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background-color: #000;
}
}
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
width: 100%; width: 100%;
padding: 0 40px;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 16px;
padding: 16px 0;
.listItem { .listItem {
:global(.vtex-button) { :global(.vtex-button) {
width: 100%; width: 100%;
height: 38px;
:global(.vtex-button__label) { :global(.vtex-button__label) {
justify-content: start; justify-content: start;
padding: 0 !important;
} }
} }
} }