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;