From fb7d5e5292ae904fc733e07c36869bdb0c88f5e6 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sun, 5 Feb 2023 13:21:29 -0300 Subject: [PATCH] feat: cria estilizacao responsiva da newsletter. --- styles/css/vtex.store-components.css | 105 ++++++++++++++- .../pages/product/vtex.store-components.scss | 121 +++++++++++++++++- 2 files changed, 223 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..5379403 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,5 +8,108 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: #000; + color: #fff; + margin: 64px 0; +} +@media (max-width: 1024px) { + .newsletter { + margin: 32px 0; + } +} +.newsletter :global(.vtex-store-components-3-x-container) { + padding: 0; +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 100%; + max-width: 774px; + position: relative; +} +@media (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) { + max-width: 100%; + padding: 64px 0 32px; + padding-left: 16px; + padding-right: 16px; + } +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label { + display: flex; + flex-direction: column; + font-size: 0; +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::before { + font-family: "Open Sans", sans-serif; + content: "Assine nossa newsletter"; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + padding-bottom: 4px; +} +@media (max-width: 1920px) { + .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::before { + padding-bottom: 10px; + } +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +@media (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::after { + font-size: 16px; + line-height: 22px; + } +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { + border-bottom: 1px solid #929292; +} +@media (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { + display: flex; + } +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: transparent; + color: #929292; +} +.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media (max-width: 1024px) { + .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 1024px) { + .newsletter .buttonContainer { + width: auto; + } +} +.newsletter .buttonContainer :global(.vtex-button) { + background: none; + border: none; + border-radius: 0; + width: 100%; + max-width: 84px; + height: 32px; + border-bottom: 3px solid #BFBFBF; } \ 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 9810451..d6855f3 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,120 @@ .newsletter { - background: red; -} \ No newline at end of file + background: #000; + color: #fff; + + margin: 64px 0; + + @media (max-width:1024px) { + margin: 32px 0; + } + + :global(.vtex-store-components-3-x-container) { + padding: 0; + + :global(.vtex-store-components-3-x-form) { + padding: 32px 0 13px; + width: 100%; + max-width: 774px; + position: relative; + + @media (max-width:1024px) { + max-width: 100%; + padding: 64px 0 32px; + padding-left: 16px; + padding-right: 16px; + } + + .label { + display: flex; + flex-direction: column; + font-size: 0; + + &::before { + font-family: 'Open Sans', sans-serif; + content: "Assine nossa newsletter"; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + padding-bottom: 4px; + + @media (max-width:1920px) { + padding-bottom: 10px; + } + } + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + + @media (max-width:1024px) { + font-size: 16px; + line-height: 22px; + } + + } + } + + :global(.vtex-store-components-3-x-inputGroup) { + border-bottom: 1px solid #929292; + + @media (max-width:1024px) { + display: flex; + } + + :global(.vtex-input) { + + // tanto faz essa linha de cima + :global(.vtex-input-prefix__group) { + border: none; + + :global(.vtex-styleguide-9-x-input) { + background: transparent; + color: #929292; + + &::placeholder { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #929292; + + @media (max-width:1024px) { + font-size: 12px; + line-height: 16px; + } + } + } + } + } + } + } + } + + .buttonContainer { + @media (max-width:1024px) { + width: auto; + } + + :global(.vtex-button) { + background: none; + border: none; + border-radius: 0; + width: 100%; + max-width: 84px; + height: 32px; + border-bottom: 3px solid #BFBFBF; + } + } +} + +// FIM NEWSLETTER \ No newline at end of file