From 106d7600ec0b0fe99130e9f9d3ed470d29e9cd12 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 26 Jan 2023 18:53:42 -0300 Subject: [PATCH 1/4] feat:SkuSelectorContainer estilizado --- Todo.md | 33 ++++++++++-- styles/css/vtex.store-components.css | 34 ++++++++++++- .../pages/product/vtex.store-components.scss | 50 ++++++++++++++++++- 3 files changed, 109 insertions(+), 8 deletions(-) diff --git a/Todo.md b/Todo.md index 0d65042..30b48a9 100644 --- a/Todo.md +++ b/Todo.md @@ -1,14 +1,37 @@ +# Projeto -- [x] (a) inciando projeto +--- {cm:2023-01-25} + +- [x] (a) inciando projeto {cm:2023-01-25} + +- [](b) os Requisitos cobrados serão: --XXX (b) Blocos que devem ser ajustado e desenvolvidos: BreadCrumb, todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), tabLayout com descrição até troca e devolução e seu conteúdo, prateleira de produtos, Newsletter. -- XXX (c) Bloco de Preço com Desconto deve ser CUSTOM +# Dev - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p -- FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. -- FIXME {f} Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. +- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ + + - HACK 1. BreadCrumb; + + - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), + + - HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo, + + - HACK 4. prateleira de produtos, + + - HACK 5. Newsletter. +} +# Requisitos + +{cm:2023-01-25} + +- FIXME Bloco de Preço com Desconto deve ser CUSTOM + +* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. + +* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..86653d4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,38 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.skuSelectorContainer--m3-custom-sku-selector { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector { + border-radius: 50%; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { + text-transform: uppercase; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { + content: "ES:"; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS "; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { + text-transform: uppercase; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { + content: "S:"; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTROS "; +} +.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector { + border-radius: 50%; +} +.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector { + border-radius: 50%; +} + .newsletter { - background: red; + background: black; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..a91a242 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,49 @@ +.skuSelectorContainer--m3-custom-sku-selector{ + display: flex; + flex-direction: column-reverse; + + .frameAround--m3-custom-sku-selector{ + border-radius: 50%; + } + .skuSelectorSubcontainer-{ + &-cor{ + .skuSelectorTextContainer{ + .skuSelectorName{ + text-transform: uppercase; + &::after{ + content: "ES:"; + } + &::before{ + content: "OUTRAS "; + } + } + } + } + &-tamanho{ + .skuSelectorTextContainer{ + .skuSelectorName{ + text-transform: uppercase; + &::after{ + content: "S:"; + } + &::before{ + content: "OUTROS "; + } + } + } + } + } + + + .skuSelectorItemImageValue--m3-custom-sku-selector{ + border-radius: 50%; + } + + .diagonalCross--m3-custom-sku-selector{ + border-radius: 50%; + } +} + .newsletter{ - background: red; -} \ No newline at end of file + background: black; +} From 4c5449424270096afccdf7b635baaf80aa824dea Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 27 Jan 2023 01:35:12 -0300 Subject: [PATCH 2/4] feat:breadcrumb estilizado --- .prettierignore | 3 ++- Todo.md => docs/Todo.md | 0 store/blocks/pdp/product.jsonc | 3 ++- styles/css/vtex.breadcrumb.css | 15 +++++++++++++ styles/css/vtex.stack-layout.css | 22 ++++++++++--------- styles/css/vtex.store-components.css | 5 +++++ .../sass/pages/product/vtex.breadcrumb.scss | 10 +++++++++ .../sass/pages/product/vtex.stack-layout.scss | 3 +++ .../pages/product/vtex.store-components.scss | 5 +++++ 9 files changed, 54 insertions(+), 12 deletions(-) rename Todo.md => docs/Todo.md (100%) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.stack-layout.scss diff --git a/.prettierignore b/.prettierignore index 83b6947..b1ab2f1 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ -CHANGELOG.md \ No newline at end of file +CHANGELOG.md +Todo.md diff --git a/Todo.md b/docs/Todo.md similarity index 100% rename from Todo.md rename to docs/Todo.md diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..ee05501 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,6 +5,7 @@ "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", + "example-component", "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" @@ -91,7 +92,7 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..e832b24 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,15 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container .homeLink::before { + content: "HOME"; +} +.container .homeLink .homeIcon { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..4412ae0 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,10 +1,12 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - -.stackItem--quickview { - right: 0; - top: 0; - left: auto; -} +/* +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 */ +.stackItem { + display: block; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 86653d4..9142026 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -41,4 +41,9 @@ .newsletter { background: black; +} + +.carouselGaleryThumbs { + background: pink; + flex-direction: row; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..d7cc90c --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,10 @@ +.container{ + .homeLink{ + &::before{ + content: "HOME"; + } + .homeIcon{ + display: none; + } + } +} diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss new file mode 100644 index 0000000..b20f1f7 --- /dev/null +++ b/styles/sass/pages/product/vtex.stack-layout.scss @@ -0,0 +1,3 @@ +.stackItem{ + display: block; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a91a242..50dcab8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -47,3 +47,8 @@ .newsletter{ background: black; } + +.carouselGaleryThumbs{ + background: pink; + flex-direction: row; +} From 8ff887ce85672f2250cbdae71553997392357720 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 29 Jan 2023 00:33:15 -0300 Subject: [PATCH 3/4] =?UTF-8?q?feat(slick):aplicando=20estiliza=C3=A7?= =?UTF-8?q?=C3=A3o=20no=20slick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/components/Html/index.tsx | 2 +- react/components/Html/styles.css | 3 + store/blocks/pdp/product.jsonc | 3 +- store/blocks/product-price.jsonc | 4 +- styles/css/agenciamagma.store-theme.css | 16 --- styles/css/vtex.flex-layout.css | 27 +++- styles/css/vtex.product-price.css | 19 ++- styles/css/vtex.product-summary.css | 17 ++- styles/css/vtex.store-components.css | 1 - .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.flex-layout.scss | 117 ++++++++++++++++++ .../pages/product/vtex.product-summary.scss | 49 ++++++++ .../pages/product/vtex.store-components.scss | 1 - styles/sass/pages/vtex.product-price.scss | 86 +++++++++++++ 15 files changed, 317 insertions(+), 37 deletions(-) create mode 100644 react/components/Html/styles.css delete mode 100644 styles/css/agenciamagma.store-theme.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/vtex.product-price.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..3511a1f 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..b88f85c --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*=container--m3-product-breadcrumb]{ + background: blue; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ee05501..dfe5938 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -92,7 +92,8 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": false + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..08068c5 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -20,8 +20,8 @@ "marginTop": 5 }, "children": [ - "product-list-price", - "product-price-savings" + "product-price-savings", + "product-list-price" ] } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 5e37ba5..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -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 */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..cf9fec8 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ 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; @@ -96,3 +103,19 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +:global(.vtex-shelf-1-x-slide) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +:global(.vtex-shelf-1-x-slide) :global(.vtex-product-price-1-x-savings) { + display: none; +} +:global(.vtex-shelf-1-x-slide) :global(.vtex-button) { + display: none; +} +:global(.vtex-shelf-1-x-slide) .flexCol--m3-shelf-badges { + display: none; +} +:global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings { + justify-content: center; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..65c01fc 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,6 +1,15 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } @@ -35,7 +44,6 @@ border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; @@ -55,7 +63,7 @@ .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -77,3 +85,8 @@ color: #FFFFFF; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +:global(.vtex-shelf-1-x-slide) .listPrice { + text-align: center; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..5caa7a5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,3 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { border-radius: 50%; } @@ -16,7 +25,6 @@ display: none; } } - .nameContainer { justify-content: start; padding-top: 1rem; @@ -40,3 +48,10 @@ .image { border-radius: 0.25rem; } + +.nameContainer { + padding-bottom: 0.5rem; +} +.nameContainer .productNameContainer { + text-align: center; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9142026..a2d8670 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -44,6 +44,5 @@ } .carouselGaleryThumbs { - background: pink; flex-direction: row; } \ 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 deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - 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..c460e83 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,117 @@ +.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; +} + +:global(.vtex-shelf-1-x-slide){ + :global(.vtex-store-components-3-x-discountInsideContainer){ + display: none; + } + :global(.vtex-product-price-1-x-savings){ + display: none; + } + :global(.vtex-button){ + display: none; + } + .flexCol--m3-shelf-badges{ + display: none; + } + .flexRowContent--m3-shelf-price-selling-savings{ + justify-content: center; + } +} + 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..5578ada --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,49 @@ +.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; + } +} + +.nameContainer { + justify-content: start; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.brandName { + font-weight: 600; + font-size: 18px; + color: #2E2E2E; +} + +.container { + text-align: start; +} + +.imageContainer { + text-align: center; +} + +.image { + border-radius: 0.25rem; +} +.nameContainer{ + padding-bottom: 0.5rem; + + .productNameContainer{ + text-align: center; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 50dcab8..4386c44 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -49,6 +49,5 @@ } .carouselGaleryThumbs{ - background: pink; flex-direction: row; } diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss new file mode 100644 index 0000000..d12de58 --- /dev/null +++ b/styles/sass/pages/vtex.product-price.scss @@ -0,0 +1,86 @@ +.listPrice { + color: #727273; + margin-bottom: .25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79B03A; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2E2E2E; +} + +.savings--summary { + background: #8BC34A; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: .875rem; +} + +.installments--summary { + margin-bottom: 2rem; + font-size: 0.875rem; +} + +.savings--summaryPercentage { + background: #0f3e99; + border-radius: 1000px; + align-items: center; + display: flex; +} + +.savingsPercentage--summaryPercentage { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; +} + +:global(.vtex-shelf-1-x-slide){ + .listPrice{ + text-align: center; + margin-bottom: 16px; + } +} From 410458f487dce22526761cd41d6d4c77afd33940 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 29 Jan 2023 17:18:44 -0300 Subject: [PATCH 4/4] =?UTF-8?q?feat(product-page):desinstalando=20depend?= =?UTF-8?q?=C3=AAncias=20e=20recome=C3=A7ando=20o=20desafio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Task.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Task.txt diff --git a/docs/Task.txt b/docs/Task.txt new file mode 100644 index 0000000..7c7e7eb --- /dev/null +++ b/docs/Task.txt @@ -0,0 +1 @@ +NOME-DO-BLOCO#INDENTIFICADOR \ No newline at end of file