From a0a2843b890a1a58998289ccb62eb324c6c1ac2e Mon Sep 17 00:00:00 2001 From: Naian Date: Wed, 25 Jan 2023 14:53:15 -0300 Subject: [PATCH 01/10] feat: modifica breadcrumb --- react/components/Html/index.tsx | 79 +- styles/configs/font.faces.css | 4 + styles/configs/style.json | 688 +++++++++--------- styles/css/agenciamagma.store-theme.css | 7 +- styles/css/vtex.breadcrumb.css | 24 + styles/css/vtex.flex-layout.css | 112 +-- styles/css/vtex.produvt-quantity.css | 19 + styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 49 ++ .../product/agenciamagma.store-theme.scss | 5 +- .../sass/pages/product/vtex.breadcrumb.scss | 16 + .../pages/product/vtex.produvt-quantity.scss | 9 + .../pages/product/vtex.store-components.scss | 57 +- styles/sass/pages/vtex.flex-layout.scss | 7 + styles/sass/utils/_vars.scss | 24 +- 15 files changed, 612 insertions(+), 489 deletions(-) create mode 100644 styles/configs/font.faces.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.produvt-quantity.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.produvt-quantity.scss create mode 100644 styles/sass/pages/vtex.flex-layout.scss diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..847f910 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/styles/configs/font.faces.css b/styles/configs/font.faces.css new file mode 100644 index 0000000..8b03b9a --- /dev/null +++ b/styles/configs/font.faces.css @@ -0,0 +1,4 @@ +/* @font-face { + font-family: "Open Sans"; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +} */ diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..e729845 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..e26e1ce 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,16 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; +} + +.relative { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..95a4493 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,24 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.container { + padding: 0px 40px 16px 40px; + display: flex; + align-items: center; +} +.container .homeIcon { + display: none; +} +.container .homeLink { + display: none; +} +.container .arrow--1 .caretIcon { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..4cd686d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,18 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.flexRowContent { + padding: 0; + margin: 0; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.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; -} +.product-images { + padding-left: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.produvt-quantity.css b/styles/css/vtex.produvt-quantity.css new file mode 100644 index 0000000..faf4968 --- /dev/null +++ b/styles/css/vtex.produvt-quantity.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.quatitySelectorContainer { + border: 0; +} +.quatitySelectorContainer .quatitySelectorStepper { + border: 0; +} +.quatitySelectorContainer .quatitySelectorStepper .hideDecorator { + background-color: blueviolet; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..c1f9f02 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..4825b0d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,7 +6,56 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ +.container { + padding: 0 40px; +} +.container .productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + text-align: end; +} +.container .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + border: 0; +} +.container .skuSelectorContainer .skuSelectorItem { + border: 1px solid #989898; + border-radius: 50%; + width: 44px; + height: 44px; +} +.container .skuSelectorContainer .skuSelectorItem.skuSelectorItem--selected { + border: 2px solid #000; +} +.container .skuSelectorContainer .skuSelectorItem.skuSelectorItem--selected .diagonalCross { + color: #000; + border: 2px; +} +.container .skuSelectorContainer .skuSelectorInternalBox { + padding: 0; + border-radius: 50%; + border: 0; +} +.container .skuSelectorContainer .skuSelectorInternalBox .skuSelectorItemTextValue { + font-size: 14px; + padding: 0; +} +.container .skuSelectorContainer .diagonalCross { + border: 1px; + width: 10px; + color: #989898; + margin: 0 auto; + transform: rotate(60deg); +} +.container .skuSelectorContainer .frameAround { + display: none; +} + .newsletter { background: red; } \ 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 index ea7d5b9..e26e567 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,9 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; } +.relative { + display: none; +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..b20e9b6 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,16 @@ +.container { + padding: 0px 40px 16px 40px; + display: flex; + align-items: center; + .homeIcon { + display: none; + } + .homeLink { + display: none; + } + .arrow--1 { + .caretIcon { + display: none; + } + } +} diff --git a/styles/sass/pages/product/vtex.produvt-quantity.scss b/styles/sass/pages/product/vtex.produvt-quantity.scss new file mode 100644 index 0000000..c4fe3b8 --- /dev/null +++ b/styles/sass/pages/product/vtex.produvt-quantity.scss @@ -0,0 +1,9 @@ +.quatitySelectorContainer { + border: 0; + .quatitySelectorStepper { + border: 0; + .hideDecorator { + background-color: blueviolet; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..f593d9b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,54 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + padding: 0 40px; + .productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + text-align: end; + } + .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + border: 0; + + .skuSelectorItem { + border: 1px solid #989898; + border-radius: 50%; + width: 44px; + height: 44px; + + &.skuSelectorItem--selected { + border: 2px solid #000; + .diagonalCross { + color: #000; + border: 2px; + } + } + } + + .skuSelectorInternalBox { + padding: 0; + border-radius: 50%; + border: 0; + .skuSelectorItemTextValue { + font-size: 14px; + padding: 0; + } + } + .diagonalCross { + border: 1px; + width: 10px; + color: #989898; + margin: 0 auto; + transform: rotate(60deg); + } + .frameAround { + display: none; + } + } +} + +.newsletter { + background: red; +} diff --git a/styles/sass/pages/vtex.flex-layout.scss b/styles/sass/pages/vtex.flex-layout.scss new file mode 100644 index 0000000..e16b530 --- /dev/null +++ b/styles/sass/pages/vtex.flex-layout.scss @@ -0,0 +1,7 @@ +.flexRowContent { + padding: 0; + margin: 0; +} +.product-images { + padding-left: 0; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..c15795b 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); + $color-black: #292929; $color-white: #fff; @@ -14,18 +16,18 @@ $color-green: #4caf50; /* 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; From 41964c97ff2ab942d6d15ef666c279d7a613123f Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 31 Jan 2023 15:43:21 -0300 Subject: [PATCH 02/10] feat:modifica botoes de tamanho do produto --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 5 +- styles/css/vtex.breadcrumb.css | 9 ++ styles/css/vtex.flex-layout.css | 13 +++ styles/css/vtex.oriduct-price.css | 17 ++++ styles/css/vtex.product-price.css | 97 +++++-------------- styles/css/vtex.product-quantity.css | 41 ++++++++ styles/css/vtex.produvt-quantity.css | 3 + styles/css/vtex.store-components.css | 33 +++++++ .../sass/pages/product/vtex.breadcrumb.scss | 7 ++ .../sass/pages/product/vtex.flex-layout.scss | 24 +++++ .../pages/product/vtex.product-price.scss | 21 ++++ .../pages/product/vtex.product-quantity.scss | 30 ++++++ .../pages/product/vtex.produvt-quantity.scss | 9 -- styles/sass/pages/product/vtex.rich-text.scss | 0 .../pages/product/vtex.store-components.scss | 40 ++++++++ styles/sass/pages/vtex.flex-layout.scss | 7 -- 17 files changed, 266 insertions(+), 91 deletions(-) create mode 100644 styles/css/vtex.oriduct-price.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss delete mode 100644 styles/sass/pages/product/vtex.produvt-quantity.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.scss delete mode 100644 styles/sass/pages/vtex.flex-layout.scss 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", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..7f43b5d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -108,7 +108,6 @@ "product-separator", "product-identifier.product", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -134,10 +133,12 @@ "flex-layout.row#buy-button": { "props": { + "blockClass": "button-container", "marginTop": 4, + "preventHorizontalStretch": true, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 95a4493..9ba690a 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -19,6 +19,15 @@ .container .homeLink { display: none; } +.container .homeLink .link--1 { + padding-left: 0; +} +.container .arrow--1 { + padding-left: 0; +} +.container .arrow--1 .link--1 { + padding-left: 0; +} .container .arrow--1 .caretIcon { display: none; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4cd686d..afa73ae 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,7 +12,20 @@ padding: 0; margin: 0; } +.flexRowContent .flexColChild .product-identifier--productReference { + float: right; +} .product-images { padding-left: 0; +} + +.product-identifier__label { + display: none; +} + +.flexRowContent--button-container :global(.vtex-button) { + background-color: #000; + border: 0; + height: 50px; } \ No newline at end of file diff --git a/styles/css/vtex.oriduct-price.css b/styles/css/vtex.oriduct-price.css new file mode 100644 index 0000000..7ed8acc --- /dev/null +++ b/styles/css/vtex.oriduct-price.css @@ -0,0 +1,17 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.currencyInteger { + display: none; +} + +.savings { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..569f299 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,32 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.listPrice, +.savings { + display: none; } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans", sans-serif; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .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-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..a22e26b --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,41 @@ +@charset "UTF-8"; +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorContainer { + border: 0; + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} + +:global(.vtex-numeric-stepper__input), +:global(.vtex-numeric-stepper__plus-button), +:global(.vtex-numeric-stepper__minus-button) { + height: 50px; + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-left: 0; + border-right: 0; +} + +:global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; +} +:global(.vtex-add-to-cart-button-0-x-buttonText)::before { + content: "ADICIONAR Á SACOLA"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.produvt-quantity.css b/styles/css/vtex.produvt-quantity.css index faf4968..9a30b83 100644 --- a/styles/css/vtex.produvt-quantity.css +++ b/styles/css/vtex.produvt-quantity.css @@ -11,6 +11,9 @@ .quatitySelectorContainer { border: 0; } +.quatitySelectorContainer .quantitySelectorTitle { + display: none; +} .quatitySelectorContainer .quatitySelectorStepper { border: 0; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4825b0d..5400a87 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -36,6 +36,39 @@ color: #000; border: 2px; } +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::before { + content: "OUTRAS CORES: "; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} .container .skuSelectorContainer .skuSelectorInternalBox { padding: 0; border-radius: 50%; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index b20e9b6..682bd25 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -7,8 +7,15 @@ } .homeLink { display: none; + .link--1 { + padding-left: 0; + } } .arrow--1 { + padding-left: 0; + .link--1 { + padding-left: 0; + } .caretIcon { display: none; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..bf77b54 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,24 @@ +.flexRowContent { + padding: 0; + margin: 0; + .flexColChild { + .product-identifier--productReference { + float: right; + } + } +} +.product-images { + padding-left: 0; +} + +.product-identifier__label { + display: none; +} + +.flexRowContent--button-container { + :global(.vtex-button) { + background-color: #000; + border: 0; + height: 50px; + } +} 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..4691566 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,21 @@ +.listPrice, +.savings { + display: none; +} +.sellingPrice { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} 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..487b12c --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,30 @@ +.quantitySelectorContainer { + border: 0; + margin: 0; + .quantitySelectorTitle { + display: none; + } +} + +:global(.vtex-numeric-stepper__input), +:global(.vtex-numeric-stepper__plus-button), +:global(.vtex-numeric-stepper__minus-button) { + height: 50px; + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-left: 0; + border-right: 0; +} + +:global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; + &::before { + content: "ADICIONAR Á SACOLA"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } +} diff --git a/styles/sass/pages/product/vtex.produvt-quantity.scss b/styles/sass/pages/product/vtex.produvt-quantity.scss deleted file mode 100644 index c4fe3b8..0000000 --- a/styles/sass/pages/product/vtex.produvt-quantity.scss +++ /dev/null @@ -1,9 +0,0 @@ -.quatitySelectorContainer { - border: 0; - .quatitySelectorStepper { - border: 0; - .hideDecorator { - background-color: blueviolet; - } - } -} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f593d9b..1c999af 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -26,6 +26,46 @@ } } } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } + + .skuSelectorSubcontainer--cor { + .skuSelectorImageValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .skuSelectorNameSeparator { + display: none; + } + + .skuSelectorName { + font-size: 0; + &::before { + content: "OUTRAS CORES: "; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } .skuSelectorInternalBox { padding: 0; diff --git a/styles/sass/pages/vtex.flex-layout.scss b/styles/sass/pages/vtex.flex-layout.scss deleted file mode 100644 index e16b530..0000000 --- a/styles/sass/pages/vtex.flex-layout.scss +++ /dev/null @@ -1,7 +0,0 @@ -.flexRowContent { - padding: 0; - margin: 0; -} -.product-images { - padding-left: 0; -} From e685cdb74271e68e4210ac4850b876c18ced240c Mon Sep 17 00:00:00 2001 From: Naian Date: Thu, 2 Feb 2023 09:42:45 -0300 Subject: [PATCH 03/10] feat: modifica container do cep --- store/blocks/pdp/product.jsonc | 27 +++++++- styles/css/vtex.address-form.css | 20 ++++++ styles/css/vtex.adress-form.css | 13 ++++ styles/css/vtex.flex-layout.css | 8 +++ styles/css/vtex.product-quantity.css | 2 +- styles/css/vtex.store-components.css | 66 +++++++++++++++++- .../sass/pages/product/vtex.adress-form.scss | 3 + .../sass/pages/product/vtex.flex-layout.scss | 8 +++ .../pages/product/vtex.product-quantity.scss | 2 +- .../pages/product/vtex.store-components.scss | 68 ++++++++++++++++++- 10 files changed, 210 insertions(+), 7 deletions(-) create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/css/vtex.adress-form.css create mode 100644 styles/sass/pages/product/vtex.adress-form.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7f43b5d..f479005 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -110,7 +110,7 @@ "sku-selector", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#buy-box", "availability-subscriber", "shipping-simulator", "share#default" @@ -131,14 +131,35 @@ } }, + "flex-layout.row#buy-box": { + "children": [ + "flex-layout.row#product-quantity", + "flex-layout.row#buy-button" + ], + "props": { + "colGap": 0, + "blockClass": "buy-box", + "colSizing": "auto" + } + }, + + "flex-layout.row#product-quantity": { + "props": { + "preventHorizontalStretch": true + }, + + "children": ["product-quantity"] + }, + "flex-layout.row#buy-button": { "props": { "blockClass": "button-container", "marginTop": 4, - "preventHorizontalStretch": true, + "preventHorizontalStretch": false, + "fullWidth": true, "marginBottom": 7 }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..ca08bc9 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,20 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +:global(.vtex-input__label) { + margin-top: 16px; + font-size: 0; +} +:global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.adress-form.css b/styles/css/vtex.adress-form.css new file mode 100644 index 0000000..1f73538 --- /dev/null +++ b/styles/css/vtex.adress-form.css @@ -0,0 +1,13 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.vtex-address-form__postalCode { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index afa73ae..983da4c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -24,8 +24,16 @@ display: none; } +.flexRowContent--button-container { + margin-bottom: 10px; +} .flexRowContent--button-container :global(.vtex-button) { background-color: #000; border: 0; height: 50px; + margin-left: 10px; +} + +.flexRow--buy-box .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index a22e26b..d58c4ef 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -33,7 +33,7 @@ font-size: 0; } :global(.vtex-add-to-cart-button-0-x-buttonText)::before { - content: "ADICIONAR Á SACOLA"; + content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 25px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5400a87..666f5c2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -54,7 +54,8 @@ font-size: 14px; line-height: 19px; } -.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator, +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { display: none; } .container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { @@ -89,6 +90,69 @@ display: none; } +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-button) { + width: 50px; + height: 50px; + font-size: 0; + background-color: #000; + border: 0; + margin-top: 27px; + right: 9%; +} +.shippingContainer :global(.vtex-button)::before { + text-align: center; + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + height: 0; + width: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 15%; + bottom: 33%; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) #text { + color: #000; + text-decoration: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} + .newsletter { background: red; +} + +:global(.vtex-input__label) { + font-size: 0; +} +:global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shareContainer { + display: none; +} + +:global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; +} +:global(.vtex-address-form__postalCode) .pointer { + position: absolute; +} + +:global(.vtex-input-prefix__group) { + height: 50px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.adress-form.scss b/styles/sass/pages/product/vtex.adress-form.scss new file mode 100644 index 0000000..a73e45b --- /dev/null +++ b/styles/sass/pages/product/vtex.adress-form.scss @@ -0,0 +1,3 @@ +.vtex-address-form__postalCode { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index bf77b54..52dfd21 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -16,9 +16,17 @@ } .flexRowContent--button-container { + margin-bottom: 10px; :global(.vtex-button) { background-color: #000; border: 0; height: 50px; + margin-left: 10px; + } +} + +.flexRow--buy-box { + .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 487b12c..51d76a8 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -21,7 +21,7 @@ :global(.vtex-add-to-cart-button-0-x-buttonText) { font-size: 0; &::before { - content: "ADICIONAR Á SACOLA"; + content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 25px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1c999af..80f4a69 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -49,7 +49,8 @@ line-height: 19px; } - .skuSelectorNameSeparator { + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { display: none; } @@ -89,6 +90,71 @@ } } +.shippingContainer { + display: flex; + :global(.vtex-button) { + width: 50px; + height: 50px; + font-size: 0; + background-color: #000; + border: 0; + margin-top: 27px; + right: 9%; + + &::before { + text-align: center; + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; + } + :global(.vtex-button__label) { + height: 0; + width: 0; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 15%; + bottom: 33%; + #text { + color: #000; + text-decoration: underline; + } + :global(.vtex__icon-external-link) { + display: none; + } + } +} + .newsletter { background: red; } + +:global(.vtex-input__label) { + font-size: 0; + &::before { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +.shareContainer { + display: none; +} + +:global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; + + .pointer { + position: absolute; + } +} + +:global(.vtex-input-prefix__group) { + height: 50px; +} From 45c40af2c5220a0586d3a1aa442c71d10d0f39de Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 7 Feb 2023 14:59:10 -0300 Subject: [PATCH 04/10] feat: adiciona slider bottom --- react/placeholder.tsx | 16 ++++ store/blocks/pdp/product.jsonc | 55 ++++++++++-- store/interfaces.json | 4 + styles/css/vtex.adress-form.css | 5 +- styles/css/vtex.flex-layout.css | 9 ++ styles/css/vtex.login.css | 15 ++++ styles/css/vtex.shelf.css | 16 ++++ styles/css/vtex.store-components.css | 80 +++++++++++++++-- .../sass/pages/product/vtex.adress-form.scss | 3 - .../sass/pages/product/vtex.flex-layout.scss | 9 ++ styles/sass/pages/product/vtex.login.scss | 5 ++ styles/sass/pages/product/vtex.shelf.scss | 6 ++ .../pages/product/vtex.store-components.scss | 85 ++++++++++++++++--- 13 files changed, 274 insertions(+), 34 deletions(-) create mode 100644 react/placeholder.tsx create mode 100644 styles/css/vtex.login.css create mode 100644 styles/css/vtex.shelf.css delete mode 100644 styles/sass/pages/product/vtex.adress-form.scss create mode 100644 styles/sass/pages/product/vtex.login.scss create mode 100644 styles/sass/pages/product/vtex.shelf.scss diff --git a/react/placeholder.tsx b/react/placeholder.tsx new file mode 100644 index 0000000..c58ba8c --- /dev/null +++ b/react/placeholder.tsx @@ -0,0 +1,16 @@ +import React, { useEffect } from "react"; + +const placeholder = () => { + useEffect(() => { + setTimeout(() => { + const selectorInput = document.querySelector( + ".vtex-address-form-4-x-input" + ); + selectorInput?.setAttribute("placeholder", "Digite seu CEP"); + }, 1000); + }, []); + + return <>; +}; + +export default placeholder; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f479005..070ea3e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,11 +5,44 @@ "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", + "flex-layout.row#shelf", "product-specification-group#table", - "shelf.relatedProducts", + "product-questions-and-answers" ] }, + + "product-summary.shelf#teste": { + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, + + "list-context.product-list#teste": { + "blocks": ["product-summary.shelf#teste"], + "children": ["slider-layout#prateleira"] + }, + + "slider-layout#prateleira": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + + "flex-layout.row#shelf": { + "children": ["list-context.product-list#teste"] + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -78,7 +111,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "51%", "rowGap": 0 } }, @@ -91,7 +124,8 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": true, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { @@ -101,22 +135,29 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", "sku-selector", "product-assembly-options", "product-gifts", "flex-layout.row#buy-box", "availability-subscriber", - "shipping-simulator", - "share#default" + "flex-layout.row#shipping", + "share#default", + "placeholder" ] }, + "flex-layout.row#shipping": { + "props": { + "blockClass": "shipping-container" + }, + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..d2358a8 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "placeholder": { + "component": "placeholder" } } diff --git a/styles/css/vtex.adress-form.css b/styles/css/vtex.adress-form.css index 1f73538..c1f9f02 100644 --- a/styles/css/vtex.adress-form.css +++ b/styles/css/vtex.adress-form.css @@ -7,7 +7,4 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); -/* Grid breakpoints */ -.vtex-address-form__postalCode { - padding: 0; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 983da4c..e8d6695 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -36,4 +36,13 @@ .flexRow--buy-box .stretchChildrenWidth:nth-child(2n) { width: 100% !important; +} + +:global(.vtex-product-identifier-0-x-product-identifier__label), +:global(.vtex-product-identifier-0-x-product-identifier__separator) { + display: none; +} + +:global(.vtex-flex-layout-0-x-flexColChild) { + order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css new file mode 100644 index 0000000..5a2363e --- /dev/null +++ b/styles/css/vtex.login.css @@ -0,0 +1,15 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +:global(.vtex-address-form__postalCode + .vtex-address-form__postalCode-forgottenURL + a) { + color: #000; +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..7ab4913 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,16 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.relatedProducts { + padding: 0 40px; +} +.relatedProducts .sliderLayoutContainer { + background-color: white; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 666f5c2..aac1c0a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -17,6 +17,7 @@ line-height: 34px; color: #575757; text-align: end; + margin-bottom: 8px; } .container .skuSelectorContainer { display: flex; @@ -28,6 +29,8 @@ border-radius: 50%; width: 44px; height: 44px; + margin-right: 16px; + margin-left: 0; } .container .skuSelectorContainer .skuSelectorItem.skuSelectorItem--selected { border: 2px solid #000; @@ -48,6 +51,9 @@ line-height: 19px; color: #929292; } +.container .skuSelectorContainer .skuSelectorOptionsList { + margin-left: 0; +} .container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue { font-style: normal; font-weight: 400; @@ -100,7 +106,7 @@ background-color: #000; border: 0; margin-top: 27px; - right: 9%; + right: 7%; } .shippingContainer :global(.vtex-button)::before { text-align: center; @@ -116,17 +122,60 @@ } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; - right: 15%; - bottom: 33%; -} -.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) #text { - color: #000; + right: 12%; + bottom: 34%; text-decoration: underline; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } +.productImageTag { + object-fit: unset !important; + max-width: 664px; + width: 104% !important; + max-height: 664px !important; + margin-bottom: 16px; +} + +.figure { + height: 100%; +} + +.productImagesThumb { + margin-right: 16px; + width: 90px !important; + height: 90px !important; +} + +.carouselGaleryThumbs { + margin: 0; +} + +.shippingTable { + border: 0; + margin-top: 16px; + padding: 0; +} +.shippingTable .shippingTableHead { + display: block; + margin-bottom: 15px; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableCell { + padding: 0 8px 15px 0; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} + .newsletter { background: red; } @@ -149,10 +198,23 @@ display: flex; padding: 0; } -:global(.vtex-address-form__postalCode) .pointer { - position: absolute; -} :global(.vtex-input-prefix__group) { height: 50px; + width: 280px; +} + +:global(.vtex-product-identifier-0-x-product-identifier__value) { + display: flex; + justify-content: end; +} + +:global(.vtex-store-components-3-x-shippingTableRadioBtn) { + display: none; +} + +:global(.vtex-store-components-3-x-swiperCaretNext), +:global(.vtex-store-components-3-x-swiperCaretPrev), +:global(.vtex-store-components-3-x-swiper-pagination) { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.adress-form.scss b/styles/sass/pages/product/vtex.adress-form.scss deleted file mode 100644 index a73e45b..0000000 --- a/styles/sass/pages/product/vtex.adress-form.scss +++ /dev/null @@ -1,3 +0,0 @@ -.vtex-address-form__postalCode { - padding: 0; -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 52dfd21..f8f31f2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -30,3 +30,12 @@ width: 100% !important; } } + +:global(.vtex-product-identifier-0-x-product-identifier__label), +:global(.vtex-product-identifier-0-x-product-identifier__separator) { + display: none; +} + +:global(.vtex-flex-layout-0-x-flexColChild) { + order: -1; +} diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss new file mode 100644 index 0000000..78cb960 --- /dev/null +++ b/styles/sass/pages/product/vtex.login.scss @@ -0,0 +1,5 @@ +:global(.vtex-address-form__postalCode + .vtex-address-form__postalCode-forgottenURL + a) { + color: #000; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..1827640 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,6 @@ +.relatedProducts { + padding: 0 40px; + .sliderLayoutContainer { + background-color: white; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 80f4a69..b90fec5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -6,6 +6,7 @@ line-height: 34px; color: #575757; text-align: end; + margin-bottom: 8px; } .skuSelectorContainer { display: flex; @@ -17,6 +18,8 @@ border-radius: 50%; width: 44px; height: 44px; + margin-right: 16px; + margin-left: 0; &.skuSelectorItem--selected { border: 2px solid #000; @@ -40,6 +43,9 @@ } } } + .skuSelectorOptionsList { + margin-left: 0; + } .skuSelectorSubcontainer--cor { .skuSelectorImageValue { @@ -99,7 +105,7 @@ background-color: #000; border: 0; margin-top: 27px; - right: 9%; + right: 7%; &::before { text-align: center; @@ -116,18 +122,63 @@ } :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; - right: 15%; - bottom: 33%; - #text { - color: #000; - text-decoration: underline; - } + right: 12%; + bottom: 34%; + text-decoration: underline; + :global(.vtex__icon-external-link) { display: none; } } } +.productImageTag { + object-fit: unset !important; + max-width: 664px; + width: 104% !important; + max-height: 664px !important; + margin-bottom: 16px; +} + +.figure { + height: 100%; +} + +.productImagesThumb { + margin-right: 16px; + width: 90px !important; + height: 90px !important; +} + +.carouselGaleryThumbs { + margin: 0; +} + +.shippingTable { + border: 0; + margin-top: 16px; + padding: 0; + .shippingTableHead { + display: block; + margin-bottom: 15px; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + } + } + .shippingTableCell { + padding: 0 8px 15px 0; + font-size: 12px; + line-height: 16px; + color: #afafaf; + } +} + .newsletter { background: red; } @@ -149,12 +200,24 @@ :global(.vtex-address-form__postalCode) { display: flex; padding: 0; - - .pointer { - position: absolute; - } } :global(.vtex-input-prefix__group) { height: 50px; + width: 280px; +} + +:global(.vtex-product-identifier-0-x-product-identifier__value) { + display: flex; + justify-content: end; +} + +:global(.vtex-store-components-3-x-shippingTableRadioBtn) { + display: none; +} + +:global(.vtex-store-components-3-x-swiperCaretNext), +:global(.vtex-store-components-3-x-swiperCaretPrev), +:global(.vtex-store-components-3-x-swiper-pagination) { + display: none; } From 2c53dfdd5b5ef594725ff82f6525cef2e1877b3b Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 7 Feb 2023 16:53:56 -0300 Subject: [PATCH 05/10] feat: estiliza prateleira de produtos --- styles/css/vtex.product-summary-name.css | 16 +++ styles/css/vtex.shelf.css | 5 +- styles/css/vtex.slider-layout.css | 114 +++++++++++++++--- styles/css/vtex.store-components.css | 1 + styles/iconpacks/SPOILER_dots.txt | 19 +++ styles/sass/pages/product/vtex.shelf.scss | 6 - .../pages/product/vtex.slider-layout.scss | 99 +++++++++++++++ .../pages/product/vtex.store-components.scss | 1 + 8 files changed, 232 insertions(+), 29 deletions(-) create mode 100644 styles/css/vtex.product-summary-name.css create mode 100644 styles/iconpacks/SPOILER_dots.txt delete mode 100644 styles/sass/pages/product/vtex.shelf.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/styles/css/vtex.product-summary-name.css b/styles/css/vtex.product-summary-name.css new file mode 100644 index 0000000..46ff1ab --- /dev/null +++ b/styles/css/vtex.product-summary-name.css @@ -0,0 +1,16 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ +.container .productNameContainer .productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index 7ab4913..5e01665 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -9,8 +9,5 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ .relatedProducts { - padding: 0 40px; -} -.relatedProducts .sliderLayoutContainer { - background-color: white; + margin: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..04e7767 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,107 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ .sliderLayoutContainer { + background-color: transparent; + height: 630px; + margin: 12px 0 0 0; +} +.sliderLayoutContainer .sliderRightArrow, +.sliderLayoutContainer .sliderLeftArrow { + margin: 0; + padding: 0; +} +.sliderLayoutContainer .sliderRightArrow .caretIcon, +.sliderLayoutContainer .sliderLeftArrow .caretIcon { + width: 15px; + height: 30px; + background-size: cover; +} +.sliderLayoutContainer .paginationDotsContainer { + display: flex; + align-items: center; + margin-bottom: 64px; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: black; + border: none; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: white; + border: 0.5px solid #000000; +} + +:global(.vtex-product-summary-2-x-imageContainer) { + width: 314px; + height: 314px; +} +:global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + max-height: 314px !important; +} + +:global(.vtex-product-price-1-x-listPrice) { + display: block; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-bottom: 8px; +} + +:global(.vtex-product-price-1-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +:global(.vtex-product-summary-2-x-nameContainer) { + padding-bottom: 8px; + text-align: center; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +:global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + text-align: center; + word-wrap: none; } -.sliderTrackContainer { - max-width: 100%; +:global(.vtex-product-summary-2-x-element) { + padding: 0; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +:global(.vtex-rich-text-0-x-container) { + display: none; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-slider-layout-0-x-sliderTrackContainer) { + margin: 32px 27px 32px 27px; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +:global(.vtex-slider-layout-0-x-sliderTrack) { + margin-bottom: 32px; } + +:global(.vtex-slider-layout-0-x-slideChildrenContainer) { + max-width: 314px; +} + +:global(.vtex-slider-layout-0-x-slide) { + width: 314px !important; + height: 448px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index aac1c0a..be6f256 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -178,6 +178,7 @@ .newsletter { background: red; + display: block; } :global(.vtex-input__label) { diff --git a/styles/iconpacks/SPOILER_dots.txt b/styles/iconpacks/SPOILER_dots.txt new file mode 100644 index 0000000..1da924a --- /dev/null +++ b/styles/iconpacks/SPOILER_dots.txt @@ -0,0 +1,19 @@ +.paginationDotsContainer { + display: flex; + align-items: center; + margin-bottom: 64px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: black; + border: none; + } + + .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: white; + border: 0.5px solid #000000; + } + } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss deleted file mode 100644 index 1827640..0000000 --- a/styles/sass/pages/product/vtex.shelf.scss +++ /dev/null @@ -1,6 +0,0 @@ -.relatedProducts { - padding: 0 40px; - .sliderLayoutContainer { - background-color: white; - } -} 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..4df42de --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,99 @@ +.sliderLayoutContainer { + background-color: transparent; + height: 630px; + margin: 12px 0 0 0; + + .sliderRightArrow, + .sliderLeftArrow { + margin: 0; + padding: 0; + .caretIcon { + width: 15px; + height: 30px; + background-size: cover; + } + } + .paginationDotsContainer { + display: flex; + align-items: center; + margin-bottom: 64px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: black; + border: none; + } + + .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: white; + border: 0.5px solid #000000; + } + } +} + +:global(.vtex-product-summary-2-x-imageContainer) { + width: 314px; + height: 314px; + :global(.vtex-product-summary-2-x-imageNormal) { + max-height: 314px !important; + } +} + +:global(.vtex-product-price-1-x-listPrice) { + display: block; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-bottom: 8px; +} + +:global(.vtex-product-price-1-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +:global(.vtex-product-summary-2-x-nameContainer) { + padding-bottom: 8px; + text-align: center; + justify-content: center; + :global(.vtex-product-summary-2-x-productBrand) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + text-align: center; + word-wrap: none; + } +} + +:global(.vtex-product-summary-2-x-element) { + padding: 0; +} + +:global(.vtex-rich-text-0-x-container) { + display: none; +} + +:global(.vtex-slider-layout-0-x-sliderTrackContainer) { + margin: 32px 27px 32px 27px; +} + +:global(.vtex-slider-layout-0-x-sliderTrack) { + margin-bottom: 32px; +} + +:global(.vtex-slider-layout-0-x-slideChildrenContainer) { + max-width: 314px; +} + +:global(.vtex-slider-layout-0-x-slide) { + width: 314px !important; + height: 448px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b90fec5..e0a2b4c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -181,6 +181,7 @@ .newsletter { background: red; + display: block; } :global(.vtex-input__label) { From 129f489430ff56911d051936418c6510254a5e0a Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 7 Feb 2023 17:34:16 -0300 Subject: [PATCH 06/10] fix: modifica arrow do slider --- store/blocks/pdp/product.jsonc | 1 + styles/css/vtex.slider-layout.css | 20 ++++++++++++++-- styles/iconpacks/arrowdireita.svg | 3 +++ styles/iconpacks/arrowesquerda.svg | 3 +++ .../pages/product/vtex.slider-layout.scss | 23 ++++++++++++++++--- 5 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 styles/iconpacks/arrowdireita.svg create mode 100644 styles/iconpacks/arrowesquerda.svg diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 070ea3e..dbf2540 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -16,6 +16,7 @@ "children": [ "product-summary-image#shelf", "product-summary-name", + "product-summary-space", "product-list-price#summary", "product-selling-price#summary" ] diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 04e7767..96160dd 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -20,9 +20,25 @@ } .sliderLayoutContainer .sliderRightArrow .caretIcon, .sliderLayoutContainer .sliderLeftArrow .caretIcon { - width: 15px; + display: none; +} +.sliderLayoutContainer .sliderLeftArrow::after { + content: ""; + display: block; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='31' viewBox='0 0 12 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000193945 15.2383L10.9291 30.1191L11.2002 27.7468L2.30458 15.2383L11.2002 2.89145L10.9291 0.519139L0.000193945 15.2383Z' fill='black'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 11px; + height: 30px; +} +.sliderLayoutContainer .sliderRightArrow::after { + content: ""; + display: block; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='31' viewBox='0 0 12 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9998 15.4004L1.07091 0.519531L0.799804 2.89184L9.69542 15.4004L0.799802 27.7472L1.07091 30.1195L11.9998 15.4004Z' fill='black'/%3E%3C/svg%3E "); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 11px; height: 30px; - background-size: cover; } .sliderLayoutContainer .paginationDotsContainer { display: flex; diff --git a/styles/iconpacks/arrowdireita.svg b/styles/iconpacks/arrowdireita.svg new file mode 100644 index 0000000..092f80e --- /dev/null +++ b/styles/iconpacks/arrowdireita.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/iconpacks/arrowesquerda.svg b/styles/iconpacks/arrowesquerda.svg new file mode 100644 index 0000000..217a30d --- /dev/null +++ b/styles/iconpacks/arrowesquerda.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 4df42de..fb491dd 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -8,11 +8,28 @@ margin: 0; padding: 0; .caretIcon { - width: 15px; - height: 30px; - background-size: cover; + display: none; } } + .sliderLeftArrow::after { + content: ""; + display: block; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='31' viewBox='0 0 12 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000193945 15.2383L10.9291 30.1191L11.2002 27.7468L2.30458 15.2383L11.2002 2.89145L10.9291 0.519139L0.000193945 15.2383Z' fill='black'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 11px; + height: 30px; + } + .sliderRightArrow::after { + content: ""; + display: block; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='31' viewBox='0 0 12 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9998 15.4004L1.07091 0.519531L0.799804 2.89184L9.69542 15.4004L0.799802 27.7472L1.07091 30.1195L11.9998 15.4004Z' fill='black'/%3E%3C/svg%3E "); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 11px; + height: 30px; + } + .paginationDotsContainer { display: flex; align-items: center; From 892cce275bcb4409ed08959cd38b8f28cf57d8c2 Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 7 Feb 2023 17:43:57 -0300 Subject: [PATCH 07/10] feat: adiciona estrutura da description --- store/blocks/pdp/product.jsonc | 109 ++++++++++++++++-- styles/css/vtex.tab-layout.css | 10 ++ styles/iconpacks/description.txt | 102 ++++++++++++++++ styles/iconpacks/tab-layout.txt | 83 +++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 0 5 files changed, 296 insertions(+), 8 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/iconpacks/description.txt create mode 100644 styles/iconpacks/tab-layout.txt create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbf2540..17d9bcc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", + "tab-layout#description", "flex-layout.row#shelf", - "product-specification-group#table", - "product-questions-and-answers" ] }, @@ -60,11 +57,107 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], "props": { - "marginBottom": 7 - }, - "children": ["product-description"] + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description5" + } }, "condition-layout.product#availability": { "props": { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..c1f9f02 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,10 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/iconpacks/description.txt b/styles/iconpacks/description.txt new file mode 100644 index 0000000..b89a32b --- /dev/null +++ b/styles/iconpacks/description.txt @@ -0,0 +1,102 @@ + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": ["product-images", "product-description"], + "props": { + "tabId": "description5" + } + }, \ No newline at end of file diff --git a/styles/iconpacks/tab-layout.txt b/styles/iconpacks/tab-layout.txt new file mode 100644 index 0000000..5078643 --- /dev/null +++ b/styles/iconpacks/tab-layout.txt @@ -0,0 +1,83 @@ +.container--description { + margin: 16px 40px; + + .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #bfbfbf; + + .listItem { + padding: 0; + margin: 0; + + :global(.vtex-button) { + background: white; + border: none; + + font-family: "Open Sans", sans-serif; + font-size: 18px; + text-transform: none; + + color: #bfbfbf; + + :global(.vtex-button__label) { + padding: 0; + } + } + } + + .listItemActive { + border-bottom: 2px solid black; + + :global(.vtex-button) { + color: black; + } + } + } + + .contentContainer { + .contentItem { + display: flex; + + :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px; + } + + :global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: 32px 32px 16px 32px; + } + + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; + } + + :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-top: 32px; + margin-left: 32px; + + :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-size: 24px; + line-height: 32px; + + color: #575757; + } + + :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-size: 16px; + line-height: 22px; + + color: #929292; + } + + :global(.vtex-store-components-3-x-container) { + padding: 0; + } + } + } + } +} 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..e69de29 From 1d58fbf2ee75e63ab791e31ce3e1e486457aeaf4 Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 7 Feb 2023 20:33:56 -0300 Subject: [PATCH 08/10] fix: estiliza shippingTable --- styles/css/vtex.flex-layout.css | 4 + styles/css/vtex.store-components.css | 66 ++++++++++----- styles/css/vtex.tab-layout.css | 65 +++++++++++++- styles/iconpacks/SPOILER_quemabrireboiola.txt | 63 ++++++++++++++ styles/iconpacks/SPOILER_quemlereboiola.txt | 18 ++++ .../sass/pages/product/vtex.flex-layout.scss | 6 ++ .../pages/product/vtex.store-components.scss | 84 ++++++++++++++----- .../sass/pages/product/vtex.tab-layout.scss | 83 ++++++++++++++++++ 8 files changed, 346 insertions(+), 43 deletions(-) create mode 100644 styles/iconpacks/SPOILER_quemabrireboiola.txt create mode 100644 styles/iconpacks/SPOILER_quemlereboiola.txt diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e8d6695..a0cb208 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -24,6 +24,10 @@ display: none; } +.flexRowContent--shipping-container .stretchChildrenWidth { + flex-direction: column; +} + .flexRowContent--button-container { margin-bottom: 10px; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index be6f256..d5366ed 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -116,7 +116,7 @@ line-height: 19px; color: #ffffff; } -.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { +.shippingContainer :global(.vtex-button__label) { height: 0; width: 0; } @@ -153,27 +153,59 @@ } .shippingTable { - border: 0; + border: none; + padding-top: unset; margin-top: 16px; - padding: 0; + table-layout: fixed; + width: 100%; + max-width: 362px; +} +.shippingTable .shippingTableRow { + display: flex; +} +.shippingTable .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0 0 15px 0; +} +.shippingTable .shippingTableRow .shippingTableCell .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryName { + width: 33%; + padding-left: 0; + order: 1; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate { + width: 33%; + padding-left: 0; + order: 3; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice { + width: 25%; + padding-left: 0; + order: 2; } .shippingTable .shippingTableHead { display: block; margin-bottom: 15px; } -.shippingTable .shippingTableHead .shippingTableHeadDeliveryName, -.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, -.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #202020; +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName { + width: 33%; + text-align: left; + order: 1; } -.shippingTable .shippingTableCell { - padding: 0 8px 15px 0; - font-size: 12px; - line-height: 16px; - color: #afafaf; +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { + width: 33%; + text-align: left; + order: 3; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + width: 25%; + text-align: left; + order: 2; } .newsletter { @@ -210,10 +242,6 @@ justify-content: end; } -:global(.vtex-store-components-3-x-shippingTableRadioBtn) { - display: none; -} - :global(.vtex-store-components-3-x-swiperCaretNext), :global(.vtex-store-components-3-x-swiperCaretPrev), :global(.vtex-store-components-3-x-swiper-pagination) { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c1f9f02..e60cd2a 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -7,4 +7,67 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--description { + margin: 16px 40px; +} +.container--description .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #bfbfbf; +} +.container--description .listContainer .listItem { + padding: 0; + margin: 0; +} +.container--description .listContainer .listItem :global(.vtex-button) { + background: white; + border: none; + font-family: "Open Sans", sans-serif; + font-size: 18px; + text-transform: none; + color: #bfbfbf; +} +.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; +} +.container--description .listContainer .listItemActive { + border-bottom: 2px solid black; +} +.container--description .listContainer .listItemActive :global(.vtex-button) { + color: black; +} +.container--description .contentContainer .contentItem { + display: flex; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: 32px 32px 16px 32px; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-top: 32px; + margin-left: 32px; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) { + padding: 0; +} \ No newline at end of file diff --git a/styles/iconpacks/SPOILER_quemabrireboiola.txt b/styles/iconpacks/SPOILER_quemabrireboiola.txt new file mode 100644 index 0000000..3c4c3d1 --- /dev/null +++ b/styles/iconpacks/SPOILER_quemabrireboiola.txt @@ -0,0 +1,63 @@ +.shippingTable { + border: none; + padding-top: unset; + margin-top: 16px; + table-layout: fixed; + width: 100%; + max-width: 362px; + + .shippingTableRow { + display: flex; + .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0 0 15px 0; + + .shippingTableRadioBtn { + display: none; + } + } + + .shippingTableCellDeliveryName { + width: 33%; + padding-left: 0; + order: 1; + } + + .shippingTableCellDeliveryEstimate { + width: 33%; + padding-left: 0; + order: 3; + } + + .shippingTableCellDeliveryPrice { + width: 25%; + padding-left: 0; + order: 2; + } + } + .shippingTableHead { + display: block; + margin-bottom: 15px; + + .shippingTableHeadDeliveryName { + width: 33%; + text-align: left; + order: 1; + } + + .shippingTableHeadDeliveryEstimate { + width: 33%; + text-align: left; + order: 3; + } + + .shippingTableHeadDeliveryPrice { + width: 25%; + text-align: left; + order: 2; + } + } +} \ No newline at end of file diff --git a/styles/iconpacks/SPOILER_quemlereboiola.txt b/styles/iconpacks/SPOILER_quemlereboiola.txt new file mode 100644 index 0000000..fe3c4e4 --- /dev/null +++ b/styles/iconpacks/SPOILER_quemlereboiola.txt @@ -0,0 +1,18 @@ +shippingTable{ +table-layout: fixed; +width: 100%; +max-width: 362px; +} +shippingTableHeadDeliveryName { order: 1; +width: 33%; +text-align: left; +}(definir os outros também) + +.vtex-store-components-3-x-shippingTableRow { + display: flex; +} + +shippingTableCellDeliveryPrice{ +width: 33%; +padding-left: 0; +}(definir os outros também) \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f8f31f2..6cbfb58 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -15,6 +15,12 @@ display: none; } +.flexRowContent--shipping-container { + .stretchChildrenWidth { + flex-direction: column; + } +} + .flexRowContent--button-container { margin-bottom: 10px; :global(.vtex-button) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e0a2b4c..4fe4064 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,6 @@ .container { padding: 0 40px; + .productNameContainer { font-weight: 300; font-size: 20px; @@ -23,6 +24,7 @@ &.skuSelectorItem--selected { border: 2px solid #000; + .diagonalCross { color: #000; border: 2px; @@ -115,10 +117,11 @@ line-height: 19px; color: #ffffff; } - :global(.vtex-button__label) { - height: 0; - width: 0; - } + } + + :global(.vtex-button__label) { + height: 0; + width: 0; } :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; @@ -155,27 +158,66 @@ } .shippingTable { - border: 0; + border: none; + padding-top: unset; margin-top: 16px; - padding: 0; + table-layout: fixed; + width: 100%; + max-width: 362px; + + .shippingTableRow { + display: flex; + .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0 0 15px 0; + + .shippingTableRadioBtn { + display: none; + } + } + + .shippingTableCellDeliveryName { + width: 33%; + padding-left: 0; + order: 1; + } + + .shippingTableCellDeliveryEstimate { + width: 33%; + padding-left: 0; + order: 3; + } + + .shippingTableCellDeliveryPrice { + width: 25%; + padding-left: 0; + order: 2; + } + } .shippingTableHead { display: block; margin-bottom: 15px; - .shippingTableHeadDeliveryName, - .shippingTableHeadDeliveryEstimate, - .shippingTableHeadDeliveryPrice { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #202020; + .shippingTableHeadDeliveryName { + width: 33%; + text-align: left; + order: 1; + } + + .shippingTableHeadDeliveryEstimate { + width: 33%; + text-align: left; + order: 3; + } + + .shippingTableHeadDeliveryPrice { + width: 25%; + text-align: left; + order: 2; } - } - .shippingTableCell { - padding: 0 8px 15px 0; - font-size: 12px; - line-height: 16px; - color: #afafaf; } } @@ -213,10 +255,6 @@ justify-content: end; } -:global(.vtex-store-components-3-x-shippingTableRadioBtn) { - display: none; -} - :global(.vtex-store-components-3-x-swiperCaretNext), :global(.vtex-store-components-3-x-swiperCaretPrev), :global(.vtex-store-components-3-x-swiper-pagination) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e69de29..5078643 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,83 @@ +.container--description { + margin: 16px 40px; + + .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #bfbfbf; + + .listItem { + padding: 0; + margin: 0; + + :global(.vtex-button) { + background: white; + border: none; + + font-family: "Open Sans", sans-serif; + font-size: 18px; + text-transform: none; + + color: #bfbfbf; + + :global(.vtex-button__label) { + padding: 0; + } + } + } + + .listItemActive { + border-bottom: 2px solid black; + + :global(.vtex-button) { + color: black; + } + } + } + + .contentContainer { + .contentItem { + display: flex; + + :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px; + } + + :global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: 32px 32px 16px 32px; + } + + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; + } + + :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-top: 32px; + margin-left: 32px; + + :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-size: 24px; + line-height: 32px; + + color: #575757; + } + + :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-size: 16px; + line-height: 22px; + + color: #929292; + } + + :global(.vtex-store-components-3-x-container) { + padding: 0; + } + } + } + } +} From 37e7301b0506f86a4fa85d75ba03af78cff9883e Mon Sep 17 00:00:00 2001 From: Naian Date: Wed, 8 Feb 2023 00:55:14 -0300 Subject: [PATCH 09/10] feat: adiciona titulo da prateleira --- store/blocks/pdp/product.jsonc | 18 ++++- styles/css/vtex.rich-text.css | 13 ++- styles/css/vtex.slider-layout.css | 4 +- styles/css/vtex.store-components.css | 75 +++++++++++++++--- styles/css/vtex.tab-layout.css | 9 +++ styles/sass/pages/product/vtex.rich-text.scss | 12 +++ .../pages/product/vtex.slider-layout.scss | 4 +- .../pages/product/vtex.store-components.scss | 79 ++++++++++++++++--- .../sass/pages/product/vtex.tab-layout.scss | 10 +++ 9 files changed, 198 insertions(+), 26 deletions(-) create mode 100644 styles/sass/pages/product/vtex.rich-text.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 17d9bcc..cf50609 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,10 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#description", + "rich-text#prateleira", "flex-layout.row#shelf", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter" ] }, @@ -19,6 +21,20 @@ ] }, + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + + "rich-text#prateleira": { + "props": { + "text": "Você também pode gostar:", + "blockClass": "title-shelf" + } + }, + "list-context.product-list#teste": { "blocks": ["product-summary.shelf#teste"], "children": ["slider-layout#prateleira"] diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index c1f9f02..6736e93 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,15 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--title-shelf { + text-align: center; + display: block !important; +} +.container--title-shelf .paragraph--title-shelf { + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 12px 0 0 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 96160dd..f7a5343 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,10 +11,10 @@ .sliderLayoutContainer { background-color: transparent; height: 630px; - margin: 12px 0 0 0; } .sliderLayoutContainer .sliderRightArrow, .sliderLayoutContainer .sliderLeftArrow { + bottom: 48%; margin: 0; padding: 0; } @@ -106,7 +106,7 @@ } :global(.vtex-slider-layout-0-x-sliderTrackContainer) { - margin: 32px 27px 32px 27px; + margin: 0 27px 32px 27px; } :global(.vtex-slider-layout-0-x-sliderTrack) { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d5366ed..d9a2814 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -130,14 +130,6 @@ display: none; } -.productImageTag { - object-fit: unset !important; - max-width: 664px; - width: 104% !important; - max-height: 664px !important; - margin-bottom: 16px; -} - .figure { height: 100%; } @@ -209,8 +201,63 @@ } .newsletter { - background: red; - display: block; + background: #000; + height: 175px; + padding: 32px 0 16px 0; +} +.newsletter .form { + max-width: 774px !important; +} +.newsletter .buttonContainer { + border-bottom: 3px solid #fff; + padding: 0; + height: 32px; +} +.newsletter .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #fff; + display: flex; + flex-direction: column; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + margin-top: 16px; + text-align: center; + color: #929292; +} +.newsletter .inputGroup { + border-bottom: 1px solid #fff; +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: 0; + height: 32px; + width: 100%; +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + font-weight: 400; + font-size: 18px; + height: 32px; + line-height: 25px; + color: #929292; + width: 100%; + padding: 0 0 7px 0; +} +.newsletter .inputGroup :global(.vtex-button) { + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + border: 0; +} +.newsletter .inputGroup :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 16px 13px 16px !important; + color: #fff; } :global(.vtex-input__label) { @@ -246,4 +293,12 @@ :global(.vtex-store-components-3-x-swiperCaretPrev), :global(.vtex-store-components-3-x-swiper-pagination) { display: none; +} + +:global(.vtex-store-components-3-x-productImageTag) { + object-fit: unset !important; + max-width: 664px; + width: 104% !important; + max-height: 664px !important; + margin-bottom: 16px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index e60cd2a..2b3d539 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,7 @@ /* Grid breakpoints */ .container--description { margin: 16px 40px; + height: 702px; } .container--description .listContainer { display: flex; @@ -46,8 +47,16 @@ max-width: 632px; max-height: 632px; } +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImageTag--main) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px !important; +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) { margin: 32px 32px 16px 32px; + height: 632px; + width: 632px; } .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) { display: none; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss new file mode 100644 index 0000000..3ca3f34 --- /dev/null +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,12 @@ +.container--title-shelf { + text-align: center; + display: block !important; + + .paragraph--title-shelf { + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + margin: 12px 0 0 0; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index fb491dd..edc518d 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,10 +1,10 @@ .sliderLayoutContainer { background-color: transparent; height: 630px; - margin: 12px 0 0 0; .sliderRightArrow, .sliderLeftArrow { + bottom: 48%; margin: 0; padding: 0; .caretIcon { @@ -99,7 +99,7 @@ } :global(.vtex-slider-layout-0-x-sliderTrackContainer) { - margin: 32px 27px 32px 27px; + margin: 0 27px 32px 27px; } :global(.vtex-slider-layout-0-x-sliderTrack) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4fe4064..be010c5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -135,14 +135,6 @@ } } -.productImageTag { - object-fit: unset !important; - max-width: 664px; - width: 104% !important; - max-height: 664px !important; - margin-bottom: 16px; -} - .figure { height: 100%; } @@ -222,8 +214,67 @@ } .newsletter { - background: red; - display: block; + background: #000; + height: 175px; + padding: 32px 0 16px 0; + + .form { + max-width: 774px !important; + } + + .buttonContainer { + border-bottom: 3px solid #fff; + padding: 0; + height: 32px; + } + + .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #fff; + display: flex; + flex-direction: column; + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + margin-top: 16px; + text-align: center; + color: #929292; + } + } + .inputGroup { + border-bottom: 1px solid #fff; + :global(.vtex-input-prefix__group) { + border: 0; + height: 32px; + width: 100%; + + :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + font-weight: 400; + font-size: 18px; + height: 32px; + line-height: 25px; + color: #929292; + width: 100%; + padding: 0 0 7px 0; + } + } + :global(.vtex-button) { + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + border: 0; + :global(.vtex-button__label) { + padding: 0 16px 13px 16px !important; + color: #fff; + } + } + } } :global(.vtex-input__label) { @@ -260,3 +311,11 @@ :global(.vtex-store-components-3-x-swiper-pagination) { display: none; } + +:global(.vtex-store-components-3-x-productImageTag) { + object-fit: unset !important; + max-width: 664px; + width: 104% !important; + max-height: 664px !important; + margin-bottom: 16px; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 5078643..b87fdbc 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,6 @@ .container--description { margin: 16px 40px; + height: 702px; .listContainer { display: flex; @@ -46,8 +47,17 @@ max-height: 632px; } + :global(.vtex-store-components-3-x-productImageTag--main) { + width: 100%; + height: 100%; + max-width: 632px; + max-height: 632px !important; + } + :global(.vtex-store-components-3-x-productImagesGallerySlide) { margin: 32px 32px 16px 32px; + height: 632px; + width: 632px; } :global(.vtex-store-components-3-x-carouselGaleryThumbs) { From 71b14634a1a01c494e3e817a90b0bfb25a4f7584 Mon Sep 17 00:00:00 2001 From: Naian Date: Sat, 11 Feb 2023 01:40:19 -0300 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20adiciona=20resolu=C3=A7=C3=B5es?= =?UTF-8?q?=204k=20e=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/iconPix.svg | 38 +++ react/PayWithPix.tsx | 3 + react/ProductContext.tsx | 36 ++ react/components/PayWithPix/PayWithPix.css | 33 ++ react/components/PayWithPix/PayWithPix.tsx | 24 ++ store/blocks/pdp/product.jsonc | 313 +++++++++++++----- store/interfaces.json | 6 + styles/css/agenciamagma.store-theme.css | 6 + styles/css/vtex.breadcrumb.css | 25 +- styles/css/vtex.flex-layout.css | 51 +++ styles/css/vtex.login.css | 6 + styles/css/vtex.product-price.css | 4 + styles/css/vtex.product-quantity.css | 5 + styles/css/vtex.rich-text.css | 30 +- styles/css/vtex.slider-layout.css | 42 +-- styles/css/vtex.store-components.css | 267 ++++++++++++++- styles/css/vtex.tab-layout.css | 57 +++- styles/iconpacks/SPOILER_dots.txt | 19 -- styles/iconpacks/SPOILER_quemabrireboiola.txt | 63 ---- styles/iconpacks/SPOILER_quemlereboiola.txt | 18 - styles/iconpacks/arrowdireita.svg | 3 - styles/iconpacks/arrowesquerda.svg | 3 - styles/iconpacks/description.txt | 102 ------ styles/iconpacks/tab-layout.txt | 83 ----- .../product/agenciamagma.store-theme.scss | 6 + .../sass/pages/product/vtex.breadcrumb.scss | 28 +- .../sass/pages/product/vtex.flex-layout.scss | 54 +++ styles/sass/pages/product/vtex.login.scss | 6 + .../pages/product/vtex.product-price.scss | 4 + .../pages/product/vtex.product-quantity.scss | 3 + styles/sass/pages/product/vtex.rich-text.scss | 25 +- .../pages/product/vtex.slider-layout.scss | 34 +- .../pages/product/vtex.store-components.scss | 261 ++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 45 ++- 34 files changed, 1207 insertions(+), 496 deletions(-) create mode 100644 assets/iconPix.svg create mode 100644 react/PayWithPix.tsx create mode 100644 react/ProductContext.tsx create mode 100644 react/components/PayWithPix/PayWithPix.css create mode 100644 react/components/PayWithPix/PayWithPix.tsx delete mode 100644 styles/iconpacks/SPOILER_dots.txt delete mode 100644 styles/iconpacks/SPOILER_quemabrireboiola.txt delete mode 100644 styles/iconpacks/SPOILER_quemlereboiola.txt delete mode 100644 styles/iconpacks/arrowdireita.svg delete mode 100644 styles/iconpacks/arrowesquerda.svg delete mode 100644 styles/iconpacks/description.txt delete mode 100644 styles/iconpacks/tab-layout.txt diff --git a/assets/iconPix.svg b/assets/iconPix.svg new file mode 100644 index 0000000..af826b6 --- /dev/null +++ b/assets/iconPix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/PayWithPix.tsx b/react/PayWithPix.tsx new file mode 100644 index 0000000..13fe3a0 --- /dev/null +++ b/react/PayWithPix.tsx @@ -0,0 +1,3 @@ +import { PayWithPix } from "./components/PayWithPix/PayWithPix"; + +export default PayWithPix; diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx new file mode 100644 index 0000000..fbdca5f --- /dev/null +++ b/react/ProductContext.tsx @@ -0,0 +1,36 @@ +import React, { useEffect, useState } from "react"; +import { useProduct } from "vtex.product-context"; + +const ProductContext = () => { + const productContext = useProduct(); + const [simulation, setSimulation] = useState(); + useEffect(() => { + fetch("/api/checkout/pub/orderForms/simulation?sc=1", { + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + method: "POST", + body: JSON.stringify({ + paymentData: { + payments: [{ paymentSystem: "125", installments: 1 }], + }, + items: [ + { + id: productContext?.selectedItem?.itemId, + quantity: 1, + seller: "1", + }, + ], + country: "BRA", + }), + }).then(async (res) => { + setSimulation(await res.json()); + }); + }, [productContext?.selectedItem]); + + console.log("productContext", productContext); + return <> {simulation?.paymentData?.payments[0]?.value}; +}; + +export default ProductContext; diff --git a/react/components/PayWithPix/PayWithPix.css b/react/components/PayWithPix/PayWithPix.css new file mode 100644 index 0000000..cef306a --- /dev/null +++ b/react/components/PayWithPix/PayWithPix.css @@ -0,0 +1,33 @@ +.PayWithPix { + display: flex; + column-gap: 26px; + align-items: center; + margin: 16px 0 24px; +} + +.PayWithPix__pixIcon { + width: 66px; + height: 24px; + display: block; +} + +.PayWithPix__wrapper { + display: flex; + flex-direction: column; +} + +.PayWithPix__price { + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + margin: 0; +} + +.PayWithPix__discount { + font-family: "Open Sans", sans-serif; + font-weight: 300; + font-size: 13px; + color: #929292; +} diff --git a/react/components/PayWithPix/PayWithPix.tsx b/react/components/PayWithPix/PayWithPix.tsx new file mode 100644 index 0000000..2f54ace --- /dev/null +++ b/react/components/PayWithPix/PayWithPix.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +import style from "./PayWithPix.css"; + +const PayWithPix = () => { + const productContextValue = useProduct(); + + const discount = + (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) * + 0.9; + const priceFormatted = discount?.toFixed(2).toString().replace(".", ","); + + return ( +
+
+

R$ {priceFormatted}

+ 10 % de desconto +
+
+ ); +}; + +export { PayWithPix }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cf50609..96417fd 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,62 +1,13 @@ { "store.product": { "children": [ - "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#description", "rich-text#prateleira", "flex-layout.row#shelf", "product-questions-and-answers", "newsletter" ] }, - - "product-summary.shelf#teste": { - "children": [ - "product-summary-image#shelf", - "product-summary-name", - "product-summary-space", - "product-list-price#summary", - "product-selling-price#summary" - ] - }, - - "newsletter": { - "props": { - "label": "Assine nossa newsletter", - "placeholder": "Digite seu e-mail" - } - }, - - "rich-text#prateleira": { - "props": { - "text": "Você também pode gostar:", - "blockClass": "title-shelf" - } - }, - - "list-context.product-list#teste": { - "blocks": ["product-summary.shelf#teste"], - "children": ["slider-layout#prateleira"] - }, - - "slider-layout#prateleira": { - "props": { - "itemsPerPage": { - "desktop": 4, - "tablet": 3, - "phone": 2 - }, - "infinite": true, - "showNavigationArrows": "desktopOnly", - "blockClass": "carousel" - } - }, - - "flex-layout.row#shelf": { - "children": ["list-context.product-list#teste"] - }, - "html#breadcrumb": { "props": { "tag": "section", @@ -65,14 +16,105 @@ }, "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { + + "html#imagens": { "props": { - "text": "##### Product Specifications" - } + "testId": "product-images" + }, + "children": ["flex-layout.row#product-image"] }, + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, + + "html#codigo": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#pixzap": { + "props": { + "testId": "pix-price" + }, + "children": ["flex-layout.row#pix"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["flex-layout.row#product-quantity"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#teste"] + }, + + "html#prateleira": { + "props": { + "blockClass": "prateleira", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-summary-space", + "product-list-price#summary", + "html#selling-price" + ] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], "props": { @@ -142,39 +184,79 @@ }, "tab-content.item#description1": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description1" } }, "tab-content.item#description2": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description2" } }, "tab-content.item#description3": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description3" } }, "tab-content.item#description4": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description4" } }, "tab-content.item#description5": { - "children": ["product-images", "product-description"], + "children": ["image#description", "product-description"], "props": { "tabId": "description5" } }, + + "image#description": { + "props": { + "blockClass": "image-description", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } + }, + + "rich-text#prateleira": { + "props": { + "blockClass": "title-shelf", + "text": "Você também pode gostar:" + } + }, + + "product-summary.shelf#teste": { + "children": ["html#prateleira"] + }, + + "list-context.product-list#teste": { + "blocks": ["product-summary.shelf#teste"], + "children": ["slider-layout#prateleira"] + }, + + "slider-layout#prateleira": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "blockClass": "carousel" + } + }, + + "flex-layout.row#shelf": { + "children": ["html#slider"] + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -188,6 +270,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "principal", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -195,15 +278,33 @@ "paddingTop": 7, "paddingBottom": 7 }, + "children": ["flex-layout.col#mainpage-col"] + }, + + "flex-layout.row#mainpage-row": { + "props": { + "blockClass": "mainpage-row" + }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, + "flex-layout.col#mainpage-col": { + "props": { + "blockClass": "mainpage-col" + }, + "children": [ + "html#breadcrumb", + "flex-layout.row#mainpage-row", + "html#product-description" + ] + }, + "stack-layout": { "props": { "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#imagens", "product-bookmark", "product-specification-badges" ] @@ -232,7 +333,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, "displayThumbnailsArrows": true, "thumbnailsOrientation": "horizontal" @@ -244,28 +345,42 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "sku-selector", - "product-assembly-options", - "product-gifts", + "html#product-installments", + "html#pixzap", + "html#sku-selector", "flex-layout.row#buy-box", "availability-subscriber", - "flex-layout.row#shipping", + "html#shipping-simulator", "share#default", "placeholder" ] }, - "flex-layout.row#shipping": { + "flex-layout.row#pix": { "props": { - "blockClass": "shipping-container" + "blockClass": "pix-container" }, - "children": ["shipping-simulator"] + "children": ["image#pix", "pay-with-pix"] + }, + + "image#pix": { + "props": { + "blockClass": "pix-image", + "src": "assets/iconPix.svg" + } + }, + + "product-installments": { + "props": { + "installmentsCriteria": "max-quantity-without-interest", + "markers": ["discount"], + "message": "ou {installmentsNumber}x de {installmentValue} sem juros" + } }, "flex-layout.row#product-name": { @@ -275,6 +390,14 @@ "children": ["vtex.store-components:product-name"] }, + "newsletter": { + "props": { + "blockClass": "newsletter", + "label": "Assine nossa Newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -283,15 +406,13 @@ }, "flex-layout.row#buy-box": { - "children": [ - "flex-layout.row#product-quantity", - "flex-layout.row#buy-button" - ], "props": { "colGap": 0, "blockClass": "buy-box", "colSizing": "auto" - } + }, + + "children": ["html#product-quantity", "flex-layout.row#buy-button"] }, "flex-layout.row#product-quantity": { @@ -306,11 +427,11 @@ "props": { "blockClass": "button-container", "marginTop": 4, + "marginBottom": 7, "preventHorizontalStretch": false, - "fullWidth": true, - "marginBottom": 7 + "fullWidth": true }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -320,11 +441,34 @@ "marginBottom": 7, "paddingTop": 7 }, + "children": ["flex-layout.row#mainpage-row-availability"] + }, + + "flex-layout.row#mainpage-row-availability": { + "props": { + "blockClass": "mainpage-row" + }, + "children": ["flex-layout.col#mainpage-col-availability"] + }, + + "flex-layout.row#teste": { "children": [ "flex-layout.col#stack", "flex-layout.col#right-col-availability" ] }, + + "flex-layout.col#mainpage-col-availability": { + "props": { + "blockClass": "mainpage-col" + }, + "children": [ + "html#breadcrumb", + "flex-layout.row#teste", + "html#product-description" + ] + }, + "flex-layout.col#right-col-availability": { "props": { "preventVerticalStretch": true, @@ -332,12 +476,13 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#codigo", + "flex-layout.row#availability", + "html#sku-selector" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/store/interfaces.json b/store/interfaces.json index d2358a8..c587e6b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -9,5 +9,11 @@ "placeholder": { "component": "placeholder" + }, + "product-context": { + "component": "ProductContext" + }, + "pay-with-pix": { + "component": "PayWithPix" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index e26e1ce..c73a8c3 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -18,4 +18,10 @@ .relative { display: none; +} + +.agenciamagma-store-theme-5-x-html--prateleira { + display: flex; + flex-direction: column; + height: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 9ba690a..3f0a375 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,25 +9,24 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ .container { - padding: 0px 40px 16px 40px; - display: flex; - align-items: center; + padding: 0; + font-size: 14px; } .container .homeIcon { display: none; } .container .homeLink { - display: none; -} -.container .homeLink .link--1 { padding-left: 0; } -.container .arrow--1 { - padding-left: 0; +.container .homeLink::before { + content: "Home"; + font-size: 14px; + line-height: 19px; + color: #929292; } -.container .arrow--1 .link--1 { - padding-left: 0; -} -.container .arrow--1 .caretIcon { - display: none; + +.agenciamagma-store-theme-5-x-html--prateleira { + display: flex; + flex-direction: column; + height: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a0cb208..afd54e1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,9 +12,26 @@ padding: 0; margin: 0; } +@media screen and (max-width: 1024px) { + .flexRowContent { + flex-direction: column; + } + .flexRowContent .flexRowContent--buy-box { + flex-direction: row; + } +} +@media screen and (max-width: 1024px) and (max-width: 768px) { + .flexRowContent .flexRowContent--buy-box { + flex-direction: column; + } +} .flexRowContent .flexColChild .product-identifier--productReference { float: right; } +.flexRowContent .pix-container .imageElement { + width: 66px; + height: 24px; +} .product-images { padding-left: 0; @@ -36,6 +53,19 @@ border: 0; height: 50px; margin-left: 10px; + border-radius: 0; +} +@media screen and (max-width: 768px) { + .flexRowContent--button-container :global(.vtex-button) { + margin: 0; + height: 74px; + margin-top: 10px; + } +} +@media screen and (max-width: 767px) { + .flexRowContent--button-container :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + padding: 0 56px; + } } .flexRow--buy-box .stretchChildrenWidth:nth-child(2n) { @@ -49,4 +79,25 @@ :global(.vtex-flex-layout-0-x-flexColChild) { order: -1; +} + +:global(.vtex-flex-layout-0-x-flexRow--pix-container) { + display: flex; + align-items: center; +} +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) { + flex-direction: row; + display: flex; + } +} +:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + display: flex; + align-items: center; + width: auto !important; + padding-right: 26px; +} +:global(.vtex-flex-layout-0-x-flexRow--pix-container) :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-imageElement) { + width: 66px; + height: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css index 5a2363e..6924fa4 100644 --- a/styles/css/vtex.login.css +++ b/styles/css/vtex.login.css @@ -12,4 +12,10 @@ .vtex-address-form__postalCode-forgottenURL a) { color: #000; +} + +:global(.agenciamagma-store-theme-5-x-html--prateleira) { + display: flex; + flex-direction: column; + height: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 569f299..704d51c 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -29,4 +29,8 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +:global(.vtex-product-price-1-x-listPrice) { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index d58c4ef..4d11689 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -28,6 +28,11 @@ border-left: 0; border-right: 0; } +@media screen and (max-width: 1024px) { + :global(.vtex-numeric-stepper__input) { + width: 44px; + } +} :global(.vtex-add-to-cart-button-0-x-buttonText) { font-size: 0; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 6736e93..fdff190 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -17,5 +17,33 @@ line-height: 38px; text-align: center; color: #575757; - margin: 12px 0 0 0; + margin: 0; +} +@media screen and (max-width: 767px) { + .container--title-shelf .paragraph--title-shelf { + font-size: 20px; + } +} + +:global(.vtex-input__error) { + display: none; +} + +:global(.vtex-store-components-3-x-imageElement--image-description) { + max-width: 632px; + max-height: 632px; + margin: 32px 0 0 32px; +} +@media screen and (min-width: 1920px) { + :global(.vtex-store-components-3-x-imageElement--image-description) { + max-width: unset; + max-height: unset; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-imageElement--image-description) { + max-width: 944px; + max-height: 944px; + margin-left: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index f7a5343..db58dd9 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,12 +12,21 @@ background-color: transparent; height: 630px; } +.sliderLayoutContainer .slide { + margin: 0 4px; +} .sliderLayoutContainer .sliderRightArrow, .sliderLayoutContainer .sliderLeftArrow { bottom: 48%; margin: 0; padding: 0; } +@media screen and (max-width: 1024px) { + .sliderLayoutContainer .sliderRightArrow, + .sliderLayoutContainer .sliderLeftArrow { + display: block; + } +} .sliderLayoutContainer .sliderRightArrow .caretIcon, .sliderLayoutContainer .sliderLeftArrow .caretIcon { display: none; @@ -58,30 +67,23 @@ border: 0.5px solid #000000; } -:global(.vtex-product-summary-2-x-imageContainer) { - width: 314px; - height: 314px; -} :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { max-height: 314px !important; } -:global(.vtex-product-price-1-x-listPrice) { - display: block; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - padding-bottom: 8px; -} - :global(.vtex-product-price-1-x-sellingPrice) { font-weight: 700; - font-size: 24px; - line-height: 33px; + font-size: 25px; + display: block; text-align: center; + line-height: 33px; color: #000000; } +@media screen and (max-width: 1024px) { + :global(.vtex-product-price-1-x-sellingPrice) { + font-size: 18px; + } +} :global(.vtex-product-summary-2-x-nameContainer) { padding-bottom: 8px; @@ -96,6 +98,11 @@ text-align: center; word-wrap: none; } +@media screen and (max-width: 1024px) { + :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px; + } +} :global(.vtex-product-summary-2-x-element) { padding: 0; @@ -115,9 +122,4 @@ :global(.vtex-slider-layout-0-x-slideChildrenContainer) { max-width: 314px; -} - -:global(.vtex-slider-layout-0-x-slide) { - width: 314px !important; - height: 448px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d9a2814..0fabb89 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,6 +12,12 @@ .container { padding: 0 40px; } +@media screen and (min-width: 1920px) { + .container { + max-width: 115rem !important; + padding: 0; + } +} .container .productNameContainer { font-weight: 300; font-size: 20px; @@ -19,6 +26,11 @@ text-align: end; margin-bottom: 8px; } +@media screen and (max-width: 1024px) { + .container .productNameContainer { + text-align: unset; + } +} .container .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -97,16 +109,25 @@ } .shippingContainer { - display: flex; + position: relative; + margin-top: 16px; + margin-bottom: 16px; +} +@media screen and (min-width: 768px) { + .shippingContainer { + max-width: 280px; + } } .shippingContainer :global(.vtex-button) { - width: 50px; - height: 50px; font-size: 0; - background-color: #000; - border: 0; - margin-top: 27px; - right: 7%; + background-color: black; + height: 50px; + max-width: 50px; + border: none; + border-radius: 0; + top: 27px; + position: absolute; + right: 0; } .shippingContainer :global(.vtex-button)::before { text-align: center; @@ -119,12 +140,25 @@ .shippingContainer :global(.vtex-button__label) { height: 0; width: 0; + padding: 0; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - position: absolute; - right: 12%; - bottom: 34%; text-decoration: underline; + position: absolute; + right: -50%; + top: calc(50% + 13.5px); + transform: translateY(-50%); + padding: 0; +} +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: unset; + display: block; + text-align: end; + width: 100%; + transform: none; + margin-top: 8px; + } } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; @@ -143,6 +177,14 @@ .carouselGaleryThumbs { margin: 0; } +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + display: block; + } +} +.carouselGaleryThumbs :global(.vtex-store-components-3-x-productImagesThumbCaret) { + display: none; +} .shippingTable { border: none; @@ -202,14 +244,38 @@ .newsletter { background: #000; - height: 175px; padding: 32px 0 16px 0; } +@media screen and (max-width: 1024px) { + .newsletter { + padding: 64px 0 16px 0; + } +} +@media screen and (max-width: 1024px) { + .newsletter .container { + padding: 0 16px; + } +} .newsletter .form { + justify-content: end; max-width: 774px !important; } +@media screen and (max-width: 1024px) { + .newsletter .form { + max-width: 992px !important; + } +} +.newsletter .form :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} +.newsletter .form :global(.vtex-button__label)::before { + display: none; +} .newsletter .buttonContainer { - border-bottom: 3px solid #fff; + border-bottom: 3px solid #bfbfbf; padding: 0; height: 32px; } @@ -218,7 +284,7 @@ font-size: 24px; line-height: 38px; text-align: center; - color: #fff; + color: #bfbfbf; display: flex; flex-direction: column; } @@ -230,8 +296,16 @@ text-align: center; color: #929292; } +@media screen and (max-width: 1024px) { + .newsletter .label::after { + font-size: 16px; + line-height: 22px; + } +} .newsletter .inputGroup { - border-bottom: 1px solid #fff; + border-bottom: 1px solid #929292; + flex-direction: row; + display: flex; } .newsletter .inputGroup :global(.vtex-input-prefix__group) { border: 0; @@ -248,6 +322,13 @@ width: 100%; padding: 0 0 7px 0; } +@media screen and (max-width: 1024px) { + .newsletter .inputGroup :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + padding-left: 16px; + } +} .newsletter .inputGroup :global(.vtex-button) { background-color: transparent; font-weight: 700; @@ -277,16 +358,29 @@ :global(.vtex-address-form__postalCode) { display: flex; padding: 0; + position: relative; +} +@media screen and (max-width: 768px) { + :global(.vtex-address-form__postalCode) { + flex-direction: column; + } } :global(.vtex-input-prefix__group) { height: 50px; - width: 280px; } :global(.vtex-product-identifier-0-x-product-identifier__value) { display: flex; justify-content: end; + margin-bottom: 24px; +} +@media screen and (max-width: 1024px) { + :global(.vtex-product-identifier-0-x-product-identifier__value) { + justify-content: unset; + font-size: 14px; + line-height: 19px; + } } :global(.vtex-store-components-3-x-swiperCaretNext), @@ -295,10 +389,147 @@ display: none; } +@media screen and (max-width: 1024px) { + .swiper-wrapper { + display: block; + } +} + :global(.vtex-store-components-3-x-productImageTag) { object-fit: unset !important; - max-width: 664px; - width: 104% !important; - max-height: 664px !important; margin-bottom: 16px; + max-height: 664px !important; +} +@media screen and (min-width: 1920px) { + :global(.vtex-store-components-3-x-productImageTag) { + max-height: unset !important; + max-width: unset; + height: 904px !important; + width: auto !important; + } +} +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-productImageTag) { + max-height: 944px !important; + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; + } +} + +:global(.vtex-store-components-3-x-form) { + justify-content: unset; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-button__label) { + font-size: 0; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-button__label)::before { + content: "AVISE-ME"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-submit) { + width: 100%; + max-width: 400px; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + max-width: 400px; + width: 100%; + height: 50px; + background-color: #000; + border-radius: 0; + border: 0; + color: #fff; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-input) { + margin: 0 0 16px 0; +} +:global(.vtex-store-components-3-x-form) :global(.vtex-input-prefix__group) { + height: 40px; + width: 100%; + border-radius: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} + +:global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +:global(.vtex-store-components-3-x-subscribeLabel)::before { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: auto !important; + padding: 0; + } +} +.subscriberContainer :global(.vtex-store-components-3-x-title) { + font-size: 0; +} +.subscriberContainer :global(.vtex-store-components-3-x-title)::before { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 10px; + width: 100%; + max-width: 400px; +} +.subscriberContainer .submit { + grid-column: span 2; +} + +:global(.vtex-store-components-3-x-pointerEventsAuto) { + display: none; +} + +:global(.vtex-product-price-1-x-listPrice) { + display: block; + text-align: center; + font-size: 12px; + line-height: 16px; + text-decoration-line: line-through; + color: #bababa; +} +:global(.vtex-product-price-1-x-listPrice)::before { + padding-right: 4px; + content: "de"; + font-size: 12px; + line-height: 16px; + text-align: center; + color: #bababa; +} +:global(.vtex-product-price-1-x-listPrice)::after { + content: "por"; + padding-left: 4px; + font-size: 12px; + line-height: 16px; + text-align: center; + color: #bababa; +} + +.thumbImg { + border-radius: 8px; +} + +.thumbImg--video { + height: 90px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2b3d539..e268fa7 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,14 +9,26 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); /* Grid breakpoints */ .container--description { - margin: 16px 40px; - height: 702px; + max-height: auto; + margin-bottom: 16px; +} +@media screen and (max-width: 1024px) { + .container--description { + max-height: auto; + border-bottom: 1px solid #bfbfbf; + } } .container--description .listContainer { display: flex; justify-content: space-around; border-bottom: 1px solid #bfbfbf; } +@media screen and (max-width: 1024px) { + .container--description .listContainer { + flex-direction: column; + border-top: 1px solid #bfbfbf; + } +} .container--description .listContainer .listItem { padding: 0; margin: 0; @@ -24,6 +36,9 @@ .container--description .listContainer .listItem :global(.vtex-button) { background: white; border: none; + width: 100%; + display: flex; + justify-content: start; font-family: "Open Sans", sans-serif; font-size: 18px; text-transform: none; @@ -35,29 +50,49 @@ .container--description .listContainer .listItemActive { border-bottom: 2px solid black; } +@media screen and (max-width: 1024px) { + .container--description .listContainer .listItemActive { + border: 0; + } +} .container--description .listContainer .listItemActive :global(.vtex-button) { color: black; } .container--description .contentContainer .contentItem { display: flex; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem { + flex-direction: column; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { - width: 100%; - height: 100%; - max-width: 632px; max-height: 632px; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + max-height: 976px; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImageTag--main) { - width: 100%; - height: 100%; - max-width: 632px; max-height: 632px !important; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImageTag--main) { + max-height: 944px !important; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) { margin: 32px 32px 16px 32px; height: 632px; width: 632px; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) { + height: 994px; + margin-left: 0; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) { display: none; } @@ -65,6 +100,11 @@ margin-top: 32px; margin-left: 32px; } +@media screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + margin-left: 0; + } +} .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { font-family: "Open Sans", sans-serif; font-size: 24px; @@ -75,6 +115,7 @@ font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; + margin-bottom: 16px; color: #929292; } .container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) { diff --git a/styles/iconpacks/SPOILER_dots.txt b/styles/iconpacks/SPOILER_dots.txt deleted file mode 100644 index 1da924a..0000000 --- a/styles/iconpacks/SPOILER_dots.txt +++ /dev/null @@ -1,19 +0,0 @@ -.paginationDotsContainer { - display: flex; - align-items: center; - margin-bottom: 64px; - - .paginationDot { - width: 10px; - height: 10px; - background-color: black; - border: none; - } - - .paginationDot--isActive { - width: 17px !important; - height: 17px !important; - background-color: white; - border: 0.5px solid #000000; - } - } \ No newline at end of file diff --git a/styles/iconpacks/SPOILER_quemabrireboiola.txt b/styles/iconpacks/SPOILER_quemabrireboiola.txt deleted file mode 100644 index 3c4c3d1..0000000 --- a/styles/iconpacks/SPOILER_quemabrireboiola.txt +++ /dev/null @@ -1,63 +0,0 @@ -.shippingTable { - border: none; - padding-top: unset; - margin-top: 16px; - table-layout: fixed; - width: 100%; - max-width: 362px; - - .shippingTableRow { - display: flex; - .shippingTableCell { - font-family: "Open Sans", sans-serif; - font-size: 12px; - line-height: 16px; - color: #afafaf; - padding: 0 0 15px 0; - - .shippingTableRadioBtn { - display: none; - } - } - - .shippingTableCellDeliveryName { - width: 33%; - padding-left: 0; - order: 1; - } - - .shippingTableCellDeliveryEstimate { - width: 33%; - padding-left: 0; - order: 3; - } - - .shippingTableCellDeliveryPrice { - width: 25%; - padding-left: 0; - order: 2; - } - } - .shippingTableHead { - display: block; - margin-bottom: 15px; - - .shippingTableHeadDeliveryName { - width: 33%; - text-align: left; - order: 1; - } - - .shippingTableHeadDeliveryEstimate { - width: 33%; - text-align: left; - order: 3; - } - - .shippingTableHeadDeliveryPrice { - width: 25%; - text-align: left; - order: 2; - } - } -} \ No newline at end of file diff --git a/styles/iconpacks/SPOILER_quemlereboiola.txt b/styles/iconpacks/SPOILER_quemlereboiola.txt deleted file mode 100644 index fe3c4e4..0000000 --- a/styles/iconpacks/SPOILER_quemlereboiola.txt +++ /dev/null @@ -1,18 +0,0 @@ -shippingTable{ -table-layout: fixed; -width: 100%; -max-width: 362px; -} -shippingTableHeadDeliveryName { order: 1; -width: 33%; -text-align: left; -}(definir os outros também) - -.vtex-store-components-3-x-shippingTableRow { - display: flex; -} - -shippingTableCellDeliveryPrice{ -width: 33%; -padding-left: 0; -}(definir os outros também) \ No newline at end of file diff --git a/styles/iconpacks/arrowdireita.svg b/styles/iconpacks/arrowdireita.svg deleted file mode 100644 index 092f80e..0000000 --- a/styles/iconpacks/arrowdireita.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/styles/iconpacks/arrowesquerda.svg b/styles/iconpacks/arrowesquerda.svg deleted file mode 100644 index 217a30d..0000000 --- a/styles/iconpacks/arrowesquerda.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/styles/iconpacks/description.txt b/styles/iconpacks/description.txt deleted file mode 100644 index b89a32b..0000000 --- a/styles/iconpacks/description.txt +++ /dev/null @@ -1,102 +0,0 @@ - "tab-layout#description": { - "children": ["tab-list#description", "tab-content#description"], - "props": { - "blockClass": "description", - "defaultActiveTabId": "description1" - } - }, - - "tab-list#description": { - "children": [ - "tab-list.item#description1", - "tab-list.item#description2", - "tab-list.item#description3", - "tab-list.item#description4", - "tab-list.item#description5" - ] - }, - - "tab-list.item#description1": { - "props": { - "tabId": "description1", - "label": "Descrição", - "defaultActiveTab": true - } - }, - - "tab-list.item#description2": { - "props": { - "tabId": "description2", - "label": "Descrição", - "defaultActiveTab": false - } - }, - - "tab-list.item#description3": { - "props": { - "tabId": "description3", - "label": "Descrição", - "defaultActiveTab": false - } - }, - - "tab-list.item#description4": { - "props": { - "tabId": "description4", - "label": "Descrição", - "defaultActiveTab": false - } - }, - - "tab-list.item#description5": { - "props": { - "tabId": "description5", - "label": "Descrição", - "defaultActiveTab": false - } - }, - - "tab-content#description": { - "children": [ - "tab-content.item#description1", - "tab-content.item#description2", - "tab-content.item#description3", - "tab-content.item#description4", - "tab-content.item#description5" - ] - }, - - "tab-content.item#description1": { - "children": ["product-images", "product-description"], - "props": { - "tabId": "description1" - } - }, - - "tab-content.item#description2": { - "children": ["product-images", "product-description"], - "props": { - "tabId": "description2" - } - }, - - "tab-content.item#description3": { - "children": ["product-images", "product-description"], - "props": { - "tabId": "description3" - } - }, - - "tab-content.item#description4": { - "children": ["product-images", "product-description"], - "props": { - "tabId": "description4" - } - }, - - "tab-content.item#description5": { - "children": ["product-images", "product-description"], - "props": { - "tabId": "description5" - } - }, \ No newline at end of file diff --git a/styles/iconpacks/tab-layout.txt b/styles/iconpacks/tab-layout.txt deleted file mode 100644 index 5078643..0000000 --- a/styles/iconpacks/tab-layout.txt +++ /dev/null @@ -1,83 +0,0 @@ -.container--description { - margin: 16px 40px; - - .listContainer { - display: flex; - justify-content: space-around; - border-bottom: 1px solid #bfbfbf; - - .listItem { - padding: 0; - margin: 0; - - :global(.vtex-button) { - background: white; - border: none; - - font-family: "Open Sans", sans-serif; - font-size: 18px; - text-transform: none; - - color: #bfbfbf; - - :global(.vtex-button__label) { - padding: 0; - } - } - } - - .listItemActive { - border-bottom: 2px solid black; - - :global(.vtex-button) { - color: black; - } - } - } - - .contentContainer { - .contentItem { - display: flex; - - :global(.vtex-store-components-3-x-productImagesContainer) { - width: 100%; - height: 100%; - max-width: 632px; - max-height: 632px; - } - - :global(.vtex-store-components-3-x-productImagesGallerySlide) { - margin: 32px 32px 16px 32px; - } - - :global(.vtex-store-components-3-x-carouselGaleryThumbs) { - display: none; - } - - :global(.vtex-store-components-3-x-productDescriptionContainer) { - margin-top: 32px; - margin-left: 32px; - - :global(.vtex-store-components-3-x-productDescriptionTitle) { - font-family: "Open Sans", sans-serif; - font-size: 24px; - line-height: 32px; - - color: #575757; - } - - :global(.vtex-store-components-3-x-productDescriptionText) { - font-family: "Open Sans", sans-serif; - font-size: 16px; - line-height: 22px; - - color: #929292; - } - - :global(.vtex-store-components-3-x-container) { - padding: 0; - } - } - } - } -} diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index e26e567..2e7070e 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -9,3 +9,9 @@ .relative { display: none; } + +.agenciamagma-store-theme-5-x-html--prateleira { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 682bd25..79d5d81 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,23 +1,23 @@ .container { - padding: 0px 40px 16px 40px; - display: flex; - align-items: center; + padding: 0; + font-size: 14px; + .homeIcon { display: none; } .homeLink { - display: none; - .link--1 { - padding-left: 0; - } - } - .arrow--1 { padding-left: 0; - .link--1 { - padding-left: 0; - } - .caretIcon { - display: none; + &::before { + content: "Home"; + font-size: 14px; + line-height: 19px; + color: #929292; } } } + +.agenciamagma-store-theme-5-x-html--prateleira { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 6cbfb58..c82e857 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,11 +1,29 @@ .flexRowContent { padding: 0; margin: 0; + @media screen and (max-width: 1024px) { + flex-direction: column; + + .flexRowContent--buy-box { + flex-direction: row; + @media screen and (max-width: 768px) { + flex-direction: column; + } + } + } + .flexColChild { .product-identifier--productReference { float: right; } } + + .pix-container { + .imageElement { + width: 66px; + height: 24px; + } + } } .product-images { padding-left: 0; @@ -23,11 +41,23 @@ .flexRowContent--button-container { margin-bottom: 10px; + :global(.vtex-button) { background-color: #000; border: 0; height: 50px; margin-left: 10px; + border-radius: 0; + @media screen and (max-width: 768px) { + margin: 0; + height: 74px; + margin-top: 10px; + } + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + @media screen and (max-width: 767px) { + padding: 0 56px; + } + } } } @@ -45,3 +75,27 @@ :global(.vtex-flex-layout-0-x-flexColChild) { order: -1; } + +:global(.vtex-flex-layout-0-x-flexRow--pix-container) { + display: flex; + align-items: center; + + :global(.vtex-flex-layout-0-x-flexRowContent--pix-container) { + @media screen and (max-width: 1024px) { + flex-direction: row; + display: flex; + } + + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + display: flex; + align-items: center; + width: auto !important; + padding-right: 26px; + + :global(.vtex-store-components-3-x-imageElement) { + width: 66px; + height: 24px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss index 78cb960..54d8953 100644 --- a/styles/sass/pages/product/vtex.login.scss +++ b/styles/sass/pages/product/vtex.login.scss @@ -3,3 +3,9 @@ a) { color: #000; } + +:global(.agenciamagma-store-theme-5-x-html--prateleira) { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 4691566..c270ce3 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -19,3 +19,7 @@ line-height: 22px; color: #929292; } + +:global(.vtex-product-price-1-x-listPrice) { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 51d76a8..ab5fa93 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -16,6 +16,9 @@ :global(.vtex-numeric-stepper__input) { border-left: 0; border-right: 0; + @media screen and (max-width: 1024px) { + width: 44px; + } } :global(.vtex-add-to-cart-button-0-x-buttonText) { diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 3ca3f34..9c32fcb 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -7,6 +7,29 @@ line-height: 38px; text-align: center; color: #575757; - margin: 12px 0 0 0; + margin: 0; + @media screen and (max-width: 767px) { + font-size: 20px; + } + } +} + +:global(.vtex-input__error) { + display: none; +} + +:global(.vtex-store-components-3-x-imageElement--image-description) { + max-width: 632px; + max-height: 632px; + margin: 32px 0 0 32px; + + @media screen and (min-width: 1920px) { + max-width: unset; + max-height: unset; + } + @media screen and (max-width: 1024px) { + max-width: 944px; + max-height: 944px; + margin-left: 0; } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index edc518d..40eab6f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,11 +2,18 @@ background-color: transparent; height: 630px; + .slide { + margin: 0 4px; + } + .sliderRightArrow, .sliderLeftArrow { bottom: 48%; margin: 0; padding: 0; + @media screen and (max-width: 1024px) { + display: block; + } .caretIcon { display: none; } @@ -52,28 +59,21 @@ } :global(.vtex-product-summary-2-x-imageContainer) { - width: 314px; - height: 314px; :global(.vtex-product-summary-2-x-imageNormal) { max-height: 314px !important; } } -:global(.vtex-product-price-1-x-listPrice) { - display: block; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - padding-bottom: 8px; -} - :global(.vtex-product-price-1-x-sellingPrice) { font-weight: 700; - font-size: 24px; - line-height: 33px; + font-size: 25px; + display: block; text-align: center; + line-height: 33px; color: #000000; + @media screen and (max-width: 1024px) { + font-size: 18px; + } } :global(.vtex-product-summary-2-x-nameContainer) { @@ -87,6 +87,9 @@ color: #000000; text-align: center; word-wrap: none; + @media screen and (max-width: 1024px) { + font-size: 14px; + } } } @@ -109,8 +112,3 @@ :global(.vtex-slider-layout-0-x-slideChildrenContainer) { max-width: 314px; } - -:global(.vtex-slider-layout-0-x-slide) { - width: 314px !important; - height: 448px; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index be010c5..29b72b4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,11 @@ .container { padding: 0 40px; + @media screen and (min-width: 1920px) { + max-width: 115rem !important; + padding: 0; + } + .productNameContainer { font-weight: 300; font-size: 20px; @@ -8,6 +13,9 @@ color: #575757; text-align: end; margin-bottom: 8px; + @media screen and (max-width: 1024px) { + text-align: unset; + } } .skuSelectorContainer { display: flex; @@ -99,15 +107,23 @@ } .shippingContainer { - display: flex; + position: relative; + margin-top: 16px; + margin-bottom: 16px; + @media screen and (min-width: 768px) { + max-width: 280px; + } + :global(.vtex-button) { - width: 50px; - height: 50px; font-size: 0; - background-color: #000; - border: 0; - margin-top: 27px; - right: 7%; + background-color: black; + height: 50px; + max-width: 50px; + border: none; + border-radius: 0; + top: 27px; + position: absolute; + right: 0; &::before { text-align: center; @@ -122,12 +138,24 @@ :global(.vtex-button__label) { height: 0; width: 0; + padding: 0; } + :global(.vtex-address-form__postalCode-forgottenURL) { - position: absolute; - right: 12%; - bottom: 34%; text-decoration: underline; + position: absolute; + right: -50%; + top: calc(50% + 13.5px); + transform: translateY(-50%); + padding: 0; + @media screen and (max-width: 768px) { + position: unset; + display: block; + text-align: end; + width: 100%; + transform: none; + margin-top: 8px; + } :global(.vtex__icon-external-link) { display: none; @@ -147,6 +175,12 @@ .carouselGaleryThumbs { margin: 0; + @media screen and (max-width: 1024px) { + display: block; + } + :global(.vtex-store-components-3-x-productImagesThumbCaret) { + display: none; + } } .shippingTable { @@ -215,15 +249,39 @@ .newsletter { background: #000; - height: 175px; padding: 32px 0 16px 0; + @media screen and (max-width: 1024px) { + padding: 64px 0 16px 0; + } + + .container { + @media screen and (max-width: 1024px) { + padding: 0 16px; + } + } + .form { + justify-content: end; max-width: 774px !important; + + @media screen and (max-width: 1024px) { + max-width: 992px !important; + } + + :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; + &::before { + display: none; + } + } } .buttonContainer { - border-bottom: 3px solid #fff; + border-bottom: 3px solid #bfbfbf; padding: 0; height: 32px; } @@ -233,7 +291,7 @@ font-size: 24px; line-height: 38px; text-align: center; - color: #fff; + color: #bfbfbf; display: flex; flex-direction: column; &::after { @@ -243,10 +301,17 @@ margin-top: 16px; text-align: center; color: #929292; + @media screen and (max-width: 1024px) { + font-size: 16px; + line-height: 22px; + } } } .inputGroup { - border-bottom: 1px solid #fff; + border-bottom: 1px solid #929292; + flex-direction: row; + display: flex; + :global(.vtex-input-prefix__group) { border: 0; height: 32px; @@ -261,6 +326,11 @@ color: #929292; width: 100%; padding: 0 0 7px 0; + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + padding-left: 16px; + } } } :global(.vtex-button) { @@ -294,16 +364,25 @@ :global(.vtex-address-form__postalCode) { display: flex; padding: 0; + position: relative; + @media screen and (max-width: 768px) { + flex-direction: column; + } } :global(.vtex-input-prefix__group) { height: 50px; - width: 280px; } :global(.vtex-product-identifier-0-x-product-identifier__value) { display: flex; justify-content: end; + margin-bottom: 24px; + @media screen and (max-width: 1024px) { + justify-content: unset; + font-size: 14px; + line-height: 19px; + } } :global(.vtex-store-components-3-x-swiperCaretNext), @@ -312,10 +391,156 @@ display: none; } +.swiper-wrapper { + @media screen and (max-width: 1024px) { + display: block; + } +} + :global(.vtex-store-components-3-x-productImageTag) { object-fit: unset !important; - max-width: 664px; - width: 104% !important; - max-height: 664px !important; margin-bottom: 16px; + max-height: 664px !important; + + @media screen and (min-width: 1920px) { + max-height: unset !important; + max-width: unset; + height: 904px !important; + width: auto !important; + } + + @media screen and (max-width: 1024px) { + max-height: 944px !important; + } +} + +:global(.vtex-store-components-3-x-carouselContainer) { + @media screen and (max-width: 1024px) { + margin-bottom: 32px; + } +} + +:global(.vtex-store-components-3-x-form) { + justify-content: unset; + + :global(.vtex-button__label) { + font-size: 0; + &::before { + content: "AVISE-ME"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } + } + + :global(.vtex-store-components-3-x-submit) { + width: 100%; + max-width: 400px; + + :global(.vtex-button) { + max-width: 400px; + width: 100%; + height: 50px; + background-color: #000; + border-radius: 0; + border: 0; + color: #fff; + } + } + + :global(.vtex-store-components-3-x-input) { + margin: 0 0 16px 0; + } + + :global(.vtex-input-prefix__group) { + height: 40px; + width: 100%; + border-radius: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } +} + +:global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + &::before { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: auto !important; + padding: 0; + } + } +} + +.subscriberContainer { + :global(.vtex-store-components-3-x-title) { + font-size: 0; + &::before { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + } + :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 10px; + width: 100%; + max-width: 400px; + } + .submit { + grid-column: span 2; + } +} + +:global(.vtex-store-components-3-x-pointerEventsAuto) { + display: none; +} + +:global(.vtex-product-price-1-x-listPrice) { + display: block; + text-align: center; + font-size: 12px; + line-height: 16px; + text-decoration-line: line-through; + + color: #bababa; + &::before { + padding-right: 4px; + content: "de"; + font-size: 12px; + line-height: 16px; + text-align: center; + color: #bababa; + } + &::after { + content: "por"; + padding-left: 4px; + font-size: 12px; + line-height: 16px; + text-align: center; + color: #bababa; + } +} + +.thumbImg { + border-radius: 8px; +} + +.thumbImg--video { + height: 90px; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index b87fdbc..5c3437a 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,11 +1,19 @@ .container--description { - margin: 16px 40px; - height: 702px; + max-height: auto; + margin-bottom: 16px; + @media screen and (max-width: 1024px) { + max-height: auto; + border-bottom: 1px solid #bfbfbf; + } .listContainer { display: flex; justify-content: space-around; border-bottom: 1px solid #bfbfbf; + @media screen and (max-width: 1024px) { + flex-direction: column; + border-top: 1px solid #bfbfbf; + } .listItem { padding: 0; @@ -14,7 +22,9 @@ :global(.vtex-button) { background: white; border: none; - + width: 100%; + display: flex; + justify-content: start; font-family: "Open Sans", sans-serif; font-size: 18px; text-transform: none; @@ -29,6 +39,9 @@ .listItemActive { border-bottom: 2px solid black; + @media screen and (max-width: 1024px) { + border: 0; + } :global(.vtex-button) { color: black; @@ -39,25 +52,33 @@ .contentContainer { .contentItem { display: flex; + @media screen and (max-width: 1024px) { + flex-direction: column; + } :global(.vtex-store-components-3-x-productImagesContainer) { - width: 100%; - height: 100%; - max-width: 632px; max-height: 632px; + @media screen and (max-width: 1024px) { + max-height: 976px; + } } :global(.vtex-store-components-3-x-productImageTag--main) { - width: 100%; - height: 100%; - max-width: 632px; max-height: 632px !important; + + @media screen and (max-width: 1024px) { + max-height: 944px !important; + } } :global(.vtex-store-components-3-x-productImagesGallerySlide) { margin: 32px 32px 16px 32px; height: 632px; width: 632px; + @media screen and (max-width: 1024px) { + height: 994px; + margin-left: 0; + } } :global(.vtex-store-components-3-x-carouselGaleryThumbs) { @@ -68,6 +89,10 @@ margin-top: 32px; margin-left: 32px; + @media screen and (max-width: 1024px) { + margin-left: 0; + } + :global(.vtex-store-components-3-x-productDescriptionTitle) { font-family: "Open Sans", sans-serif; font-size: 24px; @@ -80,7 +105,7 @@ font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; - + margin-bottom: 16px; color: #929292; }