FilipeQuintanilha/vtex-cms-template-atualizado-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria a newsletter mobile

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-08 13:54:26 -03:00
parent b2c2b39449
commit 750d9e6f97
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/arquivos/sass/components/_newsletter.scss
View File

@ -1,5 +1,5 @@
.footer-newsletter { .footer-newsletter {
padding: 24px; padding: 24px 15px;
background: linear-gradient(180deg, $blue-500 0%, $blue-600 100%); background: linear-gradient(180deg, $blue-500 0%, $blue-600 100%);
&__wrapper { &__wrapper {
@ -12,25 +12,47 @@
font-size: 14px; font-size: 14px;
line-height: 17px; line-height: 17px;
color: $white-500; color: $white-500;
@include mq(lg, max) {
max-width: 224px;
margin-bottom: 8px;
}
} }
.m3-custom-newsletter-form { .m3-custom-newsletter-form {
display: flex; display: flex;
align-items: center;
position: relative; position: relative;
@include mq(lg, max) {
flex-direction: column;
}
@include mq(lg, min) {
align-items: center;
}
} }
fieldset { fieldset {
flex: 1; flex: 1;
margin: 0 16px 0 0; margin: 0;
padding: 0; padding: 0;
@include mq(lg, max) {
margin-bottom: 8px;
}
@include mq(lg, min) {
margin-right: 16px;
}
&:last-of-type { &:last-of-type {
margin-right: 0; margin: 0;
} }
&.m3-cn-button-ok-container { &.m3-cn-button-ok-container {
max-width: 126px; @include mq(lg, min) {
max-width: 126px;
}
} }
label { label {
@ -82,9 +104,14 @@
top: calc(100% + 8px); top: calc(100% + 8px);
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
width: fit-content;
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
@include mq(lg, max) {
font-weight: 500;
}
.m3-cn-error { .m3-cn-error {
color: $red-300; color: $red-300;
} }