From fce79c0d46f4bc2a2c2e438b35b4121b21949de5 Mon Sep 17 00:00:00 2001 From: Izabela Balizardo Date: Thu, 9 Feb 2023 22:54:10 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Estiliza=C3=A7=C3=A3o=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 32 +- react/components/Pix/Pix.tsx | 26 +- store/blocks/pdp/product.jsonc | 22 +- store/blocks/product-price.jsonc | 9 +- styles/configs/style.json | 688 +++++++++--------- styles/css/vtex.product-summary.css | 52 +- styles/css/vtex.slider-layout.css | 44 +- styles/css/vtex.store-components.css | 138 ++++ styles/css/vtex.tab-layout.css | 19 +- .../pages/product/vtex.slider-layout.scss | 13 + .../pages/product/vtex.store-components.scss | 162 +++++ .../sass/pages/product/vtex.tab-layout.scss | 19 +- 12 files changed, 783 insertions(+), 441 deletions(-) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 20ffde1..faf6bcb 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -143,7 +143,7 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 display: none; } -/*Description*/ +/*Descr*/ [class*="vtex-tab-layout-0-x-listItem"] { margin: 0; padding: 0; @@ -178,3 +178,33 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 border-bottom: 4px solid black; color: black; } + +[class*="vtex-store-components-3-x-productImageTag--main"] { + width: 904px; + height: 904px; + max-height: 900px !important; +} + +[class*="pix-container"] { + display: flex; +} + +[class*="pix-img"] { + margin-top: 18px; +} + +[class*="pix-preco"] { + font-family: "Open Sans"; + margin-top: 8px; + font-size: 18px; + font-weight: 700; + line-height: 25px; + letter-spacing: 0em; + text-align: left; + color: rgba(0, 0, 0, 0.58); +} + +[class*="pix-container"] p { + display: flex; + color: red; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 5f70093..e8aff9d 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -7,18 +7,20 @@ const Pix = () => { return ( <> -
- Pix - {`R$ ${(productContextValue! - productContextValue! * 0.1) - .toFixed(2) - .replace(".", ",")}` - } -

- 10% de desconto -

-
- - +
+
+ Pix +
+
+ {`R$ ${(productContextValue! - productContextValue! * 0.1) + .toFixed(2) + .replace(".", ",")}`} +
+
+

10% de desconto

); }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f6fc315..5992115 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -113,19 +113,25 @@ } }, + "rich-text#prat-titulo":{ + "props": { + "textAlignment": "CENTER", + "textPosition":"CENTER", + "text": "Você também pode gostar:", + "blockClass":"shelfTitleText" + } + }, + "list-context.product-list#list": { "blocks": ["product-summary.shelf#carrosselprodutos"], - "children": ["slider-layout#carrosselatualizado"] + "children": [ "rich-text#prat-titulo","slider-layout#carrosselatualizado"] }, "product-summary.shelf#carrosselprodutos": { "children": [ - "product-summary-name", - "product-summary-description", "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" + "product-summary-name", + "product-summary-price" ] }, @@ -238,10 +244,10 @@ "flex-layout.row#product-name", "product-identifier.product", "product-rating-summary", - "Pix", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "Pix", "sku-selector", "product-quantity", "product-assembly-options", @@ -263,7 +269,7 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": false } }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..e9bab1c 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "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", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "San Francisco, -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" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "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", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "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", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "San Francisco, -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", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..32d6e49 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,10 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..b38d50a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,23 @@ -.sliderLayoutContainer { - justify-content: center; -} - +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + background-color: white; + padding: 0 40px; } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + background-color: black; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--isActive { + background-color: white; + border: 1px solid black; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 05ef0de..0ea0d2d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -115,6 +115,7 @@ .shippingContainer { display: flex; position: relative; + bottom: 76px; } .shippingContainer :global(.vtex-button) { background-color: black; @@ -153,12 +154,149 @@ display: none; } +.shippingTable { + border: none; + bottom: 110px; + position: relative; + font-size: 14px; + font-family: "Open Sans"; + text-transform: uppercase; +} .shippingTable .shippingTableRadioBtn { display: none; } .shippingTable .shippingTableHead { display: contents; } +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans"; + color: #afafaf; +} .shippingTable .shippingTableRow { text-align: left; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(0, 0, 0) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: gray; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: gray; +} + +.subscriberContainer { + position: relative; + height: 180px; +} +.subscriberContainer .submit { + width: 100%; + position: absolute; + bottom: 0; +} +.subscriberContainer .submit :global(.vtex-button) { + background-color: #000000; + color: #fff; + font-size: 0px; + width: 100%; + height: 100%; + padding: 12px; +} +.subscriberContainer .submit :global(.vtex-button)::after { + content: "Avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 25c94b8..f48eefd 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,5 +11,22 @@ .listContainer { display: flex; justify-content: space-evenly; - border-bottom: 1px solid gray; + border-bottom: 1px solid #b9b9b9; +} +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + } +} + +.contentItem { + display: flex; + padding: 62px 52px; + display: flex; + flex-direction: row-reverse; +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column-reverse; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..9163385 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,13 @@ +.sliderLayoutContainer--carousel { + background-color: white; + padding: 0 40px; +} + +.paginationDot { + background-color: black; +} + +.paginationDot--isActive { + background-color: white; + border: 1px solid black; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7693f7a..d890de7 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -127,6 +127,7 @@ .shippingContainer { display: flex; position: relative; + bottom: 76px; :global(.vtex-button) { background-color: black; width: 70px; @@ -172,6 +173,14 @@ } .shippingTable { + border: none; + bottom: 110px; + position: relative; + + font-size: 14px; + font-family: "Open Sans"; + text-transform: uppercase; + .shippingTableRadioBtn { display: none; } @@ -180,7 +189,160 @@ display: contents; } + .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans"; + color: #afafaf; + } + .shippingTableRow { text-align: left; } + + .shippingTableRadioBtn { + display: none; + } + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + } +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; + .productImagesThumb { + margin: 0px 10px; + } + + .thumbImg { + border-radius: 8px; + } +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; + margin: 2px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: rgba(185, 185, 185, 0.6); + } + + .diagonalCross { + background-image: linear-gradient( + to top left, + transparent 44%, + rgb(0, 0, 0) 48%, + currentColor 48%, + currentColor 52%, + transparent 52% + ); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; + } +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: gray; + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: gray; + } + } +} + +.subscriberContainer { + position: relative; + height: 180px; + + .submit { + width: 100%; + position: absolute; + bottom: 0; + + :global(.vtex-button) { + background-color: #000000; + color: $color-white; + font-size: 0px; + width: 100%; + height: 100%; + padding: 12px; + + &::after { + content: "Avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + } + } + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4ab423b..b92765f 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,22 @@ + .listContainer { display: flex; justify-content: space-evenly; - border-bottom: 1px solid gray; + border-bottom: 1px solid #b9b9b9; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + +.contentItem { + display: flex; + padding: 62px 52px; + display: flex; + flex-direction: row-reverse; + + @media screen and (max-width: 1024px) { + + flex-direction: column-reverse; + } }