From 076be6e53385348094a1ba2876c1a6ee7850ae0c Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 3 Feb 2023 18:11:08 -0300 Subject: [PATCH 01/10] feat: Adicionado shelf --- store/blocks/pdp/product.jsonc | 22 ++++++++++++++ .../product-summary-list.jsonc | 30 +++++-------------- .../product-summary/product-summary.jsonc | 4 +-- styles/css/vtex.breadcrumb.css | 5 ++++ styles/css/vtex.store-components.css | 5 +++- .../sass/pages/product/vtex.breadcrumb.scss | 4 +++ .../pages/product/vtex.store-components.scss | 3 ++ 7 files changed, 47 insertions(+), 26 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0f4c222..fa56ba1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,6 +6,8 @@ "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", + "list-context.product-list#shelf", + "newsletter", "product-questions-and-answers" ] }, @@ -218,5 +220,25 @@ "props": { "tabId": "product2" } + }, + "list-context.product-list#shelf": { + "blocks": ["product-summary.shelf#shelf"], + "children": ["slider-layout#shelf-products"] + }, + "product-summary.shelf#shelf": { + "children": ["product-summary-image#shelf", "product-summary-price"] + }, + "slider-layout#shelf-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 1, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + }, + "children": [] } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 58f9518..9964bda 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,4 +13,9 @@ .homeLink::after { content: "Home"; +} + +.link--1 { + display: flex; + order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 34c4328..3533ae1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,4 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.productDescriptionContainer { + background: red; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80c6236..0dd25c0 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,3 +6,7 @@ content: "Home"; } } +.link--1 { + display: flex; + order: -1; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e69de29..926f0da 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -0,0 +1,3 @@ +.productDescriptionContainer { + background: red; +} -- 2.34.1 From e230a4022da7feb5423e3fc649b0885537367552 Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 4 Feb 2023 18:09:48 -0300 Subject: [PATCH 02/10] feat: Adicionado componente custom --- store/interfaces.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/interfaces.json b/store/interfaces.json index f5b5636..714e4e6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-description-component": { + "product-payment-component": { "component": "ProductDescription" } } -- 2.34.1 From fd8ebcf90a8af35c639234f571d25591c492f8da Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 4 Feb 2023 19:20:18 -0300 Subject: [PATCH 03/10] feat: Adicionado o componente personalizado do pix --- react/PaymentPix.tsx | 3 +++ react/ProductDescription.tsx | 3 --- react/components/PaymentPix/PaymentPix.tsx | 23 +++++++++++++++++++ .../ProductDescription/ProductDescription.tsx | 7 ------ store/blocks/pdp/product.jsonc | 3 +++ store/interfaces.json | 4 ++-- styles/css/vtex.breadcrumb.css | 5 ---- styles/css/vtex.store-components.css | 5 ++-- .../sass/pages/product/vtex.breadcrumb.scss | 4 ---- .../pages/product/vtex.store-components.scss | 3 ++- 10 files changed, 36 insertions(+), 24 deletions(-) create mode 100644 react/PaymentPix.tsx delete mode 100644 react/ProductDescription.tsx create mode 100644 react/components/PaymentPix/PaymentPix.tsx delete mode 100644 react/components/ProductDescription/ProductDescription.tsx diff --git a/react/PaymentPix.tsx b/react/PaymentPix.tsx new file mode 100644 index 0000000..1eb71bb --- /dev/null +++ b/react/PaymentPix.tsx @@ -0,0 +1,3 @@ +import { PaymentPix } from "./components/PaymentPix/PaymentPix"; + +export default PaymentPix; diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx deleted file mode 100644 index 9a2edfb..0000000 --- a/react/ProductDescription.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ProductDescription } from "./components/ProductDescription/ProductDescription"; - -export default ProductDescription; diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx new file mode 100644 index 0000000..60bf463 --- /dev/null +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const PaymentPix = () => { + const product = useProduct(); + const pricePix = ( + (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 + ).toFixed(2); + { + /*const imagePix =*/ + } + + const convertPrice = pricePix.toString().replace(".", ","); + + return ( +
+

R$ {convertPrice}

+

10% de desconto

+
+ ); +}; + +export { PaymentPix }; diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx deleted file mode 100644 index ca68644..0000000 --- a/react/components/ProductDescription/ProductDescription.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const ProductDescription = () => { - return
Oaswq
; -}; - -export { ProductDescription }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fa56ba1..fc0558e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,7 +2,9 @@ "store.product": { "children": [ "html#breadcrumb", + "condition-layout.product#availability", + "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -117,6 +119,7 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "product-paymentPix-component", "product-separator", "product-identifier.product", "sku-selector", diff --git a/store/interfaces.json b/store/interfaces.json index 714e4e6..1e7bec4 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-payment-component": { - "component": "ProductDescription" + "product-paymentPix-component": { + "component": "PaymentPix" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 9964bda..58f9518 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,9 +13,4 @@ .homeLink::after { content: "Home"; -} - -.link--1 { - display: flex; - order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3533ae1..b00a4d4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 0dd25c0..80c6236 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,7 +6,3 @@ content: "Home"; } } -.link--1 { - display: flex; - order: -1; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 926f0da..4f63d46 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,4 @@ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; } +*/ -- 2.34.1 From f07d5fa515ce18dc63c06fba76eaac1ce88c5618 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 5 Feb 2023 15:30:39 -0300 Subject: [PATCH 04/10] feat: Adicionado fonte das letras --- styles/sass/utils/_vars.scss | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..4c6da1c 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); + $color-black: #292929; $color-white: #fff; @@ -14,18 +16,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1 From 3341a993328273a5f493a53ca11db0492dc04418 Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 11:50:38 -0300 Subject: [PATCH 05/10] feat: Adicionado o estilo das imagens do display principal --- store/blocks/pdp/product.jsonc | 14 ++- styles/configs/font-faces.css | 0 styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 108 ++---------------- styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 20 +++- .../sass/pages/product/vtex.flex-layout.scss | 0 .../pages/product/vtex.store-components.scss | 19 ++- 9 files changed, 54 insertions(+), 110 deletions(-) create mode 100644 styles/configs/font-faces.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fc0558e..f73fc24 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -81,7 +81,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -90,12 +90,15 @@ }, "product-images": { "props": { + "thumbnailsOrientation": "horizontal", + "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, - "displayThumbnailsArrows": false, - "displayMode": "list" + + "showPaginationDots": false, + "showNavigationArrows": false } }, "product-images#descricao": { @@ -115,13 +118,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 1dd7d62..689e9c1 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 58f9518..dc77e8c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f5ba8ae 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,10 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..f5ba8ae 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b00a4d4..0d9af06 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,8 +6,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -/*.productDescriptionContainer { - background: red; +.container { + max-width: 100%; + margin: 0 0 0 0 !important; } -*/ \ No newline at end of file + +.productImageTag { + max-height: none !important; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + height: auto !important; +} \ 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 new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4f63d46..5d9d0aa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,4 +1,17 @@ -/*.productDescriptionContainer { - background: red; +.container { + max-width: 100%; + margin: 0 0 0 0 !important; +} + +.productImageTag { + max-height: none !important; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + height: auto !important; } -*/ -- 2.34.1 From 5c9b7826b05c5010d8a84b53bbcd8a0db936cc9b Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 14:41:25 -0300 Subject: [PATCH 06/10] feat: Adicionado os estilos do pagamento pix --- .vscode/settings.json | 11 +++++- react/components/PaymentPix/PaymentPix.tsx | 21 ++++++++---- react/components/PaymentPix/styles.css | 39 ++++++++++++++++++++++ 3 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 react/components/PaymentPix/styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 04540ca..bac992e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -164,5 +164,14 @@ } } } - ] + ], + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/Thumbs.db": false + }, + "explorerExclude.backup": {} } diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx index 60bf463..fe6c855 100644 --- a/react/components/PaymentPix/PaymentPix.tsx +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -1,21 +1,30 @@ import React from "react"; import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + const PaymentPix = () => { const product = useProduct(); const pricePix = ( (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 ).toFixed(2); - { - /*const imagePix =*/ - } + + const imagePix = + "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png"; const convertPrice = pricePix.toString().replace(".", ","); return ( -
-

R$ {convertPrice}

-

10% de desconto

+
+ Imagem do Pix +
+

R$ {convertPrice}

+

10% de desconto

+
); }; diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css new file mode 100644 index 0000000..23a2810 --- /dev/null +++ b/react/components/PaymentPix/styles.css @@ -0,0 +1,39 @@ +.paymentPixWrapper { + display: flex; + flex-direction: row; + margin-top: 8px; + margin-bottom: 16px; + height: 39px; + gap: 26px; + align-items: center; +} +.paymentPixImg { + display: flex; + width: 66px; + height: 24px; + align-items: center; +} +.paymentPixText { + display: flex; + flex-direction: column; + align-items: center; +} +.paymentPixValue { + margin: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + + color: rgba(0, 0, 0, 0.58); +} +.paymentPixDiscount { + margin: 0; + color: #929292; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; +} -- 2.34.1 From f5bdaa9afa660ed61b60a81e35f16661c09c208a Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 16:10:17 -0300 Subject: [PATCH 07/10] feat: Adicionado o estilo do nome do produto --- react/components/PaymentPix/styles.css | 1 - styles/css/vtex.product-identifier.css | 31 ++++++++++++++++++- styles/css/vtex.store-components.css | 10 ++++++ .../product/vtex.product-identifier.scss | 19 ++++++++++++ .../pages/product/vtex.store-components.scss | 9 ++++++ 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css index 23a2810..20ec1da 100644 --- a/react/components/PaymentPix/styles.css +++ b/react/components/PaymentPix/styles.css @@ -16,7 +16,6 @@ .paymentPixText { display: flex; flex-direction: column; - align-items: center; } .paymentPixValue { margin: 0; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..128134d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,32 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-top: 8px; } + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0d9af06..4eaa102 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -24,4 +24,14 @@ .productImagesThumb { height: auto !important; +} + +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; } \ No newline at end of file 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..fec8794 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + margin-top: 8px; +} +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5d9d0aa..4e880ed 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,3 +15,12 @@ .productImagesThumb { height: auto !important; } +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} -- 2.34.1 From 18cd2fd0759d9c2ba5e3cc8974542a33e3cbbfdc Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 11:51:57 -0300 Subject: [PATCH 08/10] feat: Adicionado o estilo dos tamanhos e cores --- store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.add-to-cart-button.css | 10 ++ styles/css/vtex.product-quantity.css | 13 ++ styles/css/vtex.store-components.css | 113 +++++++++++++++++ .../product/vtex.add-to-cart-button.scss | 2 + .../pages/product/vtex.product-quantity.scss | 3 + .../pages/product/vtex.store-components.scss | 118 ++++++++++++++++++ 7 files changed, 259 insertions(+), 1 deletion(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f73fc24..be7db66 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -123,7 +123,6 @@ "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", - "product-separator", "sku-selector", "product-quantity", "product-assembly-options", 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..f5ba8ae --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,10 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ 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..2f1d220 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4eaa102..3c8f295 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,4 +34,117 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; } \ 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..f627ffe --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,2 @@ +.buttonText { +} 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..dd527e9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,3 @@ +.quantitySelectorTitle { + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4e880ed..8f4ebd4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,4 +23,122 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; + } + + .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; + } + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + } + } } -- 2.34.1 From 0abdeaba4fd9ef1c1744b9ac725ee7460a59d232 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 17:54:32 -0300 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20do=20ad?= =?UTF-8?q?icionar=20=C3=A0=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 19 +-- styles/css/vtex.flex-layout.css | 24 +++- styles/css/vtex.product-quantity.css | 17 +++ styles/css/vtex.store-components.css | 107 ++++++++-------- .../product/vtex.add-to-cart-button.scss | 2 - .../sass/pages/product/vtex.flex-layout.scss | 23 ++++ .../pages/product/vtex.product-quantity.scss | 17 +++ .../pages/product/vtex.store-components.scss | 114 +++++++++--------- 8 files changed, 201 insertions(+), 122 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be7db66..b41d781 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,9 +2,7 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -124,15 +122,21 @@ "product-installments", "product-paymentPix-component", "sku-selector", - "product-quantity", + + "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "availability-subscriber", "shipping-simulator" ] }, - + "flex-layout.row#cart": { + "props": { + "blockClass": "cart" + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -149,9 +153,10 @@ "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5ba8ae..c807690 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 @@ -7,4 +8,25 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { + background-color: black; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) { + font-size: 0; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::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-quantity.css b/styles/css/vtex.product-quantity.css index 2f1d220..b5b35cc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,4 +10,21 @@ /* Grid breakpoints */ .quantitySelectorTitle { display: none; +} + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3c8f295..8ea10f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,63 +34,8 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -117,6 +62,15 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { border-radius: 21px; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; } @@ -147,4 +101,45 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + color: white; + font-size: 10px; +} + +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; } \ 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 index f627ffe..e69de29 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,2 +0,0 @@ -.buttonText { -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..4108e84 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; + .flexRow--buyButton { + :global(.vtex-button) { + background-color: black; + } + :global(.vtex-button__label) { + 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-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index dd527e9..3b9d284 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,20 @@ .quantitySelectorTitle { display: none; } + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8f4ebd4..702ed15 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,69 +23,15 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; .valueWrapper .skuSelectorItemTextValue { margin-right: 5px; } + .skuSelectorSubcontainer--cor { .skuSelectorName { font-size: 0; @@ -106,6 +52,15 @@ .skuSelectorInternalBox { border-radius: 21px; } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } } .skuSelectorSubcontainer--tamanho { .skuSelectorName { @@ -142,3 +97,50 @@ } } } + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "Ok"; + color: white; + font-size: 10px; + } + } + } +} + +.shippingContainer { + :global(.vtex-input) { + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.shippingContainer { + display: flex; + :global(.vtex-input-prefix__group) { + height: 49px; + } + + :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; + } +} -- 2.34.1 From e73bc62040b95022e70d3abf2fc4622ad9d53c0a Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 18:20:58 -0300 Subject: [PATCH 10/10] feat: Adicionando estilo no Cep --- styles/css/vtex.address-form.css | 13 ++++++++++++ styles/css/vtex.store-components.css | 21 ++++++++++++++++--- .../sass/pages/product/vtex.address-form.scss | 5 +++++ .../pages/product/vtex.store-components.scss | 21 ++++++++++++++++--- 4 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/sass/pages/product/vtex.address-form.scss diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..5eb3ef6 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.input::placeholder { + content: "Digite seu CEP"; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8ea10f1..17fb098 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -113,8 +113,12 @@ } .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } .shippingContainer :global(.vtex-input) :global(.vtex-input__label) { @@ -138,8 +142,19 @@ } .shippingContainer :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss new file mode 100644 index 0000000..026dcd8 --- /dev/null +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -0,0 +1,5 @@ +.input { + &::placeholder { + content: "Digite seu CEP"; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 702ed15..cd73e7c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -107,8 +107,12 @@ font-size: 0; &::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } } } @@ -138,9 +142,20 @@ :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; } + :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; + } } -- 2.34.1