diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index 384d7d8..5c84865 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,6 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
-import './styles.css';
+import "./styles.css";
const CSS_HANDLES = ["html"] as const;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 1713533..e28c0d3 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,3 +1,12 @@
-[class*=".html--breadcrumb"] {
- background: red;
+[class*="html--buy-button"] {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 5px;
+}
+
+[class*="html--buy-button"] :global(.vtex-button) {
+ height: 49px;
+ background: black;
+ border: none;
+ border-radius: 0;
}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0e3cb58..64cac5c 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -67,6 +67,7 @@
]
},
+
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
@@ -111,13 +112,21 @@
"product-installments",
"product-separator",
"sku-selector",
- "flex-layout.row#buy-button",
+ "html#buy-button",
+ // "flex-layout.row#buy-button",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
]
},
+ "html#buy-button": {
+ "props": {
+ "blockClass": "buy-button"
+ },
+ "children": ["product-quantity", "add-to-cart-button"]
+ },
+
"html#product-name": {
"props": {
"blockClass": "product-name"
@@ -211,5 +220,12 @@
"width": "28%",
"showLabel": false
}
+ },
+
+ "product-installments": {
+ "props": {
+ "installmentsCriteria": "max-quality-without-interest",
+ "blockClass": "fees"
+ }
}
}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index 7b90b6b..ee3264d 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index ee7a3be..f41484c 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Cores */
/* Grid breakpoints */
.html {
background-color: none;
diff --git a/styles/css/global.css b/styles/css/global.css
new file mode 100644
index 0000000..34c4328
--- /dev/null
+++ b/styles/css/global.css
@@ -0,0 +1,9 @@
+/*
+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 */
\ No newline at end of file
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
index f95575a..2f88b42 100644
--- a/styles/css/vtex.add-to-cart-button.css
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -7,6 +7,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
/* Grid breakpoints */
.buttonText {
font-size: 0;
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index d5f8a99..93dea49 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -6,17 +6,28 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Cores */
/* Grid breakpoints */
-.homeIcon {
+.container {
+ padding-right: 40px;
+ padding-left: 40px;
+}
+
+.homeIcon,
+.homeLink {
display: none;
}
+.arrow--1 {
+ padding-left: 0;
+}
.arrow--1 .caretIcon {
display: none;
}
.link--1 {
font-size: 0px;
+ padding-left: 0;
}
.link--1::after {
content: "Home";
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index b31dc4c..a98c7ee 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Cores */
/* Grid breakpoints */
.flexRowContent--buy-button-row :global(.vtex-button) {
background: #000000;
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 56d8b8b..89eb756 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Cores */
/* Grid breakpoints */
.product-identifier__label {
display: none;
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 14a1626..a59cc19 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -6,6 +6,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
/* Grid breakpoints */
.sellingPriceValue {
font-weight: 700;
@@ -15,7 +18,7 @@
}
.installments {
- font-size: 0;
+ font-size: 0px;
}
.installments .installmentsNumber--36 {
font-weight: 700;
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..6ccf30f 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Cores */
/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index fabfdbb..7fab1eb 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -6,6 +6,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
/* Grid breakpoints */
.newsletter {
background: #000000;
@@ -15,10 +18,12 @@
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
+ border-color: #cccccc;
}
:global(.vtex-numeric-stepper__minus-button) {
background: #fff;
+ border-color: #cccccc;
}
:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
font-size: 16px;
@@ -28,6 +33,7 @@
:global(.vtex-numeric-stepper__plus-button) {
background: #fff;
+ border-color: #cccccc;
}
:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
@@ -35,6 +41,10 @@
color: #000000;
}
+.container {
+ padding: 0 40px;
+}
+
.productNameContainer {
font-weight: 300;
font-size: 20px;
@@ -43,6 +53,25 @@
color: #575757;
}
+.productImage .productImageTag {
+ max-height: unset !important;
+}
+
+.carouselGaleryThumbs {
+ margin-top: 16px;
+}
+
+.productImagesThumb {
+ width: unset !important;
+ margin-bottom: 0 !important;
+ margin-right: 16px;
+}
+.productImagesThumb .thumbImg {
+ max-width: 90px;
+ width: 100%;
+ height: 90px;
+}
+
.skuSelectorContainer {
display: flex;
flex-direction: column;
@@ -105,12 +134,45 @@
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
- left: 3px;
- top: 2px;
+ left: 8px;
+ top: 5px;
right: 5px;
bottom: 3px;
transform: rotateY(180deg);
}
+.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #000000;
+}
+.skuSelectorContainer .skuSelectorItem--selected .diagonalCross {
+ color: #000000;
+}
+.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross {
+ left: 4px;
+ top: 5px;
+ right: 3px;
+ bottom: 3px;
+ transform: rotateY(180deg);
+}
+
+.subscriberContainer {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+
+.submit :global(.vtex-button) {
+ background: #000000;
+ height: 40px;
+ margin-top: -1px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #fff;
+}
.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size {
color: #000000;
@@ -197,6 +259,8 @@
.shippingTable {
display: flex;
flex-direction: column;
+ border: none;
+ margin-top: 0;
}
.shippingTable .shippingTableHead {
display: block;
@@ -233,10 +297,26 @@
line-height: 19px;
color: #202020;
}
+.shippingTable .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableCellDeliveryName {
+ width: 23.9263%;
+ padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableCellDeliveryEstimate {
+ width: 41.7177%;
+ padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableCellDeliveryPrice,
+.shippingTable .shippingTableHeadDeliveryPrice {
+ width: 14.7239%;
+ padding: 0 0 15px 0;
+}
.shippingTableBody .shippingtableRow {
display: flex;
flex-direction: row;
+ text-align: left;
}
.shippingTableBody .shippingTableCellDeliveryEstimate {
display: flex;
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 6fa78c9..452f605 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,8 +1,15 @@
-.homeIcon {
+.container {
+ padding-right: 40px;
+ padding-left: 40px;
+}
+
+.homeIcon,
+.homeLink {
display: none;
}
.arrow--1 {
+ padding-left: 0;
.caretIcon {
display: none;
}
@@ -10,6 +17,7 @@
.link--1 {
font-size: 0px;
+ padding-left: 0;
&::after {
content: "Home";
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index cd9b429..a4c9e8f 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -7,7 +7,7 @@
}
.installments {
- font-size: 0;
+ font-size: 0px;
.installmentsNumber--36 {
font-weight: 700;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 1b33eda..894c491 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -6,10 +6,12 @@
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
+ border-color: $gray-200;
}
:global(.vtex-numeric-stepper__minus-button) {
background: $white;
+ border-color: $gray-200;
:global(.vtex-numeric-stepper__minus-button__text) {
font-size: 16px;
@@ -21,6 +23,7 @@
:global(.vtex-numeric-stepper__plus-button) {
background: $white;
+ border-color: $gray-200;
:global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
@@ -30,14 +33,43 @@
}
}
+// TITULO E IMAGENS
+.container {
+ padding: 0 40px;
+}
+
.productNameContainer {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
+
color: $gray-100;
}
+.productImage {
+ .productImageTag {
+ max-height: unset !important;
+ }
+}
+
+.carouselGaleryThumbs {
+margin-top: 16px;
+}
+
+.productImagesThumb {
+ width: unset !important;
+ margin-bottom: 0 !important;
+ margin-right: 16px;
+
+ .thumbImg {
+ max-width: 90px;
+ width: 100%;
+ height: 90px;
+ }
+}
+
+// sku Tamanho e Cor
.skuSelectorContainer {
display: flex;
flex-direction: column;
@@ -120,13 +152,58 @@
}
.diagonalCross {
- left: 3px;
- top: 2px;
+ left: 8px;
+ top: 5px;
right: 5px;
bottom: 3px;
transform: rotateY(180deg);
}
}
+
+ .skuSelectorItem--selected {
+ .skuSelectorItemTextValue {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: $black;
+ }
+
+ .diagonalCross {
+ color: $black;
+ }
+ }
+
+ .skuSelectorItemImage--sku-size {
+ .diagonalCross {
+ left: 4px;
+ top: 5px;
+ right: 3px;
+ bottom: 3px;
+ transform: rotateY(180deg);
+ }
+ }
+}
+
+.subscriberContainer {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+
+ color: $gray;
+}
+
+.submit {
+ :global(.vtex-button) {
+ background: $black;
+ height: 40px;
+ margin-top: -1px;
+
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: $white;
+ }
}
.skuSelectorItem--sku-size-selected {
@@ -237,6 +314,8 @@
.shippingTable {
display: flex;
flex-direction: column;
+ border: none;
+ margin-top: 0;
.shippingTableHead {
display: block;
@@ -284,12 +363,31 @@
}
}
}
+
+ .shippingTableHeadDeliveryName,
+.shippingTableCellDeliveryName {
+ width: 23.9263%;
+ padding: 0 0 15px 0;
+}
+
+.shippingTableHeadDeliveryEstimate,
+.shippingTableCellDeliveryEstimate {
+ width: 41.7177%;
+ padding: 0 0 15px 0;
+}
+
+.shippingTableCellDeliveryPrice,
+.shippingTableHeadDeliveryPrice {
+ width: 14.7239%;
+ padding: 0 0 15px 0;
+}
}
.shippingTableBody {
.shippingtableRow {
display: flex;
flex-direction: row;
+ text-align: left;
}
.shippingTableCellDeliveryEstimate {
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 18a84ed..1bf6970 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,3 +1,7 @@
+/* Fontes */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
+
+/* Cores */
$color-black: #292929;
$black-100: #202020;
$black: #000000;
@@ -6,6 +10,7 @@ $white: #fff;
$gray: #929292;
$gray-100: #575757;
+$gray-200: #cccccc;
$color-gray: #6c6c6c;