From d1992a1fee4e21bbfc399138f54f494de78d516f Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 15:29:39 -0300 Subject: [PATCH] feat: adiciona newsletter 1440px --- store/blocks/pdp/product.jsonc | 8 ++ styles/css/vtex.store-components.css | 77 +++++++++++++++++-- styles/css/vtex.styleguide.css | 17 +++- .../pages/product/vtex.store-components.scss | 65 ++++++++++++++++ styles/sass/utils/_vars.scss | 3 +- 5 files changed, 159 insertions(+), 11 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c60b2a1..058a122 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ // "shelf.relatedProducts", "rich-text#shelfTitle", "list-context.product-list#shelfProducts", + "newsletter#pageProduct", "product-questions-and-answers" ] }, @@ -253,5 +254,12 @@ "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] + }, + "newsletter#pageProduct": { + "props": { + "blockClass": "pageProduct", + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 412cb80..744ef10 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -140,7 +140,7 @@ position: absolute; left: 232px; top: 33%; - background: #292929; + background: #000000; border: none; border-radius: 0; } @@ -169,7 +169,7 @@ visibility: visible; content: "Não sei meu CEP"; font-size: 12px; - color: #292929; + color: #000000; text-decoration-line: underline; } @@ -198,7 +198,7 @@ content: "Entrega"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryEstimate { @@ -215,7 +215,7 @@ content: "Prazo"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryPrice { @@ -232,7 +232,7 @@ content: "Frete"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableRadioBtn { @@ -285,5 +285,70 @@ font-weight: 700; font-size: 24px; line-height: 33px; - color: #292929; + color: #000000; +} + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: #000000; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid #ffffff; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #ffffff; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css index 11b5662..99c1ef5 100644 --- a/styles/css/vtex.styleguide.css +++ b/styles/css/vtex.styleguide.css @@ -1,4 +1,13 @@ -.hideDecorators { - border-left: 0; - border-right: 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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.input { + border: none; +} \ 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 7f2cd6e..4042018 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -287,3 +287,68 @@ line-height: 33px; color: $color-black; } + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: $color-black; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray7; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid $color-gray11; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $color-gray11; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 0dd6147..f867a81 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); -$color-black: #292929; +$color-black: #000000; $color-white: #fff; @@ -14,6 +14,7 @@ $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; +$color-gray11: #ffffff; $color-blue: #4267b2;