From 609d86e8d8640edb8605a3f80189e36994b4b8be Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 7 Feb 2023 13:43:25 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20da?= =?UTF-8?q?=20parte=20de=20cima=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/components/Html/index.tsx | 79 +- react/placeholder.tsx | 14 + store/blocks/pdp/product.jsonc | 42 +- store/interfaces.json | 3 + styles/configs/style.json | 688 +++++++++--------- styles/css/agenciamagma.store-theme.css | 3 +- styles/css/vtex.address-form.css | 9 + styles/css/vtex.breadcrumb.css | 25 + styles/css/vtex.flex-layout.css | 120 +-- styles/css/vtex.login.css | 15 + styles/css/vtex.numeric-stepper.css | 12 + styles/css/vtex.product-price.css | 99 +-- styles/css/vtex.product-quantity.css | 47 ++ styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 312 +++++++- styles/css/vtex.tab-layout.css | 73 ++ .../product/agenciamagma.store-theme.scss | 3 +- .../sass/pages/product/vtex.breadcrumb.scss | 17 + .../sass/pages/product/vtex.flex-layout.scss | 25 + styles/sass/pages/product/vtex.login.scss | 5 + .../pages/product/vtex.product-price.scss | 24 + .../pages/product/vtex.product-quantity.scss | 37 + .../pages/product/vtex.store-components.scss | 353 ++++++++- styles/sass/utils/_vars.scss | 24 +- 25 files changed, 1463 insertions(+), 568 deletions(-) create mode 100644 react/placeholder.tsx create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.login.css create mode 100644 styles/css/vtex.numeric-stepper.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.login.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.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/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/react/placeholder.tsx b/react/placeholder.tsx new file mode 100644 index 0000000..aeeb7e0 --- /dev/null +++ b/react/placeholder.tsx @@ -0,0 +1,14 @@ +import React, { useEffect } from "react"; + +const placeholder = () => { + useEffect(() => { + setTimeout(() => { + const exemplo = document.querySelector(".vtex-address-form-4-x-input"); + exemplo?.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 6a916dc..579d643 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -26,12 +26,14 @@ "text": "##### Product Specifications" } }, + "flex-layout.row#description": { "props": { "marginBottom": 7 }, "children": ["product-description"] }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -78,7 +80,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "51%", "rowGap": 0 } }, @@ -91,7 +93,8 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": true, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { @@ -101,20 +104,19 @@ }, "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-quantity", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#buy-box", "availability-subscriber", "shipping-simulator", - "share#default" + "share#default", + "placeholder" ] }, @@ -132,10 +134,34 @@ } }, + "flex-layout.row#buy-box": { + "props": { + "colGap": 0, + "blockClass": "buy-box", + "colSizing": "auto" + }, + + "children": [ + "flex-layout.row#product-quantity", + "flex-layout.row#buy-button" + ] + }, + + "flex-layout.row#product-quantity": { + "props": { + "preventHorizontalStretch": true + }, + + "children": ["product-quantity"] + }, + "flex-layout.row#buy-button": { "props": { + "blockClass": "buy-button-container", "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "preventHorizontalStretch": false, + "fullWidth": true }, "children": ["add-to-cart-button"] }, diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..9193346 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "placeholder": { + "component": "placeholder" } } 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..7f0a2f5 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,12 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,9 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..72451a6 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,25 @@ +/* +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&family=Roboto:wght@400;500;700&display=swap"); +/* Grid breakpoints */ +.container { + font-size: 14px; + line-height: 19px; + padding: 0 40px 16px 40px; +} +.container .homeIconm, +.container .homeLink { + display: none; +} +.container .arrow--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 a7c5732..84ff0e2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,34 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;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 (max-width: 1024px) { + .flexRowContent { + display: flex; + flex-direction: column; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } +.flexRowContent--buy-button-container { + margin-bottom: 16px; +} +.flexRowContent--buy-button-container :global(.vtex-button) { + background-color: black; + border: none; + height: 50px; + margin-left: 10px; } -.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; -} +.flexRow--buy-box .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; +} \ 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..ab98158 --- /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&family=Roboto:wght@400;500;700&display=swap"); +/* Grid breakpoints */ +:global(.vtex-address-form__postalCode + .vtex-address-form__postalCode-forgottenURL + a) { + color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..cff6c35 --- /dev/null +++ b/styles/css/vtex.numeric-stepper.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.numeric-stepper__input { + height: 49px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..1fa8ccf 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&family=Roboto:wght@400;500;700&display=swap"); +/* Grid breakpoints */ +.listPrice, +.savings { + display: none; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +.sellingPrice--hasListPrice { + font-family: "Open Sans"; + 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"; + 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..4051955 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,47 @@ +@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&family=Roboto:wght@400;500;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} + +:global(.vtex-numeric-stepper__plus-button), +:global(.vtex-numeric-stepper__minus-button), +:global(.vtex-numeric-stepper__input) { + height: 50px; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +:global(.vtex-numeric-stepper__plus-button) { + color: black; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +: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.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..2959ac9 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&family=Roboto:wght@400;500;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..e800822 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,7 +6,317 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); /* Grid breakpoints */ -.newsletter { +.container { + padding: 0 40px; +} +.container .newsletter { background: red; +} +.container .productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +.container .skuSelectorContainer { + display: flex; + flex-direction: column; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor { + order: 2; + margin-bottom: 10px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer::before { + content: "Outras Cores: "; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList { + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; + margin-left: 0; + margin-right: 16px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .frameAround { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected { + width: 40px; + height: 40px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid black; + border-radius: 50%; + z-index: unset; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho { + order: 1; + margin-bottom: 10px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer::before { + content: "Outros Tamanhos:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList { + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; + margin-left: 0; + margin-right: 16px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .frameAround { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); + padding: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected { + width: 40px; + height: 40px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid black; + border-radius: 50%; + z-index: unset; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: black; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross { + width: 10px; + margin: 0 auto; + color: black; + transform: rotate(60deg); +} +.container .skuSelectorContainer .diagonalCross { + width: 10px; + margin: 0 auto; + color: #d5d5d5; + transform: rotate(60deg); +} + +:global(.vtex-input__label) { + font-size: 0; +} +:global(.vtex-input__label)::before { + content: "Calcular frete:"; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #929292; +} + +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + font-size: 0; + background-color: black; + height: 50px; + max-width: 50px; + border: none; + border-radius: 0; + top: 27px; +} +.shippingContainer :global(.vtex-button)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + width: unset; + height: unset; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 50px; +} +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} + +.shippingTable { + border: none; + padding-top: unset; + margin-top: 16px; + 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 { + width: 33%; + text-align: left; + order: 1; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { + width: 33%; + text-align: left; + order: 3; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + width: 25%; + text-align: left; + order: 2; +} + +.shareContainer { + display: none; +} + +:global(.vtex-address-form__postalCode) { + padding: unset; +} + +:global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 32px; + bottom: 15px; + text-decoration: underline; +} +:global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} + +.postalCode-forgottenURL { + bottom: 100px; +} + +:global(.vtex-product-identifier-0-x-product-identifier) { + display: flex; + justify-content: end; + margin-top: 8px; + margin-bottom: 24px; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +:global(.vtex-store-components-3-x-swiper-pagination), +:global(.vtex-store-components-3-x-swiperCaretNext), +:global(.vtex-store-components-3-x-swiperCaretPrev) { + display: none; +} + +:global(.vtex-store-components-3-x-productImageTag) { + object-fit: unset !important; + margin-bottom: 16px; + max-height: 664px !important; + max-width: 664px; +} + +:global(.vtex-store-components-3-x-figure) { + max-width: 90px; + width: 90px; +} + +:global(.vtex-store-components-3-x-carouselGaleryThumbs) { + margin-top: unset; +} + +.thumbImg--video { + height: 90px; +} + +.thumbImg { + width: 90px !important; + height: 90px; +} + +.productImagesThumb { + max-width: 90px; + max-height: 90px !important; + margin: 0 16px 0 0; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..2ebf3af --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,73 @@ +/* +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&family=Roboto:wght@400;500;700&display=swap"); +/* 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/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..f7710ca 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..254b4ef --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,17 @@ +.container { + font-size: 14px; + line-height: 19px; + padding: 0 40px 16px 40px; + + .homeIconm, + .homeLink { + display: none; + } + + .arrow--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..217a3d6 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,25 @@ +.flexRowContent { + padding: 0; + margin: 0; + + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } +} + +.flexRowContent--buy-button-container { + margin-bottom: 16px; + :global(.vtex-button) { + background-color: black; + border: none; + height: 50px; + margin-left: 10px; + } +} + +.flexRow--buy-box { + .stretchChildrenWidth:nth-child(2n) { + width: 100% !important; + } +} diff --git a/styles/sass/pages/product/vtex.login.scss b/styles/sass/pages/product/vtex.login.scss new file mode 100644 index 0000000..c060054 --- /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: black; +} 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..9a084b3 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,24 @@ +.listPrice, +.savings { + display: none; +} + +.sellingPrice--hasListPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: #000000; +} + +.installments { + font-family: "Open Sans"; + 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..509d826 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,37 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } +} + +:global(.vtex-numeric-stepper__plus-button), +:global(.vtex-numeric-stepper__minus-button), +:global(.vtex-numeric-stepper__input) { + height: 50px; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +:global(.vtex-numeric-stepper__plus-button) { + color: black; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +: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.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..83b9531 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,352 @@ -.newsletter{ +.container { + padding: 0 40px; + .newsletter { background: red; -} \ No newline at end of file + } + + .productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + } + + .skuSelectorContainer { + display: flex; + flex-direction: column; + + .skuSelectorSubcontainer--cor { + order: 2; + margin-bottom: 10px; + + .skuSelectorNameSeparator { + display: none; + } + + .skuSelectorSelectorImageValue { + display: none; + } + + .skuSelectorNameContainer { + margin-left: 0; + .skuSelectorTextContainer { + .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; + text-transform: uppercase; + + color: #929292; + } + } + } + + .skuSelectorOptionsList { + margin-left: 0; + .skuSelectorItem { + width: 40px; + height: 40px; + margin-left: 0; + margin-right: 16px; + + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; + .skuSelectorItemTextValue { + padding: 0; + } + } + } + .skuSelectorItem--selected { + width: 40px; + height: 40px; + + .frameAround { + display: none; + } + .skuSelectorInternalBox { + border: 2px solid black; + border-radius: 50%; + z-index: unset; + } + } + } + } + + .skuSelectorSubcontainer--tamanho { + order: 1; + margin-bottom: 10px; + + .skuSelectorNameContainer { + margin-left: 0; + .skuSelectorTextContainer { + .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; + text-transform: uppercase; + + color: #929292; + } + } + } + + .skuSelectorOptionsList { + margin-left: 0; + .skuSelectorItem { + width: 40px; + height: 40px; + margin-left: 0; + margin-right: 16px; + + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; + .skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); + padding: 0; + } + } + } + .skuSelectorItem--selected { + width: 40px; + height: 40px; + + .frameAround { + display: none; + } + .skuSelectorInternalBox { + border: 2px solid black; + border-radius: 50%; + z-index: unset; + + .skuSelectorItemTextValue { + color: black; + } + + .diagonalCross { + width: 10px; + margin: 0 auto; + color: black; + transform: rotate(60deg); + } + } + } + } + } + + .diagonalCross { + width: 10px; + margin: 0 auto; + color: #d5d5d5; + transform: rotate(60deg); + } + } +} + +:global(.vtex-input__label) { + font-size: 0; + + &::before { + content: "Calcular frete:"; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: #929292; + } +} + +.shippingContainer { + display: flex; + position: relative; + :global(.vtex-button) { + font-size: 0; + background-color: black; + height: 50px; + max-width: 50px; + border: none; + border-radius: 0; + top: 27px; + &::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: #ffffff; + } + :global(.vtex-button__label) { + width: unset; + height: unset; + } + } + + :global(.vtex-input-prefix__group) { + height: 50px; + } + + :global(.vtex-input__suffix) { + display: none; + } +} + +.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; + } + } +} + +.shareContainer { + display: none; +} + +:global(.vtex-address-form__postalCode) { + padding: unset; +} + +:global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 32px; + bottom: 15px; + text-decoration: underline; + + :global(.vtex__icon-external-link) { + display: none; + } +} + +.postalCode-forgottenURL { + bottom: 100px; +} +:global(.vtex-product-identifier-0-x-product-identifier) { + display: flex; + justify-content: end; + margin-top: 8px; + margin-bottom: 24px; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +:global(.vtex-store-components-3-x-swiper-pagination), +:global(.vtex-store-components-3-x-swiperCaretNext), +:global(.vtex-store-components-3-x-swiperCaretPrev) { + display: none; +} + +:global(.vtex-store-components-3-x-productImageTag) { + object-fit: unset !important; + margin-bottom: 16px; + max-height: 664px !important; + max-width: 664px; +} + +:global(.vtex-store-components-3-x-figure) { + max-width: 90px; + width: 90px; +} + +:global(.vtex-store-components-3-x-carouselGaleryThumbs) { + margin-top: unset; +} + +.thumbImg--video { + height: 90px; +} + +.thumbImg { + width: 90px !important; + height: 90px; +} + +.productImagesThumb { + max-width: 90px; + max-height: 90px !important; + margin: 0 16px 0 0; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..502b958 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&family=Roboto:wght@400;500;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;