diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/PixComponents.tsx b/react/PixComponents.tsx new file mode 100644 index 0000000..02adf66 --- /dev/null +++ b/react/PixComponents.tsx @@ -0,0 +1,3 @@ +import PixComponents from "./components/PixComponents"; + +export default PixComponents; diff --git a/react/assets/pixImage.svg b/react/assets/pixImage.svg new file mode 100644 index 0000000..c675f09 --- /dev/null +++ b/react/assets/pixImage.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..8614686 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*="html--pdp-breadcrumb"] { + background-color: white; +} diff --git a/react/components/PixComponents/PixImage.tsx b/react/components/PixComponents/PixImage.tsx new file mode 100644 index 0000000..16be127 --- /dev/null +++ b/react/components/PixComponents/PixImage.tsx @@ -0,0 +1,154 @@ +import React from "react"; + +export default function PixImage() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/react/components/PixComponents/globalStyles.css b/react/components/PixComponents/globalStyles.css new file mode 100644 index 0000000..32c3c29 --- /dev/null +++ b/react/components/PixComponents/globalStyles.css @@ -0,0 +1,4 @@ +.vtex-flex-layout-0-x-flexRowContent--product-image-width { + border: 1px solid red; + margin-right: 40px; +} diff --git a/react/components/PixComponents/index.tsx b/react/components/PixComponents/index.tsx new file mode 100644 index 0000000..49a1836 --- /dev/null +++ b/react/components/PixComponents/index.tsx @@ -0,0 +1,35 @@ +import React, { useEffect, useState } from "react"; +import { useProduct } from "vtex.product-context"; +import PixImage from "./PixImage"; +import Style from "./styles.css"; +import "./globalStyles.css"; + +const PixComponents = () => { + const [pixValue, setPixValue] = useState(0); + const productInfo = useProduct(); + const productLowPrice = + productInfo?.product?.priceRange.sellingPrice.lowPrice; + useEffect(() => { + if (productLowPrice) { + setPixValue(productLowPrice * 0.9); + } + }, []); + + return ( +
+
+
+ +
+
+
+ R$ {pixValue.toFixed(2).replace(".", ",")} +
+ 10 % de desconto +
+
+
+ ); +}; + +export default PixComponents; diff --git a/react/components/PixComponents/styles.css b/react/components/PixComponents/styles.css new file mode 100644 index 0000000..bb2b643 --- /dev/null +++ b/react/components/PixComponents/styles.css @@ -0,0 +1,24 @@ +.pixDiv { + display: flex; + gap: 26px; +} + +.pixImgDiv { + display: flex; + justify-content: center; + align-items: center; +} + +.priceNormal { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.priceDiscount { + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..b19356c 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@vtex/tsconfig", "compilerOptions": { + "jsx": "react", "noEmitOnError": false, "lib": ["dom"], "module": "esnext", @@ -8,4 +9,4 @@ "target": "es2017" }, "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..6c77fb4 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/svg.d.ts b/react/typings/svg.d.ts new file mode 100644 index 0000000..5e52f80 --- /dev/null +++ b/react/typings/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: string; + export default content; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..3013b07 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,161 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + "html#product-description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "rich-text#carousel-title", + "list-context.product-list#carousel", "product-questions-and-answers" ] }, + + "rich-text#carousel-title": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:" + } + }, + + "slider-layout#carousel-slider": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + + "list-context.product-list#carousel": { + "children": ["slider-layout#carousel-slider"], + "blocks": ["product-summary.shelf#carousel-shelf"] + }, + + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#carousel-slider"] + }, + + "html#prateleira": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + + "product-summary.shelf#carousel-shelf": { + "children": ["html#prateleira"] + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"] + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": [], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": [], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": [], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": [], + "props": { + "tabId": "description5" + } + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -30,8 +178,36 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["product-images#description", "flex-layout.col#description"] }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "product-description#notitle": { + "props": { + "showTitle": false + } + }, + + "flex-layout.col#description": { + "props": { + "preventVerticalStretch": true, + "rowGap": 5 + }, + "children": ["product-description", "product-description#notitle"] + }, + + "product-images#description": { + "props": { + "displayMode": "first-image" + } + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -45,12 +221,13 @@ }, "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, + // "colGap": 7, + // "rowGap": 7, + // "marginTop": 4, + // "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + // "paddingBottom": 7, + "blockClass": "product-image-width" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -78,51 +255,133 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "51%", "rowGap": 0 } }, - "flex-layout.row#product-image": { + + "html#imagens": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + + "flex-layout.row#product-image": { + "children": ["html#imagens"] + }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90, + "maxHeight": 664, + "showPaginationDots": false, + "showNavigationArrows": false, + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "width": "grow" }, "children": [ "flex-layout.row#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", + "html#product-installments", + "html#pixzap", + // "product-separator", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#quantity-and-add-button", + // "product-quantity", + // "product-assembly-options", + // "product-gifts", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" + // "share#default" ] }, + "html#pixzap": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix-components"] + }, + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "flex-layout.row#quantity-and-add-button": { + "props": { + "blockClass": "quantity-and-add-button", + "preventHorizontalStretch": true, + "fullWidth": true, + "colGap": 0 + }, + "children": ["html#product-quantity", "flex-layout.row#buy-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "product-identifier.product": { + "props": { + "blockClass": "product-identifier.productReference" + } + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "product-installments": { + "props": { + "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros", + "blockClass": "installmentsPrice" + } + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 }, - "children": ["vtex.store-components:product-name"] + "children": ["html#product-name"] }, "sku-selector": { @@ -132,10 +391,24 @@ } }, + "add-to-cart-button": { + "props": { + "blockClass": "add-to-cart-button" + } + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "add-to-cart-button-background" + }, + "children": ["html#add-to-card-button"] + }, + + "html#add-to-card-button": { + "props": { + "testId": "add-to-cart-button" }, "children": ["add-to-cart-button"] }, @@ -160,7 +433,7 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "html#codigo", "sku-selector", "flex-layout.row#availability" ] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..2a098aa 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -3,12 +3,9 @@ "props": { "colGap": 2, "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 + "preventHorizontalStretch": true }, - "children": [ - "product-selling-price" - ] + "children": ["html#selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +16,13 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..d831fd7 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-components": { + "component": "PixComponents" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..54860a1 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,10 @@ +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Regular.ttf); + font-weight: 400; +} +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Bold.ttf); + font-weight: 700; +} diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file 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..d8585ee --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,22 @@ +@charset "UTF-8"; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.buttonText--add-to-cart-button { + position: relative; + color: black; +} +.buttonText--add-to-cart-button::before { + content: "ADICIONAR À SACOLA"; + position: absolute; + right: 15px; + top: 1px; + display: block; + color: white; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..52a0ad5 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,53 @@ +@charset "UTF-8"; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container { + display: flex; + font-size: 14px; + color: #929292; + margin: 0 40px; +} +.container .homeIcon { + height: 0; + display: none; +} +.container .homeLink::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .link--1 { + font-size: 0; +} +.container .link--1::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .link--2 { + font-size: 0; +} +.container .link--2::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .termArrow, +.container .term { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..4b97fdc 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,32 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.flexRowContent--add-to-cart-button-background { + margin: unset; +} +.flexRowContent--add-to-cart-button-background :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: 0; + height: 49px; + width: 100%; + margin-left: 10px; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { +.flexColChild :global(.vtex-flex-layout-0-x-flexColChild) { display: flex; - max-height: 100%; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRowContent--quantity-and-add-button :global(.vtex-button__label) { + padding: unset !important; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.flexRow--product-image-width { + margin: 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..b9301f4 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,29 @@ -.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__separator { + display: none; } + +.product-identifier__label { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: end; + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..d5b9a11 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,57 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +/* +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--hasListPrice { font-weight: 700; + font-size: 25px; + line-height: 38px; + margin: unset; } -.installments { - color: #727273; - margin-bottom: 1rem; +.installments--installmentsPrice { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } -.savings { - font-weight: 500; - color: #79B03A; +.installmentsNumber--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; +.currencyCode--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.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; +.currencyInteger--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; +.currencyDecimal--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.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; -} +.currencyFraction--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..fde6969 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,53 @@ +/* +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: unset; +} + +.quantitySelectorStepper { + border: none; +} + +.quantitySelectorContainer :global(.vtex-styleguide-9-x-hideDecorators) { + border-left: none; + border-right: none; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + background: unset; + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + border-color: #cccccc; + color: #929292; + height: 49px; + width: 50px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..312a924 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,50 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +/* +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 */ +.imageNormal { + width: 100vw; + height: 100vw; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 0; } -.brandName { - font-weight: 600; +.productBrand { + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { + line-height: 25px; text-align: center; + color: #000000; } -.image { - border-radius: 0.25rem; +.installmentContainer { + display: none; } + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..57468ee 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,15 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +.paragraph { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6130f5f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,31 @@ -.sliderLayoutContainer { - justify-content: center; +/* +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 */ +.paginationDot { + height: 10px !important; + width: 10px !important; + background: #000000; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + background: white; + border: 0.5px solid #000000; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + display: flex; + align-items: center; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.slideArrows { + width: 11.2px; + height: 29.6px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..d4b375d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,341 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.carouselContainer:global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: unset; +} + +.productImagesGallerySlide { + width: 57vw !important; +} + +.productImageTag--main { + width: unset !important; + height: 664px !important; +} + +.thumbImg { + border-radius: 8px; + max-width: 90px; + max-height: 90px; +} +.thumbImg--video { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: fit-content !important; + margin-right: 16px; +} + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.productNameContainer--quickview { + text-align: end; + margin-bottom: 8px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorInternalBox { + border-radius: 24px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; +} + +.valueWrapper { + color: #989898; + padding: unset; +} + +.diagonalCross { + transform: rotateY(180deg) scale(0.75); + color: #989898; +} + +.frameAround { + border-radius: 24px; + border-color: black; +} + +.skuSelectorName { + position: relative; + color: white; +} +.skuSelectorName::before { + content: "OUTRAS CORES:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "OUTROS TAMANHOS:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + margin-top: 16px; +} +.shippingContainer :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-button) { + z-index: 1000; + border-radius: 0; + border: unset; + position: absolute; + background-color: black; + color: transparent; + left: 231px; + top: 24px; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-button)::before { + content: "OK"; + white-space: nowrap; + position: absolute; + width: 100%; + height: 100%; + justify-content: center; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + width: 100%; +} +.shippingContainer :global(.vtex-address-form-4-x-input):focus { + z-index: 999; +} +.shippingContainer :global(.vtex-address-form-4-x-input):not(:empty) { + z-index: 999; +} +.shippingContainer :global(.vtex-input-prefix__group) { + border-radius: 0; + color: #cccccc; + width: 280px; + height: 49px; +} +.shippingContainer :global(.vtex-input-prefix__group)::before { + content: "Digite seu CEP"; + position: absolute; + padding: 16px 16.5px 0; + white-space: nowrap; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 24px; + left: 312px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: #000000; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} + +.shippingTable { + display: grid; + flex-direction: column; + border: unset; + padding: unset; + margin: unset; + gap: 15px; +} +.shippingTable :global(.vtex-store-components-3-x-shippingTableRow) { + display: grid; + text-align: left; + grid-template-columns: 110px 110px 110px; +} +.shippingTable :global(.vtex-store-components-3-x-shippingTableRow) :nth-child(even) { + order: 4; +} + +.shippingTableHead { + display: grid; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + display: grid; + margin-bottom: 15px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryEstimate { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryPrice { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.title { + color: transparent; + position: relative; +} +.title::before { + content: "Digite seu CEP"; + background-color: #ffffff; + position: absolute; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} + +.subscribeLabel { + color: transparent; + position: relative; +} +.subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + background-color: #ffffff; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} + +.submit :global(.vtex-button) { + width: 100%; + color: transparent; + position: relative; + background-color: black; + border-radius: 0; + border-color: black; + height: 49px; +} +.submit :global(.vtex-button)::before { + content: "AVISE-ME"; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + +.content :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} + +.content :global(.vtex-input-prefix__group) { + border-radius: 0; +} + +.content :global(.vtex-store-components-3-x-submit) { + position: absolute; + top: 100%; + left: 0; + right: 0; +} + +.content :global(.vtex-store-components-3-x-input) { + margin: unset; + margin-bottom: 15px; +} + +.content { + position: relative; + max-width: unset; + display: flex; + justify-content: flex-start; + align-items: center; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.discountInsideContainer { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,9 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..a69bf17 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,34 @@ +/* +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 { + border-bottom: solid 1px #b9b9b9; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} + +.listContainer :global(.vtex-button) { + border: 0; + background-color: transparent; + color: #b9b9b9; +} + +.listItemActive { + border-bottom: solid 2px black; + margin-bottom: unset; +} + +.listItemActive :global(.vtex-button) { + color: black; +} + +.container { + margin: 0 40px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} 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..95f827a --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText--add-to-cart-button { + position: relative; + color: black; + &::before { + content: "ADICIONAR À SACOLA"; + position: absolute; + right: 15px; + top: 1px; + display: block; + color: white; + } +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..34f9a41 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,49 @@ +.container { + display: flex; + font-size: 14px; + color: #929292; + margin: 0 40px; + .homeIcon { + height: 0; + display: none; + } + + .homeLink { + &::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + } + + .link--1 { + font-size: 0; + &::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .link--2 { + font-size: 0; + &::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .termArrow, + .term { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..02cb93c --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,24 @@ +.flexRowContent--add-to-cart-button-background { + margin: unset; + + :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: 0; + height: 49px; + width: 100%; + margin-left: 10px; + } +} + +.flexColChild :global(.vtex-flex-layout-0-x-flexColChild) { + display: flex; +} + +.flexRowContent--quantity-and-add-button :global(.vtex-button__label) { + padding: unset !important; +} + +.flexRow--product-image-width { + margin: 0 40px; +} 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..16fa8bc --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,20 @@ +.product-identifier__separator { + display: none; +} + +.product-identifier__label { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: end; + width: 100%; +} 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..6319360 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,47 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + margin: unset; +} + +.installments--installmentsPrice { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.installmentsNumber--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyCode--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyInteger--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyDecimal--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.currencyFraction--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..71fdc04 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,44 @@ +.quantitySelectorContainer { + margin: unset; +} + +.quantitySelectorStepper { + border: none; +} + +.quantitySelectorContainer :global(.vtex-styleguide-9-x-hideDecorators) { + border-left: none; + border-right: none; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + background: unset; + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + border-color: #cccccc; + color: #929292; + height: 49px; + width: 50px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..9876b94 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,41 @@ +.imageNormal { + width: 100vw; + height: 100vw; +} + +.nameContainer { + padding-bottom: 0; +} + +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} + +.installmentContainer { + display: none; +} + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..d8ac810 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,11 @@ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +.paragraph { + margin: 0; +} 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..78f2550 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,22 @@ +.paginationDot { + height: 10px !important; + width: 10px !important; + background: #000000; +} + +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + background: white; + border: 0.5px solid #000000; +} + +.paginationDotsContainer { + display: flex; + align-items: center; +} + +.slideArrows { + width: 11.2px; + height: 29.6px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..52dea87 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,352 @@ -.newsletter{ - background: red; -} \ No newline at end of file +// left side + +.carouselContainer { + &:global(.vtex-store-components-3-x-productImagesGallerySlide) { + margin: unset; + } +} + +.productImagesGallerySlide { + width: 57vw !important; +} + +.productImageTag--main { + width: unset !important; + height: 664px !important; +} + +.thumbImg { + border-radius: 8px; + max-width: 90px; + max-height: 90px; + + &--video { + width: 90px; + height: 90px; + } +} + +.productImagesThumb { + width: fit-content !important; + margin-right: 16px; +} + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.productNameContainer--quickview { + text-align: end; + margin-bottom: 8px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorInternalBox { + border-radius: 24px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; +} + +.valueWrapper { + color: #989898; + padding: unset; +} + +.diagonalCross { + transform: rotateY(180deg) scale(0.75); + color: #989898; +} + +.frameAround { + border-radius: 24px; + border-color: black; +} + +.skuSelectorName { + position: relative; + color: white; + &::before { + content: "OUTRAS CORES:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + &::before { + content: "OUTROS TAMANHOS:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} + +.shippingContainer { + position: relative; + :global(.vtex-input__label) { + margin-top: 16px; + &::before { + content: "CALCULAR FRETE:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + :global(.vtex-button) { + z-index: 1000; + border-radius: 0; + border: unset; + position: absolute; + background-color: black; + color: transparent; + left: 231px; + top: 24px; + width: 49px; + height: 49px; + &::before { + content: "OK"; + white-space: nowrap; + position: absolute; + width: 100%; + height: 100%; + justify-content: center; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; + } + } + :global(.vtex-address-form-4-x-input) { + &:focus { + z-index: 999; + } + &:not(:empty) { + z-index: 999; + } + width: 100%; + } + :global(.vtex-input-prefix__group) { + &::before { + content: "Digite seu CEP"; + position: absolute; + padding: 16px 16.5px 0; + white-space: nowrap; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; + } + border-radius: 0; + color: #cccccc; + width: 280px; + height: 49px; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 24px; + left: 312px; + :first-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: #000000; + } + } + :global(.vtex__icon-external-link) { + display: none; + } +} + +.shippingTable { + display: grid; + flex-direction: column; + border: unset; + padding: unset; + margin: unset; + gap: 15px; + :global(.vtex-store-components-3-x-shippingTableRow) { + display: grid; + text-align: left; + grid-template-columns: 110px 110px 110px; + :nth-child(even) { + order: 4; + } + } +} + +.shippingTableHead { + display: grid; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + display: grid; + margin-bottom: 15px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryEstimate { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryPrice { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +// Produto indisponivel + +.title { + color: transparent; + position: relative; + &::before { + content: "Digite seu CEP"; + background-color: #ffffff; + position: absolute; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } +} + +.subscribeLabel { + color: transparent; + position: relative; + &::before { + content: "Deseja saber quando estiver disponível?"; + background-color: #ffffff; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } +} + +.submit :global(.vtex-button) { + width: 100%; + color: transparent; + position: relative; + background-color: black; + border-radius: 0; + border-color: black; + height: 49px; + &::before { + content: "AVISE-ME"; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } +} + +.content :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.content :global(.vtex-input-prefix__group) { + border-radius: 0; +} + +.content :global(.vtex-store-components-3-x-submit) { + position: absolute; + top: 100%; + left: 0; + right: 0; +} + +.content :global(.vtex-store-components-3-x-input) { + margin: unset; + margin-bottom: 15px; +} + +.content { + // :first-child { + // // margin-right: 8px; + // } + position: relative; + max-width: unset; + display: flex; + justify-content: flex-start; + align-items: center; +} + +// Descrição do produto + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.discountInsideContainer { + display: none; +} diff --git a/styles/sass/pages/product/vtex.styleguide.scss b/styles/sass/pages/product/vtex.styleguide.scss new file mode 100644 index 0000000..4d83b7d --- /dev/null +++ b/styles/sass/pages/product/vtex.styleguide.scss @@ -0,0 +1,3 @@ +.hideDecorators { + // background-color: red; +} 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..a629583 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,25 @@ +.listContainer { + border-bottom: solid 1px #b9b9b9; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} + +.listContainer :global(.vtex-button) { + border: 0; + background-color: transparent; + color: #b9b9b9; +} + +.listItemActive { + border-bottom: solid 2px black; + margin-bottom: unset; +} + +.listItemActive :global(.vtex-button) { + color: black; +} + +.container { + margin: 0 40px; +}