diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ebdf639..ed98ae1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -336,7 +336,7 @@ "newsletter": { "props": { - "label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail", + "label": "Assine nossa newsletter", "placeholder": "Digite seu e-mail", "submit": "ENVIAR" } diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..cd805d2 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,14 @@ +/* +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 */ +.title { + font-weight: 400; + font-size: 24px; + line-height: 38px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 011065c..2e9c75b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,23 +8,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - display: block; - background: #000000; -} -.newsletter :global(.vtex-input-prefix__group) { - border: none; -} -.newsletter .label { - color: #fff; - font-weight: 400; - font-size: 18px; - line-height: 25px; -} -.newsletter .button-container :global(.vtex-button__label) { - background-color: transparent; -} - .container { padding: 0 40px; } @@ -341,4 +324,62 @@ font-weight: 400; font-size: 12px; line-height: 16px; +} + +.newsletter { + display: block; + background: #000000; +} +.newsletter :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 774px; + max-width: 774px; + position: relative; +} +.newsletter :global(.vtex-store-components-3-x-form) .label { + color: #fff; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} +.newsletter :global(.vtex-store-components-3-x-form) .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + color: #929292; + position: absolute; + top: 85px; + right: 225px; +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { + padding-top: 52px; +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; +} +.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border-radius: 0; + border-bottom: 1px solid #929292; + background: transparent; + padding: 0; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer { + padding: 0; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; + background-color: transparent; + border: none; +} +.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) { + border-bottom: 3px solid #929292; + padding: 6px 17px 12px !important; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index aaf9764..a777015 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -52,7 +52,7 @@ flex-direction: row; gap: 32px; align-items: flex-start; - padding: 32px; + padding: 32px 32px 16px; } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) { width: inherit !important; diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..1f4bf5d --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,5 @@ +.title { + font-weight: 400; + font-size: 24px; + line-height: 38px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 90dff93..e1a6ecd 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,29 +1,3 @@ -.newsletter { - display: block; - background: $black; - - :global(.vtex-input-prefix__group) { - border: none; - - // background: $black; - } - - .label { - color: $white; - font-weight: 400; - // font-size: 24px; - // line-height: 38px; - font-size: 18px; - line-height: 25px; - } - - .button-container { - :global(.vtex-button__label) { - background-color: transparent; - } - } -} - .container { padding: 0 40px; @@ -397,3 +371,69 @@ } } } + +.newsletter { + display: block; + background: $black; + :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 774px; + max-width: 774px; + position: relative; + + .label { + color: $white; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-size: 18px; + line-height: 25px; + color: $gray-500; + position: absolute; + top: 85px; + right: 225px; + } + } + + :global(.vtex-store-components-3-x-inputGroup) { + padding-top: 52px; + + :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $gray-500; + border-radius: 0; + border-bottom: 1px solid $gray-500; + background: transparent; + padding: 0; + } + } + } + + .buttonContainer { + padding: 0; + + :global(.vtex-button) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $white; + background-color: transparent; + border: none; + } + + :global(.vtex-button__label) { + border-bottom: 3px solid $gray-500; + padding: 6px 17px 12px !important; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 02ee78a..eb01625 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -35,6 +35,7 @@ } .listItemActive { + :global(.vtex-button) { background-color: white; border: none; @@ -58,7 +59,7 @@ flex-direction: row; gap: 32px; align-items: flex-start; - padding: 32px; + padding: 32px 32px 16px; // :global(.vtex-store-components-3-x-content) { // max-width: 100%;