From c7689808107b941944e8e3a3a1167f648ab4869c Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 11:31:20 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Adicionado=20os=20estilo=20dos=20bot?= =?UTF-8?q?=C3=B5es=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 3 +- styles/css/vtex.store-components.css | 130 +++++++---------- .../sass/pages/product/vtex.flex-layout.scss | 4 +- .../pages/product/vtex.store-components.scss | 133 +++++++----------- 4 files changed, 104 insertions(+), 166 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c2619c5..fd74ea1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -25,8 +25,7 @@ .flexRowContent--cart { display: flex; - justify-content: center; - margin-bottom: 25px; + gap: 10px; } .flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { background-color: black; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d86410a..f9bd86b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -271,94 +271,64 @@ color: #929292; } -/* .newsletter { background: black; border-bottom: 1px solid #ffffff; - margin: 0; + margin: 64px 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; - .container { - display: flex; - //height: 175px; - //padding: 0 0 0 0; - //background: black; - align-items: center; - justify-content: center; - .label { - display: flex; - flex-direction: column; - font-size: 0; - &::before { - content: "Assine nossa Newsletter"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: #ffffff; - } - &::after { - content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - text-align: center; - color: #929292; - } - } - :global(.vtex-input-prefix__group) { - display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; - } - :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; - } - :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; - &:hover { - border-bottom: 5px solid #bfbfbf; - } - - :global(.vtex-button__label) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; - } - } - } } -*/ -.newsletter { - background: black; - border-bottom: 1px solid #ffffff; - margin: 0; +.newsletter .container { + padding: 32px 0 16px 0; +} +.newsletter .label { + font-size: 0; +} +.newsletter .label::before { + content: "Assine nossa newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +.newsletter :global(.vtex-input-prefix__group) { display: flex; - flex-direction: column; justify-content: center; - align-items: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} +.newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; +} +.newsletter :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; +} +.newsletter :global(.vtex-button):hover { + border-bottom: 5px solid #bfbfbf; } .label { @@ -374,7 +344,7 @@ .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -388,7 +358,7 @@ } .productDescriptionTitle { - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8a1039d..cf13ac1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -18,9 +18,7 @@ .flexRowContent--cart { display: flex; - - justify-content: center; - margin-bottom: 25px; + gap: 10px; .flexRow--buyButton { :global(.vtex-button) { background-color: black; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 286cbfb..ddb4e2b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -170,9 +170,8 @@ right: 60px; } .shippingTable { - //display: grid; border: none; - //flex-direction: column; + grid-template-columns: none !important; } .shippingTableRow { @@ -266,94 +265,66 @@ color: #929292; } } -/* + .newsletter { background: black; border-bottom: 1px solid #ffffff; - margin: 0; + margin: 64px 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; .container { - display: flex; - //height: 175px; - //padding: 0 0 0 0; - //background: black; - align-items: center; - justify-content: center; - .label { - display: flex; - flex-direction: column; - font-size: 0; - &::before { - content: "Assine nossa Newsletter"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: #ffffff; - } - &::after { - content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - text-align: center; - color: #929292; - } - } - :global(.vtex-input-prefix__group) { - display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; - } - :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; - } - :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; - &:hover { - border-bottom: 5px solid #bfbfbf; - } + padding: 32px 0 16px 0; + } + .label { + font-size: 0; + &::before { + content: "Assine nossa newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; - :global(.vtex-button__label) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; - } + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; + } + :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; } } -} -*/ -.newsletter { - background: black; - border-bottom: 1px solid #ffffff; - margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; } .label { font-family: "Open Sans"; @@ -367,7 +338,7 @@ } .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -381,7 +352,7 @@ } .productDescriptionTitle { - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; -- 2.34.1