forked from M3-Academy/challenge-vtex-io
style: correção de fontes e adicionando estilo do newsletter
This commit is contained in:
parent
af1f425185
commit
0be1e49288
@ -132,3 +132,9 @@
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.flexRow--newsletter-footer {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -21,7 +21,7 @@
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px solid #AEAEAE;
|
border-bottom: 1px solid #aeaeae;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -708,3 +708,157 @@
|
|||||||
.installmentsPrice {
|
.installmentsPrice {
|
||||||
display: none;
|
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;
|
||||||
|
}
|
||||||
@ -75,6 +75,11 @@
|
|||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 0;
|
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) {
|
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -116,6 +121,11 @@
|
|||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 0;
|
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) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
|
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
|
|||||||
@ -154,3 +154,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Footer
|
||||||
|
|
||||||
|
.flexRow--newsletter-footer {
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -10,19 +10,12 @@
|
|||||||
.autoCompleteOuterContainer {
|
.autoCompleteOuterContainer {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
:global(.vtex-input) {
|
:global(.vtex-input) {
|
||||||
:global(.vtex-input-prefix__group){
|
:global(.vtex-input-prefix__group) {
|
||||||
// border: none !important;
|
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px solid #AEAEAE;
|
border-bottom: 1px solid #aeaeae;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
// :global(.vtex-styleguide-9-x-input){
|
|
||||||
// border: none !important;
|
|
||||||
// }
|
|
||||||
// :global(.vtex-input__suffix){
|
|
||||||
// border: none !important;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -689,3 +682,140 @@
|
|||||||
.installmentsPrice {
|
.installmentsPrice {
|
||||||
display: none;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -50,6 +50,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
:global(.vtex-button__label) {
|
:global(.vtex-button__label) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
@ -83,6 +86,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user