From faeb5ed81747c4e1ce63bb72422e158b9477eebe Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Fri, 27 Jan 2023 22:59:59 -0300 Subject: [PATCH] feat(product/responsividade): Adiciona uma parte do css de produto e responsividade --- react/Placeholder.tsx | 3 + react/components/Html/index.tsx | 1 + react/components/Html/styles.css | 50 ++++++ react/components/placeholder/index.tsx | 8 + react/tsconfig.json | 9 +- store/blocks/pdp/product-assembly.jsonc | 14 +- store/blocks/pdp/product.jsonc | 111 +++++++++----- store/interfaces.json | 3 + styles/configs/font-faces.css | 4 + styles/configs/style.json | 18 +-- styles/css/vtex.add-to-cart-button.css | 28 ++++ styles/css/vtex.breadcrumb.css | 14 +- styles/css/vtex.product-identifier.css | 21 ++- styles/css/vtex.product-price.css | 22 ++- styles/css/vtex.product-quantity.css | 19 ++- styles/css/vtex.store-components.css | 118 +++++++++++++- .../product/vtex.add-to-cart-button.scss | 21 +++ .../sass/pages/product/vtex.breadcrumb.scss | 34 +++++ .../product/vtex.product-identifier.scss | 21 +++ .../pages/product/vtex.product-price.scss | 92 +++++++++++ .../pages/product/vtex.product-quantity.scss | 50 ++++++ .../pages/product/vtex.store-components.scss | 144 +++++++++++++++++- 22 files changed, 729 insertions(+), 76 deletions(-) create mode 100644 react/Placeholder.tsx create mode 100644 react/components/Html/styles.css create mode 100644 react/components/placeholder/index.tsx create mode 100644 styles/configs/font-faces.css create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.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/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..7f7396e --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import { Placeholder } from "./components/placeholder"; + +export default Placeholder; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index 5a8d586..fb857e6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..651d34d --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,50 @@ +[class*="html--product-main"] { + display: flex; + gap: 32px; + padding: 16px 40px 0; +} + +[class*="html--stack-layout"], +[class*="html--right-col"] { + width: 48.824%; +} + +[class*="html--right-col"] { + display: flex; + flex-direction: column; +} + +[class*="html--container-quantity-button"] { + display: flex; + gap: 10px; +} + +[class*="html--cart-button"] { + width: 78.94%; + height: 49px; +} + +@media screen and (max-width: 1024px) { + [class*="html--product-main"] { + flex-direction: column; + } + + [class*="html--stack-layout"], + [class*="html--right-col"] { + width: 100%; + } + + [class*="html--cart-button"] { + width: 85.39%; + } +} + +@media screen and (max-width: 375px) { + [class*="html--container-quantity-button"] { + flex-direction: column; + } + [class*="html--cart-button"] { + width: 100%; + height: 74px; + } +} diff --git a/react/components/placeholder/index.tsx b/react/components/placeholder/index.tsx new file mode 100644 index 0000000..455c50e --- /dev/null +++ b/react/components/placeholder/index.tsx @@ -0,0 +1,8 @@ +const Placeholder = () => { + const placeholderCep = ((document.getElementsByClassName( + "vtex-address-form-4-x-input" + )[0] as HTMLInputElement).placeholder = "Digite seu CEP"); + return placeholderCep; +}; + +export { Placeholder }; diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..6fc5a98 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -7,5 +7,10 @@ "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts", + "components/placeholder/index.jsx" + ] +} diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..7b8376d 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,7 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["html#buy-button"] }, "product-assembly-options": { "children": [ @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 331631f..668b5bc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -20,8 +20,22 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["html#product-image", "product-description"] }, + + "html#product-image": { + "children": ["product-images#description"] + }, + + "product-images#description": { + "props": { + "blockClass": "product-images-description", + "thumbnailVisibility": "hidden", + "showNavigationArrows": false, + "showPaginationDots": false + } + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -29,20 +43,15 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["html#stack", "html#right-col"] }, "stack-layout": { @@ -65,14 +74,20 @@ } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "html#stack": { "props": { - "width": "49%", - "rowGap": 0 - } + "blockClass": "stack-layout" + }, + "children": ["stack-layout"] }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "blockClass": "product-images", + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { @@ -80,18 +95,15 @@ "thumbnailsOrientation": "horizontal", "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "showNavigationArrows": false, - "showPaginationDots": false, - "displayThumbnailsArrows": true + "showPaginationDots": false } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "width": "49%", - "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", @@ -99,10 +111,9 @@ "product-rating-summary", "product-selling-price", "product-installments", - "sku-selector", - "product-assembly-options", + "html#sku-selector", "product-gifts", - "flex-layout.row#buy-button", + "html#buy-button", "availability-subscriber", "shipping-simulator" ] @@ -115,6 +126,22 @@ "children": ["vtex.store-components:product-name"] }, + "product-installments": { + "props": { + "markers": ["discount"], + "blockClass": "custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros" + } + }, + + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -122,12 +149,28 @@ } }, - "flex-layout.row#buy-button": { + "html#buy-button": { "props": { "blockClass": "container-quantity-button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, + "html#product-quantity": { + "props": { + "blockClass": "product-quantity", + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#add-to-cart-button": { + "props": { + "blockClass": "cart-button", + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + "product-quantity": { "props": { "width": 128 @@ -135,23 +178,21 @@ }, "add-to-cart-button": { "props": { - "blockClass": "cardButton", + "blockClass": "add-to-cart-button", "text": "ADICIONAR À SACOLA" } }, - "flex-layout.row#product-availability": { + + "html#product-availability": { "props": { "colGap": 7, "marginTop": 4, "marginBottom": 7, "paddingTop": 7 }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { "preventVerticalStretch": true, "rowGap": 0, diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..9555b36 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/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..03ab4a7 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Open Sans", sans-serif; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index c9bc50a..4d1c215 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -23,29 +23,29 @@ ], "customMedia": [ { - "s": 20 + "s": "375px" }, { "ns": { - "value": 40, + "value": "1024px", "minWidth": true } }, { "m": { - "value": 40, + "value": "1024px", "minWidth": true } }, { "l": { - "value": 64, + "value": "1024px", "minWidth": true } }, { "xl": { - "value": 80, + "value": "2501px", "minWidth": true } } @@ -80,7 +80,7 @@ "background": { "base": "#ffffff", "base--inverted": "#03044e", - "action-primary": "#0F3E99", + "action-primary": "#000000", "action-secondary": "#eef3f7", "emphasis": "#f71963", "disabled": "#f2f4f5", @@ -97,7 +97,7 @@ "muted-5": "#f2f4f5" }, "hover-background": { - "action-primary": "#072c75", + "action-primary": "#1f1f1f", "action-secondary": "#dbe9fd", "emphasis": "#dd1659", "success": "#8bc34a", @@ -172,7 +172,7 @@ "warning--faded": "#fff6e0" }, "border": { - "action-primary": "#0F3E99", + "action-primary": "#000000", "action-secondary": "#eef3f7", "emphasis": "#f71963", "disabled": "#e3e4e6", @@ -189,7 +189,7 @@ "muted-5": "#f2f4f5" }, "hover-border": { - "action-primary": "#072c75", + "action-primary": "#1f1f1f", "action-secondary": "#dbe9fd", "emphasis": "#dd1659", "success": "#8bc34a", diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..69058e5 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,28 @@ +/* +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 */ +:global(.vtex-button) { + height: 100%; + border-radius: 0; +} + +.buttonText--add-to-cart-button { + font-size: 18px; + line-height: 25px; + display: flex; + align-items: center; + text-align: center; + color: #FFFFFF; +} + +@media screen and (max-width: 375px) { + .buttonText--add-to-cart-button { + width: 168px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index feeecf2..4cf87e8 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -1,5 +1,12 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .container { display: flex; align-items: center; @@ -10,6 +17,7 @@ content: "Home"; font-size: 14px; } + .homeIcon, .termArrow, .term { @@ -32,4 +40,4 @@ font-weight: 400; font-size: 14px; line-height: 19px; -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e2aa2ee..424160e 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,7 +1,12 @@ -.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 { display: flex; align-items: center; @@ -9,10 +14,16 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); - margin-bottom: 24px; + margin-bottom: 8px; } .product-identifier__label, .product-identifier__separator { font-size: 0; } + +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index e3e487f..777a662 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,3 +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 */ .sellingPriceValue .currencyContainer { font-weight: 700; font-size: 25px; @@ -16,12 +25,16 @@ font-weight: 700; } -.installments { - font-weight: 400; +.installments--custom-installments { + font-weight: 700; font-size: 16px; line-height: 22px; color: #929292; - margin-bottom: 1rem; + margin-bottom: 8px; +} + +.installments-discount--custom-installments { + font-weight: 300; } .interestRate { @@ -44,7 +57,6 @@ border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; @@ -85,4 +97,4 @@ vertical-align: baseline; color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e378d25..d9258b9 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -1,3 +1,16 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorContainer { + margin: 0; +} + .quantitySelectorTitle { font-size: 0; margin: 0; @@ -19,6 +32,7 @@ text-align: center; color: #929292; height: 100%; + width: 76px; } :global(.vtex-numeric-stepper__minus-button), @@ -31,12 +45,15 @@ align-items: center; color: #000000; height: 100%; + width: 26px !important; } :global(.vtex-numeric-stepper__minus-button) { border-width: 1px 0 1px 1px; + justify-content: flex-end; } :global(.vtex-numeric-stepper__plus-button) { border-width: 1px 1px 1px 0; -} + justify-content: flex-start; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3d7845d..c91b2a3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -16,7 +16,7 @@ } .container { - padding: 0 40px; + padding: 0; } .productNameContainer { @@ -38,8 +38,8 @@ margin-top: 16px; } -.productImageTag { - max-height: 664px; +.productImageTag--main { + max-height: 664px !important; } .productImagesThumb { @@ -47,6 +47,23 @@ margin-right: 16px; width: 90px !important; height: 90px !important; + border-radius: 8px; +} + +.figure--video { + width: 90px !important; + height: 90px !important; + border-radius: 8px; +} + +.thumbImg--video { + height: 100%; + border-radius: 8px; +} + +.productImagesThumbActive .carouselThumbBorder { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)); + border-radius: 8px; } .skuSelectorContainer { @@ -138,4 +155,99 @@ left: 19px; top: 1px; transform: rotate(45deg); +} + +.productDescriptionText .container { + padding: 0; +} + +.shippingContainer { + display: flex; + margin-top: 16px; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + gap: 32px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + padding-top: 24.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + width: 0; +} +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: #000000; + border: 0; + position: absolute; + bottom: 32px; + left: 230px; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #FFFFFF; +} + +@media screen and (max-width: 1024px) { + .productImageTag--main { + max-height: 994px !important; + } + .productNameContainer { + text-align: start; + } +} +@media screen and (max-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + align-items: flex-end; + gap: 8px; + width: 100%; + } + .shippingContainer :global(.vtex-input-prefix__group) { + width: 100%; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + } + .shippingContainer :global(.vtex-button) { + bottom: 56px; + left: 245px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..c2eeea7 --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,21 @@ +:global(.vtex-button) { + height: 100%; + border-radius: 0; +} + +.buttonText--add-to-cart-button { + font-size: 18px; + line-height: 25px; + + display: flex; + align-items: center; + text-align: center; + + color: #FFFFFF; +} + +@media screen and (max-width: 375px) { + .buttonText--add-to-cart-button { + width: 168px; + } +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..d85a67c --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,34 @@ +.container { + display: flex; + align-items: center; + padding: 0 40px; +} + +.homeLink::after { + content: "Home"; + font-size: 14px; +} + +.homeIcon, +.termArrow, +.term { + display: none; +} + +.link--1 { + font-size: 0; + height: 23px; +} + +.link--1::after { + content: "Sapatos"; + font-size: 14px; + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +:global(.vtex-breadcrumb-1-x-container) { + font-weight: 400; + font-size: 14px; + line-height: 19px; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..430030b --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,21 @@ +.product-identifier { + display: flex; + align-items: center; + justify-content: flex-end; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + margin-bottom: 8px; +} + +.product-identifier__label, +.product-identifier__separator { + font-size: 0; +} + + +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} 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..ccc32db --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,92 @@ +.sellingPriceValue .currencyContainer { + font-weight: 700; + font-size: 25px; + line-height: 38px; + text-decoration: none; + color: #000000; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments--custom-installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; + margin-bottom: 8px; +} + +.installments-discount--custom-installments { + font-weight: 300; +} + +.interestRate { + font-weight: 400; +} + +.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: 0.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; +} 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..a7ec3c9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,50 @@ +.quantitySelectorContainer { + margin: 0; +} + +.quantitySelectorTitle { + font-size: 0; + margin: 0; +} + +.quantitySelectorStepper { + height: 49px; +} + +:global(.vtex-numeric-stepper-container) { + height: 49px; +} + +:global(.vtex-numeric-stepper__input) { + border: 1px solid #cccccc; + border-width: 1px 0; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #929292; + height: 100%; + width: 76px; +} + +:global(.vtex-numeric-stepper__minus-button), +:global(.vtex-numeric-stepper__plus-button) { + border: 1px solid #cccccc; + border-radius: 0; + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + color: #000000; + height: 100%; + width: 26px !important; +} + +:global(.vtex-numeric-stepper__minus-button) { + border-width: 1px 0 1px 1px; + justify-content: flex-end; +} + +:global(.vtex-numeric-stepper__plus-button) { + border-width: 1px 1px 1px 0; + justify-content: flex-start; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7c5cb3e..a920169 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -7,7 +7,7 @@ } .container { - padding: 0 40px; + padding: 0; } .productNameContainer { @@ -29,8 +29,8 @@ margin-top: 16px; } -.productImageTag { - max-height: 664px; +.productImageTag--main { + max-height: 664px !important; } .productImagesThumb { @@ -38,6 +38,25 @@ margin-right: 16px; width: 90px !important; height: 90px !important; + border-radius: 8px; +} + +.figure--video { + width: 90px !important; + height: 90px !important; + border-radius: 8px; +} + +.thumbImg--video { + height: 100%; + border-radius: 8px; +} + +.productImagesThumbActive { + .carouselThumbBorder { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)); + border-radius: 8px; + } } .skuSelectorContainer { @@ -142,3 +161,122 @@ top: 1px; transform: rotate(45deg); } + +.productDescriptionText { + .container { + padding: 0; + } +} + +.shippingContainer { + display: flex; + margin-top: 16px; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + gap: 32px; + } + + :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + + :global(.vtex-input__suffix) { + display: none; + } + + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + padding-top: 24.5px; + + :last-child { + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; + } + + :global(.vtex__icon-external-link) { + width: 0; + } + + } + + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: #000000; + border: 0; + position: absolute; + bottom: 32px; + left: 230px; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #FFFFFF; + } + } +} + + +@media screen and (max-width: 1024px) { + + .productImageTag--main { + max-height: 994px !important; + } + + .productNameContainer { + text-align: start; + } +} + +@media screen and (max-width: 375px) { + .shippingContainer { + :global(.vtex-address-form__postalCode) { + flex-direction: column; + align-items: flex-end; + gap: 8px; + width: 100%; + } + + :global(.vtex-input-prefix__group) { + width: 100%; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + } + + :global(.vtex-button) { + bottom: 56px; + left: 245px; + } + } +}