HenriqueSantosSantana/challenge-vtex-io-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added styles for mobiles devices and new hover,active effects

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-02-04 10:18:44 -03:00
parent e0ed8bbac0
commit 0c78c418dd
8 changed files with 131 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
store/blocks/pdp/product-assembly.jsonc
View File

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

10
store/blocks/pdp/product-shelf.jsonc
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": {
"children": ["rich-text#pdp-shelf-title"]
},
@ -22,6 +17,11 @@
"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": {
"props": {
"text": "## Você também pode gostar:",

28
store/blocks/pdp/product-specifications-table.jsonc
View File

@ -1,4 +1,12 @@
{
"flex-layout.row#product-specifications": {
"props": {
"blockClass": "productSpecifications"
},
"children": ["tab-layout#product-specification"]
},
"tab-layout#product-specification": {
"children": [
"tab-list#product-specification",
@ -15,7 +23,8 @@
"tab-list.item#specification-1",
"tab-list.item#specification-2",
"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": {
"children": [
"tab-content.item#specification-1",
"tab-content.item#specification-2",
"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": {
@ -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": {
"props": {
"blockClass": "productSpecificationItemContainer",

2
store/blocks/pdp/product.jsonc
View File

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

7
styles/css/vtex.flex-layout.css
View File

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

42
styles/css/vtex.tab-layout.css
View File

@ -7,18 +7,58 @@
*/
/* Media Query M3 */
/* 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) {
.listContainer--ProductSpecificationTabList {
width: 100%;
padding: 0 40px;
flex-direction: column;
flex-wrap: nowrap;
gap: 16px;
padding: 16px 0;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
width: 100%;
height: 38px;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
justify-content: start;
padding: 0 !important;
}
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {

7
styles/sass/pages/product/vtex.flex-layout.scss
View File

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

46
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,16 +1,60 @@
.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) {
width: 100%;
padding: 0 40px;
flex-direction: column;
flex-wrap: nowrap;
gap: 16px;
padding: 16px 0;
.listItem {
:global(.vtex-button) {
width: 100%;
height: 38px;
:global(.vtex-button__label) {
justify-content: start;
padding: 0 !important;
}
}
}