diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index a8d7d98..6eccf6d 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,5 +1,4 @@
/* [class*=html--pdp-breadcrumb]{
- background: blue;
} */
.html--pdp-section_descriptions{
display: flex;
@@ -22,23 +21,13 @@
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 28px;
}
-.html--pdp-departamens{
- background: transparent;
+.html--pdp-section_descriptions{
margin-top: 32px;
margin-bottom: 16px;
}
-.html--pdp-departamens ul{
- display: flex;
+.html--pdp-section_descriptions :after{
border-bottom: 1px solid rgba(185, 185, 185, 1);
}
-.html--pdp-departamens div ul{
- width: 100%;
- display: flex;
- justify-content: space-between;
- list-style: none;
- margin: 0;
-}
-
.html--pdp-departamens div ul li button{
outline: none;
border: none;
@@ -50,10 +39,7 @@
font-size: 18px;
line-height: 38px;
}
-.html--pdp-departamens div ul li :global(button.open){
- color: #000000;
- border-bottom: 1px solid #000000;
-}
+
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
margin-bottom: 20px;
}
@@ -79,6 +65,10 @@
}
}
@media screen and (max-width: 1024px) {
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-container){
+ border-bottom: 1px solid rgba(185, 185, 185, 1);
+ padding-bottom: 16px;
+ }
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 296px;
}
@@ -100,10 +90,4 @@
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 0px;
}
- .html--pdp-departamens div ul li :global(button.open){
- border-bottom: none;
- }
- .html--pdp-departamens ul{
- border-top: 1px solid rgba(185, 185, 185, 1);
- }
}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index af163ab..53f28ec 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,11 +1,134 @@
{
"store.product": {
"children": [
+ "html#breadcrumb",
"html#departaments",
"flex-layout.row#specifications-title",
"html#carousel"
]
},
+ "tab-layout#pdp": {
+ "children":[
+ "tab-list#pdp",
+ "tab-content#pdp",
+ "tab-content#pdp2",
+ "tab-content#pdp3",
+ "tab-content#pdp4",
+ "tab-content#pdp5"
+ ],
+ "props": {
+ "blockClass": "pdp-tabLayout",
+ "defaultActiveTabId": "descrição1"
+ }
+ },
+ "tab-list#pdp":{
+ "children": [
+ "tab-list.item#pdpsection1",
+ "tab-list.item#pdpsection2",
+ "tab-list.item#pdpsection3",
+ "tab-list.item#pdpsection4",
+ "tab-list.item#pdpsection5"
+ ],
+ "props": {
+ "blockClass": "pdp-tabSections"
+ }
+ },
+ "tab-list.item#pdpsection1": {
+ "props": {
+ "tabId": "descrição1",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#pdpsection2": {
+ "props": {
+ "tabId": "descrição2",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#pdpsection3": {
+ "props": {
+ "tabId": "descrição3",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#pdpsection4": {
+ "props": {
+ "tabId": "descrição4",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#pdpsection5": {
+ "props": {
+ "tabId": "descrição5",
+ "label": "Descrição"
+ }
+ },
+ "tab-content.item#descriptionpdp":{
+ "children":[
+ "html#description"
+ ],
+ "props": {
+ "tabId": "descrição1"
+ }
+ },
+ "tab-content#pdp":{
+ "children":[
+ "tab-content.item#descriptionpdp"
+ ]
+ },
+ "tab-content.item#descriptionpdp2":{
+ "children":[
+ "html#description"
+ ],
+ "props": {
+ "tabId": "descrição2"
+ }
+ },
+ "tab-content#pdp2":{
+ "children":[
+ "tab-content.item#descriptionpdp2"
+ ]
+ },
+ "tab-content.item#descriptionpdp3":{
+ "children":[
+ "html#description"
+ ],
+ "props": {
+ "tabId": "descrição3"
+ }
+ },
+ "tab-content#pdp3":{
+ "children":[
+ "tab-content.item#descriptionpdp3"
+ ]
+ },
+ "tab-content.item#descriptionpdp4":{
+ "children":[
+ "html#description"
+ ],
+ "props": {
+ "tabId": "descrição4"
+ }
+ },
+ "tab-content#pdp4":{
+ "children":[
+ "tab-content.item#descriptionpdp4"
+ ]
+ },
+ "tab-content.item#descriptionpdp5":{
+ "children":[
+ "html#description"
+ ],
+ "props": {
+ "tabId": "descrição5"
+ }
+ },
+ "tab-content#pdp5":{
+ "children":[
+ "tab-content.item#descriptionpdp5"
+ ]
+ },
"html#prateleira": {
"props": {
"testId": "vtex-product-sumary"
@@ -97,14 +220,7 @@
},
"children": ["breadcrumb"]
},
- "html#example-component": {
- "props": {
- "tag": "nav",
- "testId": "breadcrumbs",
- "blockClass": "pdp-exemplo"
- },
- "children": ["example-component"]
- },
+
"html#Sections": {
"props": {
"tag": "nav",
@@ -190,10 +306,10 @@
"html#departaments": {
"props": {
"tag": "div",
- "testId": "description",
+ "testId": "product-description",
"blockClass": "pdp-section_descriptions"
},
- "children": ["html#Sections", "html#description"]
+ "children": ["tab-layout#pdp"]
},
"html#description": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 9ab6e23..93ce670 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -149,10 +149,20 @@
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
max-width: 11.2px;
max-height: 29.6px;
- top: 25%;
+ top: 37%;
padding: 0;
}
}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel) {
+ left: 3%;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel) {
+ right: 3%;
+ }
+}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
width: 4.9344% !important;
@@ -171,6 +181,7 @@
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 100%;
}
+
.flexRow--pdp-price .flexRowContent--pdp-price {
justify-content: center;
}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index d4e5e71..3f9dbd2 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -17,4 +17,9 @@
font-size: 24px;
line-height: 38px;
color: #575757;
+}
+@media screen and (max-width: 1024px) {
+ .container--pdp-specifications .wrapper--pdp-specifications .heading {
+ font-size: 20px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
new file mode 100644
index 0000000..dfea842
--- /dev/null
+++ b/styles/css/vtex.tab-layout.css
@@ -0,0 +1,62 @@
+/*
+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 */
+/* Grid breakpoints */
+.listContainer--pdp-tabSections::after {
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid rgb(185, 185, 185);
+}
+@media screen and (max-width: 1024px) {
+ .listContainer--pdp-tabSections {
+ flex-direction: column;
+ }
+ .listContainer--pdp-tabSections::before {
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid rgb(185, 185, 185);
+ }
+}
+
+.listContainer--pdp-tabSections {
+ margin-bottom: 32px;
+ justify-content: space-evenly;
+ align-items: end;
+}
+@media screen and (max-width: 1024px) {
+ .listContainer--pdp-tabSections {
+ align-items: start;
+ }
+}
+.listContainer--pdp-tabSections .listItem {
+ padding: 0;
+ margin: 0;
+}
+.listContainer--pdp-tabSections .listItem :global(.vtex-button) {
+ outline: none;
+ border: none;
+ background: transparent;
+ color: rgb(191, 191, 191);
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ text-transform: initial;
+}
+.listContainer--pdp-tabSections .listItemActive {
+ border-bottom: 1px solid #000000;
+}
+@media screen and (max-width: 1024px) {
+ .listContainer--pdp-tabSections .listItemActive {
+ border-bottom: none;
+ }
+}
+.listContainer--pdp-tabSections .listItemActive :global(.vtex-button) {
+ color: #000000;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 495e092..8c41429 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -139,10 +139,20 @@
@media screen and (max-width: 1024px){
max-width: 11.2px;
max-height: 29.6px;
- top: 25%;
+ top: 37%;
padding: 0;
}
}
+ :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel){
+ @media screen and (max-width: 1024px){
+ left: 3%;
+ }
+ }
+ :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel){
+ @media screen and (max-width: 1024px){
+ right: 3%;
+ }
+ }
:global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
@media screen and (max-width: 1024px){
width: 4.9344% !important;
@@ -162,9 +172,6 @@
:global(.vtex-store-components-3-x-container){
max-width: 100%;
}
- @media screen and (max-width: 1024px){
-
- }
}
.flexRow--pdp-price{
.flexRowContent--pdp-price{
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index 6bfa5b8..22f47d0 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -9,6 +9,9 @@
font-size: 24px;
line-height: 38px;
color: #575757;
+ @media screen and (max-width: 1024px){
+ font-size: 20px;
+ }
}
}
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 5083fec..8765e56 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -175,3 +175,4 @@
}
}
+
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
new file mode 100644
index 0000000..86f9383
--- /dev/null
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -0,0 +1,48 @@
+.listContainer--pdp-tabSections{
+ &::after{
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid rgba(185, 185, 185, 1);
+ };
+ @media screen and (max-width: 1024px){
+ flex-direction: column;
+ &::before{
+ content: "";
+ width: 100%;
+ border-bottom: 1px solid rgba(185, 185, 185, 1);
+ };
+ }
+};
+.listContainer--pdp-tabSections{
+ margin-bottom: 32px;
+ justify-content: space-evenly;
+ align-items: end;
+ @media screen and (max-width: 1024px){
+ align-items: start;
+ }
+ .listItem{
+ padding: 0;
+ margin: 0;
+ :global(.vtex-button){
+ outline: none;
+ border: none;
+ background: transparent;
+ color: rgba(191, 191, 191, 1);
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ text-transform: initial;
+ };
+ };
+ .listItemActive{
+ border-bottom: 1px solid #000000;
+ @media screen and (max-width: 1024px){
+ border-bottom: none;
+ }
+ :global(.vtex-button){
+ color: #000000;
+ }
+ }
+}