From 0be1e49288579779b53a6db7ff71022a64e1f677 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 31 Jan 2023 14:52:57 -0300 Subject: [PATCH] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20fontes=20e?= =?UTF-8?q?=20adicionando=20estilo=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 6 + styles/css/vtex.store-components.css | 156 +++++++++++++++++- styles/css/vtex.tab-layout.css | 10 ++ .../product/flex-layout/vtex.flex-layout.scss | 8 + .../vtex.store-components.scss | 150 +++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 6 + 6 files changed, 325 insertions(+), 11 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 0854815..499067f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -131,4 +131,10 @@ font-weight: 400; font-size: 18px; line-height: 25px; +} + +@media (max-width: 768px) and (min-width: 375px) { + .flexRow--newsletter-footer { + margin-top: 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4c1f4ae..19ed3a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -21,7 +21,7 @@ border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #AEAEAE; + border-bottom: 1px solid #aeaeae; border-radius: 0; } @@ -707,4 +707,158 @@ .installmentsPrice { display: none; +} + +.newsletter { + height: 175px; + background: #000000; + border-bottom: 1px solid #ffffff; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter { + height: 200px; + padding: 64px 16px 12px; + } +} +.newsletter .container { + margin: 0; +} +.newsletter .container .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form { + width: 100%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form { + width: 100%; + height: 124px; + padding: 0; + } +} +.newsletter .container .form .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin-top: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup { + display: flex; + align-items: center; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #929292; + border-radius: 0; + height: 32px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 16px; + line-height: 22px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 16px; + line-height: 22px; + } +} +.newsletter .container .form .inputGroup .buttonContainer { + padding: 0; + height: 32px; +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid #bfbfbf; + min-height: unset; +} +@media (max-width: 768px) and (min-width: 375px) { + .newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) { + margin-top: 0; + } +} +.newsletter .container .form .inputGroup .buttonContainer :global(.vtex-button) :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + padding: 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c1125e3..ef09152 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -75,6 +75,11 @@ height: 38px; border-radius: 0; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) { + font-size: 24px; + } +} .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } @@ -116,6 +121,11 @@ height: 38px; border-radius: 0; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + font-size: 24px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) { border-bottom: unset; diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 6d71d48..e9777a4 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -154,3 +154,11 @@ } } } + +//Footer + +.flexRow--newsletter-footer { + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 32px; + } +} diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1211751..1c27cf1 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -10,19 +10,12 @@ .autoCompleteOuterContainer { &:first-child { :global(.vtex-input) { - :global(.vtex-input-prefix__group){ - // border: none !important; + :global(.vtex-input-prefix__group) { border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #AEAEAE; - border-radius: 0; - // :global(.vtex-styleguide-9-x-input){ - // border: none !important; - // } - // :global(.vtex-input__suffix){ - // border: none !important; - // } + border-bottom: 1px solid #aeaeae; + border-radius: 0; } } } @@ -689,3 +682,140 @@ .installmentsPrice { display: none; } + +//Newsletter Footer + +.newsletter { + height: 175px; + background: #000000; + border-bottom: 1px solid #ffffff; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 16px 16px; + @media (max-width: 768px) and (min-width: 375px) { + height: 200px; + padding: 64px 16px 12px; + } + .container { + margin: 0; + .form { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + width: 774px; + height: 127px; + max-width: unset; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + height: 124px; + padding: 0; + } + .label { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; + } + .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin-top: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + .inputGroup { + padding: 0; + margin-top: 16px; + height: 32px; + @media (max-width: 768px) and (min-width: 375px) { + display: flex; + align-items: center; + } + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #929292; + border-radius: 0; + height: 32px; + :global(.vtex-styleguide-9-x-input) { + background-color: unset !important; + padding-left: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + border: 1px solid #000000; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 16px; + line-height: 22px; + } + } + } + } + .buttonContainer { + padding: 0; + height: 32px; + :global(.vtex-button) { + padding: 0 16px 0; + width: 84px; + height: 32px; + border-bottom: 3px solid #bfbfbf; + min-height: unset; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + } + :global(.vtex-button__label) { + height: 32px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + padding: 0 !important; + // border: 1px solid #000000; + } + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 7dde801..39537b3 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -50,6 +50,9 @@ width: 100%; height: 38px; border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } :global(.vtex-button__label) { padding: 0; @media (max-width: 1025px) and (min-width: 768px) { @@ -83,6 +86,9 @@ width: 100%; height: 38px; border-radius: 0; + @media (max-width: 2561px) and (min-width: 1920px) { + font-size: 24px; + } @media (max-width: 1025px) and (min-width: 768px) { border-bottom: unset; }