diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index e4c5c75..fd3a18d 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -10,7 +10,7 @@
[class*="html--buy-button"] :global(.vtex-button) {
height: 49px;
- max-width: 766px;
+ max-width: 806px;
background: black;
border: none;
border-radius: 0;
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 1366c10..a82979c 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -3,7 +3,8 @@
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
- "text": "ADICIONAR À SACOLA"
+ "text": "ADICIONAR À SACOLA",
+ "blockClass": "add-to-cart-button"
}
},
diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc
new file mode 100644
index 0000000..b43fc2e
--- /dev/null
+++ b/store/blocks/pdp/product-tab-layout.jsonc
@@ -0,0 +1,160 @@
+ // Descrição
+
+ {
+ "html#tab-layout": {
+ "props" : {
+ "testId": "tab-layout"
+ }
+ },
+
+ "tab-layout": {
+ "children": ["tab-list", "tab-content"],
+ "props": {
+ "blockClass": "tabLayout"
+ }
+ },
+
+ "tab-list": {
+ "children": [
+ "tab-list.item#1",
+ "tab-list.item#2",
+ "tab-list.item#3",
+ "tab-list.item#4",
+ "tab-list.item#5"
+ ],
+ "props": {
+ "blockClass": "tabList"
+ }
+ },
+
+ "tab-content": {
+ "children": [
+ "tab-content.item#1",
+ "tab-content.item#2",
+ "tab-content.item#3",
+ "tab-content.item#4",
+ "tab-content.item#5"
+ ],
+ "props": {
+ "blockClass": "tabContent"
+ }
+ },
+
+ "tab-list.item#1": {
+ "props": {
+ "tabId": "description#1",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+
+ "tab-list.item#2": {
+ "props": {
+ "tabId": "description#2",
+ "label": "Descrição"
+ }
+ },
+
+ "tab-list.item#3": {
+ "props": {
+ "tabId": "description#3",
+ "label": "Descrição"
+ }
+ },
+
+ "tab-list.item#4": {
+ "props": {
+ "tabId": "description#4",
+ "label": "Descrição"
+ }
+ },
+
+ "tab-list.item#5": {
+ "props": {
+ "tabId": "description#5",
+ "label": "Descrição"
+ }
+ },
+
+ "tab-content.item#1": {
+ "children": ["product-images#description", "rich-text#1"],
+ "props": {
+ "tabId": "description#1"
+ }
+ },
+ "tab-content.item#2": {
+ "children": ["product-images#description", "rich-text#2"],
+ "props": {
+ "tabId": "description#2"
+ }
+ },
+ "tab-content.item#3": {
+ "children": ["product-images#description", "rich-text#3"],
+ "props": {
+ "tabId": "description#3"
+ }
+ },
+ "tab-content.item#4": {
+ "children": ["product-images#description", "rich-text#4"],
+ "props": {
+ "tabId": "description#4"
+ }
+ },
+ "tab-content.item#5": {
+ "children": ["product-images#description", "rich-text#5"],
+ "props": {
+ "tabId": "description#5"
+ }
+ },
+
+ "product-images#description": {
+ "props": {
+ "aspectRatio": {
+ "desktop": "auto",
+ "phone": "auto"
+ },
+ "showNavigationArrows": false,
+ "showPaginationDots": false,
+ "displayThumbnailsArrows": false,
+ "thumbnailsOrientation": "horizontal",
+ "zoomMode": "disabled",
+ "displayMode": "first-image"
+ }
+ },
+
+ "rich-text#1": {
+ "props": {
+ "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+ "textPosition": "CENTER",
+ "blockClass": "description-rich-text"
+ }
+ },
+ "rich-text#2": {
+ "props": {
+ "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+ "textPosition": "CENTER",
+ "blockClass": "description-rich-text"
+ }
+ },
+ "rich-text#3": {
+ "props": {
+ "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+ "textPosition": "CENTER",
+ "blockClass": "description-rich-text"
+ }
+ },
+ "rich-text#4": {
+ "props": {
+ "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+ "textPosition": "CENTER",
+ "blockClass": "description-rich-text"
+ }
+ },
+ "rich-text#5": {
+ "props": {
+ "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+ "textPosition": "CENTER",
+ "blockClass": "description-rich-text"
+ }
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 1da3220..12fc1d4 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",
+ "html#tab-layout",
"rich-text#carousel",
"list-context.product-list#product-carousel",
"product-questions-and-answers",
@@ -122,7 +122,7 @@
"product-gifts",
"availability-subscriber",
"rich-text#labelCep",
- "shipping-simulator"
+ "html#shipping-simulator"
]
},
@@ -142,6 +142,8 @@
"children": ["vtex.store-components:product-name"]
},
+ // Skus
+
"html#sku-selector": {
"children": ["sku-selector"],
"props": {
@@ -204,6 +206,7 @@
"flex-layout.row#product-availability": {
"props": {
+ "blockClass": "product-availability",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@@ -247,154 +250,6 @@
}
},
- // Descrição
-
- "tab-layout": {
- "children": ["tab-list", "tab-content"],
- "props": {
- "blockClass": "tabLayout"
- }
- },
-
- "tab-list": {
- "children": [
- "tab-list.item#1",
- "tab-list.item#2",
- "tab-list.item#3",
- "tab-list.item#4",
- "tab-list.item#5"
- ],
- "props": {
- "blockClass": "tabList"
- }
- },
-
- "tab-content": {
- "children": [
- "tab-content.item#1",
- "tab-content.item#2",
- "tab-content.item#3",
- "tab-content.item#4",
- "tab-content.item#5"
- ],
- "props": {
- "blockClass": "tabContent"
- }
- },
-
- "tab-list.item#1": {
- "props": {
- "tabId": "description#1",
- "label": "Descrição",
- "defaultActiveTab": true
- }
- },
-
- "tab-list.item#2": {
- "props": {
- "tabId": "description#2",
- "label": "Descrição"
- }
- },
-
- "tab-list.item#3": {
- "props": {
- "tabId": "description#3",
- "label": "Descrição"
- }
- },
-
- "tab-list.item#4": {
- "props": {
- "tabId": "description#4",
- "label": "Descrição"
- }
- },
-
- "tab-list.item#5": {
- "props": {
- "tabId": "description#5",
- "label": "Descrição"
- }
- },
-
- "tab-content.item#1": {
- "children": ["product-images#description", "rich-text#1"],
- "props": {
- "tabId": "description#1"
- }
- },
- "tab-content.item#2": {
- "children": ["product-images#description", "rich-text#2"],
- "props": {
- "tabId": "description#2"
- }
- },
- "tab-content.item#3": {
- "children": ["product-images#description", "rich-text#3"],
- "props": {
- "tabId": "description#3"
- }
- },
- "tab-content.item#4": {
- "children": ["product-images#description", "rich-text#4"],
- "props": {
- "tabId": "description#4"
- }
- },
- "tab-content.item#5": {
- "children": ["product-images#description", "rich-text#5"],
- "props": {
- "tabId": "description#5"
- }
- },
-
- "product-images#description": {
- "props": {
- "aspectRatio": {
- "desktop": "auto",
- "phone": "16:9"
- },
- "showNavigationArrows": false,
- "showPaginationDots": false,
- "displayThumbnailsArrows": false,
- "thumbnailsOrientation": "horizontal",
- "zoomMode": "disabled",
- "displayMode": "first-image"
- }
- },
-
- "rich-text#1": {
- "props": {
- "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
- "textPosition": "CENTER"
- }
- },
- "rich-text#2": {
- "props": {
- "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
- "textPosition": "CENTER"
- }
- },
- "rich-text#3": {
- "props": {
- "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
- "textPosition": "CENTER"
- }
- },
- "rich-text#4": {
- "props": {
- "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
- "textPosition": "CENTER"
- }
- },
- "rich-text#5": {
- "props": {
- "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
- "textPosition": "CENTER"
- }
- },
-
// Prateleira de produtos
"rich-text#carousel": {
@@ -443,11 +298,12 @@
]
},
- // "product-summary-image": {
- // "props": {
- // "aspectRatio": "1:1"
- // }
- // },
+ "product-summary-image": {
+ "props": {
+ "aspectRatio": "1:1",
+ "showBadge": false
+ }
+ },
// Newsletter
@@ -457,5 +313,14 @@
"placeholder": "Digite seu e-mail",
"submit": "ENVIAR"
}
+ },
+
+ // Informações de frete
+
+ "html#shipping-simulator" : {
+ "props": {
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
}
}
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
index cd587df..e86335b 100644
--- a/styles/css/vtex.add-to-cart-button.css
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -14,4 +14,9 @@
text-align: center;
color: #fff;
padding: 7px 0;
+}
+@media screen and (max-width: 768px) {
+ .buttonText {
+ width: 168px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index f5c4c0d..899b74f 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -12,6 +12,12 @@
padding-top: 0;
}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--product-availability {
+ flex-direction: column;
+ }
+}
+
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 215cc68..0abdbf6 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -19,7 +19,13 @@
}
.nameContainer .brandName {
font-weight: 400;
- font-size: 14px;
- line-height: 19px;
+ font-size: 18px;
+ line-height: 25px;
color: #000000;
+}
+@media screen and (max-width: 1024px) {
+ .nameContainer .brandName {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 27b37b4..875005a 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -20,15 +20,30 @@
@media screen and (max-width: 1024px) {
.sliderLayoutContainer {
width: 100%;
+ padding: 0 40px;
}
}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
+ max-width: unset !important;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-element) {
+ padding: 0;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageNormal) {
+ height: 314px;
+ width: 105%;
+ max-height: unset !important;
+ object-fit: contain;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageStackContainer) {
+ display: flex;
+}
.slideChildrenContainer {
- width: 314px;
padding-right: 16px;
}
-.listPrice {
+:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
@@ -36,13 +51,19 @@
margin: 0;
padding-bottom: 8px;
}
-.listPrice .listPriceLabel {
+@media screen and (max-width: 1024px) {
+ :global(.vtex-store-components-3-x-listPrice) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
-.listPrice .currencyContainer::before {
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
content: "de ";
}
-.listPrice .currencyContainer::after {
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
content: " por";
}
@@ -58,6 +79,12 @@
line-height: 33px;
color: #000000;
}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
@@ -87,10 +114,6 @@
}
}
-:global(.vtex-store-components-3-x-discountInsideContainer) {
- display: none;
-}
-
.paginationDotsContainer {
align-items: center;
bottom: -30px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8435dbc..21221ed 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -35,7 +35,6 @@
.productImageTag--main {
max-height: max-content !important;
- max-width: max-content;
max-width: 100%;
}
@@ -77,6 +76,9 @@
order: 2;
margin-bottom: 16px;
}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .diagonalCross {
+ color: #000000;
+}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
@@ -123,6 +125,9 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorItem--selected .diagonalCross {
+ color: #000000;
+}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
@@ -231,6 +236,10 @@
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #afafaf;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
@@ -269,11 +278,15 @@
}
.shippingContainer :global(.vtex-button) {
font-size: 0;
- background: black;
+ background: #000000;
width: 49px;
height: 49px;
border: none;
border-radius: 0;
+ cursor: pointer;
+}
+.shippingContainer :global(.vtex-button):hover {
+ opacity: 0.8;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
@@ -410,6 +423,10 @@
line-height: 19px;
color: #868686;
}
+.subscriberContainer .form {
+ width: 100%;
+ margin: 0;
+}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: " nome email" " submit submit";
@@ -454,6 +471,9 @@
border: none;
border-radius: 0;
}
+.subscriberContainer .form .content .submit :global(.vtex-button):hover {
+ opacity: 0.8;
+}
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
@@ -471,6 +491,9 @@
background: #000000;
margin-top: 96px;
}
+.newsletter :global(.vtex-store-components-3-x-container) {
+ margin: auto;
+}
.newsletter :global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
@@ -539,6 +562,9 @@
background-color: transparent;
border: none;
}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button):hover {
+ opacity: 0.8;
+}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
border-bottom: 3px solid #929292;
padding: 6px 17px 12px !important;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 1aa6bc2..2db2f49 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -65,6 +65,9 @@
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover {
+ color: #929292;
+}
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
font-size: 24px;
@@ -106,6 +109,9 @@
border-bottom: 2px solid #000000;
padding: 0;
}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover {
+ color: #000000;
+}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
flex-direction: column;
@@ -139,26 +145,52 @@
max-width: 50%;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
- width: inherit !important;
- max-width: 632px;
+ width: 100%;
+ max-width: 100%;
display: block;
}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
+ max-width: 50%;
+}
@media screen and (max-width: 1024px) {
- :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
- width: 100% !important;
+ :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
max-width: 100%;
}
}
-:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-top: 0;
}
-:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-paragraph) {
+@media screen and (min-width: 1920px) {
+ :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+ font-size: 32px;
+ line-height: 32px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+ font-size: 20px;
+ line-height: 32px;
+ }
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
+}
+@media screen and (min-width: 1920px) {
+ :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
index 28ee7ae..2eeca3b 100644
--- a/styles/sass/pages/product/vtex.add-to-cart-button.scss
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -5,4 +5,8 @@
text-align: center;
color: $white;
padding: 7px 0;
+
+ @media screen and (max-width: 768px) {
+ width: 168px;
+ }
}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 16063bf..456815c 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,6 +1,13 @@
.flexRowContent {
margin: 0;
padding-top: 0;
+
+}
+
+.flexRowContent--product-availability {
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
}
.flexRowContent--menu-link,
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index f724285..f893b4d 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -9,12 +9,6 @@
align-items: center;
}
-// .imageNormal {
-// width: 314px;
-// height: 314px;
-// max-height: 100%;
-// }
-
// Nome do produto
.nameContainer {
@@ -22,8 +16,13 @@
.brandName {
font-weight: 400;
- font-size: 14px;
- line-height: 19px;
+ font-size: 18px;
+ line-height: 25px;
color: $black;
+
+ @media screen and (max-width: 1024px) {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 697eea7..f9b9374 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -13,19 +13,39 @@
@media screen and (max-width: 1024px) {
width: 100%;
+ padding: 0 40px;
+ }
+
+ :global(.vtex-product-summary-2-x-containerNormal) {
+ max-width: unset !important;
+
+ :global(.vtex-product-summary-2-x-element) {
+ padding: 0;
+ }
+ }
+
+ :global(.vtex-product-summary-2-x-imageNormal) {
+ height: 314px;
+ width: 105%;
+ max-height: unset !important;
+ object-fit: contain;
+ }
+
+ :global(.vtex-product-summary-2-x-imageStackContainer) {
+ display: flex;
}
}
// Informações de cada produto
.slideChildrenContainer {
- width: 314px;
+ // width: 314px;
padding-right: 16px;
}
// Preço sem desconto
-.listPrice {
+:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
@@ -33,11 +53,16 @@
margin: 0;
padding-bottom: 8px;
- .listPriceLabel {
+ @media screen and (max-width: 1024px) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
- .currencyContainer {
+ :global(.vtex-store-components-3-x-currencyContainer) {
&::before {
content: "de ";
}
@@ -62,6 +87,11 @@
font-size: 24px;
line-height: 33px;
color: $black;
+
+ @media screen and (max-width: 1024px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
}
}
@@ -95,12 +125,6 @@
}
}
-// Desconto
-
-:global(.vtex-store-components-3-x-discountInsideContainer) {
- display: none;
-}
-
// Dots da prateleira de produtos
.paginationDotsContainer {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 309cdde..648aef4 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -29,8 +29,8 @@
.productImageTag--main {
max-height: max-content !important;
- max-width: max-content;
max-width: 100%;
+ // max-width: max-content;
// max-width: 664px;
}
@@ -76,6 +76,13 @@
order: 2;
margin-bottom: 16px;
+ .skuSelectorItem--selected {
+
+ .diagonalCross {
+ color: $black;
+ }
+ }
+
.skuSelectorNameContainer {
margin: 0;
}
@@ -135,6 +142,13 @@
.skuSelectorOptionsList {
margin: 0;
}
+
+ .skuSelectorItem--selected {
+
+ .diagonalCross {
+ color: $black;
+ }
+ }
}
.skuSelectorItemTextValue {
@@ -256,6 +270,10 @@
:global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $gray-400;
&::placeholder {
font-weight: 400;
@@ -266,6 +284,9 @@
}
}
}
+
+ // Não sei meu CEP
+
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: -57px;
@@ -279,7 +300,7 @@
display: flex;
align-items: center;
text-decoration-line: underline;
- color: #000000 !important;
+ color: $black !important;
}
@media (max-width: 560px) {
@@ -299,11 +320,16 @@
:global(.vtex-button) {
font-size: 0;
- background: black;
+ background: $black;
width: 49px;
height: 49px;
border: none;
border-radius: 0;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
:global(.vtex-button__label)::after {
content: "Ok";
@@ -318,102 +344,6 @@
}
}
-// .shippingContainer {
-// display: flex;
-// width: 409px;
-// height: 49px;
-
-// @media (max-width: 560px) {
-// width: 296px;
-// }
-
-// :global(.vtex-address-form__postalCode) {
-// display: flex;
-// align-items: center;
-// padding-bottom: 0;
-
-// // @media screen and (min-width: 280px) and (max-width: 768px) {
-// // max-width: 296px;
-// // }
-// }
-
-// :global(.vtex-input-prefix__group) {
-// width: 280px;
-// height: 49px;
-// border-radius: 0;
-// border: 1px solid $gray-1000;
-// grid-area: input;
-
-// :global(.vtex-address-form-4-x-input) {
-// padding: 16.5px 16px;
-
-// &::placeholder {
-// font-weight: 400;
-// font-size: 12px;
-// line-height: 16px;
-// color: $gray-400;
-// }
-// }
-// }
-
-// :global(.vtex-input__label) {
-// font-size: 0;
-
-// &::after {
-// content: "CALCULAR FRETE:";
-// font-weight: 400;
-// font-size: 14px;
-// line-height: 19px;
-// color: $gray-500;
-// }
-// }
-
-// :global(.vtex-button) {
-// font-size: 0;
-// position: relative;
-// top: 27px;
-// right: 147px;
-// width: 49px;
-// height: 49px;
-// margin-top: 0;
-// border: none;
-// border-radius: 0;
-// background-color: $black;
-// cursor: pointer;
-// grid-area: button;
-
-// &::after {
-// content: "OK";
-// font-size: 14px;
-// line-height: 19px;
-// font-weight: 600;
-// color: white;
-// }
-// }
-
-// // Não sei meu CEP
-
-// :global(.vtex-address-form__postalCode-forgottenURL) {
-// grid-area: forgotten;
-// padding: 0;
-// position: relative;
-// left: 32px;
-// top: 10px;
-
-// :last-child {
-// color: $black;
-// font-weight: 400;
-// font-size: 12px;
-// line-height: 16px;
-// text-decoration: underline;
-
-// :global(.vtex__icon-external-link) {
-// display: none;
-// }
-// }
-// }
-// }
-
:global(.vtex-button__label) {
height: fit-content;
}
@@ -469,7 +399,6 @@
font-size: 14px;
line-height: 19px;
color: $gray-700;
- // margin-right: 40px;
}
}
@@ -559,6 +488,9 @@
}
.form {
+ width: 100%;
+ margin: 0;
+
.content {
display: grid;
grid-template-areas:
@@ -609,6 +541,10 @@
background-color: $black;
border: none;
border-radius: 0;
+
+ &:hover {
+ opacity: 0.8;
+ }
}
:global(.vtex-button__label) {
@@ -631,10 +567,15 @@
// Newsletter
.newsletter {
+
display: block;
background: $black;
margin-top: 96px;
+ :global(.vtex-store-components-3-x-container) {
+ margin: auto;
+ }
+
:global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
@@ -704,6 +645,10 @@
color: $white;
background-color: transparent;
border: none;
+
+ &:hover {
+ opacity: 0.8;
+ }
}
:global(.vtex-button__label) {
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index d9c6884..cada9fb 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -60,6 +60,10 @@
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
+ &:hover {
+ color: $gray-500;
+ }
+
@media screen and (min-width: 1920px) {
font-size: 24px;
line-height: 24px;
@@ -103,6 +107,10 @@
border-bottom: 2px solid $black;
padding: 0;
+ &:hover {
+ color: $black;
+ }
+
@media screen and (max-width: 1024px) {
flex-direction: column;
text-align: left;
@@ -134,7 +142,7 @@
border-bottom: 1px solid $gray-100;
}
- // Imagem do produto
+ // Imagem da descrição do produto
.productImagesContainer {
width: 50%;
@@ -142,35 +150,64 @@
}
:global(.vtex-store-components-3-x-productImageTag) {
- width: inherit !important;
- max-width: 632px;
+ width: 100%;
+ max-width: 100%;
display: block;
// max-width: 872px;
+ // @media screen and (max-width: 1024px) {
+ // width: 100% !important;
+ // max-width: 100%;
+ // }
+ }
+
+ // Conteúdo de texto da descrição do produto
+
+ :global(.vtex-rich-text-0-x-container--description-rich-text) {
+ max-width: 50%;
+
@media screen and (max-width: 1024px) {
- width: 100% !important;
max-width: 100%;
}
- }
- // Título da descrição do produto
+ // Título da descrição do produto
- :global(.vtex-rich-text-0-x-heading) {
- font-weight: 400;
- font-size: 24px;
- line-height: 32px;
- color: $gray-600;
- margin-top: 0;
- }
+ :global(.vtex-rich-text-0-x-heading) {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: $gray-600;
+ margin-top: 0;
- // Texto descrição do produto
+ @media screen and (min-width: 1920px) {
+ font-size: 32px;
+ line-height: 32px;
+ }
- :global(.vtex-rich-text-0-x-paragraph) {
- font-weight: 400;
- font-size: 16px;
- line-height: 22px;
- color: $gray-500;
- // width: 50%;
+ @media screen and (max-width: 1024px) {
+ font-size: 20px;
+ line-height: 32px;
+ }
+ }
+
+ // Texto descrição do produto
+
+ :global(.vtex-rich-text-0-x-paragraph) {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: $gray-500;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ font-size: 14px;
+ line-height: 19px;
+ }
+ }
}
}
}