From a141ddbe543c5722a35aefae6d024a6b3f162a8f Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Fri, 10 Feb 2023 18:07:08 -0300 Subject: [PATCH] fix:modificando styles --- store/blocks/pdp/product.jsonc | 19 +++++---------- styles/css/vtex.breadcrumb.css | 19 +++++++++------ styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-price.css | 4 ++++ styles/css/vtex.product-summary.css | 20 +++++++++------- styles/css/vtex.store-components.css | 5 ++++ styles/css/vtex.tab-layout.css | 9 ++++++- .../sass/pages/product/vtex.breadcrumb.scss | 24 +++++++++++++------ .../sass/pages/product/vtex.flex-layout.scss | 4 +++- .../pages/product/vtex.product-price.scss | 3 +++ .../pages/product/vtex.product-summary.scss | 19 ++++++++------- .../pages/product/vtex.store-components.scss | 5 ++++ .../sass/pages/product/vtex.tab-layout.scss | 9 ++++++- 13 files changed, 94 insertions(+), 47 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b109aa8..ad97501 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -32,7 +32,7 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["image#image-1","product-description"] }, "condition-layout.product#availability": { "props": { @@ -212,8 +212,6 @@ "image#image-1": { "props":{ "src":"assets/sandalia-image.png", - "maxHeight": "48%", - "maxWidth":"48%", "blockClass":"imageElement" } }, @@ -286,8 +284,7 @@ "tab-content.item#home1": { "children": [ - "image#image-1", - "product-description" + "flex-layout.row#description" ], "props": { "tabId":"description1" @@ -295,8 +292,7 @@ }, "tab-content.item#home2": { "children": [ - "image#image-1", - "product-description" + "flex-layout.row#description" ], "props": { "tabId":"description2" @@ -304,8 +300,7 @@ }, "tab-content.item#home3": { "children": [ - "image#image-1", - "product-description" + "flex-layout.row#description" ], "props": { "tabId":"description3" @@ -313,8 +308,7 @@ }, "tab-content.item#home4": { "children": [ - "image#image-1", - "product-description" + "flex-layout.row#description" ], "props": { "tabId":"description4" @@ -322,8 +316,7 @@ }, "tab-content.item#home5": { "children": [ - "image#image-1", - "product-description" + "flex-layout.row#description" ], "props": { "tabId":"description5" diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index ef2dba3..2a0f2e3 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -16,13 +16,8 @@ background-color: white; padding: 32px 0 16px 40px; } -.container .term { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; +.container .term, .container .termArrow { + display: none; } .container .homeLink .homeIcon { display: none; @@ -48,6 +43,16 @@ line-height: 19px; color: #929292; } +.container .link--1 { + font-size: 0; + margin-left: 16px; +} +.container .link--1::after { + visibility: visible; + display: block; + content: "Sapatos"; + font-size: 14px; +} @media (min-width: 1900px) { .container { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 976d156..faca279 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -13,6 +13,7 @@ .flexRowContent { padding: 0; margin: 0; + gap: 32px; } .flexCol--stack { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 4a36d71..ae1b644 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -26,4 +26,8 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.listPrice { + display: block; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 37912a9..3063c67 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -51,15 +51,19 @@ width: 314.4px; height: 314.4px; } +@media (max-width: 376px) { + .imageContainer { + width: 114px !important; + height: 114px !important; + } +} +@media (max-width: 1024px) { + .imageContainer { + width: 291px; + height: 291px; + } +} .imageContainer .imageNormal { width: 100%; height: 100%; -} - -@media (min-width: 768px) and (max-width: 1024px) { - .imageContainer { - margin-bottom: 16px; - width: 200px; - height: 200px; - } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c3bd5bd..775f828 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -100,6 +100,11 @@ height: auto !important; } +.productImageTag { + width: 100% !important; + height: 100% !important; +} + .shippingTableHead { display: grid; margin-bottom: 15px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c1ec31f..75f8363 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -16,6 +16,13 @@ gap: 32px; padding: 32px 72px 16px 72px; } +@media (max-width: 676px) { + .contentItem { + display: flex; + flex-direction: column; + padding: 32px 40px 0 40px !important; + } +} .listContainer { display: flex; @@ -47,7 +54,7 @@ text-transform: initial; } -@media (min-width: 637px) and (max-width: 1024px) { +@media (max-width: 1024px) { .listContainer { display: flex; flex-direction: column; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index f15bf83..9c1d7a7 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -5,13 +5,8 @@ background-color: white; padding: 32px 0 16px 40px; - .term { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; + .term,.termArrow { + display: none; } .homeLink { @@ -46,6 +41,19 @@ color: #929292; } } + .link--1 { + font-size: 0; + + margin-left: 16px; + + &::after { + + visibility: visible; + display: block; + content: "Sapatos"; + font-size: 14px; + } + } } @media (min-width:1900px) { @@ -53,3 +61,5 @@ padding-left: 70px; } } + + diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e65542b..024c0d3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,6 +3,7 @@ .flexRowContent { padding: 0; margin:0; + gap: 32px } .flexCol--stack { padding-left: 40px; @@ -16,6 +17,7 @@ width:0; } + @media (min-width:768px) and (max-width:1024px) { .flexRowContent { display: flex; @@ -25,5 +27,5 @@ width: 100% !important; } } - + } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index ab3cffe..790cd67 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -16,4 +16,7 @@ color: #929292; } +.listPrice { + display: block; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index bca4139..593609f 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -38,18 +38,19 @@ width: 314.4px; height: 314.4px; + @media (max-width:376px) { + width: 114px !important; + height: 114px !important; + } + + @media (max-width:1024px) { + width: 291px; + height: 291px; + } + .imageNormal { width: 100%; height: 100%; } } - -@media (min-width:768px) and (max-width:1024px) { - .imageContainer { - margin-bottom: 16px; - // background-color: #EDEDED; - width: 200px; - height: 200px; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 493b44e..dbba98b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -89,6 +89,11 @@ height: auto !important; } +.productImageTag{ + width: 100% !important; + height: 100% !important; +} + @media (min-width: 375px) and (max-width: 1444px) { } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 7ab21c2..fcc2d07 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -3,6 +3,13 @@ flex-direction: row; gap:32px; padding: 32px 72px 16px 72px; + + @media(max-width: 676px) { + display: flex; + flex-direction: column; + padding: 32px 40px 0 40px !important; + } + } @@ -38,7 +45,7 @@ } } -@media (min-width:637px) and (max-width:1024px) { +@media (max-width:1024px) { // .container { // display: block;