diff --git a/react/Example.tsx b/react/Example.tsx index 7d550e5..fe63560 100644 --- a/react/Example.tsx +++ b/react/Example.tsx @@ -1,3 +1,3 @@ import Example from "./components/Example/Example"; -export default Example; \ No newline at end of file +export default Example; diff --git a/react/Pix.tsx b/react/Pix.tsx index 236fa9e..52ecbb2 100644 --- a/react/Pix.tsx +++ b/react/Pix.tsx @@ -1,3 +1,3 @@ -import Pix from "./components/Example/Pix"; +import Pix from "./components/Pix/Pix"; export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; 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/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..6c28f66 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,14 @@ +/* :global(.agenciamagma-store-theme-5-x-html--cart-content) { + display: flex; + align-items: center; + justify-content: center; + column-gap: 10px; + margin-top: 8px; + margin-bottom: 16px; +} */ +[class*="html--cart-content"] { + display: flex; + gap: 10px; + margin-top: 8px; + margin-bottom: 16px; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 360c9be..91b958e 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -1,12 +1,52 @@ import React from "react"; import { useProduct } from "vtex.product-context"; -// import styles from "./styles.css"; +import styles from "./styles.css"; const Pix = () => { const product = useProduct(); console.log(product); - return Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx; + const pix = { + pixValue: Number( + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .TotalValuePlusInterestRate + ), + }; + + const priceTimes = + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments; + const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed( + 2 + ) + .toString() + .replace(".", ","); + + const pixPrice = (pix.pixValue = pix.pixValue * 0.9) + .toFixed(2) + .toString() + .replace(".", ","); + + return ( + <> + + {priceTimes} x de + R$ {valueTotal} sem juros + +
+
+ Imagem Pix +
+
+ R${pixPrice} + 10% de desconto +
+
+ + ); // return ; }; diff --git a/react/components/Pix/pixImg.svg b/react/components/Pix/pixImg.svg new file mode 100644 index 0000000..d5883d4 --- /dev/null +++ b/react/components/Pix/pixImg.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css index 35ed200..ef27097 100644 --- a/react/components/Pix/styles.css +++ b/react/components/Pix/styles.css @@ -1,5 +1,50 @@ +.html { + background-color: transparent !important; +} +.AllPriceTimesText { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.PriceTimes { + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} .PixButton { width: 40px; height: 40px; background: black; } +.PricesWrapperRow { + margin-top: 8px; + display: flex; + gap: 26px; +} +figure { + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} +.PricesCol { + display: flex; + flex-direction: column; +} +.PixFullValue { + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} +.PixPercent { + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/custom.d.ts b/react/custom.d.ts new file mode 100644 index 0000000..e69de29 diff --git a/react/index.d.ts b/react/index.d.ts index 1fb927a..5b93fa5 100644 --- a/react/index.d.ts +++ b/react/index.d.ts @@ -5,3 +5,7 @@ declare module "*.css" { const classNames: IClassNames; export = classNames; } +declare module "*.svg" { + const content: React.FunctionComponent>; + export default content; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 150e5ba..698200c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,11 +5,41 @@ "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + // "product-specification-group#table", + // "shelf.relatedProducts", + "product-questions-and-answers", + "list-context.product-list#demo1", + "product-questions-and-answers", + "newsletter" ] }, + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] + }, + "product-summary.shelf#demo1": { + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] + }, + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -30,7 +60,68 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["tab-layout#description"] + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-content#description": { + "children": ["product-images#description", "product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "imageDescricao" + } + }, + "tab-list#description": { + "props": { + "blockClass": "listaDescricao" + }, + "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" + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição" + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição" + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição" + } }, "condition-layout.product#availability": { "props": { @@ -104,18 +195,14 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "html#pix-component", - "product-separator", "product-identifier.product", + "product-rating-summary", + "flex-layout.row#selling-price", + "html#pix-component", "sku-selector", - "product-quantity", + "html#cart-content", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -127,6 +214,12 @@ }, "children": ["pix-component"] }, + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, "flex-layout.row#product-name": { "props": { @@ -138,14 +231,16 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-selector" } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buyButton" }, "children": ["add-to-cart-button"] }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..80fb029 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -4,11 +4,9 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 0 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 2224337..372c1ef 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -32,11 +32,7 @@ } }, "flex-layout.col#quickviewPrice": { - "children": [ - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments" - ] + "children": ["flex-layout.row#selling-price", "product-installments"] }, "modal-actions#quickview": { "props": { diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..c5c00b9 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + src: local("Open Sans Light"), local("OpenSans-Light"), + url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), + url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), + url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: local("Open Sans Bold"), local("OpenSans-Bold"), + url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff) + format("woff"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..64c4329 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/store-components.css b/styles/css/store-components.css new file mode 100644 index 0000000..f3fd9be --- /dev/null +++ b/styles/css/store-components.css @@ -0,0 +1,75 @@ +/* +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 */ +.newsletter { + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 34c4328..8f1fd90 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,4 +7,27 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRow--buyButton { + width: 100%; +} +.flexRow--buyButton .flexRowContent--buyButton { + margin: 0; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..0af7a55 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,23 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.product-identifier__label, +.product-identifier__separator { + display: none; } + +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + float: right; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..8b81f8f 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,20 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-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; -} +.flexRowContent { + margin: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index dc2d5e3..69464e1 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -8,9 +8,52 @@ /* Media Query M3 */ /* Grid breakpoints */ .quantitySelectorContainer { - width: max-content; + margin: 0; } -.quantitySelectorContainer .quantitySelectorStepper, .quantitySelectorContainer .quantitySelectorTitle { - width: max-content; + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..ce6049d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,133 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .sliderLayoutContainer { + padding: 16px 40px 113px; +} +.sliderLayoutContainer .sliderTrackContainer { + padding: 0 24px 36px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + order: 1; + width: 100%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + order: 2; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.sliderTrackContainer { - max-width: 100%; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; +} +.sliderLayoutContainer .paginationDotsContainer { + bottom: 113px; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2384943..863e33f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,19 +8,219 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; } -.productImageTag { - width: 664px !important; - height: 664px !important; - max-height: none !important; +.productBrand { + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + float: right; + color: #575757; } -.productImagesThumb, -.carouselThumbBorder, -.figure, -.thumbImg { - width: 90px !important; - height: 90px !important; +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTRAS CORES:"; + color: #929292; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector { + border: 2px solid #000000; + border-radius: 24px; + z-index: 5; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox { + border-radius: 24px; +} + +.shippingContainer { + position: relative; +} + +:global(.vtex-tab-layout-0-x-contentContainer) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 32px; + gap: 32px; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productImagesContainer { + width: 50%; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer { + width: 50%; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ 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..92b105c --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,68 @@ +/* +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 */ +.listContainer--listaDescricao { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 0px 64px; + gap: 99px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer--listaDescricao .listItem { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding: 0; + margin: 0; + color: #bfbfbf; +} +.listContainer--listaDescricao .listItem :global(.vtex-button) { + border-radius: 0; + border: none; + background-color: white; + padding: 0px 16px; +} +.listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; +} +.listContainer--listaDescricao .listItemActive :global(.vtex-button) { + border-radius: 0; + border: none; + border-bottom: 2px solid #000000; + background-color: white; + padding: 0px 16px; +} +.listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; +} \ 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 33a0e3a..5127fa2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,3 +2,27 @@ // width: auto; // padding: 0 40px; // } +.flexRow--buyButton { + width: 100%; + .flexRowContent--buyButton { + margin: 0; + :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; + } + :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; + &::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #ffffff; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..56b4673 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,14 @@ +.product-identifier__label, +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + float: right; + + color: rgba(146, 146, 146, 0.48); +} 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..cd26dd4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,11 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: #000000; +} +.flexRowContent { + margin: 0 !important; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 3c7761d..88dc6fb 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,8 +1,56 @@ .quantitySelectorContainer { - width: max-content; - - .quantitySelectorStepper, + margin: 0; .quantitySelectorTitle { - width: max-content; + display: none; } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + } + // .quantitySelectorStepper { + // } } 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..d11787f --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,146 @@ +.sliderLayoutContainer { + padding: 16px 40px 113px; + + .sliderTrackContainer { + padding: 0 24px 36px; + + .sliderTrack { + gap: 16px; + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; + + :global(.vtex-product-summary-2-x-element) { + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + order: 1; + width: 100%; + + :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + order: 2; + padding: 0; + justify-content: center; + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; + + :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + bottom: 113px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; + } + + .paginationDot--isActive { + background-color: #fff; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 35b299a..f5dc9e8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,16 +1,252 @@ .newsletter { - background: red; + background: black; + .container { + .form { + .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; + &::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + } + } + .inputGroup { + display: flex; + justify-content: center; + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; + &::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; + } + } + } + } + :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } +} +.productBrand { + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + float: right; + + color: #575757; } .productImageTag { - width: 664px !important; - height: 664px !important; - max-height: none !important; + // width: 664px !important; + // height: 664px !important; + // max-height: none !important; } .productImagesThumb, .carouselThumbBorder, .figure, .thumbImg { - width: 90px !important; - height: 90px !important; + // width: 90px !important; + // height: 90px !important; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + // border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { + font-size: 0; + } + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTRAS CORES:"; + + color: #929292; + } + } + .skuSelectorOptionsList { + margin: 0; + .skuSelectorItem--sku-selector { + .frameAround--sku-selector { + border: 2px solid #000000; + border-radius: 24px; + z-index: 5; + } + .skuSelectorInternalBox { + border-radius: 24px; + } + } + } + } +} +.shippingContainer { + position: relative; +} + +:global(.vtex-tab-layout-0-x-contentContainer) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 32px; + gap: 32px; + .productImagesContainer { + width: 50%; + } + .productDescriptionContainer { + width: 50%; + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + + color: #575757; + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: #929292; + } + } } 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..e2b9d9b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,61 @@ +.listContainer--listaDescricao { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 0px 64px; + gap: 99px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding: 0; + margin: 0; + color: #bfbfbf; + :global(.vtex-button) { + border-radius: 0; + border: none; + background-color: white; + padding: 0px 16px; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; + } + } + } + .listItemActive { + :global(.vtex-button) { + border-radius: 0; + border: none; + border-bottom: 2px solid #000000; + background-color: white; + padding: 0px 16px; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; + } + } + } +}