From 0c78c418dd831f44cb95363a9896edc88147fb24 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 4 Feb 2023 10:18:44 -0300 Subject: [PATCH] feat: added styles for mobiles devices and new hover,active effects --- store/blocks/pdp/product-assembly.jsonc | 12 ++--- store/blocks/pdp/product-shelf.jsonc | 10 ++-- .../pdp/product-specifications-table.jsonc | 28 ++++++++++- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.flex-layout.css | 7 ++- styles/css/vtex.tab-layout.css | 42 ++++++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 7 ++- .../sass/pages/product/vtex.tab-layout.scss | 46 ++++++++++++++++++- 8 files changed, 131 insertions(+), 23 deletions(-) diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..f9e22eb 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -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": { diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc index d164dd4..0b827f5 100644 --- a/store/blocks/pdp/product-shelf.jsonc +++ b/store/blocks/pdp/product-shelf.jsonc @@ -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:", diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index 783a69f..f3fed0c 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -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", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 02895f2..1763bb7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 68cfaf9..04257f5 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -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; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 55a55ef..bef2964 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -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) { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index fa11cd1..e739273 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -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; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index bc98f15..ea58149 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -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; } } }