From b040bb1ee3c99d1e185b29df1b32e31710d1714d Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 21 Jan 2023 15:01:03 -0300 Subject: [PATCH 01/93] refactor(style.json): modificando fontFamily --- styles/configs/style.json | 688 +++++++++++++++++++------------------- 1 file changed, 345 insertions(+), 343 deletions(-) diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..64c4329 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Open Sans, sans-serif", + "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] } -- 2.34.1 From 9a5dc81e4a79a59d0d47378320b9f412e45bda42 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 08:34:58 -0300 Subject: [PATCH 02/93] feat: adicionando arquivos .css e .scss vtex.breadcrumb com estilos para o breadcrumb --- styles/css/vtex.breadcrumb.css | 31 +++++++++++++++++++ .../product/breadcrumb/vtex.breadcrumb.scss | 25 +++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..0abdabd --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,31 @@ +/* +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 */ +.container { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-left: 40px; +} +.container .homeLink { + padding: 0; +} +.container .homeLink::before { + content: "Home"; +} +.container .homeIcon { + display: none; +} +.container .link, +.container .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss new file mode 100644 index 0000000..71bda56 --- /dev/null +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -0,0 +1,25 @@ +.container { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-left: 40px; + .homeLink { + padding: 0; + } + + .homeLink::before { + content: "Home"; + } + + .homeIcon { + display: none; + } + + .link, + .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} -- 2.34.1 From fce9bb36dcc5b481ca870afb12e092ce3fb117a0 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 09:13:21 -0300 Subject: [PATCH 03/93] feat: criando componente para modificar o swiper --- react/SwiperComponent.tsx | 3 +++ .../SwiperComponent/SwiperComponent.tsx | 21 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 react/SwiperComponent.tsx create mode 100644 react/components/SwiperComponent/SwiperComponent.tsx diff --git a/react/SwiperComponent.tsx b/react/SwiperComponent.tsx new file mode 100644 index 0000000..09a0c48 --- /dev/null +++ b/react/SwiperComponent.tsx @@ -0,0 +1,3 @@ +import Swiper from "./components/SwiperComponent/SwiperComponent"; + +export default Swiper; diff --git a/react/components/SwiperComponent/SwiperComponent.tsx b/react/components/SwiperComponent/SwiperComponent.tsx new file mode 100644 index 0000000..782fe36 --- /dev/null +++ b/react/components/SwiperComponent/SwiperComponent.tsx @@ -0,0 +1,21 @@ +const Swiper = () => { + if (typeof document !== "undefined") { + const SwiperContainer = document.querySelector(".swiper-container"); + const SwiperWrapper = document.querySelector(".swiper-wrapper"); + if (SwiperContainer) { + SwiperContainer.classList.remove("swiper-container-vertical"); + SwiperContainer.classList.add("swiper-container-horizontal"); + SwiperContainer.classList.add( + "vtex-store-components-3-x-swiper-component" + ); + } + if (SwiperWrapper) { + SwiperWrapper.classList.add( + "vtex-store-components-3-x-swiper-wrapper-style" + ); + } + } + return null; +}; + +export default Swiper; -- 2.34.1 From d5223bef8101958437450c0dca77bccb4c25b8e4 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 09:19:22 -0300 Subject: [PATCH 04/93] =?UTF-8?q?refactor:=20modificando=20arquivos=20para?= =?UTF-8?q?=20tornar=20a=20estiliza=C3=A7=C3=A3o=20do=20swiper=20poss?= =?UTF-8?q?=C3=ADvel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/tsconfig.json | 10 ++++++++-- store/blocks/pdp/product.jsonc | 5 +++-- store/interfaces.json | 3 +++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..40652a6 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -7,5 +7,11 @@ "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts", + "components/SwiperComponent/SwiperComponent.tsxonent.tsx", + "SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx" + ] +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..f26aa5d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,6 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", + "swiper-component", "flex-layout.row#description", "flex-layout.row#specifications-title", "product-specification-group#table", @@ -78,7 +79,6 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", "rowGap": 0 } }, @@ -91,7 +91,8 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..6956375 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "swiper-component": { + "component": "SwiperComponent" } } -- 2.34.1 From 9125d0a84258089344fe5b989be4a9033d24ec37 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 09:29:56 -0300 Subject: [PATCH 05/93] style(swiper): adicionando estilo para o swiper do bloco product-images --- styles/css/vtex.store-components.css | 64 +++++++++++++++++- .../vtex.store-components.scss | 65 +++++++++++++++++++ .../pages/product/vtex.store-components.scss | 3 - 3 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 styles/sass/pages/product/store-components/vtex.store-components.scss delete mode 100644 styles/sass/pages/product/vtex.store-components.scss diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..d9f395a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,66 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.carouselContainer { + display: flex; + flex-direction: column-reverse; + width: 97.064%; + height: 770px; +} + +.carouselGaleryThumbs { + position: relative; + display: flex; + flex-direction: row; + width: 13.554% !important; +} + +.carouselGaleryCursor { + margin: 0; + width: 100%; + padding: 0; +} + +.swiperCaret { + display: none; +} + +.productImagesGallerySlide { + width: 100% !important; +} + +.swiper-component { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: visible; + list-style: none; + padding: 0; + z-index: 1; +} + +.swiper-wrapper-style { + column-gap: 16px; +} + +.productImageTag { + object-fit: cover; +} + +.productImageTag--main { + object-fit: unset !important; + max-height: 664px !important; + height: 664px; +} + +.productImagesThumb { + margin: 16px 0 0; +} + +.thumbImg, +.thumbImg--video, +.figure, +.figure--video { + height: 100%; + border-radius: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss new file mode 100644 index 0000000..4fb5d3a --- /dev/null +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -0,0 +1,65 @@ +//product-image + +.carouselContainer { + display: flex; + flex-direction: column-reverse; + width: 97.064%; + height: 770px; +} + +.carouselGaleryThumbs { + position: relative; + display: flex; + flex-direction: row; + width: 13.554% !important; +} + +.carouselGaleryCursor { + margin: 0; + width: 100%; + padding: 0; +} + +.swiperCaret { + display: none; +} + +.productImagesGallerySlide { + width: 100% !important; +} + +.swiper-component { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: visible; + list-style: none; + padding: 0; + z-index: 1; +} + +.swiper-wrapper-style { + column-gap: 16px; +} + +.productImageTag { + object-fit: cover; +} + +.productImageTag--main { + object-fit: unset !important; + max-height: 664px !important; + height: 664px; +} + +.productImagesThumb { + margin: 16px 0 0; +} + +.thumbImg, +.thumbImg--video, +.figure, +.figure--video { + height: 100%; + border-radius: 8px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss deleted file mode 100644 index 36d0f22..0000000 --- a/styles/sass/pages/product/vtex.store-components.scss +++ /dev/null @@ -1,3 +0,0 @@ -.newsletter{ - background: red; -} \ No newline at end of file -- 2.34.1 From 9b6bb76be96c527846042e983b31325b10bcab17 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 17:43:53 -0300 Subject: [PATCH 06/93] refactor(swiper): removendo SwiperComponent , substituindo por recurso da vtex --- react/SwiperComponent.tsx | 3 --- .../SwiperComponent/SwiperComponent.tsx | 21 ------------------- store/blocks/pdp/product.jsonc | 4 ++-- store/interfaces.json | 3 --- 4 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 react/SwiperComponent.tsx delete mode 100644 react/components/SwiperComponent/SwiperComponent.tsx diff --git a/react/SwiperComponent.tsx b/react/SwiperComponent.tsx deleted file mode 100644 index 09a0c48..0000000 --- a/react/SwiperComponent.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Swiper from "./components/SwiperComponent/SwiperComponent"; - -export default Swiper; diff --git a/react/components/SwiperComponent/SwiperComponent.tsx b/react/components/SwiperComponent/SwiperComponent.tsx deleted file mode 100644 index 782fe36..0000000 --- a/react/components/SwiperComponent/SwiperComponent.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Swiper = () => { - if (typeof document !== "undefined") { - const SwiperContainer = document.querySelector(".swiper-container"); - const SwiperWrapper = document.querySelector(".swiper-wrapper"); - if (SwiperContainer) { - SwiperContainer.classList.remove("swiper-container-vertical"); - SwiperContainer.classList.add("swiper-container-horizontal"); - SwiperContainer.classList.add( - "vtex-store-components-3-x-swiper-component" - ); - } - if (SwiperWrapper) { - SwiperWrapper.classList.add( - "vtex-store-components-3-x-swiper-wrapper-style" - ); - } - } - return null; -}; - -export default Swiper; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f26aa5d..f7d6e5f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,6 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "swiper-component", "flex-layout.row#description", "flex-layout.row#specifications-title", "product-specification-group#table", @@ -92,7 +91,8 @@ "phone": "16:9" }, "displayThumbnailsArrows": false, - "showPaginationDots": false + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { diff --git a/store/interfaces.json b/store/interfaces.json index 6956375..c4b2ac4 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,8 +5,5 @@ "html": { "component": "html", "composition": "children" - }, - "swiper-component": { - "component": "SwiperComponent" } } -- 2.34.1 From d79ba8ead00589d53ed73f739d6a437cb29b0dca Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 23 Jan 2023 17:48:14 -0300 Subject: [PATCH 07/93] style(swiper): corrigindo estilo --- styles/css/vtex.store-components.css | 60 +++++------------- .../vtex.store-components.scss | 62 +++++-------------- 2 files changed, 31 insertions(+), 91 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d9f395a..5e62b97 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,18 +7,21 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.carouselContainer { - display: flex; - flex-direction: column-reverse; - width: 97.064%; - height: 770px; -} - .carouselGaleryThumbs { - position: relative; - display: flex; - flex-direction: row; - width: 13.554% !important; + margin-top: 16px; +} +.carouselGaleryThumbs .productImagesThumb { + width: 10% !important; + height: 10% !important; + margin-right: 16px; + width: 90px !important; + height: 90px !important; +} +.carouselGaleryThumbs .productImagesThumb .figure, +.carouselGaleryThumbs .productImagesThumb .thumbImg { + width: 100%; + height: 100%; + border-radius: 8px; } .carouselGaleryCursor { @@ -31,42 +34,9 @@ display: none; } -.productImagesGallerySlide { - width: 100% !important; -} - -.swiper-component { - margin-left: auto; - margin-right: auto; - position: relative; - overflow: visible; - list-style: none; - padding: 0; - z-index: 1; -} - -.swiper-wrapper-style { - column-gap: 16px; -} - -.productImageTag { - object-fit: cover; -} - .productImageTag--main { + width: 664px; object-fit: unset !important; max-height: 664px !important; height: 664px; -} - -.productImagesThumb { - margin: 16px 0 0; -} - -.thumbImg, -.thumbImg--video, -.figure, -.figure--video { - height: 100%; - border-radius: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 4fb5d3a..1e12132 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,19 +1,22 @@ //product-image -.carouselContainer { - display: flex; - flex-direction: column-reverse; - width: 97.064%; - height: 770px; -} - .carouselGaleryThumbs { - position: relative; - display: flex; - flex-direction: row; - width: 13.554% !important; -} + margin-top: 16px; + .productImagesThumb { + width: 10% !important; + height: 10% !important; + margin-right: 16px; + width: 90px !important; + height: 90px !important; + .figure, + .thumbImg { + width: 100%; + height: 100%; + border-radius: 8px; + } + } +} .carouselGaleryCursor { margin: 0; width: 100%; @@ -24,42 +27,9 @@ display: none; } -.productImagesGallerySlide { - width: 100% !important; -} - -.swiper-component { - margin-left: auto; - margin-right: auto; - position: relative; - overflow: visible; - list-style: none; - padding: 0; - z-index: 1; -} - -.swiper-wrapper-style { - column-gap: 16px; -} - -.productImageTag { - object-fit: cover; -} - .productImageTag--main { + width: 664px; object-fit: unset !important; max-height: 664px !important; height: 664px; } - -.productImagesThumb { - margin: 16px 0 0; -} - -.thumbImg, -.thumbImg--video, -.figure, -.figure--video { - height: 100%; - border-radius: 8px; -} -- 2.34.1 From 4c5eae437590716ec69cf1a1d77f05ccc924ebf5 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 16:30:24 -0300 Subject: [PATCH 08/93] feat(product.jsonc): adicionando blockClass e testId do bloco product-images --- store/blocks/pdp/product.jsonc | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f7d6e5f..4f52933 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -45,6 +45,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "product-main-content", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -60,7 +61,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#flex-layout.row#product-image", "product-bookmark", "product-specification-badges" ] @@ -78,10 +79,14 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { + "blockClass": "stack-layout-content", "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#flex-layout.row#product-image": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { -- 2.34.1 From 8eb6eb3abdc25fc51ea90b127d94016f2c77f6de Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 16:33:02 -0300 Subject: [PATCH 09/93] style(swiper): corrigindo tamanhos --- styles/css/vtex.flex-layout.css | 120 ++++-------------- styles/css/vtex.store-components.css | 39 +++++- .../product/flex-layout/vtex.flex-layout.scss | 23 ++++ .../vtex.store-components.scss | 41 +++++- 4 files changed, 119 insertions(+), 104 deletions(-) create mode 100644 styles/sass/pages/product/flex-layout/vtex.flex-layout.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..731ba90 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,34 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.stretchChildrenWidth { + padding: 0; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +.flexCol--stack-layout-content { + width: 100% !important; +} + +@media (max-width: 1920px) and (min-width: 1024px) { + .flexRowContent--product-main-content { + display: grid; + grid-template-columns: 48.819% 48.819%; } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5e62b97..57c51f7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,17 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + width: 100%; + padding: 0; + margin: auto; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .container { + padding: 0 40px; + } +} + .carouselGaleryThumbs { margin-top: 16px; } @@ -25,8 +36,8 @@ } .carouselGaleryCursor { - margin: 0; - width: 100%; + margin: 0 !important; + width: auto; padding: 0; } @@ -34,9 +45,27 @@ display: none; } +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} + .productImageTag--main { - width: 664px; object-fit: unset !important; - max-height: 664px !important; - height: 664px; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImageTag--main { + max-height: 664px !important; + height: 664px !important; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + .productVideo, + .videoContainer { + height: 664px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss new file mode 100644 index 0000000..7ffd755 --- /dev/null +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; +} + +.stretchChildrenWidth { + padding: 0; + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100% !important; + } +} + +.flexCol--stack-layout-content { + width: 100% !important; +} + +.flexRowContent--product-main-content { + @media (max-width: 1920px) and (min-width: 1024px) { + display: grid; + grid-template-columns: 48.819% 48.819%; + } +} diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1e12132..fd083ec 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,5 +1,14 @@ //product-image +.container { + width: 100%; + padding: 0; + margin: auto; + @media (max-width: 1920px) and (min-width: 1024px) { + padding: 0 40px; + } +} + .carouselGaleryThumbs { margin-top: 16px; .productImagesThumb { @@ -17,9 +26,11 @@ } } } + + .carouselGaleryCursor { - margin: 0; - width: 100%; + margin: 0 !important; + width: auto; padding: 0; } @@ -27,9 +38,25 @@ display: none; } -.productImageTag--main { - width: 664px; - object-fit: unset !important; - max-height: 664px !important; - height: 664px; +.productImagesGallerySwiperContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } } +.productImageTag--main { + object-fit: unset !important; + @media (max-width: 1920px) and (min-width: 1024px) { + max-height: 664px !important; + height: 664px !important; + } +} + +.productVideo, +.videoContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + height: 664px; + } +} + -- 2.34.1 From f7aa21f96c66eef7753b7c8d1c0b19c85b4f88d2 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 20:37:43 -0300 Subject: [PATCH 10/93] =?UTF-8?q?refactor:=20removendo=20bloco=20product-i?= =?UTF-8?q?nstallments=20e=20flex-layout.row#list-price-savings=20e=20muda?= =?UTF-8?q?ndo=20posi=C3=A7=C3=A3o=20do=20bloco=20product-identifier.produ?= =?UTF-8?q?ct?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 10 ++++------ store/blocks/product-price.jsonc | 14 -------------- store/blocks/product-summary/quickview.json | 1 - 3 files changed, 4 insertions(+), 21 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4f52933..b6b7aa4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -107,12 +107,11 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", "product-identifier.product", + "product-rating-summary", + "flex-layout.row#selling-price", + "installment-product-component", + "product-separator", "sku-selector", "product-quantity", "product-assembly-options", @@ -123,7 +122,6 @@ "share#default" ] }, - "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..3f13053 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -9,19 +9,5 @@ "children": [ "product-selling-price" ] - }, - - "flex-layout.row#list-price-savings": { - "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 2, - "marginTop": 5 - }, - "children": [ - "product-list-price", - "product-price-savings" - ] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..1226c11 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -36,7 +36,6 @@ }, "flex-layout.col#quickviewPrice": { "children": [ - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments" ] -- 2.34.1 From e37dfaa47ecb2b256413f1d7e0d013edd93eebed Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 20:41:02 -0300 Subject: [PATCH 11/93] feat: adicionando componente InstallmentProduct --- react/InstallmentProduct.tsx | 3 ++ .../InstallmentProduct/InstallmentProduct.tsx | 29 +++++++++++++++++++ store/interfaces.json | 3 ++ 3 files changed, 35 insertions(+) create mode 100644 react/InstallmentProduct.tsx create mode 100644 react/components/InstallmentProduct/InstallmentProduct.tsx diff --git a/react/InstallmentProduct.tsx b/react/InstallmentProduct.tsx new file mode 100644 index 0000000..0827efa --- /dev/null +++ b/react/InstallmentProduct.tsx @@ -0,0 +1,3 @@ +import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct"; + +export default InstallmentProduct; diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx new file mode 100644 index 0000000..12019c1 --- /dev/null +++ b/react/components/InstallmentProduct/InstallmentProduct.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const InstallmentProduct = () => { + const product = useProduct(); + + const productWithInstallments = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[10] + .NumberOfInstallments, + value: + product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value, + }; + return ( +

+ + {productWithInstallments.numberOfInstallments}x  + + de  + + R$  + {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")} + sem juros + +

+ ); +}; + +export default InstallmentProduct; diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..0273250 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "installment-product-component": { + "component": "InstallmentProduct" } } -- 2.34.1 From 2c44ebe8bfb77cd4c74a9e12b1f94a57cf36e790 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 20:44:16 -0300 Subject: [PATCH 12/93] style: aplicando estilo do nome do produto --- styles/css/vtex.store-components.css | 10 ++++++++++ .../store-components/vtex.store-components.scss | 16 +++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 57c51f7..3a6e6c5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -68,4 +68,14 @@ .videoContainer { height: 664px; } +} + +.productNameContainer { + text-align: right; +} +.productNameContainer .productBrand { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index fd083ec..f8ec26b 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,11 +1,11 @@ -//product-image +//product-images .container { width: 100%; padding: 0; margin: auto; @media (max-width: 1920px) and (min-width: 1024px) { - padding: 0 40px; + padding: 0 40px; } } @@ -27,7 +27,6 @@ } } - .carouselGaleryCursor { margin: 0 !important; width: auto; @@ -60,3 +59,14 @@ } } +//dados produto + +.productNameContainer { + text-align: right; + .productBrand { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + } +} -- 2.34.1 From e38207246dc2660778ca82727245df2b6092bda4 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 21:00:49 -0300 Subject: [PATCH 13/93] =?UTF-8?q?style:=20aplicando=20estilo=20no=20C?= =?UTF-8?q?=C3=B3digo=20de=20refer=C3=AAncia=20do=20Produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.product-identifier.css | 23 +++++++++++++++++-- .../product/vtex.product-identifier.scss | 15 ++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..ee10127 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,22 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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 */ +.product-identifier__label, +.product-identifier__separator { + display: none; } + +.product-identifier__value { + float: right; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..2d78c00 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,15 @@ +//Código de referência Produto + +.product-identifier__label, +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + float: right; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} -- 2.34.1 From 8e91580553cf433e2e9194e90b68df8ed4fc3fc5 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 21:09:01 -0300 Subject: [PATCH 14/93] =?UTF-8?q?style:=20aplicando=20estilo=20na=20parte?= =?UTF-8?q?=20de=20pre=C3=A7o=20e=20parcelamento=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 11 +++ styles/css/vtex.product-price.css | 90 +++---------------- .../product/flex-layout/vtex.flex-layout.scss | 17 ++++ .../pages/product/vtex.product-price.scss | 8 ++ 4 files changed, 49 insertions(+), 77 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 731ba90..83cb057 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -31,4 +31,15 @@ display: grid; grid-template-columns: 48.819% 48.819%; } +} + +.flexColChild .PriceContent { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.flexColChild .PriceContent :nth-child(1n) { + font-weight: 700; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..e3b1eb7 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,15 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - +/* +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 */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; font-weight: 700; -} - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-size: 25px; + line-height: 38px; + color: #000000; +} \ No newline at end of file diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 7ffd755..e4baf7b 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -1,3 +1,5 @@ +//product-images + .flexRowContent { padding: 0; margin: 0; @@ -21,3 +23,18 @@ grid-template-columns: 48.819% 48.819%; } } + +// dados produto + +.flexColChild { + .PriceContent { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + & :nth-child(1n) { + font-weight: 700; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..57181bb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,8 @@ +//dados produto + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} -- 2.34.1 From f8e3eb1720ab76b0f3d34c8e73ba69c3e39ae062 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 08:30:00 -0300 Subject: [PATCH 15/93] refactor: substituindo scss por css modules no componente InstallmentProduct --- .../InstallmentProduct/InstallmentProduct.tsx | 11 +++++------ styles/css/vtex.flex-layout.css | 11 ----------- .../product/flex-layout/vtex.flex-layout.scss | 15 --------------- 3 files changed, 5 insertions(+), 32 deletions(-) diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx index 12019c1..096a337 100644 --- a/react/components/InstallmentProduct/InstallmentProduct.tsx +++ b/react/components/InstallmentProduct/InstallmentProduct.tsx @@ -1,5 +1,6 @@ import React from "react"; import { useProduct } from "vtex.product-context"; +import styles from "./InstallmentProduct.module.css"; const InstallmentProduct = () => { const product = useProduct(); @@ -12,16 +13,14 @@ const InstallmentProduct = () => { product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value, }; return ( -

- - {productWithInstallments.numberOfInstallments}x  - +

+ {productWithInstallments.numberOfInstallments}x  de  R$  {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")} - sem juros - + {" "} + sem juros

); }; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 83cb057..731ba90 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -31,15 +31,4 @@ display: grid; grid-template-columns: 48.819% 48.819%; } -} - -.flexColChild .PriceContent { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} -.flexColChild .PriceContent :nth-child(1n) { - font-weight: 700; } \ No newline at end of file diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index e4baf7b..29b23e4 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -23,18 +23,3 @@ grid-template-columns: 48.819% 48.819%; } } - -// dados produto - -.flexColChild { - .PriceContent { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; - & :nth-child(1n) { - font-weight: 700; - } - } -} -- 2.34.1 From e7da7119592f28eedca44fa7284efd98adc1f2de Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 08:31:32 -0300 Subject: [PATCH 16/93] feat: adicionando index.d.ts e InstallmentProduct.module.css --- .../InstallmentProduct/InstallmentProduct.module.css | 11 +++++++++++ react/index.d.ts | 1 + 2 files changed, 12 insertions(+) create mode 100644 react/components/InstallmentProduct/InstallmentProduct.module.css create mode 100644 react/index.d.ts diff --git a/react/components/InstallmentProduct/InstallmentProduct.module.css b/react/components/InstallmentProduct/InstallmentProduct.module.css new file mode 100644 index 0000000..f030560 --- /dev/null +++ b/react/components/InstallmentProduct/InstallmentProduct.module.css @@ -0,0 +1,11 @@ +.PriceContent { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.PriceContent:nth-child(1n) { + font-weight: 700; +} diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..1eabbb4 --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; -- 2.34.1 From f6d0f2d94a66a7ad8f4ee96493790c17ca86edb5 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 12:47:22 -0300 Subject: [PATCH 17/93] feat: adicionando componente Pix --- react/Pix.tsx | 3 +++ react/components/Pix/Pix.tsx | 32 ++++++++++++++++++++++++++++++++ react/components/Pix/styles.css | 16 ++++++++++++++++ store/blocks/pdp/product.jsonc | 7 +++++++ store/interfaces.json | 3 +++ 5 files changed, 61 insertions(+) create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/styles.css diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..c59bf76 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + const pix = { + pix: Number( + product?.selectedItem?.sellers[0].commertialOffer.Installments[0].Value + ), + }; + const discount = pix.pix * 0.1; + const pixPrice = pix.pix - discount; + + return ( +
+ logo pix +
+ + R$ {pixPrice?.toFixed(2).toString().replace(".", ",")} + + 10 % de desconto +
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..2b872a1 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,16 @@ +.PixContent { + margin-top: 8px; + height: 24px; + display: flex; + column-gap: 26px; +} + +.ImgPixContent{ + width: 66.01px; + height: 24px; +} + +.PixDiscount{ + display: flex; + flex-direction: column; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b6b7aa4..6a66f9e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -111,6 +111,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "installment-product-component", + "html#pix-component", "product-separator", "sku-selector", "product-quantity", @@ -122,6 +123,12 @@ "share#default" ] }, + "html#pix-component": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/store/interfaces.json b/store/interfaces.json index 0273250..cededb5 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,8 @@ }, "installment-product-component": { "component": "InstallmentProduct" + }, + "pix-component": { + "component": "Pix" } } -- 2.34.1 From 4df553455fb39a9b69dd19bd7eb65945fef66aca Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 12:55:11 -0300 Subject: [PATCH 18/93] fix: corrigindo problema com css modules no componente Pix --- react/index.d.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/react/index.d.ts b/react/index.d.ts index 1eabbb4..1fb927a 100644 --- a/react/index.d.ts +++ b/react/index.d.ts @@ -1 +1,7 @@ -declare module "*.module.css"; +declare module "*.css" { + interface IClassNames { + [className: string]: string; + } + const classNames: IClassNames; + export = classNames; +} -- 2.34.1 From b4f25ee6d006ae8823976078fea7e27ba9368356 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 12:59:09 -0300 Subject: [PATCH 19/93] =?UTF-8?q?refactor:=20modificando=20nome=20do=20arq?= =?UTF-8?q?uivo=20de=20estilo=20do=20componente=20InstallmentProduct=20e?= =?UTF-8?q?=20a=20op=C3=A7=C3=A3o=20do=20Installments=20do=20useProduct?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/InstallmentProduct/InstallmentProduct.tsx | 7 +++---- .../{InstallmentProduct.module.css => styles.css} | 0 2 files changed, 3 insertions(+), 4 deletions(-) rename react/components/InstallmentProduct/{InstallmentProduct.module.css => styles.css} (100%) diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx index 096a337..8bb9802 100644 --- a/react/components/InstallmentProduct/InstallmentProduct.tsx +++ b/react/components/InstallmentProduct/InstallmentProduct.tsx @@ -1,16 +1,15 @@ import React from "react"; import { useProduct } from "vtex.product-context"; -import styles from "./InstallmentProduct.module.css"; +import styles from "./styles.css"; const InstallmentProduct = () => { const product = useProduct(); - const productWithInstallments = { numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[10] + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] .NumberOfInstallments, value: - product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value, + product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, }; return (

diff --git a/react/components/InstallmentProduct/InstallmentProduct.module.css b/react/components/InstallmentProduct/styles.css similarity index 100% rename from react/components/InstallmentProduct/InstallmentProduct.module.css rename to react/components/InstallmentProduct/styles.css -- 2.34.1 From df1df77e2ce8b1af73660304cffb5a25e2095913 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 13:02:00 -0300 Subject: [PATCH 20/93] refactor(Pix.tsx): susbtituindo o valor do Installments pelo valor do Price --- react/components/Pix/Pix.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index c59bf76..d7528cb 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -4,9 +4,10 @@ import styles from "./styles.css"; const Pix = () => { const product = useProduct(); + console.log(product) const pix = { pix: Number( - product?.selectedItem?.sellers[0].commertialOffer.Installments[0].Value + product?.selectedItem?.sellers[0].commertialOffer.Price ), }; const discount = pix.pix * 0.1; -- 2.34.1 From e6d1cad411940ec9839243bdb497622b1450b1b5 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 15:11:57 -0300 Subject: [PATCH 21/93] refactor(Pix.tsx): modificando nome pix para pixValue --- react/components/Pix/Pix.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index d7528cb..ea19f05 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -6,12 +6,12 @@ const Pix = () => { const product = useProduct(); console.log(product) const pix = { - pix: Number( + pixValue: Number( product?.selectedItem?.sellers[0].commertialOffer.Price ), }; - const discount = pix.pix * 0.1; - const pixPrice = pix.pix - discount; + const discount = pix.pixValue * 0.1; + const pixPrice = pix.pixValue - discount; return (

-- 2.34.1 From 01349f387a8652e6eda44b8c0bb391233c2d368d Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 15:34:09 -0300 Subject: [PATCH 22/93] refactor(Pix.tsx): adicionando classes --- react/components/Pix/Pix.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index ea19f05..1622e63 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -21,10 +21,10 @@ const Pix = () => { alt="logo pix" />
- + R$ {pixPrice?.toFixed(2).toString().replace(".", ",")} - 10 % de desconto + 10 % de desconto
); -- 2.34.1 From b9a3895921a961e2490fe10d5816650b16ea1adb Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 15:36:29 -0300 Subject: [PATCH 23/93] =?UTF-8?q?style(styles.css):=20adicionando=20estilo?= =?UTF-8?q?=20da=20=C3=A1rea=20de=20desconto=20via=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Pix/styles.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css index 2b872a1..b416807 100644 --- a/react/components/Pix/styles.css +++ b/react/components/Pix/styles.css @@ -1,16 +1,32 @@ .PixContent { margin-top: 8px; - height: 24px; + height: 36px; display: flex; + align-items: center; column-gap: 26px; } -.ImgPixContent{ +.ImgPixContent { width: 66.01px; height: 24px; } -.PixDiscount{ +.PixDiscount { display: flex; flex-direction: column; + height: 36px; +} + +.TextPixDiscount { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.TextDiscount { + font-weight: 300 ; + font-size: 13px; + line-height: 18px; + color: #929292; } -- 2.34.1 From dfdf374144591589de88b5a12cede11849b7afbf Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 21:57:59 -0300 Subject: [PATCH 24/93] style: adicionando estilo dos seletores de SKU --- styles/css/vtex.store-components.css | 165 ++++++++++++++++ .../vtex.store-components.scss | 180 ++++++++++++++++++ 2 files changed, 345 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3a6e6c5..82f809f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -78,4 +78,169 @@ font-size: 20px; line-height: 34px; color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin-left: 0; + column-gap: 16px; + margin: 8px 0 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + column-gap: 16px; + margin: 8px 0 0; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected { + border-radius: 100%; + border: 2px solid #000000; + width: 48px; + height: 48px; + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + bottom: 0; + top: 0; + right: 0; + border: 2px solid #000000; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + border: none; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% + 10px - 11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index f8ec26b..d3c2b77 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -70,3 +70,183 @@ color: #575757; } } + +// sku selector + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + margin-left: 0; + column-gap: 16px; + margin: 8px 0 0; + + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} + + + +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + column-gap: 16px; + margin: 8px 0 0; + height: 48px; + .skuSelectorItem--selected { + border-radius: 100%; + border: 2px solid #000000; + width: 48px; + height: 48px; + margin: 0; + .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + bottom: 0; + top: 0; + right: 0; + border: 2px solid #000000; + } + .skuSelectorInternalBox { + .valueWrapper, + .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; + } + } + } + .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; + .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + border: none; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; + .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% - -10px + -11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); + } + .valueWrapper, + .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; + } + } + } + } + } +} -- 2.34.1 From e8975f7196364ae339c756f4f507d3871aa54f96 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 25 Jan 2023 22:11:52 -0300 Subject: [PATCH 25/93] feat: adicionando testId e blockClass sku-selector --- store/blocks/pdp/product.jsonc | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a66f9e..fcfc31b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -113,7 +113,7 @@ "installment-product-component", "html#pix-component", "product-separator", - "sku-selector", + "html#sku-selector", "product-quantity", "product-assembly-options", "product-gifts", @@ -135,11 +135,17 @@ }, "children": ["vtex.store-components:product-name"] }, - + "html#sku-selector":{ + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-selector" } }, @@ -172,7 +178,7 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", + "html#sku-selector", "flex-layout.row#availability" ] }, -- 2.34.1 From 95310ec28696fcb7bca76570819ab4222a9fec6e Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:26:00 -0300 Subject: [PATCH 26/93] refactor: deletando arquivos .css e .scss agenciamagma.store-theme --- styles/css/agenciamagma.store-theme.css | 16 ---------------- .../pages/product/agenciamagma.store-theme.scss | 8 -------- 2 files changed, 24 deletions(-) delete mode 100644 styles/css/agenciamagma.store-theme.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 5e37ba5..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -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 */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - -- 2.34.1 From 8f9edf916ec1121786f99d46e3f97e1b6d6fcc53 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:29:41 -0300 Subject: [PATCH 27/93] feat: adicionando styles.css ao componente Html --- react/components/Html/index.tsx | 1 + react/components/Html/styles.css | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 react/components/Html/styles.css diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..0a215b6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..23bdc01 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,18 @@ +/* Product Quantity and Add To Cart Button */ + +[class*="html--cart-content"] { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 10px; + margin-top: 8px; + margin-bottom: 16px; +} + +[data-testid="product-quantity"]{ + height: 49px; +} + +[data-testid="add-to-cart-button"]{ + width: 100%; +} -- 2.34.1 From ce9a14f3a80b9745dec0fdd9d1323c13cfc84780 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:35:13 -0300 Subject: [PATCH 28/93] refactor(product.jsonc): substituindo flex-layout.col por html# e adicionando estrutura do product quantity e add to cart button --- store/blocks/pdp/product.jsonc | 40 ++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fcfc31b..22f300e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -53,7 +53,7 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["flex-layout.col#stack", "html#right-col"] }, "stack-layout": { @@ -100,7 +100,7 @@ "thumbnailsOrientation": "horizontal" } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { "preventVerticalStretch": true, "rowGap": 0 @@ -108,21 +108,40 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "product-rating-summary", + // "product-rating-summary", "flex-layout.row#selling-price", "installment-product-component", "html#pix-component", - "product-separator", + // "product-separator", "html#sku-selector", - "product-quantity", + // "product-quantity", + "html#cart-content", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator", "share#default" ] }, + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["html#product-quantity", "html#flex-layout.row#buy-button"] + }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#flex-layout.row#buy-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#buy-button"] + }, "html#pix-component": { "props": { "testId": "pix-price" @@ -135,7 +154,7 @@ }, "children": ["vtex.store-components:product-name"] }, - "html#sku-selector":{ + "html#sku-selector": { "props": { "testId": "sku-selector" }, @@ -164,12 +183,9 @@ "marginBottom": 7, "paddingTop": 7 }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] + "children": ["flex-layout.col#stack", "html#right-col-availability"] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { "preventVerticalStretch": true, "rowGap": 0, -- 2.34.1 From b16bf9ce9cabcc4a52363f86ff8a91629ed0a523 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:39:07 -0300 Subject: [PATCH 29/93] feat: adicionando arquivos .scss e .css vtex.product-quantity com estilos do product quantity --- styles/css/vtex.product-quantity.css | 54 ++++++++++++++++++ .../pages/product/vtex.product-quantity.scss | 56 +++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..ea70604 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,54 @@ +/* +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 */ +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..2165783 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,56 @@ +//product quantity + +.quantitySelectorContainer { + .quantitySelectorTitle { + display: none; + } + + .quantitySelectorStepper { + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + } + } +} -- 2.34.1 From 3cd9ed0b6e6abbf2d7893288f77b347764751370 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:51:30 -0300 Subject: [PATCH 30/93] =?UTF-8?q?style:=20adicionando=20estilo=20do=20bot?= =?UTF-8?q?=C3=A3o=20adicionar=20=C3=A0=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 19 +++++++++++++ .../product/flex-layout/vtex.flex-layout.scss | 28 +++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 731ba90..fa83039 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -31,4 +32,22 @@ display: grid; grid-template-columns: 48.819% 48.819%; } +} + +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { + background: #000000; + padding: 12px 64px; + height: 49px; + border: none; + border-radius: 0; +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { + content: "ADICIONAR À SACOLA"; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 29b23e4..4efb96c 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -23,3 +23,31 @@ grid-template-columns: 48.819% 48.819%; } } + +//Botao add Cart + +.flexRow { + .flexRowContent { + .stretchChildrenWidth { + :global(.vtex-button):first-child { + background: #000000; + padding: 12px 64px; + height: 49px; + border: none; + border-radius: 0; + :global(.vtex-button__label)::before { + content: "ADICIONAR À SACOLA"; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + :global(.vtex-button__label) { + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + display: none; + } + } + } + } + } +} -- 2.34.1 From bd92c3230f848b15172b55d16764dc78a51e5e6e Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:56:11 -0300 Subject: [PATCH 31/93] refactor(Pix.tsx): removendo console.log --- react/components/Pix/Pix.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 1622e63..191146e 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -4,11 +4,8 @@ import styles from "./styles.css"; const Pix = () => { const product = useProduct(); - console.log(product) const pix = { - pixValue: Number( - product?.selectedItem?.sellers[0].commertialOffer.Price - ), + pixValue: Number(product?.selectedItem?.sellers[0].commertialOffer.Price), }; const discount = pix.pixValue * 0.1; const pixPrice = pix.pixValue - discount; -- 2.34.1 From f1be791e8778a7a915a418a9d1e87aa998407f5e Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 10:58:33 -0300 Subject: [PATCH 32/93] style: corrigindo estilo do seletor de cores --- styles/css/vtex.store-components.css | 49 ++++------------- .../vtex.store-components.scss | 55 ++++--------------- 2 files changed, 22 insertions(+), 82 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 82f809f..548eabb 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -168,55 +168,28 @@ margin: 0; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin-left: 0; column-gap: 16px; margin: 8px 0 0; - height: 48px; -} -.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected { - border-radius: 100%; - border: 2px solid #000000; - width: 48px; - height: 48px; - margin: 0; -} -.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { - width: 48px; - height: 48px; - border-radius: 100%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - bottom: 0; - top: 0; - right: 0; - border: 2px solid #000000; -} -.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, -.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemImageValue { - border-radius: 100%; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - width: 48px; - height: 48px; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; width: 48px; height: 48px; margin: 0; + border: 1px solid #989898; } -.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround { +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; width: 48px; height: 48px; - border-radius: 100%; - border: none; - display: flex; - align-items: center; - justify-content: center; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; margin: 0 auto; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index d3c2b77..1b1fa29 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -106,7 +106,6 @@ margin-left: 0; column-gap: 16px; margin: 8px 0 0; - .skuSelectorItem { border-radius: 100%; width: 40px; @@ -163,62 +162,30 @@ } } } - - - .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { margin: 0; .skuSelectorOptionsList { + margin-left: 0; column-gap: 16px; margin: 8px 0 0; - height: 48px; - .skuSelectorItem--selected { - border-radius: 100%; - border: 2px solid #000000; - width: 48px; - height: 48px; - margin: 0; - .frameAround { - width: 48px; - height: 48px; - border-radius: 100%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - bottom: 0; - top: 0; - right: 0; - border: 2px solid #000000; - } - .skuSelectorInternalBox { - .valueWrapper, - .skuSelectorItemImageValue { - border-radius: 100%; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - width: 48px; - height: 48px; - } - } - } .skuSelectorItem { border-radius: 100%; width: 48px; height: 48px; margin: 0; - .frameAround { + border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; width: 48px; height: 48px; - border-radius: 100%; - border: none; - display: flex; - align-items: center; - justify-content: center; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; margin: 0 auto; } .skuSelectorInternalBox { -- 2.34.1 From ae3d9b113703faa520b4f8bd5a0f544240bb8988 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 14:23:04 -0300 Subject: [PATCH 33/93] style: adicionando estilo da calculadora de frete --- styles/css/vtex.store-components.css | 55 +++++++++++++++++ .../vtex.store-components.scss | 61 +++++++++++++++++++ 2 files changed, 116 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 548eabb..d2d5868 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -216,4 +216,59 @@ margin: 0 auto; width: 48px; height: 48px; +} + +.shippingContainer { + display: flex; + align-items: center; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding-bottom: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before { + content: "CALCULAR FRETE:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + margin-top: 8px; + height: 49px; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + text-decoration-line: underline; + color: #000000; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding-top: 0; + position: relative; + left: 312px; + bottom: 45px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { + display: none; +} +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background: #000000; + border-radius: 0; + border: none; + bottom: 1px; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + display: none; +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + color: #ffffff; + font-weight: 600; + font-size: 14px; + line-height: 19px; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1b1fa29..3e69e9a 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -217,3 +217,64 @@ } } } + +// Calculadora de Frete + +.shippingContainer { + display: flex; + align-items: center; + :global(.vtex-address-form__postalCode) { + padding-bottom: 0; + :global(.vtex-input)::before { + content: "CALCULAR FRETE:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + :global(.vtex-input) { + :global(.vtex-input__label) { + display: none; + } + :global(.vtex-input-prefix__group) { + margin-top: 8px; + height: 49px; + border-radius: 0; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + :last-child { + text-decoration-line: underline; + color: #000000; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding-top: 0; + position: relative; + left: 312px; + bottom: 45px; + :last-child { + display: none; + } + } + } + } + :global(.vtex-button) { + width: 49px; + height: 49px; + background: #000000; + border-radius: 0; + border: none; + bottom: 1px; + :global(.vtex-button__label) { + display: none; + } + } + :global(.vtex-button)::after { + content: "OK"; + color: #ffffff; + font-weight: 600; + font-size: 14px; + line-height: 19px; + } +} -- 2.34.1 From 37509ade2140fe200808facc6ce8e23685ea5ef9 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 16:52:47 -0300 Subject: [PATCH 34/93] style: corrigindo estilo da calculadora de frete e adicionando estilo do resultado do frete --- styles/css/vtex.store-components.css | 65 ++++++++++++++++- .../vtex.store-components.scss | 69 ++++++++++++++++++- 2 files changed, 130 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d2d5868..8489873 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -220,7 +220,7 @@ .shippingContainer { display: flex; - align-items: center; + align-items: flex-end; } .shippingContainer :global(.vtex-address-form__postalCode) { padding-bottom: 0; @@ -240,6 +240,10 @@ height: 49px; border-radius: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + height: 0; + padding: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { text-decoration-line: underline; color: #000000; @@ -249,7 +253,7 @@ padding-top: 0; position: relative; left: 312px; - bottom: 45px; + bottom: 35px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { display: none; @@ -271,4 +275,61 @@ font-weight: 600; font-size: 14px; line-height: 19px; +} + +.shippingTable { + border: 0; + padding: 0; +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 16.36%); +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-align: right; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 16.36%); + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: B; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding-left: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 3e69e9a..8b21279 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -222,7 +222,7 @@ .shippingContainer { display: flex; - align-items: center; + align-items: flex-end; :global(.vtex-address-form__postalCode) { padding-bottom: 0; :global(.vtex-input)::before { @@ -243,6 +243,8 @@ } } :global(.vtex-address-form__postalCode-forgottenURL) { + height: 0; + padding: 0; :last-child { text-decoration-line: underline; color: #000000; @@ -252,7 +254,7 @@ padding-top: 0; position: relative; left: 312px; - bottom: 45px; + bottom: 35px; :last-child { display: none; } @@ -278,3 +280,66 @@ line-height: 19px; } } + +//Resultado Frete + +.shippingTable { + border: 0; + padding: 0; + .shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 16.36%); + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + .shippingTableHeadDeliveryName { + text-align: left; + } + .shippingTableHeadDeliveryPrice { + text-align: right; + } + } + } + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 16.36%); + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + .shippingTableCellDeliveryPrice { + grid-area: B; + } + .shippingTableCell { + padding-left: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} -- 2.34.1 From 66f1e7e058c940a9beb532e8c3c073d4f47b30c4 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 20:40:53 -0300 Subject: [PATCH 35/93] feat(product.jsonc): adicionando estrutura do tab layout --- store/blocks/pdp/product.jsonc | 109 ++++++++++++++++++++++++++++++--- 1 file changed, 100 insertions(+), 9 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 22f300e..767578f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + // "flex-layout.row#description", + "tab-layout#description", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", @@ -26,12 +27,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -100,6 +96,100 @@ "thumbnailsOrientation": "horizontal" } }, + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "image-description" + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ] + }, + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + }, + // "html#right-col": { "props": { "preventVerticalStretch": true, @@ -120,8 +210,8 @@ "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, "html#cart-content": { @@ -216,3 +306,4 @@ } } } + -- 2.34.1 From b0e20b76584d728880681cfa9f12c159705c3a4f Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 20:51:57 -0300 Subject: [PATCH 36/93] feat: adicionando arquivos .scss e .css vtex.tab-layout com estilos do tab layout --- styles/css/vtex.tab-layout.css | 60 +++++++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 55 +++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..d6b1b82 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,60 @@ +/* +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 */ +.container--description-block { + padding: 0 40px; +} +.container--description-block .listContainer { + justify-content: space-around; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.container--description-block .listContainer .listItem { + margin: 0; + padding: 0; +} +.container--description-block .listContainer .listItem :global(.vtex-button) { + background-color: unset; + border: none; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + width: 114px; + height: 38px; + border-radius: 0; +} +.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; +} +.container--description-block .listContainer .listItemActive { + margin: 0; + padding: 0; +} +.container--description-block .listContainer .listItemActive :global(.vtex-button) { + background-color: unset; + border: none; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-bottom: 2px solid #000000; + width: 114px; + height: 38px; + border-radius: 0; +} +.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; +} +.container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 50% 50%; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..dfecdf8 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,55 @@ +//Tab Layout + +.container--description-block { + padding: 0 40px; + .listContainer { + justify-content: space-around; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + margin: 0; + padding: 0; + :global(.vtex-button) { + background-color: unset; + border: none; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + width: 114px; + height: 38px; + border-radius: 0; + :global(.vtex-button__label) { + padding: 0; + } + } + } + .listItemActive { + margin: 0; + padding: 0; + :global(.vtex-button) { + background-color: unset; + border: none; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-bottom: 2px solid #000000; + width: 114px; + height: 38px; + border-radius: 0; + :global(.vtex-button__label) { + padding: 0; + } + } + } + } + .contentContainer { + .contentItem { + display: grid; + grid-template-columns: 50% 50%; + } + } +} -- 2.34.1 From 72007725ff426d8d876ce01cc2a059af821a7324 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 20:57:55 -0300 Subject: [PATCH 37/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?=20do=20.productImageTag--main=20e=20adicionando=20estilo=20do?= =?UTF-8?q?=20tab=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 35 +++++++++++++++- .../vtex.store-components.scss | 40 ++++++++++++++++++- 2 files changed, 71 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8489873..f3135bf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -58,8 +58,7 @@ } @media (max-width: 1920px) and (min-width: 1024px) { .productImageTag--main { - max-height: 664px !important; - height: 664px !important; + max-height: unset !important; } } @@ -332,4 +331,36 @@ } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { display: none; +} + +.productImagesContainer--image-description { + width: 92.93%; + max-height: unset; + left: 6.9%; + position: relative; +} +.productImagesContainer--image-description .productImageTag--image-description--main { + max-height: unset !important; +} + +.productDescriptionContainer { + margin-left: 32px; + width: 92.93%; + position: relative; +} +.productDescriptionContainer .productDescriptionTitle { + margin-bottom: 8px; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText .container { + padding: 0; +} +.productDescriptionContainer .productDescriptionText .container .content :first-child { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 8b21279..ccab51c 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -47,8 +47,7 @@ .productImageTag--main { object-fit: unset !important; @media (max-width: 1920px) and (min-width: 1024px) { - max-height: 664px !important; - height: 664px !important; + max-height: unset !important; } } @@ -343,3 +342,40 @@ } } } + +//Tab Layout + +.productImagesContainer--image-description { + width: 92.93%; + max-height: unset; + left: 6.9%; + position: relative; + & .productImageTag--image-description--main{ + max-height: unset !important; + } +} +.productDescriptionContainer { + margin-left: 32px; + width: 92.93%; + position: relative; + .productDescriptionTitle { + margin-bottom: 8px; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + .productDescriptionText { + & .container { + padding: 0; + & .content { + :first-child { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } + } + } + } +} -- 2.34.1 From 0332eaa5e5bd76fc722df01507cf1e3ae2086e16 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 26 Jan 2023 21:13:46 -0300 Subject: [PATCH 38/93] =?UTF-8?q?style:=20substituindo=20texto=20valor=20p?= =?UTF-8?q?or=20frete=20na=20=C3=A1rea=20do=20resultado=20do=20frete?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 19 ++++++++++++++++- .../vtex.store-components.scss | 21 +++++++++++++++++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f3135bf..8e3ea89 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -286,6 +286,8 @@ .shippingTable .shippingTableHead .shippingTableRow { display: grid; grid-template-columns: repeat(3, 16.36%); + grid-template-areas: "A B C"; + column-gap: 32px; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, @@ -299,9 +301,24 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { text-align: left; + grid-area: A; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { - text-align: right; + text-align: left; + grid-area: B; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; } .shippingTable .shippingTableBody .shippingTableRow { display: grid; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index ccab51c..c407a4b 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -290,6 +290,8 @@ .shippingTableRow { display: grid; grid-template-columns: repeat(3, 16.36%); + grid-template-areas: "A B C"; + column-gap: 32px; .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -302,9 +304,24 @@ } .shippingTableHeadDeliveryName { text-align: left; + grid-area: A; + } + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; } .shippingTableHeadDeliveryPrice { - text-align: right; + text-align: left; + grid-area: B; + font-size: 0; + } + .shippingTableHeadDeliveryPrice::after{ + content: "frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; } } } @@ -350,7 +367,7 @@ max-height: unset; left: 6.9%; position: relative; - & .productImageTag--image-description--main{ + & .productImageTag--image-description--main { max-height: unset !important; } } -- 2.34.1 From cc7985610ff4b8891505841b45a1da4b9dc749de Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 27 Jan 2023 09:32:52 -0300 Subject: [PATCH 39/93] feat: adicionando componente Placeholder --- react/Placeholder.tsx | 3 +++ react/components/Placeholder/Placeholder.tsx | 17 ++++++++++++++ store/blocks/pdp/product.jsonc | 24 ++++++++++---------- store/interfaces.json | 3 +++ 4 files changed, 35 insertions(+), 12 deletions(-) create mode 100644 react/Placeholder.tsx create mode 100644 react/components/Placeholder/Placeholder.tsx diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..29393ed --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/Placeholder"; + +export default Placeholder; diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..7840422 --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,17 @@ +const Placeholder = () => { + if (typeof document !== "undefined") { + const postalCodeInput = document.querySelector( + ".vtex-address-form-4-x-input" + ); + const postalCodeValue = document.querySelector(".postalCode"); + if (postalCodeInput) { + postalCodeInput.classList.add("postalCode"); + } + if (postalCodeValue) { + postalCodeValue.setAttribute("placeholder", "Digite seu CEP"); + } + } + return null; +}; + +export default Placeholder; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 767578f..080749a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,8 +5,8 @@ "condition-layout.product#availability", // "flex-layout.row#description", "tab-layout#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -19,14 +19,14 @@ }, "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, + // "flex-layout.row#specifications-title": { + // "children": ["rich-text#specifications"] + // }, + // "rich-text#specifications": { + // "props": { + // "text": "##### Product Specifications" + // } + // }, "condition-layout.product#availability": { "props": { @@ -210,7 +210,8 @@ "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator" + "shipping-simulator", + "placeholder-component" // "share#default" ] }, @@ -306,4 +307,3 @@ } } } - diff --git a/store/interfaces.json b/store/interfaces.json index cededb5..70867e0 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -11,5 +11,8 @@ }, "pix-component": { "component": "Pix" + }, + "placeholder-component": { + "component": "Placeholder" } } -- 2.34.1 From 84ea20a9c440c4cba4966506bd681e7799ad23da Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 27 Jan 2023 09:36:30 -0300 Subject: [PATCH 40/93] style: adicionando estilo do placeholder do .vtex-address-form-4-x-input --- styles/css/vtex.store-components.css | 6 ++++++ .../store-components/vtex.store-components.scss | 10 ++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8e3ea89..16129f4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -239,6 +239,12 @@ height: 49px; border-radius: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { height: 0; padding: 0; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index c407a4b..6b268e1 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -238,7 +238,13 @@ :global(.vtex-input-prefix__group) { margin-top: 8px; height: 49px; - border-radius: 0; + border-radius: 0; + :global(.vtex-address-form-4-x-input)::placeholder { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -315,7 +321,7 @@ grid-area: B; font-size: 0; } - .shippingTableHeadDeliveryPrice::after{ + .shippingTableHeadDeliveryPrice::after { content: "frete"; font-weight: 400; font-size: 14px; -- 2.34.1 From 406029348a48b02cdbae77db24008edbe64f8ee8 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 27 Jan 2023 20:39:51 -0300 Subject: [PATCH 41/93] feat(product.jsonc): adicionando estrutura do carrosel --- store/blocks/pdp/product.jsonc | 67 +++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 080749a..6a69dbd 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,10 +7,75 @@ "tab-layout#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "html#slider-block-container", "product-questions-and-answers" ] }, + // + "html#slider-block-container": { + "children": [ + "rich-text#slider-block-title", + "html#list-context.product-list#slider-block" + ] + }, + "rich-text#slider-block-title": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "slider-title" + } + }, + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#product-content"] + }, + "html#product-summary.shelf#product-content": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + // "maxHeight": 300 + } + }, + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + "slider-layout#products-carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 1, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + // "html#breadcrumb": { "props": { "tag": "section", -- 2.34.1 From 600bd52d4ce809985b914959f874264a757c5c4d Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 27 Jan 2023 20:45:34 -0300 Subject: [PATCH 42/93] feat: adicionando arquivos .scss e .css vtex.slider-layout com estilos do carrosel --- styles/css/vtex.slider-layout.css | 116 ++++++++++++++---- .../pages/product/vtex.slider-layout.scss | 104 ++++++++++++++++ 2 files changed, 196 insertions(+), 24 deletions(-) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..8b9d8e0 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,99 @@ -.sliderLayoutContainer { +/* +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 */ +.sliderLayoutContainer--carousel { + background: unset; + min-height: 448.4px; + margin-bottom: 64px; +} +.sliderLayoutContainer--carousel .sliderTrackContainer { + margin-bottom: 32px; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) { + max-width: 314.4px !important; + border-radius: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 448.4px; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + padding: 16px 0 8px; + display: flex; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + display: inline-block; + vertical-align: text-top; + min-height: 50px; } - -.sliderTrackContainer { - max-width: 100%; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + width: 314.4px; + height: 314.4px; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (max-width: 1920px) and (min-width: 1024px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + min-width: 100%; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + row-gap: 8px; } +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + padding: 0; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + text-transform: lowercase; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + display: flex; + justify-content: center; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + display: flex; + align-items: center; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { + background-color: #000000; + width: 10px !important; + height: 10px !important; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive { + background-color: #ffffff; + border: 0.5px solid #000000; + width: 17px !important; + height: 17px !important; +} \ 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..aef21aa --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,104 @@ +//Slider + +.sliderLayoutContainer--carousel { + background: unset; + min-height: 448.4px; + margin-bottom: 64px; + .sliderTrackContainer { + margin-bottom: 32px; + .sliderTrack { + .slide--carousel { + .slideChildrenContainer--carousel { + :global(.vtex-product-summary-2-x-containerNormal) { + max-width: 314.4px !important; + border-radius: 0; + :global(.vtex-product-summary-2-x-clearLink) { + min-height: 448.4px; + :global(.vtex-product-summary-2-x-element) { + padding: 0; + :global(.vtex-product-summary-2-x-nameContainer) { + padding: 16px 0 8px; + display: flex; + justify-content: center; + :global(.vtex-product-summary-2-x-productNameContainer) { + :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + display: inline-block; + vertical-align: text-top; + min-height: 50px; + } + } + } + :global(.vtex-product-summary-2-x-imageContainer) { + width: 314.4px; + height: 314.4px; + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + @media (max-width: 1920px) and (min-width: 1024px) { + // min-width: 314.4px; + min-width: 100%; + } + } + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; + :global(.vtex-store-components-3-x-priceContainer) { + row-gap: 8px; + :global(.vtex-store-components-3-x-listPrice) { + padding: 0; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; + :global(.vtex-store-components-3-x-listPriceLabel) { + text-transform: lowercase; + } + } + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + display: flex; + justify-content: center; + // flex-direction: column; + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + :global(.vtex-store-components-3-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; + } + } + } + } + } + } + } + } + } + } + } + .paginationDotsContainer { + display: flex; + align-items: center; + .paginationDot { + background-color: #000000; + width: 10px !important; + height: 10px !important; + } + .paginationDot--isActive { + background-color: #ffffff; + border: 0.5px solid #000000; + width: 17px !important; + height: 17px !important; + } + } +} -- 2.34.1 From 2a21fdc5363a423022fc66c0c6a958ebe2bd09a4 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 27 Jan 2023 20:47:41 -0300 Subject: [PATCH 43/93] style: adicionando estilo do carrosel --- styles/css/vtex.rich-text.css | 16 +++++++++++++++- styles/css/vtex.store-components.css | 4 ++++ .../vtex.store-components.scss | 8 +++++++- styles/sass/pages/product/vtex.rich-text.scss | 18 ++++++++++++++++++ 4 files changed, 44 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..70bf4c7 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,18 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--slider-title { + display: flex; + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; +} +.container--slider-title .wrapper--slider-title .heading--slider-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 16129f4..d543552 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -386,4 +386,8 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.installmentsPrice { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 6b268e1..1f07099 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -238,7 +238,7 @@ :global(.vtex-input-prefix__group) { margin-top: 8px; height: 49px; - border-radius: 0; + border-radius: 0; :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -402,3 +402,9 @@ } } } + +//Slider + +.installmentsPrice { + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..50085f9 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,18 @@ +// Slider + +.container--slider-title { + display: flex; + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; + .wrapper--slider-title { + .heading--slider-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 0; + } + } +} -- 2.34.1 From 5213cb325faf0996a989745752b19c1a485200d4 Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 28 Jan 2023 10:49:06 -0300 Subject: [PATCH 44/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20estilos=20para=20telas=20de=201025px=20at?= =?UTF-8?q?=C3=A9=20768px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.breadcrumb.css | 6 ++ styles/css/vtex.flex-layout.css | 7 +++ styles/css/vtex.product-identifier.css | 7 +++ styles/css/vtex.product-quantity.css | 2 + styles/css/vtex.rich-text.css | 5 ++ styles/css/vtex.store-components.css | 60 +++++++++++++++++-- styles/css/vtex.tab-layout.css | 40 +++++++++++++ .../product/breadcrumb/vtex.breadcrumb.scss | 4 ++ .../product/flex-layout/vtex.flex-layout.scss | 5 ++ .../vtex.store-components.scss | 43 +++++++++++-- .../product/vtex.product-identifier.scss | 5 ++ .../pages/product/vtex.product-quantity.scss | 2 + styles/sass/pages/product/vtex.rich-text.scss | 3 + .../sass/pages/product/vtex.tab-layout.scss | 28 +++++++++ 14 files changed, 209 insertions(+), 8 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 0abdabd..bd2e59d 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,11 +13,17 @@ flex-wrap: wrap; margin-left: 40px; } +@media (max-width: 1025px) and (min-width: 768px) { + .container { + padding: 0 0 16px; + } +} .container .homeLink { padding: 0; } .container .homeLink::before { content: "Home"; + font-family: "Open Sans", sans-serif; } .container .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fa83039..843477e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -33,6 +33,12 @@ grid-template-columns: 48.819% 48.819%; } } +@media (max-width: 1025px) and (min-width: 768px) { + .flexRowContent--product-main-content { + display: grid; + grid-template-columns: 100%; + } +} .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { background: #000000; @@ -43,6 +49,7 @@ } .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ee10127..54f7f0a 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -19,4 +19,11 @@ line-height: 19px; text-align: right; color: rgba(146, 146, 146, 0.48); +} +@media (max-width: 1025px) and (min-width: 768px) { + .product-identifier__value { + text-align: left; + float: left; + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index ea70604..9efa127 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -27,6 +27,7 @@ height: 49px; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; @@ -41,6 +42,7 @@ height: 49px; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 70bf4c7..e67e0b7 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -13,6 +13,11 @@ margin-top: 16px; margin-bottom: 32px; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--slider-title { + margin-bottom: 24px; + } +} .container--slider-title .wrapper--slider-title .heading--slider-title { font-weight: 400; font-size: 24px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d543552..97e8441 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -20,6 +20,7 @@ .carouselGaleryThumbs { margin-top: 16px; + height: 90px !important; } .carouselGaleryThumbs .productImagesThumb { width: 10% !important; @@ -61,6 +62,11 @@ max-height: unset !important; } } +@media (max-width: 1025px) and (min-width: 768px) { + .productImageTag--main { + height: 944px !important; + } +} @media (max-width: 1920px) and (min-width: 1024px) { .productVideo, @@ -68,10 +74,22 @@ height: 664px; } } +@media (max-width: 1025px) and (min-width: 768px) { + .productVideo, + .videoContainer { + height: 944px; + } +} .productNameContainer { text-align: right; } +@media (max-width: 1025px) and (min-width: 768px) { + .productNameContainer { + text-align: left; + margin-top: 32px; + } +} .productNameContainer .productBrand { font-weight: 300; font-size: 20px; @@ -91,6 +109,7 @@ .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -99,19 +118,23 @@ .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; @@ -164,12 +187,13 @@ } .skuSelectorSubcontainer--cor .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; + height: 48px; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0 !important; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; @@ -226,6 +250,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before { content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -238,6 +263,7 @@ margin-top: 8px; height: 49px; border-radius: 0; + width: 231px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; @@ -276,6 +302,7 @@ } .shippingContainer :global(.vtex-button)::after { content: "OK"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 600; font-size: 14px; @@ -320,6 +347,7 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { content: "frete"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -362,6 +390,13 @@ left: 6.9%; position: relative; } +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description { + width: 100%; + left: 0; + margin-bottom: 16px; + } +} .productImagesContainer--image-description .productImageTag--image-description--main { max-height: unset !important; } @@ -371,6 +406,12 @@ width: 92.93%; position: relative; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer { + margin-left: 0; + width: 100%; + } +} .productDescriptionContainer .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; @@ -378,6 +419,11 @@ line-height: 32px; color: #575757; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} .productDescriptionContainer .productDescriptionText .container { padding: 0; } @@ -387,6 +433,12 @@ line-height: 22px; color: #929292; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionText .container .content :first-child { + font-size: 14px; + line-height: 19px; + } +} .installmentsPrice { display: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d6b1b82..0bf1593 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,15 +9,26 @@ /* Grid breakpoints */ .container--description-block { padding: 0 40px; + margin-top: 16px; } .container--description-block .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; + padding-top: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } } .container--description-block .listContainer .listItem { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; } .container--description-block .listContainer .listItem :global(.vtex-button) { background-color: unset; @@ -34,9 +45,16 @@ .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} .container--description-block .listContainer .listItemActive { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; } .container--description-block .listContainer .listItemActive :global(.vtex-button) { background-color: unset; @@ -51,10 +69,32 @@ height: 38px; border-radius: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + border-bottom: unset; + } +} .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } +} .container--description-block .contentContainer .contentItem { display: grid; grid-template-columns: 50% 50%; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 100%; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index 71bda56..db1e98c 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -3,12 +3,16 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; + @media (max-width: 1025px) and (min-width: 768px) { + padding: 0 0 16px; + } .homeLink { padding: 0; } .homeLink::before { content: "Home"; + font-family: "Open Sans", sans-serif; } .homeIcon { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 4efb96c..1904617 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -22,6 +22,10 @@ display: grid; grid-template-columns: 48.819% 48.819%; } + @media (max-width: 1025px) and (min-width: 768px) { + display: grid; + grid-template-columns: 100%; + } } //Botao add Cart @@ -37,6 +41,7 @@ border-radius: 0; :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1f07099..9cc4e95 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -11,6 +11,7 @@ .carouselGaleryThumbs { margin-top: 16px; + height: 90px !important; .productImagesThumb { width: 10% !important; height: 10% !important; @@ -49,6 +50,9 @@ @media (max-width: 1920px) and (min-width: 1024px) { max-height: unset !important; } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } } .productVideo, @@ -56,12 +60,19 @@ @media (max-width: 1920px) and (min-width: 1024px) { height: 664px; } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } } //dados produto .productNameContainer { text-align: right; + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + margin-top: 32px; + } .productBrand { font-weight: 300; font-size: 20px; @@ -84,6 +95,7 @@ .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -92,6 +104,7 @@ .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -99,12 +112,13 @@ } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; .skuSelectorOptionsList { + margin: 0; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; .skuSelectorItem { border-radius: 100%; width: 40px; @@ -163,11 +177,12 @@ } .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; + height: 48px; .skuSelectorOptionsList { + margin: 0 !important; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; .skuSelectorItem { border-radius: 100%; width: 48px; @@ -226,6 +241,7 @@ padding-bottom: 0; :global(.vtex-input)::before { content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -239,6 +255,7 @@ margin-top: 8px; height: 49px; border-radius: 0; + width: 231px; :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -279,6 +296,7 @@ } :global(.vtex-button)::after { content: "OK"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 600; font-size: 14px; @@ -323,6 +341,7 @@ } .shippingTableHeadDeliveryPrice::after { content: "frete"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -373,6 +392,11 @@ max-height: unset; left: 6.9%; position: relative; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + left: 0; + margin-bottom: 16px; + } & .productImageTag--image-description--main { max-height: unset !important; } @@ -381,12 +405,19 @@ margin-left: 32px; width: 92.93%; position: relative; + @media (max-width: 1025px) and (min-width: 768px) { + margin-left: 0; + width: 100%; + } .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; font-size: 24px; line-height: 32px; color: #575757; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 20px; + } } .productDescriptionText { & .container { @@ -397,6 +428,10 @@ font-size: 16px; line-height: 22px; color: #929292; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + } } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2d78c00..737eb53 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -12,4 +12,9 @@ line-height: 19px; text-align: right; color: rgba(146, 146, 146, 0.48); + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + float: left; + margin-bottom: 24px; + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 2165783..bbe9eb7 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -24,6 +24,7 @@ :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; @@ -38,6 +39,7 @@ :global(.vtex-numeric-stepper__minus-button-container) { height: 49px; :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 50085f9..02d4a8a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -5,6 +5,9 @@ justify-content: center; margin-top: 16px; margin-bottom: 32px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 24px; + } .wrapper--slider-title { .heading--slider-title { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index dfecdf8..03525b0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,13 +2,22 @@ .container--description-block { padding: 0 40px; + margin-top: 16px; .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; + padding-top: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } .listItem { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; :global(.vtex-button) { background-color: unset; border: none; @@ -22,12 +31,17 @@ border-radius: 0; :global(.vtex-button__label) { padding: 0; + @media (max-width: 1025px) and (min-width: 768px) { + justify-content: left; + } } } } .listItemActive { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; :global(.vtex-button) { background-color: unset; border: none; @@ -40,16 +54,30 @@ width: 114px; height: 38px; border-radius: 0; + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: unset; + } :global(.vtex-button__label) { padding: 0; + @media (max-width: 1025px) and (min-width: 768px) { + justify-content: left; + } } } } } .contentContainer { + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } .contentItem { display: grid; grid-template-columns: 50% 50%; + @media (max-width: 1025px) and (min-width: 768px) { + display: grid; + grid-template-columns: 100%; + } } } } -- 2.34.1 From d7ad778126d00be6debbd12726bf2c54693d3560 Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 28 Jan 2023 17:53:21 -0300 Subject: [PATCH 45/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20estilos=20para=20telas=20de=20768px=20at?= =?UTF-8?q?=C3=A9=20375px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 15 +- styles/css/vtex.breadcrumb.css | 11 +- styles/css/vtex.flex-layout.css | 11 ++ styles/css/vtex.product-identifier.css | 7 + styles/css/vtex.product-quantity.css | 5 + styles/css/vtex.rich-text.css | 10 ++ styles/css/vtex.store-components.css | 159 ++++++++++++------ styles/css/vtex.tab-layout.css | 62 ++++++- .../product/breadcrumb/vtex.breadcrumb.scss | 10 +- .../product/flex-layout/vtex.flex-layout.scss | 7 + .../vtex.store-components.scss | 145 ++++++++++------ .../product/vtex.product-identifier.scss | 5 + .../pages/product/vtex.product-quantity.scss | 3 + styles/sass/pages/product/vtex.rich-text.scss | 6 + .../sass/pages/product/vtex.tab-layout.scss | 40 ++++- 15 files changed, 384 insertions(+), 112 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 23bdc01..898a352 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,6 +1,6 @@ /* Product Quantity and Add To Cart Button */ -[class*="html--cart-content"] { +:global(.agenciamagma-store-theme-5-x-html--cart-content) { display: flex; align-items: center; justify-content: space-between; @@ -9,10 +9,19 @@ margin-bottom: 16px; } -[data-testid="product-quantity"]{ +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--cart-content) { + flex-direction: column; + align-items: flex-start; + } +} + + + +[data-testid="product-quantity"] { height: 49px; } -[data-testid="add-to-cart-button"]{ +[data-testid="add-to-cart-button"] { width: 100%; } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index bd2e59d..fe15ef5 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -12,11 +12,7 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; -} -@media (max-width: 1025px) and (min-width: 768px) { - .container { - padding: 0 0 16px; - } + padding: 0 0 16px; } .container .homeLink { padding: 0; @@ -34,4 +30,9 @@ font-size: 14px; line-height: 19px; color: #929292; +} +@media (max-width: 768px) and (min-width: 375px) { + .container .term { + padding-left: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 843477e..76ac633 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -39,6 +39,11 @@ grid-template-columns: 100%; } } +@media (max-width: 768px) and (min-width: 375px) { + .flexRowContent--product-main-content { + padding: 0 40px; + } +} .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { background: #000000; @@ -47,6 +52,12 @@ border: none; border-radius: 0; } +@media (max-width: 768px) and (min-width: 375px) { + .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { + height: 74px; + margin-top: 10px; + } +} .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 54f7f0a..092a09b 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -26,4 +26,11 @@ float: left; margin-bottom: 24px; } +} +@media (max-width: 768px) and (min-width: 375px) { + .product-identifier__value { + text-align: left; + float: left; + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 9efa127..388c6fc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media (max-width: 768px) and (min-width: 375px) { + .quantitySelectorContainer { + margin: 0; + } +} .quantitySelectorContainer .quantitySelectorTitle { display: none; } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index e67e0b7..d9d4a48 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -18,6 +18,11 @@ margin-bottom: 24px; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--slider-title { + margin-bottom: 24px; + } +} .container--slider-title .wrapper--slider-title .heading--slider-title { font-weight: 400; font-size: 24px; @@ -25,4 +30,9 @@ text-align: center; color: #575757; margin: 0; +} +@media (max-width: 768px) and (min-width: 375px) { + .container--slider-title .wrapper--slider-title .heading--slider-title { + font-size: 20px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 97e8441..c17755b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -18,69 +18,83 @@ } } -.carouselGaleryThumbs { +.swiperCaret { + display: none; +} + +.productImagesContainer .carouselContainer .carouselGaleryCursor { + margin: 0 !important; + width: auto; + padding: 0; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + object-fit: unset !important; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + max-height: unset !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + height: 944px !important; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + width: 99.67% !important; + height: 296px !important; + object-fit: cover !important; + } +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 664px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 944px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { + height: 296px; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { margin-top: 16px; height: 90px !important; } -.carouselGaleryThumbs .productImagesThumb { +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { + display: block; + } +} +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb { width: 10% !important; height: 10% !important; margin-right: 16px; width: 90px !important; height: 90px !important; } -.carouselGaleryThumbs .productImagesThumb .figure, -.carouselGaleryThumbs .productImagesThumb .thumbImg { +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .figure, +.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .thumbImg { width: 100%; height: 100%; border-radius: 8px; } -.carouselGaleryCursor { - margin: 0 !important; - width: auto; - padding: 0; -} - -.swiperCaret { - display: none; -} - -@media (max-width: 1920px) and (min-width: 1024px) { - .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; - } -} - -.productImageTag--main { - object-fit: unset !important; -} -@media (max-width: 1920px) and (min-width: 1024px) { - .productImageTag--main { - max-height: unset !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImageTag--main { - height: 944px !important; - } -} - -@media (max-width: 1920px) and (min-width: 1024px) { - .productVideo, - .videoContainer { - height: 664px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productVideo, - .videoContainer { - height: 944px; - } -} - .productNameContainer { text-align: right; } @@ -88,6 +102,14 @@ .productNameContainer { text-align: left; margin-top: 32px; + margin-bottom: 8px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productNameContainer { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; } } .productNameContainer .productBrand { @@ -265,6 +287,11 @@ border-radius: 0; width: 231px; } +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 100%; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -286,6 +313,13 @@ left: 312px; bottom: 35px; } +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + left: 81.1%; + bottom: 0; + top: 8px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { display: none; } @@ -397,6 +431,13 @@ margin-bottom: 16px; } } +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer--image-description { + width: 100%; + left: 0; + margin-bottom: 16px; + } +} .productImagesContainer--image-description .productImageTag--image-description--main { max-height: unset !important; } @@ -412,6 +453,12 @@ width: 100%; } } +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer { + margin-left: 0; + width: 100%; + } +} .productDescriptionContainer .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; @@ -424,6 +471,11 @@ font-size: 20px; } } +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} .productDescriptionContainer .productDescriptionText .container { padding: 0; } @@ -439,6 +491,15 @@ line-height: 19px; } } +@media (max-width: 768px) and (min-width: 375px) { + .productDescriptionContainer .productDescriptionText .container .content :first-child { + font-size: 14px; + line-height: 19px; + } +} +.productDescriptionContainer .productDescriptionText .container .pointerEventsNone { + display: none; +} .installmentsPrice { display: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0bf1593..2e4fd9f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,6 +11,11 @@ padding: 0 40px; margin-top: 16px; } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block { + margin-top: 40px; + } +} .container--description-block .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; @@ -24,11 +29,27 @@ margin-bottom: 16px; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } +} .container--description-block .listContainer .listItem { margin: 0; padding: 0; height: 38px; - margin-bottom: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItem { + margin-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItem { + margin-bottom: 16px; + } } .container--description-block .listContainer .listItem :global(.vtex-button) { background-color: unset; @@ -50,11 +71,25 @@ justify-content: left; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} .container--description-block .listContainer .listItemActive { margin: 0; padding: 0; height: 38px; - margin-bottom: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive { + margin-bottom: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive { + margin-bottom: 16px; + } } .container--description-block .listContainer .listItemActive :global(.vtex-button) { background-color: unset; @@ -74,6 +109,12 @@ border-bottom: unset; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + border-bottom: unset; + width: 82px; + } +} .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } @@ -82,12 +123,23 @@ justify-content: left; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .contentContainer { border-bottom: 1px solid #b9b9b9; padding-bottom: 16px; } } +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .contentContainer { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } +} .container--description-block .contentContainer .contentItem { display: grid; grid-template-columns: 50% 50%; @@ -97,4 +149,10 @@ display: grid; grid-template-columns: 100%; } +} +@media (max-width: 768px) and (min-width: 375px) { + .container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 100%; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index db1e98c..85b0762 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -3,9 +3,7 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; - @media (max-width: 1025px) and (min-width: 768px) { - padding: 0 0 16px; - } + padding: 0 0 16px; .homeLink { padding: 0; } @@ -26,4 +24,10 @@ line-height: 19px; color: #929292; } + + .term { + @media (max-width: 768px) and (min-width: 375px) { + padding-left: 0; + } + } } diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 1904617..67bb136 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -26,6 +26,9 @@ display: grid; grid-template-columns: 100%; } + @media (max-width: 768px) and (min-width: 375px) { + padding: 0 40px; + } } //Botao add Cart @@ -39,6 +42,10 @@ height: 49px; border: none; border-radius: 0; + @media (max-width: 768px) and (min-width: 375px) { + height: 74px; + margin-top: 10px; + } :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 9cc4e95..7f6ed6a 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -9,59 +9,75 @@ } } -.carouselGaleryThumbs { - margin-top: 16px; - height: 90px !important; - .productImagesThumb { - width: 10% !important; - height: 10% !important; - margin-right: 16px; - width: 90px !important; - height: 90px !important; - - .figure, - .thumbImg { - width: 100%; - height: 100%; - border-radius: 8px; - } - } -} - -.carouselGaleryCursor { - margin: 0 !important; - width: auto; - padding: 0; -} - .swiperCaret { display: none; } -.productImagesGallerySwiperContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - width: 100%; - margin-left: 0; - margin-right: 0; - } -} -.productImageTag--main { - object-fit: unset !important; - @media (max-width: 1920px) and (min-width: 1024px) { - max-height: unset !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px !important; - } -} +.productImagesContainer { + .carouselContainer { + .carouselGaleryCursor { + margin: 0 !important; + width: auto; + padding: 0; + .productImagesGallerySwiperContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } + .productImagesGallerySlide { + .productImage { + .productImageTag--main { + object-fit: unset !important; + @media (max-width: 1920px) and (min-width: 1024px) { + max-height: unset !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 99.67% !important; + height: 296px !important; + object-fit: cover !important; + } + } + } + .productVideo, + .videoContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + height: 664px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 296px; + } + } + } + } + .carouselGaleryThumbs { + margin-top: 16px; + height: 90px !important; + @media (max-width: 768px) and (min-width: 375px) { + display: block; + } + .productImagesThumb { + width: 10% !important; + height: 10% !important; + margin-right: 16px; + width: 90px !important; + height: 90px !important; -.productVideo, -.videoContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - height: 664px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; + .figure, + .thumbImg { + width: 100%; + height: 100%; + border-radius: 8px; + } + } + } + } } } @@ -72,6 +88,12 @@ @media (max-width: 1025px) and (min-width: 768px) { text-align: left; margin-top: 32px; + margin-bottom: 8px; + } + @media (max-width: 768px) and (min-width: 375px) { + text-align: left; + margin-top: 32px; + margin-bottom: 8px; } .productBrand { font-weight: 300; @@ -256,6 +278,9 @@ height: 49px; border-radius: 0; width: 231px; + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -277,6 +302,11 @@ position: relative; left: 312px; bottom: 35px; + @media (max-width: 768px) and (min-width: 375px) { + left: calc(100% - 18.9%); + bottom: 0; + top: 8px; + } :last-child { display: none; } @@ -397,6 +427,11 @@ left: 0; margin-bottom: 16px; } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + left: 0; + margin-bottom: 16px; + } & .productImageTag--image-description--main { max-height: unset !important; } @@ -409,6 +444,10 @@ margin-left: 0; width: 100%; } + @media (max-width: 768px) and (min-width: 375px) { + margin-left: 0; + width: 100%; + } .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; @@ -418,6 +457,9 @@ @media (max-width: 1025px) and (min-width: 768px) { font-size: 20px; } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 20px; + } } .productDescriptionText { & .container { @@ -432,8 +474,15 @@ font-size: 14px; line-height: 19px; } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 14px; + line-height: 19px; + } } } + .pointerEventsNone{ + display: none; + } } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 737eb53..2c6485f 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -17,4 +17,9 @@ float: left; margin-bottom: 24px; } + @media (max-width: 768px) and (min-width: 375px) { + text-align: left; + float: left; + margin-bottom: 24px; + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index bbe9eb7..b08c2e8 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,6 +1,9 @@ //product quantity .quantitySelectorContainer { + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + } .quantitySelectorTitle { display: none; } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 02d4a8a..048596a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -8,6 +8,9 @@ @media (max-width: 1025px) and (min-width: 768px) { margin-bottom: 24px; } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 24px; + } .wrapper--slider-title { .heading--slider-title { font-weight: 400; @@ -16,6 +19,9 @@ text-align: center; color: #575757; margin: 0; + @media (max-width: 768px) and (min-width: 375px) { + font-size: 20px; + } } } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 03525b0..369bfb2 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -3,6 +3,9 @@ .container--description-block { padding: 0 40px; margin-top: 16px; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 40px; + } .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; @@ -13,11 +16,21 @@ border-top: 1px solid #b9b9b9; margin-bottom: 16px; } + @media (max-width: 768px) and (min-width: 375px) { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } .listItem { margin: 0; padding: 0; height: 38px; - margin-bottom: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 16px; + } :global(.vtex-button) { background-color: unset; border: none; @@ -34,6 +47,9 @@ @media (max-width: 1025px) and (min-width: 768px) { justify-content: left; } + @media (max-width: 768px) and (min-width: 375px) { + justify-content: left; + } } } } @@ -41,7 +57,12 @@ margin: 0; padding: 0; height: 38px; - margin-bottom: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 16px; + } :global(.vtex-button) { background-color: unset; border: none; @@ -57,11 +78,18 @@ @media (max-width: 1025px) and (min-width: 768px) { border-bottom: unset; } + @media (max-width: 768px) and (min-width: 375px) { + border-bottom: unset; + width: 82px; + } :global(.vtex-button__label) { padding: 0; @media (max-width: 1025px) and (min-width: 768px) { justify-content: left; } + @media (max-width: 768px) and (min-width: 375px) { + justify-content: left; + } } } } @@ -71,6 +99,10 @@ border-bottom: 1px solid #b9b9b9; padding-bottom: 16px; } + @media (max-width: 768px) and (min-width: 375px) { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } .contentItem { display: grid; grid-template-columns: 50% 50%; @@ -78,6 +110,10 @@ display: grid; grid-template-columns: 100%; } + @media (max-width: 768px) and (min-width: 375px) { + display: grid; + grid-template-columns: 100%; + } } } } -- 2.34.1 From f2a4c8e880eff48999fdfac949adc5cc45d5fc75 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 10:10:55 -0300 Subject: [PATCH 46/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20para=20telas=20de=201920px=20at=C3=A9=20375px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 13 +++- styles/css/vtex.rich-text.css | 2 +- styles/css/vtex.slider-layout.css | 76 ++++++++++++++++++- styles/css/vtex.store-components.css | 37 +++++++++ .../product/flex-layout/vtex.flex-layout.scss | 10 ++- .../vtex.store-components.scss | 27 ++++++- styles/sass/pages/product/vtex.rich-text.scss | 2 +- .../pages/product/vtex.slider-layout.scss | 52 +++++++++++-- 8 files changed, 204 insertions(+), 15 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 76ac633..16e69ed 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -22,6 +22,16 @@ width: 100% !important; } } +@media (max-width: 1025px) and (min-width: 768px) { + .stretchChildrenWidth { + width: 100% !important; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .stretchChildrenWidth { + width: 100% !important; + } +} .flexCol--stack-layout-content { width: 100% !important; @@ -41,7 +51,8 @@ } @media (max-width: 768px) and (min-width: 375px) { .flexRowContent--product-main-content { - padding: 0 40px; + display: grid; + grid-template-columns: 100%; } } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index d9d4a48..5013578 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -20,7 +20,7 @@ } @media (max-width: 768px) and (min-width: 375px) { .container--slider-title { - margin-bottom: 24px; + margin-bottom: 16px; } } .container--slider-title .wrapper--slider-title .heading--slider-title { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 8b9d8e0..1302ea4 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -10,18 +10,68 @@ .sliderLayoutContainer--carousel { background: unset; min-height: 448.4px; - margin-bottom: 64px; + width: 94.435%; + margin: 0 auto 64px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel { + width: 92.166%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel { + width: 78.616%; + margin: 0 auto 32px; + min-height: 273.8px; + } } .sliderLayoutContainer--carousel .sliderTrackContainer { - margin-bottom: 32px; + width: 96%; + margin: 0 auto; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 95.085%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 87.03%; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 5.3515% !important; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 6.0831% !important; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 6.921% !important; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel { + width: 100%; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) { - max-width: 314.4px !important; + max-width: 100% !important; border-radius: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; } +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 402.2px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 273.8px; + } +} .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { padding: 0; } @@ -41,9 +91,22 @@ min-height: 50px; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { - width: 314.4px; + width: 100%; height: 314.4px; } +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 291.2px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 124.8px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + border-radius: 0; +} @media (max-width: 1920px) and (min-width: 1024px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { min-width: 100%; @@ -82,9 +145,14 @@ text-align: center; color: #000000; } +.sliderLayoutContainer--carousel .sliderArrows { + padding: 0; + margin: 0; +} .sliderLayoutContainer--carousel .paginationDotsContainer { display: flex; align-items: center; + bottom: -32px; } .sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { background-color: #000000; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c17755b..808439f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -17,6 +17,16 @@ padding: 0 40px; } } +@media (max-width: 1025px) and (min-width: 768px) { + .container { + padding: 0 40px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .container { + padding: 0 40px; + } +} .swiperCaret { display: none; @@ -34,6 +44,31 @@ margin-right: 0; } } +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + margin: 0; + height: 944px !important; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { + height: 944px !important; + } +} .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { object-fit: unset !important; } @@ -45,6 +80,7 @@ @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { height: 944px !important; + max-height: unset !important; } } @media (max-width: 768px) and (min-width: 375px) { @@ -52,6 +88,7 @@ width: 99.67% !important; height: 296px !important; object-fit: cover !important; + max-height: unset !important; } } @media (max-width: 1920px) and (min-width: 1024px) { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 67bb136..fcc373c 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -11,6 +11,12 @@ @media (max-width: 1920px) and (min-width: 1024px) { width: 100% !important; } + @media (max-width: 1025px) and (min-width: 768px) { + width: 100% !important; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100% !important; + } } .flexCol--stack-layout-content { @@ -27,7 +33,9 @@ grid-template-columns: 100%; } @media (max-width: 768px) and (min-width: 375px) { - padding: 0 40px; + // padding: 0 40px; + display: grid; + grid-template-columns: 100%; } } diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 7f6ed6a..039e4e8 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -7,6 +7,12 @@ @media (max-width: 1920px) and (min-width: 1024px) { padding: 0 40px; } + @media (max-width: 1025px) and (min-width: 768px) { + padding: 0 40px; + } + @media (max-width: 768px) and (min-width: 375px) { + padding: 0 40px; + } } .swiperCaret { @@ -25,8 +31,25 @@ margin-left: 0; margin-right: 0; } + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } .productImagesGallerySlide { + @media (max-width: 1025px) and (min-width: 768px) { + margin: 0; + height: 944px !important; + } .productImage { + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } .productImageTag--main { object-fit: unset !important; @media (max-width: 1920px) and (min-width: 1024px) { @@ -34,11 +57,13 @@ } @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; + max-height: unset !important; } @media (max-width: 768px) and (min-width: 375px) { width: 99.67% !important; height: 296px !important; object-fit: cover !important; + max-height: unset !important; } } } @@ -480,7 +505,7 @@ } } } - .pointerEventsNone{ + .pointerEventsNone { display: none; } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 048596a..32e492c 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -9,7 +9,7 @@ margin-bottom: 24px; } @media (max-width: 768px) and (min-width: 375px) { - margin-bottom: 24px; + margin-bottom: 16px; } .wrapper--slider-title { .heading--slider-title { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index aef21aa..fa10bb0 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -3,17 +3,47 @@ .sliderLayoutContainer--carousel { background: unset; min-height: 448.4px; - margin-bottom: 64px; + width: 94.435%; + margin: 0 auto 64px; + @media (max-width: 1025px) and (min-width: 768px) { + width: 92.166%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 78.616%; + margin: 0 auto 32px; + min-height: 273.8px; + } .sliderTrackContainer { - margin-bottom: 32px; + width: 96%; + margin: 0 auto; + @media (max-width: 1025px) and (min-width: 768px) { + width: 95.085%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 87.03%; + } .sliderTrack { .slide--carousel { + width: 5.3515% !important; + @media (max-width: 1025px) and (min-width: 768px) { + width: 6.0831% !important; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 6.921% !important; + } .slideChildrenContainer--carousel { + width: 100%; :global(.vtex-product-summary-2-x-containerNormal) { - max-width: 314.4px !important; + max-width: 100% !important; border-radius: 0; :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; + @media (max-width: 1025px) and (min-width: 768px) { + min-height: 402.2px; + } + @media (max-width: 768px) and (min-width: 375px) { + min-height: 273.8px; + } :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-nameContainer) { @@ -34,12 +64,18 @@ } } :global(.vtex-product-summary-2-x-imageContainer) { - width: 314.4px; + width: 100%; height: 314.4px; + @media (max-width: 1025px) and (min-width: 768px) { + height: 291.2px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 124.8px; + } :global(.vtex-product-summary-2-x-imageContainer) { :global(.vtex-product-summary-2-x-imageNormal) { + border-radius: 0; @media (max-width: 1920px) and (min-width: 1024px) { - // min-width: 314.4px; min-width: 100%; } } @@ -65,7 +101,6 @@ padding: 0; display: flex; justify-content: center; - // flex-direction: column; :global(.vtex-store-components-3-x-sellingPriceLabel) { display: none; } @@ -86,9 +121,14 @@ } } } + .sliderArrows { + padding: 0; + margin: 0; + } .paginationDotsContainer { display: flex; align-items: center; + bottom: -32px; .paginationDot { background-color: #000000; width: 10px !important; -- 2.34.1 From 4775e9f8c7312845ecb03e97b73c6b2dccc4cb38 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 10:57:57 -0300 Subject: [PATCH 47/93] style(slider): substituindo imagens do sliderArrows --- styles/css/vtex.slider-layout.css | 27 +++++++++++++++++ .../pages/product/vtex.slider-layout.scss | 29 +++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 1302ea4..011d184 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -149,6 +149,33 @@ padding: 0; margin: 0; } +.sliderLayoutContainer--carousel .sliderLeftArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderLeftArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderLeftArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + left: 0; + position: absolute; +} +.sliderLayoutContainer--carousel .sliderRightArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderRightArrow::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg); + visibility: visible; + width: 11.2px; + height: 29.6px; + right: 0; + position: absolute; +} .sliderLayoutContainer--carousel .paginationDotsContainer { display: flex; align-items: center; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index fa10bb0..a164bff 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -125,6 +125,35 @@ padding: 0; margin: 0; } + .sliderLeftArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; + } + .sliderLeftArrow::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderLeftArrow-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 11.2px; + height: 29.6px; + left: 0; + position: absolute; + } + + .sliderRightArrow { + visibility: hidden; + width: 11.2px; + height: 29.6px; + } + + .sliderRightArrow::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg); + visibility: visible; + width: 11.2px; + height: 29.6px; + right: 0; + position: absolute; + } .paginationDotsContainer { display: flex; align-items: center; -- 2.34.1 From 8aaae3b0dd2e40f8a346b6f9d93b5d8145700b6c Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 11:01:40 -0300 Subject: [PATCH 48/93] style(slider): corrigindo .sliderRightArrow::before --- styles/css/vtex.slider-layout.css | 3 ++- styles/sass/pages/product/vtex.slider-layout.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 011d184..2e414bd 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -169,7 +169,8 @@ height: 29.6px; } .sliderLayoutContainer--carousel .sliderRightArrow::before { - content: url(https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg); + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg"); visibility: visible; width: 11.2px; height: 29.6px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index a164bff..66db33f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -147,7 +147,8 @@ } .sliderRightArrow::before { - content: url(https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg); + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/sliderRightArrow-m3academy-anacarolinaduartecavalcante.svg"); visibility: visible; width: 11.2px; height: 29.6px; -- 2.34.1 From 3d935747848c9e39d08fe691107126ddc900eb30 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 17:13:01 -0300 Subject: [PATCH 49/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?=20do=20.skuSelectorItem=20e=20.skuSelectorInternalBox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 4 ++-- .../pages/product/store-components/vtex.store-components.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 808439f..d52534d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -200,7 +200,6 @@ width: 40px; height: 40px; margin: 0; - border: 1px solid #989898; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { border-color: #000000; @@ -222,6 +221,7 @@ border-radius: 100%; width: 40px; height: 40px; + border: 1px solid #989898; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { width: 30px; @@ -259,7 +259,6 @@ width: 48px; height: 48px; margin: 0; - border: 1px solid #989898; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { border-color: #000000; @@ -278,6 +277,7 @@ border-radius: 100%; width: 48px; height: 48px; + border: 1px solid #989898; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { position: absolute; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 039e4e8..6d15f3a 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -171,7 +171,6 @@ width: 40px; height: 40px; margin: 0; - border: 1px solid #989898; .frameAround--sku-selector { border-color: #000000; border-width: 2px; @@ -192,6 +191,7 @@ border-radius: 100%; width: 40px; height: 40px; + border: 1px solid #989898; .diagonalCross { width: 30px; height: 30px; @@ -235,7 +235,6 @@ width: 48px; height: 48px; margin: 0; - border: 1px solid #989898; .frameAround--sku-selector { border-color: #000000; border-width: 2px; @@ -253,6 +252,7 @@ border-radius: 100%; width: 48px; height: 48px; + border: 1px solid #989898; .diagonalCross { position: absolute; width: 46.69px; -- 2.34.1 From 8098755648a90a20baa81cf3d424eda4c25f06ef Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 17:15:27 -0300 Subject: [PATCH 50/93] feat: adicionando font-faces.css --- styles/configs/font-faces.css | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 styles/configs/font-faces.css diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..c5c00b9 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + src: local("Open Sans Light"), local("OpenSans-Light"), + url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), + url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), + url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: local("Open Sans Bold"), local("OpenSans-Bold"), + url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff) + format("woff"); +} -- 2.34.1 From e4d67cdd6ec45bac9b024e5c517dd2a4b61abe03 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 29 Jan 2023 17:21:34 -0300 Subject: [PATCH 51/93] feat: adicionando arquivos .scss e .css vtex.store-footer com estilos do footer --- styles/css/vtex.store-footer.css | 23 +++++++++++-------- .../sass/pages/product/vtex.store-footer.scss | 7 ++++++ 2 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 styles/sass/pages/product/vtex.store-footer.scss diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..9beaa52 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,16 @@ -.row--menu-row { - padding-right: 24px; +/* +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 */ +.acceptedPaymentMethodContainer { + margin: 0; } -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +.socialNetworksContainer { + margin: 0; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..8ef6b41 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,7 @@ +.acceptedPaymentMethodContainer{ + margin: 0; +} + +.socialNetworksContainer{ + margin: 0; +} -- 2.34.1 From 99dbcd3ef1ace76d331e79649c8fe12ab4f6f37a Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 14:01:46 -0300 Subject: [PATCH 52/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20estilos=20para=20telas=20de=202561px=20at?= =?UTF-8?q?=C3=A9=201920px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 46 ++---------------- styles/css/vtex.slider-layout.css | 13 ++++- styles/css/vtex.tab-layout.css | 17 +++++++ .../product/flex-layout/vtex.flex-layout.scss | 47 ++++--------------- .../pages/product/vtex.slider-layout.scss | 15 +++++- .../sass/pages/product/vtex.tab-layout.scss | 11 +++++ 6 files changed, 67 insertions(+), 82 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 16e69ed..78ac045 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -14,48 +14,10 @@ column-gap: 32px; } -.stretchChildrenWidth { - padding: 0; -} -@media (max-width: 1920px) and (min-width: 1024px) { - .stretchChildrenWidth { - width: 100% !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .stretchChildrenWidth { - width: 100% !important; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .stretchChildrenWidth { - width: 100% !important; - } -} - .flexCol--stack-layout-content { width: 100% !important; } -@media (max-width: 1920px) and (min-width: 1024px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 48.819% 48.819%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 100%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 100%; - } -} - .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { background: #000000; padding: 12px 64px; @@ -69,14 +31,14 @@ margin-top: 10px; } } -.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; line-height: 25px; -} -.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - display: none; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 2e414bd..905ae09 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -13,6 +13,11 @@ width: 94.435%; margin: 0 auto 64px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel { + width: 71.858%; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel { width: 92.166%; @@ -128,7 +133,13 @@ color: #bababa; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { - text-transform: lowercase; + display: none; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before { + content: "de "; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after { + content: " por"; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { padding: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2e4fd9f..e41b6b7 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,6 +11,11 @@ padding: 0 40px; margin-top: 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block { + padding: 0; + } +} @media (max-width: 768px) and (min-width: 375px) { .container--description-block { margin-top: 40px; @@ -22,6 +27,12 @@ margin-bottom: 32px; padding-top: 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer { + width: 71.858%; + margin: 0 auto 32px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer { flex-direction: column; @@ -128,6 +139,12 @@ justify-content: left; } } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .contentContainer { + width: 71.858%; + margin: 0 auto; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .contentContainer { border-bottom: 1px solid #b9b9b9; diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index fcc373c..a119b8a 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -6,39 +6,10 @@ column-gap: 32px; } -.stretchChildrenWidth { - padding: 0; - @media (max-width: 1920px) and (min-width: 1024px) { - width: 100% !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - width: 100% !important; - } - @media (max-width: 768px) and (min-width: 375px) { - width: 100% !important; - } -} - .flexCol--stack-layout-content { width: 100% !important; } -.flexRowContent--product-main-content { - @media (max-width: 1920px) and (min-width: 1024px) { - display: grid; - grid-template-columns: 48.819% 48.819%; - } - @media (max-width: 1025px) and (min-width: 768px) { - display: grid; - grid-template-columns: 100%; - } - @media (max-width: 768px) and (min-width: 375px) { - // padding: 0 40px; - display: grid; - grid-template-columns: 100%; - } -} - //Botao add Cart .flexRow { @@ -54,17 +25,17 @@ height: 74px; margin-top: 10px; } - :global(.vtex-button__label)::before { - content: "ADICIONAR À SACOLA"; - font-family: "Open Sans", sans-serif; - color: #ffffff; - font-weight: 400; - font-size: 18px; - line-height: 25px; - } :global(.vtex-button__label) { :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - display: none; + font-size: 0; + } + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; } } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 66db33f..a8c9aa3 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -5,6 +5,9 @@ min-height: 448.4px; width: 94.435%; margin: 0 auto 64px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 92.166%; } @@ -94,7 +97,17 @@ text-decoration-line: line-through; color: #bababa; :global(.vtex-store-components-3-x-listPriceLabel) { - text-transform: lowercase; + display: none; + } + :global(.vtex-store-components-3-x-listPriceValue) { + :global(.vtex-product-summary-2-x-currencyContainer) { + &::before { + content: "de "; + } + &::after { + content: " por"; + } + } } } :global(.vtex-store-components-3-x-sellingPrice) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 369bfb2..da359cb 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -3,6 +3,9 @@ .container--description-block { padding: 0 40px; margin-top: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 0; + } @media (max-width: 768px) and (min-width: 375px) { margin-top: 40px; } @@ -11,6 +14,10 @@ border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; padding-top: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto 32px; + } @media (max-width: 1025px) and (min-width: 768px) { flex-direction: column; border-top: 1px solid #b9b9b9; @@ -95,6 +102,10 @@ } } .contentContainer { + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto; + } @media (max-width: 1025px) and (min-width: 768px) { border-bottom: 1px solid #b9b9b9; padding-bottom: 16px; -- 2.34.1 From 471d282ac3020e73d693e87e9f34049da7de20e7 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 14:11:44 -0300 Subject: [PATCH 53/93] =?UTF-8?q?refactor(product.jsonc):=20corrigindo=20e?= =?UTF-8?q?strutura=20do=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 58 ++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a69dbd..4084191 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -67,11 +67,11 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, - "phone": 1 + "tablet": 3, + "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } }, @@ -100,21 +100,15 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "blockClass": "product-main-content", - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main-content" }, - "children": ["flex-layout.col#stack", "html#right-col"] + "children": ["html#flex-layout.col#stack", "html#right-col"] }, "stack-layout": { @@ -137,7 +131,7 @@ } }, - "flex-layout.col#stack": { + "html#flex-layout.col#stack": { "children": ["stack-layout"], "props": { "blockClass": "stack-layout-content", @@ -261,8 +255,7 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#identification-product", // "product-rating-summary", "flex-layout.row#selling-price", "installment-product-component", @@ -280,6 +273,12 @@ // "share#default" ] }, + "html#identification-product": { + "props": { + "blockClass": "identification-product-content" + }, + "children": ["html#product-name", "product-identifier.product"] + }, "html#cart-content": { "props": { "blockClass": "cart-content" @@ -304,12 +303,13 @@ }, "children": ["pix-component"] }, - "flex-layout.row#product-name": { + "html#product-name": { "props": { "marginBottom": 3 }, "children": ["vtex.store-components:product-name"] }, + "html#sku-selector": { "props": { "testId": "sku-selector" @@ -332,14 +332,11 @@ "children": ["add-to-cart-button"] }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability-block" }, - "children": ["flex-layout.col#stack", "html#right-col-availability"] + "children": ["html#flex-layout.col#stack", "html#right-col-availability"] }, "html#right-col-availability": { "props": { @@ -348,12 +345,17 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "html#sku-selector", - "flex-layout.row#availability" + "html#identification-product-availability", + "flex-layout.row#availability", + "html#sku-selector" ] }, + "html#identification-product-availability": { + "props": { + "blockClass": "identification-product-availability" + }, + "children": ["html#product-name", "product-identifier.product"] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" -- 2.34.1 From a4f934c08d107766239d69f228eb6d6bc2915808 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 14:14:00 -0300 Subject: [PATCH 54/93] style: corrigindo estilos e adicionando estilo do .subscriberContainer --- styles/css/vtex.store-components.css | 159 +++++++++++++++--- .../vtex.store-components.scss | 159 ++++++++++++++++-- 2 files changed, 278 insertions(+), 40 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d52534d..615482a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -11,21 +12,7 @@ width: 100%; padding: 0; margin: auto; -} -@media (max-width: 1920px) and (min-width: 1024px) { - .container { - padding: 0 40px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .container { - padding: 0 40px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .container { - padding: 0 40px; - } + max-width: unset !important; } .swiperCaret { @@ -58,12 +45,22 @@ margin-right: 0; } } +@media (max-width: 2560px) and (min-width: 1920px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + height: 904px !important; + } +} @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { margin: 0; height: 944px !important; } } +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { + height: 904px !important; + } +} @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { height: 944px !important; @@ -71,16 +68,16 @@ } .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { object-fit: unset !important; + max-height: unset !important; } -@media (max-width: 1920px) and (min-width: 1024px) { +@media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - max-height: unset !important; + height: 904px !important; } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { height: 944px !important; - max-height: unset !important; } } @media (max-width: 768px) and (min-width: 375px) { @@ -88,7 +85,6 @@ width: 99.67% !important; height: 296px !important; object-fit: cover !important; - max-height: unset !important; } } @media (max-width: 1920px) and (min-width: 1024px) { @@ -156,6 +152,113 @@ color: #575757; } +:global(.vtex-store-components-3-x-subscriberContainer) { + margin-top: 16px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) { + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 60.091%; + margin: 0; + display: grid; + grid-template-areas: "A B" "C C"; + max-width: unset !important; +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 81.02%; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0 8px 15px 0; + width: 12.22em; +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + width: 23.657em; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0 0 15px; + width: 12.22em; +} +@media (max-width: 1025px) and (min-width: 768px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + width: 23.657em; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + width: 100%; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -458,20 +561,25 @@ .productImagesContainer--image-description { width: 92.93%; max-height: unset; - left: 6.9%; position: relative; + margin-left: 32px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer--image-description { + width: 94.784%; + } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; - left: 0; + margin-left: 0; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { width: 100%; - left: 0; + margin-left: 0; margin-bottom: 16px; } } @@ -480,9 +588,14 @@ } .productDescriptionContainer { - margin-left: 32px; width: 92.93%; position: relative; + margin-left: 16px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productDescriptionContainer { + width: 94.784%; + } } @media (max-width: 1025px) and (min-width: 768px) { .productDescriptionContainer { diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 6d15f3a..f815c20 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -4,15 +4,7 @@ width: 100%; padding: 0; margin: auto; - @media (max-width: 1920px) and (min-width: 1024px) { - padding: 0 40px; - } - @media (max-width: 1025px) and (min-width: 768px) { - padding: 0 40px; - } - @media (max-width: 768px) and (min-width: 375px) { - padding: 0 40px; - } + max-width: unset !important; } .swiperCaret { @@ -42,28 +34,38 @@ margin-right: 0; } .productImagesGallerySlide { + @media (max-width: 2560px) and (min-width: 1920px) { + height: 904px !important; + } @media (max-width: 1025px) and (min-width: 768px) { margin: 0; height: 944px !important; } .productImage { + @media (max-width: 2561px) and (min-width: 1920px) { + height: 904px !important; + } @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; } .productImageTag--main { object-fit: unset !important; - @media (max-width: 1920px) and (min-width: 1024px) { - max-height: unset !important; + max-height: unset !important; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 904px !important; } + // @media (max-width: 1920px) and (min-width: 1024px) { + // max-height: unset !important; + // } @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; - max-height: unset !important; + // max-height: unset !important; } @media (max-width: 768px) and (min-width: 375px) { width: 99.67% !important; height: 296px !important; object-fit: cover !important; - max-height: unset !important; + // max-height: unset !important; } } } @@ -128,6 +130,123 @@ } } +:global(.vtex-store-components-3-x-subscriberContainer) { + margin-top: 16px; + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + } + :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; + } + :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; + } + :global(.vtex-store-components-3-x-form) { + margin: 0; + :global(.vtex-store-components-3-x-content) { + width: 60.091%; + margin: 0; + display: grid; + grid-template-areas: + "A B" + "C C"; + max-width: unset !important; + @media (max-width: 1025px) and (min-width: 768px) { + width: 81.02%; + } + // @media (max-width: 768px) and (min-width: 375px) { + + // } + :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0 8px 15px 0; + width: 12.22em; + @media (max-width: 1025px) and (min-width: 768px) { + width: 23.657em; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0 0 15px; + width: 12.22em; + @media (max-width: 1025px) and (min-width: 768px) { + width: 23.657em; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border: 1px solid #989898; + border-radius: unset; + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + // @media (max-width: 1025px) and (min-width: 768px) { + // width: 150.13%; + // } + :global(.vtex-button) { + width: 100%; + :global(.vtex-button__label) { + font-size: 0; + } + :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } + } + } + } +} + // sku selector .skuSelectorContainer { @@ -445,16 +564,19 @@ .productImagesContainer--image-description { width: 92.93%; max-height: unset; - left: 6.9%; position: relative; + margin-left: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 94.784%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; - left: 0; + margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { width: 100%; - left: 0; + margin-left: 0; margin-bottom: 16px; } & .productImageTag--image-description--main { @@ -462,9 +584,12 @@ } } .productDescriptionContainer { - margin-left: 32px; width: 92.93%; position: relative; + margin-left: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 94.784%; + } @media (max-width: 1025px) and (min-width: 768px) { margin-left: 0; width: 100%; -- 2.34.1 From a0a28e660a298cdd5605d4946050fe6ad0d37cee Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 18:33:19 -0300 Subject: [PATCH 55/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20estilos=20para=20telas=20de=202561px=20at?= =?UTF-8?q?=C3=A9=201920px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.breadcrumb.css | 6 ++++ styles/css/vtex.product-identifier.css | 2 -- styles/css/vtex.product-price.css | 1 + styles/css/vtex.slider-layout.css | 20 +++++++++++++ styles/css/vtex.store-components.css | 28 +++++++++++++++++++ .../product/breadcrumb/vtex.breadcrumb.scss | 4 +++ .../vtex.store-components.scss | 26 ++++++++++++----- .../product/vtex.product-identifier.scss | 2 -- .../pages/product/vtex.product-price.scss | 1 + .../pages/product/vtex.slider-layout.scss | 12 ++++++++ 10 files changed, 91 insertions(+), 11 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index fe15ef5..3bb78f0 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -14,6 +14,12 @@ margin-left: 40px; padding: 0 0 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container { + margin: 0 auto; + width: 71.858%; + } +} .container .homeLink { padding: 0; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 092a09b..8ca0eeb 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -24,13 +24,11 @@ .product-identifier__value { text-align: left; float: left; - margin-bottom: 24px; } } @media (max-width: 768px) and (min-width: 375px) { .product-identifier__value { text-align: left; float: left; - margin-bottom: 24px; } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index e3b1eb7..c22a76c 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -12,4 +12,5 @@ font-size: 25px; line-height: 38px; color: #000000; + margin-top: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 905ae09..b869bde 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -34,6 +34,11 @@ width: 96%; margin: 0 auto; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 97.012%; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer { width: 95.085%; @@ -47,6 +52,11 @@ .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 5.3515% !important; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 5.4036% !important; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 6.0831% !important; @@ -67,6 +77,11 @@ .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { + min-height: 543.4px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 402.2px; @@ -99,6 +114,11 @@ width: 100%; height: 314.4px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 434.4px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { height: 291.2px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 615482a..4724426 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -187,11 +187,21 @@ grid-template-areas: "A B" "C C"; max-width: unset !important; } +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 44.138%; + } +} @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { width: 81.02%; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 100%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { grid-area: A; margin: 0 8px 15px 0; @@ -202,6 +212,11 @@ width: 23.657em; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + width: 94.26%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -209,6 +224,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + height: 40px; } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -220,12 +236,18 @@ grid-area: B; margin: 0 0 15px; width: 12.22em; + height: 40px; } @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { width: 23.657em; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + width: 99.47%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -247,6 +269,12 @@ :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { width: 100%; } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + margin: 0; + height: 49px; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; } diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index 85b0762..f537138 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -4,6 +4,10 @@ flex-wrap: wrap; margin-left: 40px; padding: 0 0 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin: 0 auto; + width: 71.858%; + } .homeLink { padding: 0; } diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index f815c20..97ada7a 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -164,12 +164,15 @@ "A B" "C C"; max-width: unset !important; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 44.138%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 81.02%; } - // @media (max-width: 768px) and (min-width: 375px) { - - // } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } :global(.vtex-store-components-3-x-inputName) { grid-area: A; margin: 0 8px 15px 0; @@ -177,6 +180,9 @@ @media (max-width: 1025px) and (min-width: 768px) { width: 23.657em; } + @media (max-width: 768px) and (min-width: 375px) { + width: 94.26%; + } :global(.vtex-input) { :global(.vtex-input-prefix__group) { :global(.vtex-styleguide-9-x-input) { @@ -186,6 +192,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + height: 40px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -200,9 +207,13 @@ grid-area: B; margin: 0 0 15px; width: 12.22em; + height: 40px; @media (max-width: 1025px) and (min-width: 768px) { width: 23.657em; } + @media (max-width: 768px) and (min-width: 375px) { + width: 99.47%; + } :global(.vtex-input) { :global(.vtex-input-prefix__group) { :global(.vtex-styleguide-9-x-input) { @@ -224,12 +235,13 @@ } :global(.vtex-store-components-3-x-submit) { grid-area: C; - margin: 0; - // @media (max-width: 1025px) and (min-width: 768px) { - // width: 150.13%; - // } + margin: 0; :global(.vtex-button) { width: 100%; + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + height: 49px; + } :global(.vtex-button__label) { font-size: 0; } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2c6485f..706c081 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,11 +15,9 @@ @media (max-width: 1025px) and (min-width: 768px) { text-align: left; float: left; - margin-bottom: 24px; } @media (max-width: 768px) and (min-width: 375px) { text-align: left; float: left; - margin-bottom: 24px; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 57181bb..1b611af 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -5,4 +5,5 @@ font-size: 25px; line-height: 38px; color: #000000; + margin-top: 24px; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index a8c9aa3..e3530c6 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -19,6 +19,9 @@ .sliderTrackContainer { width: 96%; margin: 0 auto; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 97.012%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 95.085%; } @@ -28,6 +31,9 @@ .sliderTrack { .slide--carousel { width: 5.3515% !important; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 5.4036%!important; + } @media (max-width: 1025px) and (min-width: 768px) { width: 6.0831% !important; } @@ -41,6 +47,9 @@ border-radius: 0; :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; + @media (max-width: 2561px) and (min-width: 1920px) { + min-height: 543.4px; + } @media (max-width: 1025px) and (min-width: 768px) { min-height: 402.2px; } @@ -69,6 +78,9 @@ :global(.vtex-product-summary-2-x-imageContainer) { width: 100%; height: 314.4px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 434.4px; + } @media (max-width: 1025px) and (min-width: 768px) { height: 291.2px; } -- 2.34.1 From 2d37c4620cbdc46e46f2c2e895a47cb5d8fd373f Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 18:41:39 -0300 Subject: [PATCH 56/93] style(styles.css): adicionando estilo do html--product-main-content e html--product-availability-block --- react/components/Html/styles.css | 80 +++++++++++++++++++++++++++++++- 1 file changed, 78 insertions(+), 2 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 898a352..38e9c5f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,41 @@ +/* Product Main */ + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 49.131% 49.131%; + column-gap: 32px; + width: 71.858%; + margin: 0 auto; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 48.819% 48.819%; + padding: 0 40px; + column-gap: 32px; + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + } + +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--product-main-content) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + } +} + /* Product Quantity and Add To Cart Button */ :global(.agenciamagma-store-theme-5-x-html--cart-content) { @@ -16,8 +54,6 @@ } } - - [data-testid="product-quantity"] { height: 49px; } @@ -25,3 +61,43 @@ [data-testid="add-to-cart-button"] { width: 100%; } + + +/* Product Availability */ + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + display: grid; + grid-template-columns: 49.131% 49.131%; + column-gap: 32px; + width: 71.858%; + margin: 0 auto; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + display: grid; + grid-template-columns: 48.819% 48.819%; + padding: 0 40px; + column-gap: 32px; + + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + } + +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + display: grid; + grid-template-columns: 100%; + padding: 0 40px; + } +} -- 2.34.1 From d8efee88b08339d9e34a3b2a7e59edbf4106cb00 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 20:29:08 -0300 Subject: [PATCH 57/93] style: adicionando estilos do header --- react/components/Html/styles.css | 7 +++ styles/css/vtex.flex-layout.css | 35 +++++++++++++ styles/css/vtex.sticky-layout.css | 12 +++++ styles/css/vtex.store-components.css | 21 ++++++++ .../product/flex-layout/vtex.flex-layout.scss | 49 +++++++++++++++++++ .../vtex.store-components.scss | 34 ++++++++++++- .../pages/product/vtex.sticky-layout.scss | 5 ++ 7 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 styles/sass/pages/product/vtex.sticky-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 38e9c5f..153cc62 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,10 @@ +/* Header Telemarketing */ + +:global(.vtex-telemarketing-2-x-wrapper){ + background-color: #000000; + height: 34px; +} + /* Product Main */ @media (max-width: 2561px) and (min-width: 1920px) { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 78ac045..c1c78d3 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,6 +8,41 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRow--main-header { + display: flex; + justify-content: center; +} +.flexRow--main-header .flexRowContent--main-header { + height: 97px; + display: flex; + justify-content: space-between; + align-items: center; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--main-header .flexRowContent--main-header { + margin: 0 auto; + padding-left: 360px; + padding-right: 360px; + } +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 40px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 0; + } +} + +.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292; +} + .flexRowContent { padding: 0; margin: 0; diff --git a/styles/css/vtex.sticky-layout.css b/styles/css/vtex.sticky-layout.css index e69de29..f5116b9 100644 --- a/styles/css/vtex.sticky-layout.css +++ b/styles/css/vtex.sticky-layout.css @@ -0,0 +1,12 @@ +/* +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 */ +.wrapper--sticky-header { + background-color: #ffffff !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4724426..6434950 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,23 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.logoContainer { + padding-left: 40px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .logoContainer { + padding-left: 0; + } +} + +.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #AEAEAE; + border-radius: 0; +} + .container { width: 100%; padding: 0; @@ -45,6 +62,9 @@ margin-right: 0; } } +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { + margin: 0; +} @media (max-width: 2560px) and (min-width: 1920px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { height: 904px !important; @@ -69,6 +89,7 @@ .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { object-fit: unset !important; max-height: unset !important; + height: 664px !important; } @media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index a119b8a..e4975ae 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -1,3 +1,52 @@ +//Header + +.flexRow--main-header { + display: flex; + justify-content: center; + .flexRowContent--main-header { + height: 97px; + display: flex; + justify-content: space-between; + align-items: center; + @media (max-width: 2561px) and (min-width: 1920px) { + margin: 0 auto; + padding-left: 360px; + padding-right: 360px; + } + :global(.vtex-minicart-2-x-minicartWrapperContainer) { + :global(.vtex-minicart-2-x-minicartContainer) { + :global(.vtex-minicart-2-x-openIconContainer) { + padding-right: 40px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding-right: 0; + } + } + } + } + } +} + +//Menu + +.flexColChild { + :global(.vtex-menu-2-x-menuContainerNav) { + :global(.vtex-menu-2-x-menuContainer) { + :global(.vtex-menu-2-x-menuItem) { + :global(.vtex-menu-2-x-styledLink) { + :global(.vtex-menu-2-x-styledLinkContent) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292; + } + } + } + } + } +} + //product-images .flexRowContent { diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 97ada7a..e376c27 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,3 +1,33 @@ +//Logo Header +.logoContainer { + padding-left: 40px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding-left: 0; + } +} + +//Input Header +.autoCompleteOuterContainer { + &:first-child { + :global(.vtex-input) { + :global(.vtex-input-prefix__group){ + // border: none !important; + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #AEAEAE; + border-radius: 0; + // :global(.vtex-styleguide-9-x-input){ + // border: none !important; + // } + // :global(.vtex-input__suffix){ + // border: none !important; + // } + } + } + } +} + //product-images .container { @@ -34,6 +64,7 @@ margin-right: 0; } .productImagesGallerySlide { + margin: 0; @media (max-width: 2560px) and (min-width: 1920px) { height: 904px !important; } @@ -51,6 +82,7 @@ .productImageTag--main { object-fit: unset !important; max-height: unset !important; + height: 664px !important; @media (max-width: 2561px) and (min-width: 1920px) { height: 904px !important; } @@ -235,7 +267,7 @@ } :global(.vtex-store-components-3-x-submit) { grid-area: C; - margin: 0; + margin: 0; :global(.vtex-button) { width: 100%; @media (max-width: 768px) and (min-width: 375px) { diff --git a/styles/sass/pages/product/vtex.sticky-layout.scss b/styles/sass/pages/product/vtex.sticky-layout.scss new file mode 100644 index 0000000..c472aa7 --- /dev/null +++ b/styles/sass/pages/product/vtex.sticky-layout.scss @@ -0,0 +1,5 @@ +// Header + +.wrapper--sticky-header { + background-color: #ffffff !important; +} -- 2.34.1 From ff720499937ac3db353d9c0c7fe41c391e9ca9e1 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 31 Jan 2023 09:22:34 -0300 Subject: [PATCH 58/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20=C3=ADcones=20de=20login=20e=20menu=20ham?= =?UTF-8?q?burger=20do=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 16 ++--- styles/css/vtex.flex-layout.css | 55 ++++++++++++++++ styles/css/vtex.store-components.css | 5 ++ styles/css/vtex.tab-layout.css | 9 +-- .../product/flex-layout/vtex.flex-layout.scss | 63 +++++++++++++++++++ .../vtex.store-components.scss | 3 + .../sass/pages/product/vtex.tab-layout.scss | 9 +-- 7 files changed, 145 insertions(+), 15 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 153cc62..c0a6a75 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,6 +1,6 @@ /* Header Telemarketing */ -:global(.vtex-telemarketing-2-x-wrapper){ +:global(.vtex-telemarketing-2-x-wrapper) { background-color: #000000; height: 34px; } @@ -30,7 +30,7 @@ :global(.agenciamagma-store-theme-5-x-html--product-main-content) { display: grid; grid-template-columns: 100%; - padding: 0 40px; + padding: 0 40px 40px; } } @@ -39,7 +39,7 @@ :global(.agenciamagma-store-theme-5-x-html--product-main-content) { display: grid; grid-template-columns: 100%; - padding: 0 40px; + padding: 0 40px 40px; } } @@ -73,7 +73,7 @@ /* Product Availability */ @media (max-width: 2561px) and (min-width: 1920px) { - :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { display: grid; grid-template-columns: 49.131% 49.131%; column-gap: 32px; @@ -83,7 +83,7 @@ } @media (max-width: 1920px) and (min-width: 1024px) { - :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { display: grid; grid-template-columns: 48.819% 48.819%; padding: 0 40px; @@ -93,18 +93,20 @@ } @media (max-width: 1025px) and (min-width: 768px) { - :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { display: grid; grid-template-columns: 100%; padding: 0 40px; + margin-bottom: 8px; } } @media (max-width: 768px) and (min-width: 375px) { - :global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { + :global(.agenciamagma-store-theme-5-x-html--product-availability-block) { display: grid; grid-template-columns: 100%; padding: 0 40px; + margin-bottom: 8px; } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c1c78d3..0854815 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -33,6 +33,61 @@ padding-right: 0; } } +.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { + visibility: hidden; +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; +} + +.flexRow--main-header-mobile .flexRowContent--main-header-mobile { + display: flex; + justify-content: space-between; + align-items: center; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) { + position: absolute; + top: 16px; + left: 40%; +} +@media (max-width: 768px) and (min-width: 375px) { + .flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) { + left: 30%; + } +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) :global(.vtex-store-components-3-x-sizeMobile) { + padding: 0; + height: 33px; + display: contents; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer) { + visibility: hidden; + display: flex; + padding-left: 40px; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 27.93px; + height: 21px; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { + visibility: hidden; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; +} .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { font-weight: 400; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6434950..4c1f4ae 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -459,6 +459,11 @@ .shippingContainer :global(.vtex-address-form__postalCode) { padding-bottom: 0; } +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: calc(100% - 49px); + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before { content: "CALCULAR FRETE:"; font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index e41b6b7..c1125e3 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -18,7 +18,8 @@ } @media (max-width: 768px) and (min-width: 375px) { .container--description-block { - margin-top: 40px; + margin: 0; + padding: 0 40px; } } .container--description-block .listContainer { @@ -70,7 +71,7 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - width: 114px; + width: 100%; height: 38px; border-radius: 0; } @@ -111,7 +112,7 @@ line-height: 38px; text-transform: capitalize; border-bottom: 2px solid #000000; - width: 114px; + width: 100%; height: 38px; border-radius: 0; } @@ -123,11 +124,11 @@ @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) { border-bottom: unset; - width: 82px; } } .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { padding: 0; + width: 100%; } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index e4975ae..6d71d48 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -23,6 +23,69 @@ } } } + :global(.vtex-login-2-x-container) { + :global(.vtex-button) { + :global(.vtex-button__label) { + visibility: hidden; + } + :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; + } + } + } + } +} + +.flexRow--main-header-mobile { + .flexRowContent--main-header-mobile { + display: flex; + justify-content: space-between; + align-items: center; + :global(.vtex-store-components-3-x-logoLink) { + position: absolute; + top: 16px; + left: 40%; + @media (max-width: 768px) and (min-width: 375px) { + left: 30%; + } + :global(.vtex-store-components-3-x-sizeMobile) { + padding: 0; + height: 33px; + display: contents; + } + } + :global(.vtex-store-drawer-0-x-openIconContainer) { + visibility: hidden; + display: flex; + padding-left: 40px; + } + :global(.vtex-store-drawer-0-x-openIconContainer)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 27.93px; + height: 21px; + } + :global(.vtex-login-2-x-container) { + :global(.vtex-button) { + :global(.vtex-button__label) { + visibility: hidden; + } + :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; + } + } + } } } diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index e376c27..1211751 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -449,6 +449,9 @@ align-items: flex-end; :global(.vtex-address-form__postalCode) { padding-bottom: 0; + @media (max-width: 768px) and (min-width: 375px) { + width: calc(100% - 49px); + } :global(.vtex-input)::before { content: "CALCULAR FRETE:"; font-family: "Open Sans", sans-serif; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index da359cb..7dde801 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -7,7 +7,8 @@ padding: 0; } @media (max-width: 768px) and (min-width: 375px) { - margin-top: 40px; + margin: 0; + padding: 0 40px; } .listContainer { justify-content: space-around; @@ -46,7 +47,7 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - width: 114px; + width: 100%; height: 38px; border-radius: 0; :global(.vtex-button__label) { @@ -79,7 +80,7 @@ line-height: 38px; text-transform: capitalize; border-bottom: 2px solid #000000; - width: 114px; + width: 100%; height: 38px; border-radius: 0; @media (max-width: 1025px) and (min-width: 768px) { @@ -87,10 +88,10 @@ } @media (max-width: 768px) and (min-width: 375px) { border-bottom: unset; - width: 82px; } :global(.vtex-button__label) { padding: 0; + width: 100%; @media (max-width: 1025px) and (min-width: 768px) { justify-content: left; } -- 2.34.1 From af1f425185b76eb86d53a5f7feac5124b3dd42a2 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 31 Jan 2023 14:50:38 -0300 Subject: [PATCH 59/93] feat(product.jsonc): adicionando estrutura do newsletter --- store/blocks/pdp/product.jsonc | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4084191..b1acefe 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -76,6 +76,33 @@ } }, // + "footer-layout.desktop": { + "children": [ + "flex-layout.row#newsletter", + "flex-layout.row#footer-1-desktop", + "flex-layout.row#footer-3-desktop" + ] + }, + "footer-layout.mobile": { + "children": [ + "flex-layout.row#newsletter", + "flex-layout.row#1-footer-mobile", + "flex-layout.row#2-footer-mobile" + ] + }, + "flex-layout.row#newsletter": { + "children": ["newsletter"], + "props": { + "blockClass": "newsletter-footer" + } + }, + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + // "html#breadcrumb": { "props": { "tag": "section", @@ -309,7 +336,7 @@ }, "children": ["vtex.store-components:product-name"] }, - + "html#sku-selector": { "props": { "testId": "sku-selector" -- 2.34.1 From 0be1e49288579779b53a6db7ff71022a64e1f677 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 31 Jan 2023 14:52:57 -0300 Subject: [PATCH 60/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20fontes?= =?UTF-8?q?=20e=20adicionando=20estilo=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 6 + styles/css/vtex.store-components.css | 156 +++++++++++++++++- styles/css/vtex.tab-layout.css | 10 ++ .../product/flex-layout/vtex.flex-layout.scss | 8 + .../vtex.store-components.scss | 150 +++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 6 + 6 files changed, 325 insertions(+), 11 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 0854815..499067f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -131,4 +131,10 @@ font-weight: 400; font-size: 18px; line-height: 25px; +} + +@media (max-width: 768px) and (min-width: 375px) { + .flexRow--newsletter-footer { + margin-top: 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4c1f4ae..19ed3a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -21,7 +21,7 @@ border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #AEAEAE; + border-bottom: 1px solid #aeaeae; border-radius: 0; } @@ -707,4 +707,158 @@ .installmentsPrice { display: none; +} + +.newsletter { + height: 175px; + background: #000000; + border-bottom: 1px solid #ffffff; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter { + height: 200px; + padding: 64px 16px 12px; + } +} +.newsletter .container { + margin: 0; +} +.newsletter .container .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form { + width: 100%; + height: 124px; + padding: 0; + } +} +.newsletter .container .form .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin-top: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup { + display: flex; + align-items: center; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #929292; + border-radius: 0; + height: 32px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup .buttonContainer { + padding: 0; + height: 32px; +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid #bfbfbf; + min-height: unset; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + margin-top: 0; + } +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + padding: 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c1125e3..ef09152 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -75,6 +75,11 @@ height: 38px; border-radius: 0; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) { + font-size: 24px; + } +} .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } @@ -116,6 +121,11 @@ height: 38px; border-radius: 0; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + font-size: 24px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) { border-bottom: unset; diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 6d71d48..e9777a4 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -154,3 +154,11 @@ } } } + +//Footer + +.flexRow--newsletter-footer { + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 32px; + } +} diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1211751..1c27cf1 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -10,19 +10,12 @@ .autoCompleteOuterContainer { &:first-child { :global(.vtex-input) { - :global(.vtex-input-prefix__group){ - // border: none !important; + :global(.vtex-input-prefix__group) { border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #AEAEAE; - border-radius: 0; - // :global(.vtex-styleguide-9-x-input){ - // border: none !important; - // } - // :global(.vtex-input__suffix){ - // border: none !important; - // } + border-bottom: 1px solid #aeaeae; + border-radius: 0; } } } @@ -689,3 +682,140 @@ .installmentsPrice { display: none; } + +//Newsletter Footer + +.newsletter { + height: 175px; + background: #000000; + border-bottom: 1px solid #ffffff; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; + @media (max-width: 768px) and (min-width: 375px) { + height: 200px; + padding: 64px 16px 12px; + } + .container { + margin: 0; + .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + height: 124px; + padding: 0; + } + .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; + } + .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin-top: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + align-items: center; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #929292; + border-radius: 0; + height: 32px; + :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + } + } + .buttonContainer { + padding: 0; + height: 32px; + :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid #bfbfbf; + min-height: unset; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + } + :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + padding: 0 !important; + // border: 1px solid #000000; + } + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 7dde801..39537b3 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -50,6 +50,9 @@ width: 100%; height: 38px; border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } :global(.vtex-button__label) { padding: 0; @media (max-width: 1025px) and (min-width: 768px) { @@ -83,6 +86,9 @@ width: 100%; height: 38px; border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } @media (max-width: 1025px) and (min-width: 768px) { border-bottom: unset; } -- 2.34.1 From 4ff1c46d82501890f7577d81e21d91b258043445 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 31 Jan 2023 14:56:57 -0300 Subject: [PATCH 61/93] =?UTF-8?q?build:=20removendo=20depend=C3=AAncia=20a?= =?UTF-8?q?genciamagma.store-theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - 1 file changed, 1 deletion(-) diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", -- 2.34.1 From 2c00ac7fbaf1741c1231e80b5b21888879b8b21e Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:06:06 -0300 Subject: [PATCH 62/93] feat: adicionando componente Autores --- react/Autores.tsx | 3 +++ react/components/Autores/Autores.tsx | 26 ++++++++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 react/Autores.tsx create mode 100644 react/components/Autores/Autores.tsx diff --git a/react/Autores.tsx b/react/Autores.tsx new file mode 100644 index 0000000..9381cb5 --- /dev/null +++ b/react/Autores.tsx @@ -0,0 +1,3 @@ +import Autores from "./components/Autores/Autores"; + +export default Autores; diff --git a/react/components/Autores/Autores.tsx b/react/components/Autores/Autores.tsx new file mode 100644 index 0000000..7950e3c --- /dev/null +++ b/react/components/Autores/Autores.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +const Autores = () => { + return ( +
+
    +
  • + Powered by + ícone logo vtex +
    • +
  • + Developed by + ícone logo vtex +
    • +
+
+ ); +}; + +export default Autores; -- 2.34.1 From 6d324dbf2ae6c5b2ec02f9e590bdf80def3ad991 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:07:49 -0300 Subject: [PATCH 63/93] feat: adicionando componente PaymentMethods --- react/PaymentMethods.tsx | 3 + .../PaymentMethods/PaymentMethods.tsx | 73 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 react/PaymentMethods.tsx create mode 100644 react/components/PaymentMethods/PaymentMethods.tsx diff --git a/react/PaymentMethods.tsx b/react/PaymentMethods.tsx new file mode 100644 index 0000000..54ba1ad --- /dev/null +++ b/react/PaymentMethods.tsx @@ -0,0 +1,3 @@ +import PaymentMethods from "./components/PaymentMethods/PaymentMethods"; + +export default PaymentMethods; diff --git a/react/components/PaymentMethods/PaymentMethods.tsx b/react/components/PaymentMethods/PaymentMethods.tsx new file mode 100644 index 0000000..87e598a --- /dev/null +++ b/react/components/PaymentMethods/PaymentMethods.tsx @@ -0,0 +1,73 @@ +import React from "react"; + +const PaymentMethods = () => { + return ( +
+ Formas de pagamento +
    +
      +
    • + ícone mastercard +
      • +
    • + ícone diners +
      • +
    • + ícone boleto +
      • +
    • + ícone pix +
      • +
    +
      +
    • + ícone elo +
      • +
    • + ícone hipercard +
      • +
    • + ícone visa +
      • +
    • + ícone amex +
      • +
    +
+
+ ); +}; + +export default PaymentMethods; -- 2.34.1 From a31c199e874b2ec747b0a7b21a9a419e72df5036 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:09:31 -0300 Subject: [PATCH 64/93] feat: adicionando componente Social --- react/Social.tsx | 3 + react/components/Social/Social.tsx | 90 ++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 react/Social.tsx create mode 100644 react/components/Social/Social.tsx diff --git a/react/Social.tsx b/react/Social.tsx new file mode 100644 index 0000000..c9bfe37 --- /dev/null +++ b/react/Social.tsx @@ -0,0 +1,3 @@ +import Social from "./components/Social/Social"; + +export default Social; diff --git a/react/components/Social/Social.tsx b/react/components/Social/Social.tsx new file mode 100644 index 0000000..8424c7a --- /dev/null +++ b/react/components/Social/Social.tsx @@ -0,0 +1,90 @@ +import React from "react"; + +const Social = () => { + return ( +
+ Nos siga + +
+ ); +}; + +export default Social; -- 2.34.1 From 125b1ab227a0ebf9c305a309a014db95dad2291d Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:12:24 -0300 Subject: [PATCH 65/93] refactor(product.jsonc): removendo footer --- store/blocks/pdp/product.jsonc | 39 ++-------------------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b1acefe..02f0e0a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -75,34 +75,7 @@ "blockClass": "carousel" } }, - // - "footer-layout.desktop": { - "children": [ - "flex-layout.row#newsletter", - "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-3-desktop" - ] - }, - "footer-layout.mobile": { - "children": [ - "flex-layout.row#newsletter", - "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" - ] - }, - "flex-layout.row#newsletter": { - "children": ["newsletter"], - "props": { - "blockClass": "newsletter-footer" - } - }, - "newsletter": { - "props": { - "label": "Assine nossa newsletter", - "placeholder": "Digite seu e-mail" - } - }, - // + "html#breadcrumb": { "props": { "tag": "section", @@ -111,14 +84,6 @@ }, "children": ["breadcrumb"] }, - // "flex-layout.row#specifications-title": { - // "children": ["rich-text#specifications"] - // }, - // "rich-text#specifications": { - // "props": { - // "text": "##### Product Specifications" - // } - // }, "condition-layout.product#availability": { "props": { @@ -291,7 +256,7 @@ "html#sku-selector", // "product-quantity", "html#cart-content", - "product-assembly-options", + // "product-assembly-options", "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", -- 2.34.1 From 01f4e4cc6baa9b279e0ecee5b31bce0fa1eeb748 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:14:53 -0300 Subject: [PATCH 66/93] feat: adicionando estrutura do footer --- store/blocks/footer/footer.json | 149 +++++---- store/blocks/footer/menu.json | 436 +++++++++++++------------ store/blocks/header/category-menu.json | 48 +-- store/interfaces.json | 9 + 4 files changed, 345 insertions(+), 297 deletions(-) diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c05ac0f..c2e5300 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -1,25 +1,20 @@ { "footer": { - "blocks": [ - "footer-layout.desktop", - "footer-layout.mobile" - ] + "blocks": ["footer-layout.desktop", "footer-layout.mobile"] }, "footer-layout.desktop": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-2-desktop", - "flex-layout.row#footer-3-desktop" + "html#footer-3-desktop" ] }, "flex-layout.row#footer-1-desktop": { "children": [ - "vtex.menu@2.x:menu#Products", - "vtex.menu@2.x:menu#footer-clothing", - "vtex.menu@2.x:menu#footer-decoration", - "vtex.menu@2.x:menu#footer-bags", - "footer-spacer", - "social-networks" + "vtex.menu@2.x:menu#footer-site-m3-academy", + "vtex.menu@2.x:menu#footer-am3academy", + "html#seja-um-franqueado", + "html#right-block" ], "props": { "blockClass": "menu-row", @@ -27,83 +22,113 @@ "paddingBottom": 3 } }, - "social-networks": { + "html#seja-um-franqueado": { "props": { - "socialNetworks": [ - { - "name": "Facebook", - "url": "https://www.facebook.com/vtexonline/" - }, - { - "name": "Instagram", - "url": "https://www.instagram.com/vtextruecloud/" - }, - { - "name": "Twitter", - "url": "https://twitter.com/vtexonline" - }, - { - "name": "Youtube", - "url": "https://www.youtube.com/user/VTEXTV" - } - ] - } + "blockClass": "seja-um-franqueado" + }, + "children": ["vtex.menu@2.x:menu#footer-seja-um-franqueado-container"] + }, + "html#right-block": { + "children": [ + "html#social-networks-component", + "flex-layout.row#footer-2-desktop" + ] + }, + "html#social-networks-component": { + "props": { + "blockClass": "social-networks-component" + }, + "children": ["social-networks-component"] }, "flex-layout.row#footer-2-desktop": { - "children": [ - "accepted-payment-methods" - ], + "children": ["html#payment-methods-component"], "props": { "blockClass": "payment-methods" } }, - "accepted-payment-methods": { + "html#payment-methods-component": { "props": { - "paymentMethods": [ - "MasterCard", - "Visa", - "Diners Club" - ] - } + "blockClass": "payment-methods-component" + }, + "children": ["payment-methods-component"] }, - "flex-layout.row#footer-3-desktop": { + "html#footer-3-desktop": { "children": [ - "rich-text#footer" + "html#footer-credits-information", + "html#footer-credits-autores" ], "props": { "blockClass": "credits" } }, + "html#footer-credits-information": { + "props": { + "blockClass": "footer-credits-information" + }, + "children": [ + "rich-text#footer", + "rich-text#footer-address", + "rich-text#footer-cnpj" + ] + }, + "html#footer-credits-autores": { + "props": { + "blockClass": "autores-component" + }, + "children": ["autores-component"] + }, "rich-text#footer": { "props": { - "text": "All stock and product photos are from photos.icons8.com", + "text": "Copyright © 2022 M3 Academy. Todos os direitos reservados.", "blockClass": "footer" } }, + "rich-text#footer-address": { + "props": { + "text": "R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ", + "blockClass": "footer-address" + } + }, + "rich-text#footer-cnpj": { + "props": { + "text": "CNPJ: 12.345.678.0009-10", + "blockClass": "footer-cnpj" + } + }, "footer-layout.mobile": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" + "html#2-footer-mobile" ] }, - "flex-layout.row#2-footer-mobile": { - "children": [ - "flex-layout.col#footer-1-mobile" - ], + "flex-layout.row#newsletter": { + "children": ["newsletter"], "props": { - "blockClass": "payment-methods", + "blockClass": "newsletter-footer" + } + }, + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "html#2-footer-mobile": { + "children": ["html#footer-1-mobile"], + "props": { + "blockClass": "credits-mobile", "paddingTop": 4, "paddingBottom": 4 } }, - "flex-layout.col#footer-1-mobile": { + "html#footer-1-mobile": { "children": [ - "accepted-payment-methods", - "social-networks", - "rich-text#footer-mobile" + "html#footer-credits-information", + "html#footer-credits-autores" ], "props": { - "blockClass": "payment-methods", + "blockClass": "footer-credits-information-mobile", "paddingTop": 4, "paddingBottom": 4, "rowGap": 4 @@ -111,17 +136,15 @@ }, "flex-layout.row#1-footer-mobile": { "props": { + "blockClass": "menu-row-mobile", "paddingTop": 4, "paddingBottom": 4 }, "children": [ - "vtex.menu@2.x:menu#footer-mobile" + "vtex.menu@2.x:menu#footer-mobile", + "html#seja-um-franqueado", + "social-networks-component", + "html#payment-methods-component" ] - }, - "rich-text#footer-mobile": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } } } diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json index 7cc85f7..6099776 100644 --- a/store/blocks/footer/menu.json +++ b/store/blocks/footer/menu.json @@ -1,18 +1,23 @@ { - "vtex.menu@2.x:menu#Products": { + "vtex.menu@2.x:menu#footer-site-m3-academy": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#news", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization" + "menu-item#site-m3-academy", + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "menu-item#cnpj" ] }, - "menu-item#news": { + "menu-item#site-m3-academy": { "props": { - "id": "menu-item-news", + "blockClass": "site-m3-academy", + "id": "menu-item-site-m3-academy", "type": "custom", "iconId": null, "highlight": false, @@ -20,14 +25,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "News", - "text": "News" + "tagTitle": "Site M3 Academy", + "text": "Site M3 Academy" } } }, - "menu-item#blackfriday": { + "menu-item#loja-ebit-ouro": { "props": { - "id": "menu-item-black-friday", + "id": "menu-item-loja-ebit-ouro", "type": "custom", "iconId": null, "highlight": false, @@ -35,14 +40,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" + "tagTitle": "Loja Ebit Ouro", + "text": "Loja Ebit Ouro" } } }, - "menu-item#sale": { + "menu-item#trocas-e-devolucoes": { "props": { - "id": "menu-item-sale", + "id": "menu-item-trocas-e-devolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -50,14 +55,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" + "tagTitle": "Trocas e devoluções", + "text": "Trocas e devoluções" } } }, - "menu-item#personalization": { + "menu-item#central-de-atendimento": { "props": { - "id": "menu-item-personalization", + "id": "menu-item-central-de-atendimento", "type": "custom", "iconId": null, "highlight": false, @@ -65,84 +70,87 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" + "tagTitle": "Central de atendimento", + "text": "Central de atendimento" + } + } + }, + "menu-item#fale-conosco": { + "props": { + "id": "menu-item-fale-conosco", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Fale conosco", + "text": "Fale conosco" + } + } + }, + "menu-item#imprensa": { + "props": { + "id": "menu-item-imprensa", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Imprensa", + "text": "Imprensa" + } + } + }, + "menu-item#rastreamento": { + "props": { + "id": "menu-item-rastreamento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Rastreamento", + "text": "Rastreamento" + } + } + }, + "menu-item#cnpj": { + "props": { + "blockClass": "cnpj", + "id": "menu-item-cnpj", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "CNPJ 12.345.678.0009-10", + "text": "CNPJ 12.345.678.0009-10" } } }, - "vtex.menu@2.x:menu#footer-decoration": { + "vtex.menu@2.x:menu#footer-seja-um-franqueado-container": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" + "menu-item#seja-um-franqueado-block", + "menu-item#seja-um-franqueado-link", + "menu-item#multimarcas" ] }, - "menu-item#smartphones": { - "props": { - "id": "menu-item-smartphones", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/smartphones", - "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" - } - } - }, - - "menu-item#videogames": { - "props": { - "id": "menu-item-videogames", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/videogames", - "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" - } - } - }, - - "menu-item#tvs": { - "props": { - "id": "menu-item-tvs", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/tvs", - "noFollow": true, - "tagTitle": "TVs", - "text": "TVs" - } - } - }, - - "vtex.menu@2.x:menu#footer-bags": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#bags", - "menu-item#backpacks", - "menu-item#necessaire" - ] - }, - - "menu-item#bags": { + "menu-item#seja-um-franqueado-block": { "props": { + "blockClass": "seja-um-franqueado-block", "id": "menu-item-bags", "type": "custom", "iconId": null, @@ -151,55 +159,59 @@ "type": "internal", "href": "/bags/d", "noFollow": true, - "tagTitle": "Bags", - "text": "Bags" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#backpacks": { + "menu-item#seja-um-franqueado-link": { "props": { - "id": "menu-item-backpacks", + "blockClass": "seja-um-franqueado-link", + "id": "menu-item-seja-um-franqueado-link", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/backpacks", + "href": "/bags/seja-um-franqueado-link", "noFollow": true, - "tagTitle": "Backpacks", - "text": "Backpacks" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#necessaire": { + "menu-item#multimarcas": { "props": { - "id": "menu-item-necessaire", + "blockClass": "multimarcas", + "id": "menu-item-multimarcas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/necessaire", + "href": "/bags/multimarcas", "noFollow": true, - "tagTitle": "Necessaire", - "text": "Necessaire" + "tagTitle": "Multimarcas", + "text": "Multimarcas" } } }, - "vtex.menu@2.x:menu#footer-clothing": { + "vtex.menu@2.x:menu#footer-am3academy": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#clothing", - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" + "menu-item#am3academy", + "menu-item#seja-um-franqueado", + "menu-item#quem-somos", + "menu-item#nossas-lojas", + "menu-item#responsabilidade-social", + "menu-item#franquias", + "menu-item#procon-mg", + "menu-item#politica-de-privacidade" ] }, @@ -208,185 +220,207 @@ "orientation": "vertical" }, "children": [ - "menu-item#clothing-mobile", - "menu-item#decoration-mobile", - "menu-item#sale-mobile" + "menu-item#site-m3-academy-mobile", + "menu-item#am3academy-mobile" ] }, - "menu-item#clothing-mobile": { + "menu-item#site-m3-academy-mobile": { "props": { - "id": "menu-item-category-clothing", + "blockClass": "site-m3-academy-mobile", + "id": "menu-item-category-site-m3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "/site-m3academy/d", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "Site M3 Academy", + "text": "Site M3 Academy" } }, - "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"] + "blocks": ["vtex.menu@2.x:submenu.accordion#site-m3-academy"] }, - "vtex.menu@2.x:submenu.accordion#clothing": { - "children": ["vtex.menu@2.x:menu#clothing-accordion"] + "vtex.menu@2.x:submenu.accordion#site-m3-academy": { + "children": ["vtex.menu@2.x:menu#site-m3-academy-accordion"] }, - "vtex.menu@2.x:menu#clothing-accordion": { + "vtex.menu@2.x:menu#site-m3-academy-accordion": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "menu-item#cnpj" ] }, - "menu-item#decoration-mobile": { + "menu-item#am3academy-mobile": { "props": { - "itemProps": { - "tagTitle": "Decoration", - "text": "Decoration" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] - }, - "vtex.menu@2.x:submenu.accordion#decoration": { - "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] - }, - - "vtex.menu@2.x:menu#footer-decoration-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#sale-mobile": { - "props": { - "itemProps": { - "tagTitle": "Sale", - "text": "Sale" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] - }, - "vtex.menu@2.x:submenu.accordion#sale": { - "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] - }, - - "vtex.menu@2.x:menu#footer-sale-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#clothing": { - "props": { - "id": "menu-item-category-clothing", + "blockClass": "am3academy-mobile", + "id": "menu-item-category-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "/am3academy/d", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } - } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#am3academy"] + }, + "vtex.menu@2.x:submenu.accordion#am3academy": { + "children": ["vtex.menu@2.x:menu#am3academy-accordion"] }, - "menu-item#shorts": { + "vtex.menu@2.x:menu#am3academy-accordion": { "props": { - "id": "menu-item-shorts", + "orientation": "vertical" + }, + "children": [ + "menu-item#seja-um-franqueado", + "menu-item#quem-somos", + "menu-item#nossas-lojas", + "menu-item#responsabilidade-social", + "menu-item#franquias", + "menu-item#procon-mg", + "menu-item#politica-de-privacidade" + ] + }, + + "menu-item#am3academy": { + "props": { + "blockClass": "am3academy", + "id": "menu-item-category-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shorts", - "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" + "href": "/am3academy/d", + "noFollow": true, + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } } }, - "menu-item#tank-tops": { + "menu-item#seja-um-franqueado": { "props": { - "id": "menu-item-tank-tops", + "id": "menu-item-seja-um-franqueado", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/tank-tops", + "href": "/am3academy/seja-um-franqueado", "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#shirts": { + "menu-item#quem-somos": { "props": { - "id": "menu-item-shirts", + "id": "menu-item-quem-somos", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shirts", + "href": "/am3academy/quem-somos", "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" + "tagTitle": "Quem somos", + "text": "Quem somos" } } }, - "menu-item#sweatshirt": { + "menu-item#nossas-lojas": { "props": { - "id": "menu-item-sweat-shirts", + "id": "menu-item-nossas-lojas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/sweatshirt", + "href": "/am3academy/nossas-lojas", "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" + "tagTitle": "Nossas lojas", + "text": "Nossas lojas" } } }, - "menu-item#cropped": { + "menu-item#responsabilidade-social": { "props": { - "id": "menu-item-cropped", + "blockClass": "responsabilidade-social", + "id": "menu-item-responsabilidade-social", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/cropped", + "href": "/am3academy/responsabilidade-social", "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" + "tagTitle": "Responsabilidade Social", + "text": "Responsabilidade Social" + } + } + }, + + "menu-item#franquias": { + "props": { + "id": "menu-item-franquias", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/franquias", + "noFollow": false, + "tagTitle": "Franquias", + "text": "Franquias" + } + } + }, + "menu-item#procon-mg": { + "props": { + "id": "menu-item-procon-mg", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/procon-mg", + "noFollow": false, + "tagTitle": "Procon MG", + "text": "Procon MG" + } + } + }, + "menu-item#politica-de-privacidade": { + "props": { + "id": "menu-item-politica-de-privacidade", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/am3academy/politica-de-privacidade", + "noFollow": false, + "tagTitle": "Política de Privacidade", + "text": "Política de Privacidade" } } } diff --git a/store/blocks/header/category-menu.json b/store/blocks/header/category-menu.json index f641551..97185f6 100644 --- a/store/blocks/header/category-menu.json +++ b/store/blocks/header/category-menu.json @@ -23,40 +23,36 @@ "text": "Apparel & Accessories" } }, - "blocks": [ - "vtex.menu@2.x:submenu#category-apparel" - ] + "blocks": ["vtex.menu@2.x:submenu#category-apparel"] }, "vtex.menu@2.x:submenu#category-apparel": { "props": { "width": "auto" }, - "children": [ - "vtex.menu@2.x:menu#category-apparel" - ] + "children": ["vtex.menu@2.x:menu#category-apparel"] }, "vtex.menu@2.x:menu#category-apparel": { "props": { "orientation": "vertical" }, "children": [ - "menu-item#category-apparel-clothing", + "menu-item#category-apparel-am3academy", "menu-item#category-apparel-accessories", "menu-item#category-apparel-eyeglasses" ] }, - "menu-item#category-apparel-clothing": { + "menu-item#category-apparel-am3academy": { "props": { - "id": "menu-item-category-apparel-clothing", + "id": "menu-item-category-apparel-am3academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/apparel---accessories/clothing/", + "href": "/apparel---accessories/am3academy/", "noFollow": false, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" } } }, @@ -107,7 +103,7 @@ }, "menu-item#more": { "props": { - "id": "menu-item-custom-sale", + "id": "menu-item-custom-trocas-e-devolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -119,42 +115,28 @@ "text": "More" } }, - "blocks": [ - "vtex.menu@2.x:submenu#more" - ] + "blocks": ["vtex.menu@2.x:submenu#more"] }, "vtex.menu@2.x:submenu#more": { "props": { "width": "100%" }, - "children": [ - "flex-layout.row#menu-more" - ] + "children": ["flex-layout.row#menu-more"] }, "flex-layout.row#menu-more": { - "children": [ - "flex-layout.col#menu-more-1", - "flex-layout.col#menu-more-2" - ] + "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"] }, "flex-layout.col#menu-more-1": { - "children": [ - "vtex.menu@2.x:menu#more" - ] + "children": ["vtex.menu@2.x:menu#more"] }, "flex-layout.col#menu-more-2": { - "children": [ - "info-card#home" - ] + "children": ["info-card#home"] }, "vtex.menu@2.x:menu#more": { "props": { "orientation": "vertical" }, - "children": [ - "menu-item#about-us", - "menu-item#faq" - ] + "children": ["menu-item#about-us", "menu-item#faq"] }, "menu-item#about-us": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index 70867e0..9288222 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -14,5 +14,14 @@ }, "placeholder-component": { "component": "Placeholder" + }, + "social-networks-component": { + "component": "Social" + }, + "payment-methods-component": { + "component": "PaymentMethods" + }, + "autores-component": { + "component": "Autores" } } -- 2.34.1 From b95541fb3fd63c21587a6e879b6c5a54eb106a9b Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:36:15 -0300 Subject: [PATCH 67/93] feat: adicionando arquivos .scss e .css vtex.menu com estilos do footer --- styles/css/vtex.menu.css | 247 +++++++++++++++++++++++ styles/sass/pages/product/vtex.menu.scss | 214 ++++++++++++++++++++ 2 files changed, 461 insertions(+) create mode 100644 styles/css/vtex.menu.css create mode 100644 styles/sass/pages/product/vtex.menu.scss diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..64d6962 --- /dev/null +++ b/styles/css/vtex.menu.css @@ -0,0 +1,247 @@ +/* +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 */ +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer { + margin-bottom: 14px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer { + margin-bottom: 14px; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin-left: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer { + margin: 0; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink { + width: 100%; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed { + visibility: hidden; + width: 17px; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed::before, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen { + visibility: hidden; + transform: rotate(179deg); + width: 17px; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen::before, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + line-height: 38px; + text-align: center; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + display: flex; + justify-content: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + display: flex; + justify-content: center; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social { + line-height: 30px; + text-decoration-line: underline; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + font-weight: 400; + font-size: 12px; + line-height: 30px; + color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + width: 164px; + height: 42px; + border: 1px solid #ffffff; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas { + width: 100%; + } +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile { + border-bottom: 1px solid #ffffff; + padding: 8px 0; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block { + font-weight: 400; + font-size: 14px; + color: #ffffff; +} +.menuContainerNav .menuContainer .menuItem .styledLinkContainer--am3academy-mobile, +.menuContainerNav .menuContainer .menuItem .styledLinkContainer--site-m3-academy-mobile { + margin: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas { + display: flex; + justify-content: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link, + .menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas { + display: flex; + justify-content: center; + } +} + +.FooterRightBlock { + margin-bottom: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } +} +.FooterRightBlock .SpanTitle { + color: #ffffff; + font-weight: 400; + font-size: 14px; + line-height: 38px; +} +.FooterRightBlock .SpanTitleBig { + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .SpanTitleBig { + font-size: 14px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .SpanTitleBig { + font-size: 14px; + } +} +.FooterRightBlock .UlGroup { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + row-gap: 4px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .UlGroup { + align-items: center; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .UlGroup { + justify-content: center; + align-items: center; + } +} +.FooterRightBlock .UlGroup .UlSecondary { + display: flex; + padding: 0; + margin: 0; + column-gap: 8px; + list-style: none; +} +@media (max-width: 1025px) and (min-width: 768px) { + .FooterRightBlock .UlGroup .UlSecondary .ImgCard { + width: 42px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .FooterRightBlock .UlGroup .UlSecondary .ImgCard { + width: 42px; + } +} + +.AutoresBlock .Autores-Group { + display: flex; + align-items: center; + column-gap: 15.73px; + margin: 0; + padding: 0; +} +.AutoresBlock .Autores-Group .Autores-List { + display: flex; + align-items: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #ffffff; + column-gap: 8.72px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtex.menu.scss new file mode 100644 index 0000000..69b9cf5 --- /dev/null +++ b/styles/sass/pages/product/vtex.menu.scss @@ -0,0 +1,214 @@ +//Footer +.menuContainerNav { + .menuContainer { + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 14px; + } + @media (max-width: 768px) and (min-width: 375px) { + margin-bottom: 14px; + } + .menuItem { + .styledLinkContainer { + margin-left: 0; + @media (max-width: 1025px) and (min-width: 768px) { + margin: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + } + .styledLink { + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } + .styledLinkContent { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); + .accordionIcon--site-m3-academy-mobile--isClosed, + .accordionIcon--am3academy-mobile--isClosed { + visibility: hidden; + width: 17px; + } + .accordionIcon--site-m3-academy-mobile--isClosed::before, + .accordionIcon--am3academy-mobile--isClosed::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); + } + .accordionIcon--site-m3-academy-mobile--isOpen, + .accordionIcon--am3academy-mobile--isOpen { + visibility: hidden; + transform: rotate(179deg); + width: 17px; + } + .accordionIcon--site-m3-academy-mobile--isOpen::before, + .accordionIcon--am3academy-mobile--isOpen::before { + visibility: visible; + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg); + } + } + .styledLinkContent--site-m3-academy, + .styledLinkContent--am3academy, + .styledLinkContent--seja-um-franqueado-block { + line-height: 38px; + text-align: center; + } + .styledLinkContent--seja-um-franqueado-block { + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + justify-content: center; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + justify-content: center; + } + } + .styledLinkContent--cnpj, + .styledLinkContent--responsabilidade-social { + line-height: 30px; + text-decoration-line: underline; + } + .styledLinkContent--seja-um-franqueado-link, + .styledLinkContent--multimarcas { + font-weight: 400; + font-size: 12px; + line-height: 30px; + color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + width: 164px; + height: 42px; + border: 1px solid #ffffff; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } + } + .styledLinkContent--site-m3-academy-mobile, + .styledLinkContent--am3academy-mobile { + border-bottom: 1px solid #ffffff; + padding: 8px 0; + } + .styledLinkContent--site-m3-academy, + .styledLinkContent--site-m3-academy-mobile, + .styledLinkContent--cnpj, + .styledLinkContent--am3academy, + .styledLinkContent--am3academy-mobile, + .styledLinkContent--responsabilidade-social, + .styledLinkContent--seja-um-franqueado-block { + font-weight: 400; + font-size: 14px; + color: #ffffff; + } + } + } + .styledLinkContainer--am3academy-mobile, + .styledLinkContainer--site-m3-academy-mobile { + margin: 0; + } + .styledLinkContainer--seja-um-franqueado-link, + .styledLinkContainer--multimarcas { + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + justify-content: center; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + justify-content: center; + } + } + } + } +} + +.FooterRightBlock { + margin-bottom: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + } + .SpanTitle { + color: #ffffff; + font-weight: 400; + font-size: 14px; + line-height: 38px; + } + .SpanTitleBig { + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 38px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 14px; + } + } + .UlGroup { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + row-gap: 4px; + @media (max-width: 1025px) and (min-width: 768px) { + align-items: center; + } + @media (max-width: 768px) and (min-width: 375px) { + justify-content: center; + align-items: center; + } + .UlSecondary { + display: flex; + padding: 0; + margin: 0; + column-gap: 8px; + list-style: none; + .ImgCard { + @media (max-width: 1025px) and (min-width: 768px) { + width: 42px; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 42px; + } + } + } + } +} + +// Footer Credits + +.AutoresBlock { + .Autores-Group { + display: flex; + align-items: center; + column-gap: 15.73px; + margin: 0; + padding: 0; + .Autores-List { + display: flex; + align-items: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #ffffff; + column-gap: 8.72px; + } + } +} -- 2.34.1 From 98905f7456a820fa01eb2d18d3f9ebc4b7c45a75 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 1 Feb 2023 10:38:48 -0300 Subject: [PATCH 68/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s=20e=20adicionando=20estilos=20do=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 112 +++++++++++++++++- styles/css/vtex.flex-layout.css | 24 ++++ styles/css/vtex.rich-text.css | 12 ++ styles/css/vtex.store-components.css | 30 +++-- .../product/flex-layout/vtex.flex-layout.scss | 23 ++++ .../vtex.store-components.scss | 30 +++-- styles/sass/pages/product/vtex.rich-text.scss | 20 +++- 7 files changed, 228 insertions(+), 23 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index c0a6a75..d355e73 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -30,7 +30,7 @@ :global(.agenciamagma-store-theme-5-x-html--product-main-content) { display: grid; grid-template-columns: 100%; - padding: 0 40px 40px; + padding: 0 40px 0; } } @@ -110,3 +110,113 @@ margin-bottom: 8px; } } + + +/* Footer */ + +:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: flex; + justify-content: center; +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + justify-content: left; + } +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: unset; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { + display: unset; + } +} + +:global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: flex; + justify-content: right; +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: unset; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) { + display: unset; + } +} + +/* Footer Credits */ + +:global(.agenciamagma-store-theme-5-x-html--credits) { + height: 107px; + background: #000000; + border-top: 1px solid #FFFFFF; + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 32px 32px 0 438.5px; +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--credits) { + justify-content: space-between; + padding: 31.5px 320px 15.5px; + } +} + +:global(.agenciamagma-store-theme-5-x-html--credits-mobile) { + background: #000000; + border-top: 1px solid #FFFFFF; + display: flex; + justify-content: center; + height: 131px; +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--credits-mobile) { + height: 151px; + } +} + +:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +@media (max-width: 1025px) and (min-width: 768px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + margin-top: 16px; + margin-bottom: 32px; + } +} + +@media (max-width: 768px) and (min-width: 375px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + margin-top: 16px; + margin-bottom: 32px; + padding: 0 40px; + } +} + +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.agenciamagma-store-theme-5-x-html--footer-credits-information) { + align-items: flex-start; + } +} + +:global(.agenciamagma-store-theme-5-x-html--footer-credits-information-mobile) { + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 499067f..1c20985 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -133,6 +133,30 @@ line-height: 25px; } +.flexRow--menu-row { + background-color: #000000; + height: 464px; + padding: 32px 32px 128px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexRow--menu-row { + padding: 32px 320px 128px; + } +} + +.flexRow--menu-row-mobile { + background-color: #000000; + min-height: 532px; + padding: 0px 16px 32px; +} +.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile { + display: flex; + flex-direction: column; +} +.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile .stretchChildrenWidth { + width: 100% !important; +} + @media (max-width: 768px) and (min-width: 375px) { .flexRow--newsletter-footer { margin-top: 32px; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 5013578..30c47f9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -35,4 +35,16 @@ .container--slider-title .wrapper--slider-title .heading--slider-title { font-size: 20px; } +} + +.container .wrapper .paragraph { + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 20px; + text-align: center; + color: rgba(255, 255, 255, 0.45); +} +.container .wrapper .paragraph--footer { + font-weight: 700; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 19ed3a9..f555c33 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,7 +28,7 @@ .container { width: 100%; padding: 0; - margin: auto; + margin: 0 auto; max-width: unset !important; } @@ -712,16 +712,22 @@ .newsletter { height: 175px; background: #000000; - border-bottom: 1px solid #ffffff; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 16px; + border-bottom: 1px solid #ffffff; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter { + border-bottom: none !important; + } } @media (max-width: 768px) and (min-width: 375px) { .newsletter { height: 200px; padding: 64px 16px 12px; + border-bottom: none !important; } } .newsletter .container { @@ -808,14 +814,18 @@ } @media (max-width: 1025px) and (min-width: 768px) { .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; } } @media (max-width: 768px) and (min-width: 375px) { .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; } } .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { @@ -827,14 +837,14 @@ } @media (max-width: 1025px) and (min-width: 768px) { .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; } } .newsletter .container .form .inputGroup .buttonContainer { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index e9777a4..31b9484 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -157,6 +157,29 @@ //Footer +.flexRow--menu-row { + background-color: #000000; + height: 464px; + padding: 32px 32px 128px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 32px 320px 128px; + } +} +.flexRow--menu-row-mobile { + background-color: #000000; + min-height: 532px; + padding: 0px 16px 32px; + .flexRowContent--menu-row-mobile { + display: flex; + flex-direction: column; + .stretchChildrenWidth{ + width: 100% !important; + } + } +} + +//Footer Newsletter + .flexRow--newsletter-footer { @media (max-width: 768px) and (min-width: 375px) { margin-top: 32px; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1c27cf1..2f51c3e 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -15,7 +15,7 @@ border-left: none; border-right: none; border-bottom: 1px solid #aeaeae; - border-radius: 0; + border-radius: 0; } } } @@ -26,7 +26,7 @@ .container { width: 100%; padding: 0; - margin: auto; + margin: 0 auto; max-width: unset !important; } @@ -688,14 +688,18 @@ .newsletter { height: 175px; background: #000000; - border-bottom: 1px solid #ffffff; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 16px; + border-bottom: 1px solid #ffffff; + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: none !important; + } @media (max-width: 768px) and (min-width: 375px) { height: 200px; padding: 64px 16px 12px; + border-bottom: none !important; } .container { margin: 0; @@ -766,12 +770,16 @@ color: #929292; border: 1px solid #000000; @media (max-width: 1025px) and (min-width: 768px) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; } @media (max-width: 768px) and (min-width: 375px) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; + padding-bottom: 16px; + padding-left: 24px; } } :global(.vtex-styleguide-9-x-input)::placeholder { @@ -781,12 +789,12 @@ color: #929292; border: 1px solid #000000; @media (max-width: 1025px) and (min-width: 768px) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; } @media (max-width: 768px) and (min-width: 375px) { - font-size: 16px; - line-height: 22px; + font-size: 12px; + line-height: 16px; } } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 32e492c..9fa5917 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -6,7 +6,7 @@ margin-top: 16px; margin-bottom: 32px; @media (max-width: 1025px) and (min-width: 768px) { - margin-bottom: 24px; + margin-bottom: 24px; } @media (max-width: 768px) and (min-width: 375px) { margin-bottom: 16px; @@ -25,3 +25,21 @@ } } } + +// Footer Credits + +.container { + .wrapper { + .paragraph { + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 20px; + text-align: center; + color: rgba(255, 255, 255, 0.45); + } + .paragraph--footer { + font-weight: 700; + } + } +} -- 2.34.1 From e7518639c24107b53207de54e14e8d39907ac3c3 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:07:03 -0300 Subject: [PATCH 69/93] =?UTF-8?q?style(=5Fvars.scss):=20remo=C3=A7=C3=A3o?= =?UTF-8?q?=20e=20adi=C3=A7=C3=A3o=20de=20vari=C3=A1veis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/sass/utils/_vars.scss | 40 ++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..844b03d 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,31 +1,27 @@ -$color-black: #292929; +$black: #000000; -$color-white: #fff; +$white: #ffffff; -$color-gray: #6c6c6c; -$color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; -$color-gray4: #c4c4c4; -$color-gray5: #e5e5e5; - -$color-blue: #4267b2; - -$color-green: #4caf50; +$gray: #929292; +$gray-300: #bfbfbf; +$BABABA: #bababa; +$B9B9B9: #b9b9b9; +$cccccc: #cccccc; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1 From f45182dd4fdcf9a7670a3ea940b1d6de98721072 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:13:11 -0300 Subject: [PATCH 70/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?s,=20adi=C3=A7=C3=A3o=20de=20vari=C3=A1veis=20e=20corre=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20coment=C3=A1rios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.breadcrumb.css | 21 ++- styles/css/vtex.flex-layout.css | 10 ++ styles/css/vtex.menu.css | 2 +- styles/css/vtex.product-quantity.css | 4 + styles/css/vtex.store-components.css | 120 +++++++++++-- styles/css/vtex.tab-layout.css | 26 ++- .../product/breadcrumb/vtex.breadcrumb.scss | 26 ++- .../product/flex-layout/vtex.flex-layout.scss | 20 ++- .../vtex.store-components.scss | 157 +++++++++++++----- styles/sass/pages/product/vtex.menu.scss | 17 +- .../pages/product/vtex.product-price.scss | 2 +- .../pages/product/vtex.product-quantity.scss | 18 +- .../pages/product/vtex.slider-layout.scss | 18 +- .../pages/product/vtex.sticky-layout.scss | 2 +- .../sass/pages/product/vtex.tab-layout.scss | 38 +++-- 15 files changed, 363 insertions(+), 118 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 3bb78f0..677a74f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -21,24 +21,33 @@ } } .container .homeLink { - padding: 0; + padding-right: 6px; + padding-left: 0; } .container .homeLink::before { content: "Home"; font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } .container .homeIcon { display: none; } +.container .arrow { + padding: 0 6px; +} +.container .arrow .link { + padding: 0 6px; +} +.container .term { + padding: 0 6px; +} .container .link, .container .term { font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; -} -@media (max-width: 768px) and (min-width: 375px) { - .container .term { - padding-left: 0; - } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1c20985..10d123f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -87,8 +87,18 @@ width: 22px; height: 18px; padding: 0; + left: 0; + position: absolute; } +.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 308.08px; + } +} .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { font-weight: 400; font-size: 12px; diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index 64d6962..da0e430 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -44,7 +44,7 @@ font-weight: 400; font-size: 14px; line-height: 30px; - color: rgba(255, 255, 255, 0.45); + color: #929292; } .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed, .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 388c6fc..992f63a 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,9 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.quantitySelectorContainer { + margin-bottom: 0px; +} @media (max-width: 768px) and (min-width: 375px) { .quantitySelectorContainer { margin: 0; @@ -27,6 +30,7 @@ font-weight: 400; font-size: 16px; line-height: 22px; + padding: 0; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f555c33..988802d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -207,6 +207,8 @@ display: grid; grid-template-areas: "A B" "C C"; max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; } @media (max-width: 2561px) and (min-width: 1920px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { @@ -215,27 +217,32 @@ } @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { - width: 81.02%; + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + width: 100%; } } @media (max-width: 768px) and (min-width: 375px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; width: 100%; } } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { grid-area: A; - margin: 0 8px 15px 0; - width: 12.22em; + margin: 0 0 15px 0; + width: 100%; } @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { - width: 23.657em; + width: 100%; } } @media (max-width: 768px) and (min-width: 375px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { - width: 94.26%; + width: 100%; + margin-right: 0; } } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { @@ -246,6 +253,7 @@ border: 1px solid #989898; border-radius: unset; height: 40px; + padding: 0 14px; } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -256,17 +264,18 @@ :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { grid-area: B; margin: 0 0 15px; - width: 12.22em; + width: 100%; height: 40px; } @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { - width: 23.657em; + width: 100%; } } @media (max-width: 768px) and (min-width: 375px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { - width: 99.47%; + width: 100%; + margin-right: 0; } } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { @@ -276,6 +285,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + padding: 0 14px; } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -397,6 +407,11 @@ color: #000000; } +@media (max-width: 1025px) and (min-width: 768px) { + .skuSelectorSubcontainer--cor { + margin-bottom: 0; + } +} .skuSelectorSubcontainer--cor .skuSelectorNameContainer { margin: 8px 0 0; height: 48px; @@ -456,6 +471,11 @@ display: flex; align-items: flex-end; } +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer { + padding-bottom: 40px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) { padding-bottom: 0; } @@ -486,12 +506,22 @@ width: 100%; } } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; font-size: 12px; line-height: 16px; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { height: 0; padding: 0; @@ -540,16 +570,38 @@ .shippingTable { border: 0; padding: 0; + margin-top: 16px; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable { + margin-top: 0; + margin-bottom: 16px; + } } .shippingTable .shippingTableHead { display: block; } .shippingTable .shippingTableHead .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -584,11 +636,26 @@ } .shippingTable .shippingTableBody .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -614,6 +681,7 @@ .productImagesContainer--image-description { width: 92.93%; + height: 632px; max-height: unset; position: relative; margin-left: 32px; @@ -621,11 +689,13 @@ @media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer--image-description { width: 94.784%; + height: 872px; } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; + height: 944px; margin-left: 0; margin-bottom: 16px; } @@ -633,11 +703,31 @@ @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { width: 100%; + height: 296px; margin-left: 0; margin-bottom: 16px; } } -.productImagesContainer--image-description .productImageTag--image-description--main { +.productImagesContainer--image-description .productImage--image-description { + height: 632px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer--image-description .productImage--image-description { + height: 872px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description .productImage--image-description { + height: 944px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer--image-description .productImage--image-description { + height: 296px; + } +} +.productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { + object-fit: cover !important; max-height: unset !important; } @@ -645,6 +735,7 @@ width: 92.93%; position: relative; margin-left: 16px; + margin-right: 32px; } @media (max-width: 2561px) and (min-width: 1920px) { .productDescriptionContainer { @@ -654,6 +745,7 @@ @media (max-width: 1025px) and (min-width: 768px) { .productDescriptionContainer { margin-left: 0; + margin-right: 0; width: 100%; } } @@ -661,6 +753,7 @@ .productDescriptionContainer { margin-left: 0; width: 100%; + margin-right: 0; } } .productDescriptionContainer .productDescriptionTitle { @@ -670,6 +763,11 @@ line-height: 32px; color: #575757; } +@media (max-width: 2561px) and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + margin-bottom: 16px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .productDescriptionContainer .productDescriptionTitle { font-size: 20px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ef09152..83a9e0c 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -26,12 +26,13 @@ justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; - padding-top: 16px; + padding-top: 0; + column-gap: 99px; } @media (max-width: 2561px) and (min-width: 1920px) { .container--description-block .listContainer { width: 71.858%; - margin: 0 auto 32px; + margin: 0 auto 64px; } } @media (max-width: 1025px) and (min-width: 768px) { @@ -39,6 +40,7 @@ flex-direction: column; border-top: 1px solid #b9b9b9; margin-bottom: 16px; + padding-top: 16px; } } @media (max-width: 768px) and (min-width: 375px) { @@ -46,20 +48,29 @@ flex-direction: column; border-top: 1px solid #b9b9b9; margin-bottom: 16px; + padding-top: 16px; } } .container--description-block .listContainer .listItem { margin: 0; padding: 0; + width: 114px; height: 38px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem { + width: 142px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem { + width: 82px; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem { + width: 82px; margin-bottom: 16px; } } @@ -81,15 +92,24 @@ } } .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + width: 114px; + height: 38px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 142px; + } } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; justify-content: left; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; justify-content: left; } } diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index f537138..429c4e5 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -9,29 +9,39 @@ width: 71.858%; } .homeLink { - padding: 0; + padding-right: 6px; + padding-left: 0; } .homeLink::before { content: "Home"; font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; } .homeIcon { display: none; } + .arrow { + padding: 0 6px; + .link { + padding: 0 6px; + } + } + + .term { + padding: 0 6px; + } + .link, .term { font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; - } - - .term { - @media (max-width: 768px) and (min-width: 375px) { - padding-left: 0; - } + color: $gray; } } diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 31b9484..56c310a 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -83,6 +83,8 @@ width: 22px; height: 18px; padding: 0; + left: 0; + position: absolute; } } } @@ -94,6 +96,10 @@ .flexColChild { :global(.vtex-menu-2-x-menuContainerNav) { :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-left: 308.08px; + } :global(.vtex-menu-2-x-menuItem) { :global(.vtex-menu-2-x-styledLink) { :global(.vtex-menu-2-x-styledLinkContent) { @@ -102,7 +108,7 @@ line-height: 16px; letter-spacing: -0.1em; text-transform: uppercase; - color: #929292; + color: $gray; } } } @@ -110,7 +116,7 @@ } } -//product-images +//Product-images .flexRowContent { padding: 0; @@ -128,7 +134,7 @@ .flexRowContent { .stretchChildrenWidth { :global(.vtex-button):first-child { - background: #000000; + background: $black; padding: 12px 64px; height: 49px; border: none; @@ -144,7 +150,7 @@ :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 25px; @@ -158,7 +164,7 @@ //Footer .flexRow--menu-row { - background-color: #000000; + background-color: $black; height: 464px; padding: 32px 32px 128px; @media (max-width: 2561px) and (min-width: 1920px) { @@ -166,13 +172,13 @@ } } .flexRow--menu-row-mobile { - background-color: #000000; + background-color: $black; min-height: 532px; padding: 0px 16px 32px; .flexRowContent--menu-row-mobile { display: flex; flex-direction: column; - .stretchChildrenWidth{ + .stretchChildrenWidth { width: 100% !important; } } diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 2f51c3e..c25695f 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,4 +1,5 @@ //Logo Header + .logoContainer { padding-left: 40px; @media (max-width: 2561px) and (min-width: 1920px) { @@ -7,6 +8,7 @@ } //Input Header + .autoCompleteOuterContainer { &:first-child { :global(.vtex-input) { @@ -21,7 +23,7 @@ } } -//product-images +//Product-images .container { width: 100%; @@ -79,18 +81,14 @@ @media (max-width: 2561px) and (min-width: 1920px) { height: 904px !important; } - // @media (max-width: 1920px) and (min-width: 1024px) { - // max-height: unset !important; - // } + @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; - // max-height: unset !important; } @media (max-width: 768px) and (min-width: 375px) { width: 99.67% !important; height: 296px !important; object-fit: cover !important; - // max-height: unset !important; } } } @@ -133,7 +131,7 @@ } } -//dados produto +//Dados produto .productNameContainer { text-align: right; @@ -189,24 +187,31 @@ "A B" "C C"; max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; @media (max-width: 2561px) and (min-width: 1920px) { width: 44.138%; } @media (max-width: 1025px) and (min-width: 768px) { - width: 81.02%; + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; width: 100%; } :global(.vtex-store-components-3-x-inputName) { grid-area: A; - margin: 0 8px 15px 0; - width: 12.22em; + margin: 0 0 15px 0; + width: 100%; @media (max-width: 1025px) and (min-width: 768px) { - width: 23.657em; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { - width: 94.26%; + width: 100%; + margin-right: 0; } :global(.vtex-input) { :global(.vtex-input-prefix__group) { @@ -218,6 +223,7 @@ border: 1px solid #989898; border-radius: unset; height: 40px; + padding: 0 14px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -231,13 +237,14 @@ :global(.vtex-store-components-3-x-inputEmail) { grid-area: B; margin: 0 0 15px; - width: 12.22em; + width: 100%; height: 40px; @media (max-width: 1025px) and (min-width: 768px) { - width: 23.657em; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { - width: 99.47%; + width: 100%; + margin-right: 0; } :global(.vtex-input) { :global(.vtex-input-prefix__group) { @@ -248,6 +255,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + padding: 0 14px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -273,7 +281,7 @@ :global(.vtex-button__label)::after { content: "AVISE-ME"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 25px; @@ -284,7 +292,7 @@ } } -// sku selector +// Sku selector .skuSelectorContainer { display: flex; @@ -302,7 +310,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } .skuSelectorSubcontainer--tamanho::before { @@ -311,7 +319,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } .skuSelectorSubcontainer--tamanho { @@ -328,7 +336,7 @@ height: 40px; margin: 0; .frameAround--sku-selector { - border-color: #000000; + border-color: $black; border-width: 2px; width: 40px; height: 40px; @@ -371,7 +379,7 @@ .skuSelectorItem--selected { .skuSelectorInternalBox { .skuSelectorItemTextValue { - color: #000000; + color: $black; } } } @@ -379,6 +387,9 @@ } } .skuSelectorSubcontainer--cor { + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 0; + } .skuSelectorNameContainer { margin: 8px 0 0; height: 48px; @@ -392,7 +403,7 @@ height: 48px; margin: 0; .frameAround--sku-selector { - border-color: #000000; + border-color: $black; border-width: 2px; width: 48px; height: 48px; @@ -435,11 +446,14 @@ } } -// Calculadora de Frete +//Calculadora de Frete .shippingContainer { display: flex; align-items: flex-end; + @media (max-width: 768px) and (min-width: 375px) { + padding-bottom: 40px; + } :global(.vtex-address-form__postalCode) { padding-bottom: 0; @media (max-width: 768px) and (min-width: 375px) { @@ -451,7 +465,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } :global(.vtex-input) { :global(.vtex-input__label) { @@ -465,6 +479,13 @@ @media (max-width: 768px) and (min-width: 375px) { width: 100%; } + :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; + } :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -472,13 +493,16 @@ line-height: 16px; } } + :global(.vtex-input__error) { + position: absolute; + } } :global(.vtex-address-form__postalCode-forgottenURL) { height: 0; padding: 0; :last-child { text-decoration-line: underline; - color: #000000; + color: $black; font-weight: 400; font-size: 12px; line-height: 16px; @@ -500,7 +524,7 @@ :global(.vtex-button) { width: 49px; height: 49px; - background: #000000; + background: $black; border-radius: 0; border: none; bottom: 1px; @@ -511,7 +535,7 @@ :global(.vtex-button)::after { content: "OK"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 600; font-size: 14px; line-height: 19px; @@ -523,13 +547,27 @@ .shippingTable { border: 0; padding: 0; + margin-top: 16px; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + margin-bottom: 16px; + } .shippingTableHead { display: block; .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -567,10 +605,19 @@ .shippingTableBody { .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -603,40 +650,60 @@ .productImagesContainer--image-description { width: 92.93%; + height: 632px; max-height: unset; position: relative; margin-left: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; + height: 872px; } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; + height: 944px; margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { width: 100%; + height: 296px; margin-left: 0; margin-bottom: 16px; } - & .productImageTag--image-description--main { - max-height: unset !important; + .productImage--image-description { + height: 632px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 872px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 296px; + } + & .productImageTag--image-description--main { + object-fit: cover !important; + max-height: unset !important; + } } } .productDescriptionContainer { width: 92.93%; position: relative; margin-left: 16px; + margin-right: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; } @media (max-width: 1025px) and (min-width: 768px) { margin-left: 0; + margin-right: 0; width: 100%; } @media (max-width: 768px) and (min-width: 375px) { margin-left: 0; width: 100%; + margin-right: 0; } .productDescriptionTitle { margin-bottom: 8px; @@ -644,6 +711,9 @@ font-size: 24px; line-height: 32px; color: #575757; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-bottom: 16px; + } @media (max-width: 1025px) and (min-width: 768px) { font-size: 20px; } @@ -659,7 +729,7 @@ font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; + color: $gray; @media (max-width: 1025px) and (min-width: 768px) { font-size: 14px; line-height: 19px; @@ -687,12 +757,12 @@ .newsletter { height: 175px; - background: #000000; + background: $black; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 16px; - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid $white; @media (max-width: 1025px) and (min-width: 768px) { border-bottom: none !important; } @@ -724,7 +794,7 @@ font-size: 24px; line-height: 38px; text-align: center; - color: #ffffff; + color: $white; display: flex; flex-direction: column; } @@ -734,7 +804,7 @@ font-size: 18px; line-height: 25px; text-align: center; - color: #929292; + color: $gray; margin-top: 16px; @media (max-width: 1025px) and (min-width: 768px) { font-size: 16px; @@ -758,7 +828,7 @@ border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #929292; + border-bottom: 1px solid $gray; border-radius: 0; height: 32px; :global(.vtex-styleguide-9-x-input) { @@ -767,8 +837,8 @@ font-weight: 400; font-size: 18px; line-height: 25px; - color: #929292; - border: 1px solid #000000; + color: $gray; + border: 1px solid $black; @media (max-width: 1025px) and (min-width: 768px) { font-size: 12px; line-height: 16px; @@ -786,8 +856,8 @@ font-weight: 400; font-size: 18px; line-height: 25px; - color: #929292; - border: 1px solid #000000; + color: $gray; + border: 1px solid $black; @media (max-width: 1025px) and (min-width: 768px) { font-size: 12px; line-height: 16px; @@ -806,7 +876,7 @@ padding: 0 16px 0; width: 84px; height: 32px; - border-bottom: 3px solid #bfbfbf; + border-bottom: 3px solid $gray-300; min-height: unset; @media (max-width: 768px) and (min-width: 375px) { margin-top: 0; @@ -817,9 +887,8 @@ font-size: 14px; line-height: 19px; text-align: center; - color: #ffffff; + color: $white; padding: 0 !important; - // border: 1px solid #000000; } } } diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtex.menu.scss index 69b9cf5..035d2a7 100644 --- a/styles/sass/pages/product/vtex.menu.scss +++ b/styles/sass/pages/product/vtex.menu.scss @@ -1,4 +1,5 @@ //Footer + .menuContainerNav { .menuContainer { @media (max-width: 1025px) and (min-width: 768px) { @@ -27,7 +28,7 @@ font-weight: 400; font-size: 14px; line-height: 30px; - color: rgba(255, 255, 255, 0.45); + color: $gray; .accordionIcon--site-m3-academy-mobile--isClosed, .accordionIcon--am3academy-mobile--isClosed { visibility: hidden; @@ -76,13 +77,13 @@ font-weight: 400; font-size: 12px; line-height: 30px; - color: #ffffff; + color: $white; display: flex; justify-content: center; align-items: center; width: 164px; height: 42px; - border: 1px solid #ffffff; + border: 1px solid $white; @media (max-width: 1025px) and (min-width: 768px) { width: 100%; } @@ -92,7 +93,7 @@ } .styledLinkContent--site-m3-academy-mobile, .styledLinkContent--am3academy-mobile { - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid $white; padding: 8px 0; } .styledLinkContent--site-m3-academy, @@ -104,7 +105,7 @@ .styledLinkContent--seja-um-franqueado-block { font-weight: 400; font-size: 14px; - color: #ffffff; + color: $white; } } } @@ -144,13 +145,13 @@ margin-bottom: 0; } .SpanTitle { - color: #ffffff; + color: $white; font-weight: 400; font-size: 14px; line-height: 38px; } .SpanTitleBig { - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 38px; @@ -207,7 +208,7 @@ font-weight: 400; font-size: 10px; line-height: 12px; - color: #ffffff; + color: $white; column-gap: 8.72px; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 1b611af..1690d69 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -4,6 +4,6 @@ font-weight: 700; font-size: 25px; line-height: 38px; - color: #000000; + color: $black; margin-top: 24px; } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index b08c2e8..2015465 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,6 +1,7 @@ -//product quantity +//Product quantity .quantitySelectorContainer { + margin-bottom: 0px; @media (max-width: 768px) and (min-width: 375px) { margin: 0; } @@ -18,11 +19,12 @@ border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #929292; + border-color: $cccccc; + color: $gray; font-weight: 400; font-size: 16px; line-height: 22px; + padding: 0; } :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; @@ -31,8 +33,8 @@ height: 49px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #000000; + border-color: $cccccc; + color: $black; border-radius: 0; font-weight: 400; font-size: 16px; @@ -46,10 +48,10 @@ height: 49px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #000000; + border-color: $cccccc; + color: $black; border-radius: 0; - background-color: #ffffff; + background-color: $white; font-weight: 400; font-size: 16px; line-height: 22px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index e3530c6..5894c7d 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -32,7 +32,7 @@ .slide--carousel { width: 5.3515% !important; @media (max-width: 2561px) and (min-width: 1920px) { - width: 5.4036%!important; + width: 5.4036% !important; } @media (max-width: 1025px) and (min-width: 768px) { width: 6.0831% !important; @@ -48,7 +48,7 @@ :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; @media (max-width: 2561px) and (min-width: 1920px) { - min-height: 543.4px; + min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { min-height: 402.2px; @@ -68,7 +68,7 @@ font-size: 18px; line-height: 25px; text-align: center; - color: #000000; + color: $black; display: inline-block; vertical-align: text-top; min-height: 50px; @@ -80,7 +80,7 @@ height: 314.4px; @media (max-width: 2561px) and (min-width: 1920px) { height: 434.4px; - } + } @media (max-width: 1025px) and (min-width: 768px) { height: 291.2px; } @@ -107,7 +107,7 @@ line-height: 19px; text-align: center; text-decoration-line: line-through; - color: #bababa; + color: $BABABA; :global(.vtex-store-components-3-x-listPriceLabel) { display: none; } @@ -134,7 +134,7 @@ font-size: 24px; line-height: 33px; text-align: center; - color: #000000; + color: $black; } } } @@ -185,13 +185,13 @@ align-items: center; bottom: -32px; .paginationDot { - background-color: #000000; + background-color: $black; width: 10px !important; height: 10px !important; } .paginationDot--isActive { - background-color: #ffffff; - border: 0.5px solid #000000; + background-color: $white; + border: 0.5px solid $black; width: 17px !important; height: 17px !important; } diff --git a/styles/sass/pages/product/vtex.sticky-layout.scss b/styles/sass/pages/product/vtex.sticky-layout.scss index c472aa7..23fc160 100644 --- a/styles/sass/pages/product/vtex.sticky-layout.scss +++ b/styles/sass/pages/product/vtex.sticky-layout.scss @@ -1,5 +1,5 @@ // Header .wrapper--sticky-header { - background-color: #ffffff !important; + background-color: $white !important; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 39537b3..49d1bd0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -12,37 +12,46 @@ } .listContainer { justify-content: space-around; - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; margin-bottom: 32px; - padding-top: 16px; + padding-top: 0; + column-gap: 99px; @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; - margin: 0 auto 32px; + margin: 0 auto 64px; } @media (max-width: 1025px) and (min-width: 768px) { flex-direction: column; - border-top: 1px solid #b9b9b9; + border-top: 1px solid $B9B9B9; margin-bottom: 16px; + padding-top: 16px; } @media (max-width: 768px) and (min-width: 375px) { flex-direction: column; - border-top: 1px solid #b9b9b9; + border-top: 1px solid $B9B9B9; margin-bottom: 16px; + padding-top: 16px; } .listItem { margin: 0; padding: 0; + width: 114px; height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { + width: 82px; margin-bottom: 16px; } :global(.vtex-button) { background-color: unset; border: none; - color: #bfbfbf; + color: $gray-300; font-weight: 400; font-size: 18px; line-height: 38px; @@ -54,11 +63,18 @@ font-size: 24px; } :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + width: 114px; + height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; justify-content: left; } @media (max-width: 768px) and (min-width: 375px) { + width: 82px; justify-content: left; } } @@ -77,12 +93,12 @@ :global(.vtex-button) { background-color: unset; border: none; - color: #000000; + color: $black; font-weight: 400; font-size: 18px; line-height: 38px; text-transform: capitalize; - border-bottom: 2px solid #000000; + border-bottom: 2px solid $black; width: 100%; height: 38px; border-radius: 0; @@ -114,11 +130,11 @@ margin: 0 auto; } @media (max-width: 1025px) and (min-width: 768px) { - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; padding-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; padding-bottom: 16px; } .contentItem { -- 2.34.1 From 48659e392d8860d9afbbfc32faa74c7666955325 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:15:56 -0300 Subject: [PATCH 71/93] =?UTF-8?q?refactor(product.jsonc):=20organizando=20?= =?UTF-8?q?c=C3=B3digo=20do=20jsonc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 501 ++++++++++++++++++--------------- 1 file changed, 272 insertions(+), 229 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 02f0e0a..531c875 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -12,70 +12,9 @@ "product-questions-and-answers" ] }, - // - "html#slider-block-container": { - "children": [ - "rich-text#slider-block-title", - "html#list-context.product-list#slider-block" - ] - }, - "rich-text#slider-block-title": { - "props": { - "text": "### Você também pode gostar:", - "blockClass": "slider-title" - } - }, - "product-summary.shelf#slider-block": { - "children": ["html#product-summary.shelf#product-content"] - }, - "html#product-summary.shelf#product-content": { - "props": { - "testId": "vtex-product-summary" - }, - "children": [ - "product-summary-image#slider-images", - "product-summary-name", - // "product-summary-space", - "product-summary-price" - ] - }, - "product-summary-image#slider-images": { - "props": { - "blockClass": "product-summary-image", - "showBadge": false, - "aspectRatio": "1:1" - // "maxHeight": 300 - } - }, - "list-context.product-list#slider-block": { - "blocks": ["product-summary.shelf#slider-block"], - "children": ["html#slider-layout#products-carousel"] - }, - "html#list-context.product-list#slider-block": { - "props": { - "testId": "product-summary-list" - }, - "children": ["list-context.product-list#slider-block"] - }, - "html#slider-layout#products-carousel": { - "props": { - "testId": "product-summary-list" - }, - "children": ["slider-layout#products-carousel"] - }, - "slider-layout#products-carousel": { - "props": { - "itemsPerPage": { - "desktop": 4, - "tablet": 3, - "phone": 2 - }, - "infinite": true, - "showNavigationArrows": "always", - "blockClass": "carousel" - } - }, - + + //Breadcrumb + "html#breadcrumb": { "props": { "tag": "section", @@ -85,6 +24,8 @@ "children": ["breadcrumb"] }, + //Availability + "condition-layout.product#availability": { "props": { "conditions": [ @@ -103,6 +44,14 @@ "children": ["html#flex-layout.col#stack", "html#right-col"] }, + "html#flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "blockClass": "stack-layout-content", + "rowGap": 0 + } + }, + "stack-layout": { "props": { "blockClass": "product" @@ -123,124 +72,40 @@ } }, - "html#flex-layout.col#stack": { - "children": ["stack-layout"], + "html#product-availability": { "props": { - "blockClass": "stack-layout-content", - "rowGap": 0 - } - }, - "html#flex-layout.row#product-image": { - "props": { - "testId": "product-images" + "blockClass": "product-availability-block" }, - "children": ["product-images"] + "children": ["html#flex-layout.col#stack", "html#right-col-availability"] }, - "product-images": { + + "html#right-col-availability": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": false, - "showPaginationDots": false, - "thumbnailsOrientation": "horizontal" - } - }, - "product-images#description-content": { - "props": { - "displayMode": "first-image", - "zoomMode": "disable", - "blockClass": "image-description" - } - }, - "tab-layout#description": { - "children": ["tab-list#description", "tab-content#description"], - "props": { - "blockClass": "description-block", - "defaultActiveTabId": "firstTab" - } - }, - "tab-list#description": { + "preventVerticalStretch": true, + "rowGap": 0, + "blockClass": "info-availability" + }, "children": [ - "tab-list.item#firstTab", - "tab-list.item#secondTab", - "tab-list.item#thirdTab", - "tab-list.item#fourthTab", - "tab-list.item#fifthTab" + "html#identification-product-availability", + "flex-layout.row#availability", + "html#sku-selector" ] }, - "tab-list.item#firstTab": { + + "html#identification-product-availability": { "props": { - "tabId": "firstTab", - "label": "Descrição", - "defaultActiveTab": true - } + "blockClass": "identification-product-availability" + }, + "children": ["html#product-name", "product-identifier.product"] }, - "tab-list.item#secondTab": { + + "flex-layout.row#availability": { "props": { - "tabId": "secondTab", - "label": "Descrição" - } + "blockClass": "message-availability" + }, + "children": ["availability-subscriber"] }, - "tab-list.item#thirdTab": { - "props": { - "tabId": "thirdTab", - "label": "Descrição" - } - }, - "tab-list.item#fourthTab": { - "props": { - "tabId": "fourthTab", - "label": "Descrição" - } - }, - "tab-list.item#fifthTab": { - "props": { - "tabId": "fifthTab", - "label": "Descrição" - } - }, - "tab-content#description": { - "children": [ - "tab-content.item#firstTab", - "tab-content.item#secondTab", - "tab-content.item#thirdTab", - "tab-content.item#fourthTab", - "tab-content.item#fifthTab" - ] - }, - "tab-content.item#firstTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "firstTab" - } - }, - "tab-content.item#secondTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "secondTab" - } - }, - "tab-content.item#thirdTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "thirdTab" - } - }, - "tab-content.item#fourthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fourthTab" - } - }, - "tab-content.item#fifthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fifthTab" - } - }, - // + "html#right-col": { "props": { "preventVerticalStretch": true, @@ -258,43 +123,21 @@ "html#cart-content", // "product-assembly-options", "product-gifts", - // "flex-layout.row#buy-button", + // "flex-layout.row#add-to-cart-button", "availability-subscriber", "shipping-simulator", "placeholder-component" // "share#default" ] }, + "html#identification-product": { "props": { "blockClass": "identification-product-content" }, "children": ["html#product-name", "product-identifier.product"] }, - "html#cart-content": { - "props": { - "blockClass": "cart-content" - }, - "children": ["html#product-quantity", "html#flex-layout.row#buy-button"] - }, - "html#product-quantity": { - "props": { - "testId": "product-quantity" - }, - "children": ["product-quantity"] - }, - "html#flex-layout.row#buy-button": { - "props": { - "testId": "add-to-cart-button" - }, - "children": ["flex-layout.row#buy-button"] - }, - "html#pix-component": { - "props": { - "testId": "pix-price" - }, - "children": ["pix-component"] - }, + "html#product-name": { "props": { "marginBottom": 3 @@ -302,12 +145,20 @@ "children": ["vtex.store-components:product-name"] }, + "html#pix-component": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + "html#sku-selector": { "props": { "testId": "sku-selector" }, "children": ["sku-selector"] }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -316,7 +167,27 @@ } }, - "flex-layout.row#buy-button": { + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#add-to-cart-button"] + }, + + "flex-layout.row#add-to-cart-button": { "props": { "marginTop": 4, "marginBottom": 7 @@ -324,45 +195,217 @@ "children": ["add-to-cart-button"] }, - "html#product-availability": { - "props": { - "blockClass": "product-availability-block" - }, - "children": ["html#flex-layout.col#stack", "html#right-col-availability"] - }, - "html#right-col-availability": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0, - "blockClass": "info-availability" - }, + //Slider + + "html#slider-block-container": { "children": [ - "html#identification-product-availability", - "flex-layout.row#availability", - "html#sku-selector" + "rich-text#slider-block-title", + "html#list-context.product-list#slider-block" ] }, - "html#identification-product-availability": { + + "rich-text#slider-block-title": { "props": { - "blockClass": "identification-product-availability" - }, - "children": ["html#product-name", "product-identifier.product"] - }, - "flex-layout.row#availability": { - "props": { - "blockClass": "message-availability" - }, - "children": ["availability-subscriber"] + "text": "### Você também pode gostar:", + "blockClass": "slider-title" + } }, - "share#default": { + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#product-content"] + }, + + "html#product-summary.shelf#product-content": { "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + // "maxHeight": 300 + } + }, + + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + + "slider-layout#products-carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + }, + + //Product Images + + "html#flex-layout.row#product-image": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, + + "product-images": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" + } + }, + + // Tab-Layout + + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ] + }, + + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" } } + + // "share#default": { + // "props": { + // "social": { + // "Facebook": true, + // "WhatsApp": true, + // "Twitter": false, + // "Pinterest": true + // } + // } + // } } -- 2.34.1 From a637b10bd6ca7502c1a233d8b52634c256c6909b Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:18:04 -0300 Subject: [PATCH 72/93] feat: adicionando arquivos .scss e .css vtex.login --- styles/css/vtex.login.css | 19 +++++++++++++++++++ styles/sass/pages/product/vtex.login.scss | 10 ++++++++++ 2 files changed, 29 insertions(+) create mode 100644 styles/css/vtex.login.css create mode 100644 styles/sass/pages/product/vtex.login.scss diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css new file mode 100644 index 0000000..e680a11 --- /dev/null +++ b/styles/css/vtex.login.css @@ -0,0 +1,19 @@ +/* +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 */ +@media (max-width: 768px) and (min-width: 375px) { + .buttonLink { + position: relative; + left: 30px; + width: 22px; + } + .buttonLink :global(.vtex-button) { + width: 22px; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss new file mode 100644 index 0000000..5942ec3 --- /dev/null +++ b/styles/sass/pages/product/vtex.login.scss @@ -0,0 +1,10 @@ +@media (max-width: 768px) and (min-width: 375px) { + .buttonLink { + position: relative; + left: 30px; + width: 22px; + :global(.vtex-button) { + width: 22px; + } + } +} -- 2.34.1 From 57135ebac24c61a17c037780556fc9cfaafdd27f Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:20:13 -0300 Subject: [PATCH 73/93] refactor(product-assembly.jsonc): substituindo nome buy-button por add-to-cart-button --- store/blocks/pdp/product-assembly.jsonc | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..b3461e6 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,9 +1,9 @@ { - "sticky-layout#buy-button": { + "sticky-layout#add-to-cart-button": { "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["flex-layout.row#add-to-cart-button"] }, "product-assembly-options": { "children": [ @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { -- 2.34.1 From f79b9c0117630258518a44b9b5dac8fe45f7494f Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:22:30 -0300 Subject: [PATCH 74/93] refactor(header.jsonc): modificando estrutura do header --- store/blocks/header/header.jsonc | 50 ++++++++++++++++---------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..a576210 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -7,33 +7,33 @@ }, "header-layout.desktop": { "children": [ - "flex-layout.row#1-desktop", - "flex-layout.row#3-desktop", + "html#flex-layout.row#1-desktop", + // "flex-layout.row#3-desktop", "sticky-layout#4-desktop" ] }, - "flex-layout.row#1-desktop": { + "html#flex-layout.row#1-desktop": { "children": ["telemarketing"], "props": { "fullWidth": true } }, - - "flex-layout.row#3-desktop": { - "props": { - "blockClass": "menu-link", - "horizontalAlign": "center", - "preventHorizontalStretch": true, - "preventVerticalStretch": true, - "fullWidth": true - }, - "children": [ - "vtex.menu@2.x:menu#websites", - "flex-layout.col#spacer", - "vtex.menu@2.x:menu#institutional" - ] - }, + + // "flex-layout.row#3-desktop": { + // "props": { + // "blockClass": "menu-link", + // "horizontalAlign": "center", + // "preventHorizontalStretch": true, + // "preventVerticalStretch": true, + // "fullWidth": true + // }, + // "children": [ + // "vtex.menu@2.x:menu#websites", + // "flex-layout.col#spacer", + // "vtex.menu@2.x:menu#institutional" + // ] + // }, "flex-layout.col#spacer": { "props": { "width": "grow" @@ -59,7 +59,7 @@ "flex-layout.col#category-menu", "flex-layout.col#spacer", "search-bar", - "locale-switcher", + // "locale-switcher", "login", "minicart.v2" ] @@ -80,9 +80,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png", - "width": "180", - "height": "12" + "url": "https://agenciamagma.vteximg.com.br/arquivos/Logo-m3academy-anacarolinaduartecavalcante.svg", + "width": "140", + "height": "33" } }, "header-layout.mobile": { @@ -125,9 +125,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png", - "width": "77.5", - "height": "27.5" + "url": "https://agenciamagma.vteximg.com.br/arquivos/Logo-m3academy-anacarolinaduartecavalcante.svg", + "width": "140", + "height": "33" } } } -- 2.34.1 From f050dfb71fca08b44a08cf4f8bcaa346d7d661b0 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 14:24:28 -0300 Subject: [PATCH 75/93] =?UTF-8?q?style(styles.css):=20corre=C3=A7=C3=A3o?= =?UTF-8?q?=20de=20estilos=20do=20componente=20Html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index d355e73..6c4a883 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -39,7 +39,7 @@ :global(.agenciamagma-store-theme-5-x-html--product-main-content) { display: grid; grid-template-columns: 100%; - padding: 0 40px 40px; + padding: 0 40px 0 40px; } } @@ -97,7 +97,6 @@ display: grid; grid-template-columns: 100%; padding: 0 40px; - margin-bottom: 8px; } } @@ -121,7 +120,7 @@ @media (max-width: 2561px) and (min-width: 1920px) { :global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) { - justify-content: left; + justify-content: center; } } @@ -219,4 +218,4 @@ display: flex; flex-direction: column; align-items: center; -} \ No newline at end of file +} -- 2.34.1 From b50e5ec94e823a9e9a79ab473c4c55a4f41a1567 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:14:58 -0300 Subject: [PATCH 76/93] style: corrigindo column-gap do .listContainer do tab layout --- styles/css/vtex.tab-layout.css | 2 +- styles/sass/pages/product/vtex.tab-layout.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 83a9e0c..35b32a6 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -27,7 +27,7 @@ border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; padding-top: 0; - column-gap: 99px; + column-gap: 2%; } @media (max-width: 2561px) and (min-width: 1920px) { .container--description-block .listContainer { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 49d1bd0..938d9fe 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -15,7 +15,7 @@ border-bottom: 1px solid $B9B9B9; margin-bottom: 32px; padding-top: 0; - column-gap: 99px; + column-gap: 2%; @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; margin: 0 auto 64px; -- 2.34.1 From 3131d598c9ea62f29c1872cdea4bcce5594e0dff Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:22:56 -0300 Subject: [PATCH 77/93] refactor: organizando arquivos .scss em pastas --- .../product/{breadcrumb => vtexBreadcrumb}/vtex.breadcrumb.scss | 0 .../product/{flex-layout => vtexFlexLayout}/vtex.flex-layout.scss | 0 styles/sass/pages/product/{ => vtexLogin}/vtex.login.scss | 0 styles/sass/pages/product/{ => vtexMenu}/vtex.menu.scss | 0 .../pages/product/{ => vtexProduct}/vtex.product-identifier.scss | 0 .../sass/pages/product/{ => vtexProduct}/vtex.product-price.scss | 0 .../pages/product/{ => vtexProduct}/vtex.product-quantity.scss | 0 styles/sass/pages/product/{ => vtexRichText}/vtex.rich-text.scss | 0 .../pages/product/{ => vtexSliderLayout}/vtex.slider-layout.scss | 0 .../pages/product/{ => vtexStickyLayout}/vtex.sticky-layout.scss | 0 .../{store-components => vtexStore}/vtex.store-components.scss | 0 styles/sass/pages/product/{ => vtexStore}/vtex.store-footer.scss | 0 .../sass/pages/product/{ => vtexTabLayout}/vtex.tab-layout.scss | 0 13 files changed, 0 insertions(+), 0 deletions(-) rename styles/sass/pages/product/{breadcrumb => vtexBreadcrumb}/vtex.breadcrumb.scss (100%) rename styles/sass/pages/product/{flex-layout => vtexFlexLayout}/vtex.flex-layout.scss (100%) rename styles/sass/pages/product/{ => vtexLogin}/vtex.login.scss (100%) rename styles/sass/pages/product/{ => vtexMenu}/vtex.menu.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-identifier.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-price.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-quantity.scss (100%) rename styles/sass/pages/product/{ => vtexRichText}/vtex.rich-text.scss (100%) rename styles/sass/pages/product/{ => vtexSliderLayout}/vtex.slider-layout.scss (100%) rename styles/sass/pages/product/{ => vtexStickyLayout}/vtex.sticky-layout.scss (100%) rename styles/sass/pages/product/{store-components => vtexStore}/vtex.store-components.scss (100%) rename styles/sass/pages/product/{ => vtexStore}/vtex.store-footer.scss (100%) rename styles/sass/pages/product/{ => vtexTabLayout}/vtex.tab-layout.scss (100%) diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss similarity index 100% rename from styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss rename to styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss similarity index 100% rename from styles/sass/pages/product/flex-layout/vtex.flex-layout.scss rename to styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtexLogin/vtex.login.scss similarity index 100% rename from styles/sass/pages/product/vtex.login.scss rename to styles/sass/pages/product/vtexLogin/vtex.login.scss diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss similarity index 100% rename from styles/sass/pages/product/vtex.menu.scss rename to styles/sass/pages/product/vtexMenu/vtex.menu.scss diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-identifier.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-price.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-price.scss diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-quantity.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss similarity index 100% rename from styles/sass/pages/product/vtex.rich-text.scss rename to styles/sass/pages/product/vtexRichText/vtex.rich-text.scss diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss similarity index 100% rename from styles/sass/pages/product/vtex.slider-layout.scss rename to styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss diff --git a/styles/sass/pages/product/vtex.sticky-layout.scss b/styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss similarity index 100% rename from styles/sass/pages/product/vtex.sticky-layout.scss rename to styles/sass/pages/product/vtexStickyLayout/vtex.sticky-layout.scss diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss similarity index 100% rename from styles/sass/pages/product/store-components/vtex.store-components.scss rename to styles/sass/pages/product/vtexStore/vtex.store-components.scss diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtexStore/vtex.store-footer.scss similarity index 100% rename from styles/sass/pages/product/vtex.store-footer.scss rename to styles/sass/pages/product/vtexStore/vtex.store-footer.scss diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss similarity index 100% rename from styles/sass/pages/product/vtex.tab-layout.scss rename to styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss -- 2.34.1 From 3d880010a2f789198a489dcfde4318e50249f058 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:27:14 -0300 Subject: [PATCH 78/93] refactor(product.jsonc): organizando jsonc --- store/blocks/pdp/product.jsonc | 386 --------------------------------- 1 file changed, 386 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 531c875..4f469ce 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -11,393 +11,7 @@ "html#slider-block-container", "product-questions-and-answers" ] - }, - - //Breadcrumb - - "html#breadcrumb": { - "props": { - "tag": "section", - "testId": "breadcrumbs", - "blockClass": "pdp-breadcrumb" - }, - "children": ["breadcrumb"] - }, - - //Availability - - "condition-layout.product#availability": { - "props": { - "conditions": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "html#product-main", - "Else": "html#product-availability" - } - }, - "html#product-main": { - "props": { - "blockClass": "product-main-content" - }, - "children": ["html#flex-layout.col#stack", "html#right-col"] - }, - - "html#flex-layout.col#stack": { - "children": ["stack-layout"], - "props": { - "blockClass": "stack-layout-content", - "rowGap": 0 - } - }, - - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "html#flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, - - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, - - "html#product-availability": { - "props": { - "blockClass": "product-availability-block" - }, - "children": ["html#flex-layout.col#stack", "html#right-col-availability"] - }, - - "html#right-col-availability": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0, - "blockClass": "info-availability" - }, - "children": [ - "html#identification-product-availability", - "flex-layout.row#availability", - "html#sku-selector" - ] - }, - - "html#identification-product-availability": { - "props": { - "blockClass": "identification-product-availability" - }, - "children": ["html#product-name", "product-identifier.product"] - }, - - "flex-layout.row#availability": { - "props": { - "blockClass": "message-availability" - }, - "children": ["availability-subscriber"] - }, - - "html#right-col": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0 - }, - "children": [ - "html#identification-product", - // "product-rating-summary", - "flex-layout.row#selling-price", - "installment-product-component", - "html#pix-component", - // "product-separator", - "html#sku-selector", - // "product-quantity", - "html#cart-content", - // "product-assembly-options", - "product-gifts", - // "flex-layout.row#add-to-cart-button", - "availability-subscriber", - "shipping-simulator", - "placeholder-component" - // "share#default" - ] - }, - - "html#identification-product": { - "props": { - "blockClass": "identification-product-content" - }, - "children": ["html#product-name", "product-identifier.product"] - }, - - "html#product-name": { - "props": { - "marginBottom": 3 - }, - "children": ["vtex.store-components:product-name"] - }, - - "html#pix-component": { - "props": { - "testId": "pix-price" - }, - "children": ["pix-component"] - }, - - "html#sku-selector": { - "props": { - "testId": "sku-selector" - }, - "children": ["sku-selector"] - }, - - "sku-selector": { - "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true, - "blockClass": "sku-selector" - } - }, - - "html#cart-content": { - "props": { - "blockClass": "cart-content" - }, - "children": ["html#product-quantity", "html#add-to-cart-button"] - }, - - "html#product-quantity": { - "props": { - "testId": "product-quantity" - }, - "children": ["product-quantity"] - }, - "html#add-to-cart-button": { - "props": { - "testId": "add-to-cart-button" - }, - "children": ["flex-layout.row#add-to-cart-button"] - }, - - "flex-layout.row#add-to-cart-button": { - "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["add-to-cart-button"] - }, - - //Slider - - "html#slider-block-container": { - "children": [ - "rich-text#slider-block-title", - "html#list-context.product-list#slider-block" - ] - }, - - "rich-text#slider-block-title": { - "props": { - "text": "### Você também pode gostar:", - "blockClass": "slider-title" - } - }, - - "product-summary.shelf#slider-block": { - "children": ["html#product-summary.shelf#product-content"] - }, - - "html#product-summary.shelf#product-content": { - "props": { - "testId": "vtex-product-summary" - }, - "children": [ - "product-summary-image#slider-images", - "product-summary-name", - // "product-summary-space", - "product-summary-price" - ] - }, - - "product-summary-image#slider-images": { - "props": { - "blockClass": "product-summary-image", - "showBadge": false, - "aspectRatio": "1:1" - // "maxHeight": 300 - } - }, - - "list-context.product-list#slider-block": { - "blocks": ["product-summary.shelf#slider-block"], - "children": ["html#slider-layout#products-carousel"] - }, - - "html#list-context.product-list#slider-block": { - "props": { - "testId": "product-summary-list" - }, - "children": ["list-context.product-list#slider-block"] - }, - - "html#slider-layout#products-carousel": { - "props": { - "testId": "product-summary-list" - }, - "children": ["slider-layout#products-carousel"] - }, - - "slider-layout#products-carousel": { - "props": { - "itemsPerPage": { - "desktop": 4, - "tablet": 3, - "phone": 2 - }, - "infinite": true, - "showNavigationArrows": "always", - "blockClass": "carousel" - } - }, - - //Product Images - - "html#flex-layout.row#product-image": { - "props": { - "testId": "product-images" - }, - "children": ["product-images"] - }, - - "product-images": { - "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": false, - "showPaginationDots": false, - "thumbnailsOrientation": "horizontal" - } - }, - - // Tab-Layout - - "product-images#description-content": { - "props": { - "displayMode": "first-image", - "zoomMode": "disabled", - "blockClass": "image-description" - } - }, - - "tab-layout#description": { - "children": ["tab-list#description", "tab-content#description"], - "props": { - "blockClass": "description-block", - "defaultActiveTabId": "firstTab" - } - }, - - "tab-list#description": { - "children": [ - "tab-list.item#firstTab", - "tab-list.item#secondTab", - "tab-list.item#thirdTab", - "tab-list.item#fourthTab", - "tab-list.item#fifthTab" - ] - }, - - "tab-list.item#firstTab": { - "props": { - "tabId": "firstTab", - "label": "Descrição", - "defaultActiveTab": true - } - }, - - "tab-list.item#secondTab": { - "props": { - "tabId": "secondTab", - "label": "Descrição" - } - }, - - "tab-list.item#thirdTab": { - "props": { - "tabId": "thirdTab", - "label": "Descrição" - } - }, - - "tab-list.item#fourthTab": { - "props": { - "tabId": "fourthTab", - "label": "Descrição" - } - }, - - "tab-list.item#fifthTab": { - "props": { - "tabId": "fifthTab", - "label": "Descrição" - } - }, - - "tab-content#description": { - "children": [ - "tab-content.item#firstTab", - "tab-content.item#secondTab", - "tab-content.item#thirdTab", - "tab-content.item#fourthTab", - "tab-content.item#fifthTab" - ] - }, - - "tab-content.item#firstTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "firstTab" - } - }, - - "tab-content.item#secondTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "secondTab" - } - }, - - "tab-content.item#thirdTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "thirdTab" - } - }, - - "tab-content.item#fourthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fourthTab" - } - }, - - "tab-content.item#fifthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fifthTab" - } } - // "share#default": { // "props": { // "social": { -- 2.34.1 From 8182af75275ae6c4d03c62457da8163209f41445 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:29:10 -0300 Subject: [PATCH 79/93] feat: adicionando product-tab-layout.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-tab-layout.jsonc | 108 ++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 store/blocks/pdp/product-tab-layout.jsonc diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc new file mode 100644 index 0000000..0738bfe --- /dev/null +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -0,0 +1,108 @@ +{ + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ] + }, + + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + } +} -- 2.34.1 From b7924c4c7d9d9416ea0a74328ad96c782a8f22b4 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:30:34 -0300 Subject: [PATCH 80/93] feat: adicionando product-slider-layout.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-slider-layout.jsonc | 72 ++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 store/blocks/pdp/product-slider-layout.jsonc diff --git a/store/blocks/pdp/product-slider-layout.jsonc b/store/blocks/pdp/product-slider-layout.jsonc new file mode 100644 index 0000000..753aa15 --- /dev/null +++ b/store/blocks/pdp/product-slider-layout.jsonc @@ -0,0 +1,72 @@ +{ + "html#slider-block-container": { + "children": [ + "rich-text#slider-block-title", + "html#list-context.product-list#slider-block" + ] + }, + + "rich-text#slider-block-title": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "slider-title" + } + }, + + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#product-content"] + }, + + "html#product-summary.shelf#product-content": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + // "maxHeight": 300 + } + }, + + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + + "slider-layout#products-carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + } +} -- 2.34.1 From bcd2ba49c45f3e88770c0db6e2e9dd4a5220d49d Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:31:49 -0300 Subject: [PATCH 81/93] feat: adicionando product-right-col.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-right-col.jsonc | 90 ++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 store/blocks/pdp/product-right-col.jsonc diff --git a/store/blocks/pdp/product-right-col.jsonc b/store/blocks/pdp/product-right-col.jsonc new file mode 100644 index 0000000..d75a1fe --- /dev/null +++ b/store/blocks/pdp/product-right-col.jsonc @@ -0,0 +1,90 @@ +{ + "html#right-col": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0 + }, + "children": [ + "html#identification-product", + // "product-rating-summary", + "flex-layout.row#selling-price", + "installment-product-component", + "html#pix-component", + // "product-separator", + "html#sku-selector", + // "product-quantity", + "html#cart-content", + // "product-assembly-options", + "product-gifts", + // "flex-layout.row#add-to-cart-button", + "availability-subscriber", + "shipping-simulator", + "placeholder-component" + // "share#default" + ] + }, + + "html#product-name": { + "props": { + "marginBottom": 3 + }, + "children": ["vtex.store-components:product-name"] + }, + + "html#identification-product": { + "props": { + "blockClass": "identification-product-content" + }, + "children": ["html#product-name", "product-identifier.product"] + }, + + "html#pix-component": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + + "sku-selector": { + "props": { + "variationsSpacing": 3, + "showValueNameForImageVariation": true, + "blockClass": "sku-selector" + } + }, + + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#add-to-cart-button"] + }, + + "flex-layout.row#add-to-cart-button": { + "props": { + "marginTop": 4, + "marginBottom": 7 + }, + "children": ["add-to-cart-button"] + } +} -- 2.34.1 From a9e0b8ddace46751f81cd8f5c716c58d50a1c9da Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:33:02 -0300 Subject: [PATCH 82/93] feat: adicionando product-image.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-image.jsonc | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 store/blocks/pdp/product-image.jsonc diff --git a/store/blocks/pdp/product-image.jsonc b/store/blocks/pdp/product-image.jsonc new file mode 100644 index 0000000..a2b4ccb --- /dev/null +++ b/store/blocks/pdp/product-image.jsonc @@ -0,0 +1,20 @@ +{ + "html#flex-layout.row#product-image": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, + + "product-images": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" + } + } +} -- 2.34.1 From 5caa201463c853d26077075538f2402ed880d906 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:34:20 -0300 Subject: [PATCH 83/93] feat: adicionando product-availability.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-availability.jsonc | 81 +++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 store/blocks/pdp/product-availability.jsonc diff --git a/store/blocks/pdp/product-availability.jsonc b/store/blocks/pdp/product-availability.jsonc new file mode 100644 index 0000000..7756d3c --- /dev/null +++ b/store/blocks/pdp/product-availability.jsonc @@ -0,0 +1,81 @@ +{ + "condition-layout.product#availability": { + "props": { + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "html#product-main", + "Else": "html#product-availability" + } + }, + "html#product-main": { + "props": { + "blockClass": "product-main-content" + }, + "children": ["html#flex-layout.col#stack", "html#right-col"] + }, + + "html#flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "blockClass": "stack-layout-content", + "rowGap": 0 + } + }, + + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "html#flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] + }, + + "product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } + }, + + "html#product-availability": { + "props": { + "blockClass": "product-availability-block" + }, + "children": ["html#flex-layout.col#stack", "html#right-col-availability"] + }, + + "html#right-col-availability": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0, + "blockClass": "info-availability" + }, + "children": [ + "html#identification-product-availability", + "flex-layout.row#availability", + "html#sku-selector" + ] + }, + + "html#identification-product-availability": { + "props": { + "blockClass": "identification-product-availability" + }, + "children": ["html#product-name", "product-identifier.product"] + }, + + "flex-layout.row#availability": { + "props": { + "blockClass": "message-availability" + }, + "children": ["availability-subscriber"] + } +} -- 2.34.1 From 1696631dddeda8901ee5be8802d5ac3ec4cacf13 Mon Sep 17 00:00:00 2001 From: devartes Date: Thu, 2 Feb 2023 18:35:41 -0300 Subject: [PATCH 84/93] feat: adicionando product-breadcrumb.jsonc para organizar o product.jsonc --- store/blocks/pdp/product-breadcrumb.jsonc | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 store/blocks/pdp/product-breadcrumb.jsonc diff --git a/store/blocks/pdp/product-breadcrumb.jsonc b/store/blocks/pdp/product-breadcrumb.jsonc new file mode 100644 index 0000000..ba79c0b --- /dev/null +++ b/store/blocks/pdp/product-breadcrumb.jsonc @@ -0,0 +1,10 @@ +{ + "html#breadcrumb": { + "props": { + "tag": "section", + "testId": "breadcrumbs", + "blockClass": "pdp-breadcrumb" + }, + "children": ["breadcrumb"] + } +} -- 2.34.1 From 4eae32f126a9c71041e309967f07063a57cd34f0 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:16:30 -0300 Subject: [PATCH 85/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20medida?= =?UTF-8?q?s=20das=20imagens=20productImages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 42 +++++++++++++++---- .../vtexStore/vtex.store-components.scss | 41 ++++++++++++++---- 2 files changed, 68 insertions(+), 15 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 988802d..e72eb43 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -101,9 +101,23 @@ height: 944px !important; } } -@media (max-width: 768px) and (min-width: 375px) { +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + height: auto; + } +} +@media (max-width: 768px) and (min-width: 377px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } +} +@media (max-width: 377px) and (min-width: 376px) { + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { + width: 99.67% !important; + min-height: unset !important; height: 296px !important; object-fit: cover !important; } @@ -695,15 +709,17 @@ @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; - height: 944px; + height: auto; margin-left: 0; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { - width: 100%; - height: 296px; + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; margin-left: 0; margin-bottom: 16px; } @@ -718,15 +734,27 @@ } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description .productImage--image-description { - height: 944px; + height: auto; } } -@media (max-width: 768px) and (min-width: 375px) { +@media (max-width: 768px) and (min-width: 377px) { .productImagesContainer--image-description .productImage--image-description { - height: 296px; + width: 100% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } +} +@media (max-width: 377px) and (min-width: 376px) { + .productImagesContainer--image-description .productImage--image-description { + width: 100% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; } } .productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { + height: auto !important; object-fit: cover !important; max-height: unset !important; } diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index c25695f..bfbc272 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -67,6 +67,7 @@ margin: 0; height: 944px !important; } + .productImage { @media (max-width: 2561px) and (min-width: 1920px) { height: 904px !important; @@ -74,6 +75,7 @@ @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; } + .productImageTag--main { object-fit: unset !important; max-height: unset !important; @@ -85,8 +87,18 @@ @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; } - @media (max-width: 768px) and (min-width: 375px) { + @media (max-width: 1025px) and (min-width: 768px) { + height: auto; + } + @media (max-width: 768px) and (min-width: 377px) { width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } + @media (max-width: 377px) and (min-width: 376px) { + width: 99.67% !important; + min-height: unset !important; height: 296px !important; object-fit: cover !important; } @@ -660,13 +672,15 @@ } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; - height: 944px; + height: auto; margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { - width: 100%; - height: 296px; + width: 99.67% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; margin-left: 0; margin-bottom: 16px; } @@ -675,15 +689,26 @@ @media (max-width: 2561px) and (min-width: 1920px) { height: 872px; } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; + @media (max-width: 1025px) and (min-width: 768px) { + height: auto; } - @media (max-width: 768px) and (min-width: 375px) { - height: 296px; + @media (max-width: 768px) and (min-width: 377px) { + width: 100% !important; + min-height: 296px !important; + object-fit: cover !important; + height: auto !important; + } + @media (max-width: 377px) and (min-width: 376px) { + width: 100% !important; + min-height: unset !important; + height: 296px !important; + object-fit: cover !important; } & .productImageTag--image-description--main { + height: auto !important; object-fit: cover !important; max-height: unset !important; + } } } -- 2.34.1 From f14b1319bb6eeeaca71fe66b3c6b6820d89f8f6e Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:21:35 -0300 Subject: [PATCH 86/93] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20medida?= =?UTF-8?q?s=20e=20fontes=20do=20slider=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.slider-layout.css | 82 ++++++++++++++++--- .../vtexSliderLayout/vtex.slider-layout.scss | 60 +++++++++++--- 2 files changed, 120 insertions(+), 22 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index b869bde..7a24b8e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -9,25 +9,26 @@ /* Grid breakpoints */ .sliderLayoutContainer--carousel { background: unset; - min-height: 448.4px; width: 94.435%; - margin: 0 auto 64px; + margin: 0 auto 113px; } @media (max-width: 2561px) and (min-width: 1920px) { .sliderLayoutContainer--carousel { width: 71.858%; + min-height: 543.4px; } } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel { width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel { width: 78.616%; margin: 0 auto 32px; - min-height: 273.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer { @@ -84,12 +85,12 @@ } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 402.2px; + min-height: 383.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 273.8px; + min-height: 254.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { @@ -108,7 +109,22 @@ color: #000000; display: inline-block; vertical-align: text-top; - min-height: 50px; + padding: 0 16px; + min-height: 19px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { width: 100%; @@ -143,18 +159,50 @@ .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { row-gap: 8px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 60px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 49px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { + height: 49px; + } +} .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { padding: 0; - font-weight: 400; - font-size: 14px; - line-height: 19px; text-align: center; - text-decoration-line: line-through; - color: #bababa; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { display: none; } +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + padding: 0; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { + font-size: 12px; + line-height: 16px; + } +} .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before { content: "de "; } @@ -176,6 +224,18 @@ text-align: center; color: #000000; } +@media (max-width: 1025px) and (min-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} .sliderLayoutContainer--carousel .sliderArrows { padding: 0; margin: 0; diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss index 5894c7d..8ff7932 100644 --- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -2,19 +2,20 @@ .sliderLayoutContainer--carousel { background: unset; - min-height: 448.4px; width: 94.435%; - margin: 0 auto 64px; + margin: 0 auto 113px; @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; + min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; } @media (max-width: 768px) and (min-width: 375px) { width: 78.616%; margin: 0 auto 32px; - min-height: 273.8px; } .sliderTrackContainer { width: 96%; @@ -51,10 +52,10 @@ min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { - min-height: 402.2px; + min-height: 383.2px; } @media (max-width: 768px) and (min-width: 375px) { - min-height: 273.8px; + min-height: 254.8px; } :global(.vtex-product-summary-2-x-element) { padding: 0; @@ -71,7 +72,18 @@ color: $black; display: inline-block; vertical-align: text-top; - min-height: 50px; + padding: 0 16px; + min-height: 19px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } + @media (max-width: 768px) and (min-width: 375px) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } } } } @@ -100,19 +112,37 @@ padding: 0; :global(.vtex-store-components-3-x-priceContainer) { row-gap: 8px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 60px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 49px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 49px; + } :global(.vtex-store-components-3-x-listPrice) { padding: 0; - font-weight: 400; - font-size: 14px; - line-height: 19px; text-align: center; - text-decoration-line: line-through; - color: $BABABA; :global(.vtex-store-components-3-x-listPriceLabel) { display: none; } :global(.vtex-store-components-3-x-listPriceValue) { + padding: 0; :global(.vtex-product-summary-2-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: $BABABA; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } &::before { content: "de "; } @@ -135,6 +165,14 @@ line-height: 33px; text-align: center; color: $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 18px; + line-height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 18px; + line-height: 25px + } } } } -- 2.34.1 From c0e021ed45f99513a5c24700153816d37ec5acba Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:27:03 -0300 Subject: [PATCH 87/93] =?UTF-8?q?refactor(home.jsonc):=20modificando=20op?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20showNavigationArrows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/home/home.jsonc | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..a8e49c1 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", @@ -40,7 +41,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, -- 2.34.1 From c1ac1ee442fd5da0f76ed3783f01de5659e6db0a Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:31:29 -0300 Subject: [PATCH 88/93] refactor(Pix.tsx): substituindo strong por span --- react/components/Pix/Pix.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 191146e..dce7874 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -18,9 +18,9 @@ const Pix = () => { alt="logo pix" />
- + R$ {pixPrice?.toFixed(2).toString().replace(".", ",")} - + 10 % de desconto
-- 2.34.1 From 626cb4fa42ed8ea1af5db2efbdbde20c85947adf Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:33:53 -0300 Subject: [PATCH 89/93] refactor(InstallmentProduct.tsx): substituindo strong por span e adicionando fontWeight no texto --- react/components/InstallmentProduct/InstallmentProduct.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx index 8bb9802..11fafb7 100644 --- a/react/components/InstallmentProduct/InstallmentProduct.tsx +++ b/react/components/InstallmentProduct/InstallmentProduct.tsx @@ -13,12 +13,12 @@ const InstallmentProduct = () => { }; return (

- {productWithInstallments.numberOfInstallments}x  + {productWithInstallments.numberOfInstallments}x  de  - + R$  {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")} - {" "} + {" "} sem juros

); -- 2.34.1 From 34971cc0e0e572543c9ed5d3571e8fa46875c548 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:37:02 -0300 Subject: [PATCH 90/93] refactor: deletando vtex.stack-layout.css --- styles/css/vtex.stack-layout.css | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 styles/css/vtex.stack-layout.css diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css deleted file mode 100644 index 7149eb7..0000000 --- a/styles/css/vtex.stack-layout.css +++ /dev/null @@ -1,10 +0,0 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - -.stackItem--quickview { - right: 0; - top: 0; - left: auto; -} -- 2.34.1 From 22a61362829ffc93371a82da5d2de0c65189ecf1 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:38:56 -0300 Subject: [PATCH 91/93] =?UTF-8?q?style(styles.css):=20removendo=20c=C3=B3d?= =?UTF-8?q?igo=20in=C3=BAtil=20do=20css=20do=20InstallmentProduct?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/InstallmentProduct/styles.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/react/components/InstallmentProduct/styles.css b/react/components/InstallmentProduct/styles.css index f030560..87129b9 100644 --- a/react/components/InstallmentProduct/styles.css +++ b/react/components/InstallmentProduct/styles.css @@ -5,7 +5,3 @@ line-height: 22px; color: #929292; } - -.PriceContent:nth-child(1n) { - font-weight: 700; -} -- 2.34.1 From 47594f125aa3c480f747eca0b75c16fc7fd2bba5 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 10:45:21 -0300 Subject: [PATCH 92/93] =?UTF-8?q?refactor(Autores.tsx):=20corrigindo=20tex?= =?UTF-8?q?to=20alternativo=20do=20=C3=ADcone=20logo=20m3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Autores/Autores.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/components/Autores/Autores.tsx b/react/components/Autores/Autores.tsx index 7950e3c..12ef274 100644 --- a/react/components/Autores/Autores.tsx +++ b/react/components/Autores/Autores.tsx @@ -15,7 +15,7 @@ const Autores = () => { Developed by ícone logo vtex -- 2.34.1 From 29305b2a9ef144bb087bc6e86a2c429cd5fdab54 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 3 Feb 2023 11:13:30 -0300 Subject: [PATCH 93/93] feat(product-right-col.jsonc): adicionando testId: shipping-simulator --- store/blocks/pdp/product-right-col.jsonc | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-right-col.jsonc b/store/blocks/pdp/product-right-col.jsonc index d75a1fe..9b523b2 100644 --- a/store/blocks/pdp/product-right-col.jsonc +++ b/store/blocks/pdp/product-right-col.jsonc @@ -18,7 +18,7 @@ "product-gifts", // "flex-layout.row#add-to-cart-button", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "placeholder-component" // "share#default" ] @@ -86,5 +86,12 @@ "marginBottom": 7 }, "children": ["add-to-cart-button"] + }, + + "html#shipping-simulator":{ + "props":{ + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] } } -- 2.34.1