BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product): adicionando footer newsletter

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-02-01 23:50:37 -03:00
parent 082fa300d5
commit 53ba2c2947
7 changed files with 328 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
store/blocks/footer/footer.json
View File

@ -7,6 +7,7 @@
},
"footer-layout.desktop": {
"children": [
"flex-layout.row#newsletter",
"flex-layout.row#footer-1-desktop",
"flex-layout.row#footer-2-desktop",
"flex-layout.row#footer-3-desktop"
@ -27,6 +28,21 @@
"paddingBottom": 3
}
},
"flex-layout.row#newsletter":{
"children": ["newsletter"],
"props": {
"blockClass": "newsletter__footer"
}
},
"newsletter": {
"props": {
"label": "Asssine nossa newsletter",
"placeholder": "Digite seu e-mail"
}
},
"social-networks": {
"props": {
"socialNetworks": [
@ -82,6 +98,7 @@
},
"footer-layout.mobile": {
"children": [
"flex-layout.row#newsletter",
"flex-layout.row#1-footer-mobile",
"flex-layout.row#2-footer-mobile"
]

139
styles/css/vtex.flex-layout.css
View File

@ -268,7 +268,7 @@
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) {
height: 40px;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: flex-start;
padding: 0 0 0 14px;
font-family: "Open Sans", sans-serif;
@ -314,4 +314,141 @@
font-size: 18px;
line-height: 25px;
color: #fff;
}
.flexRow--newsletter__footer {
height: 175px;
}
.flexRow--newsletter__footer :global(.vtex-store-components-3-x-container) {
padding: 0;
margin: 0;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer {
padding: 32px 0 16px 0;
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth {
width: 774px !important;
height: 127px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth {
width: 100% !important;
height: auto;
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-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;
color: #929292;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label)::after {
font-size: 16px;
line-height: 22px;
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-form) {
max-width: 774px;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-inputGroup) {
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) {
width: 690px;
height: 32px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) {
width: calc(100% - 84px);
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: none;
height: 32px;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) {
background: transparent;
border: none;
border-bottom: 1px solid #929292;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
padding: 0;
height: 32px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) {
padding-left: 20px;
font-size: 12px;
line-height: 16px;
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :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 (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input)::placeholder {
padding-left: 20px;
font-size: 12px;
line-height: 16px;
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
margin: 0;
width: 84px;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
padding: 0;
border: none;
background: transparent;
height: 32px;
width: 100%;
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) :global(.vtex-button__label) {
background: transparent;
border: none;
border-bottom: 3px solid #BFBFBF;
cursor: pointer;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #fff;
height: 32px;
}

5
styles/css/vtex.store-components.css
View File

@ -378,7 +378,7 @@
}
@media (min-width: 280px) and (max-width: 768px) {
.shippingTable .shippingTableHead .shippingTableRow {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30% 18% 39%;
}
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
@ -424,7 +424,8 @@
}
@media (min-width: 280px) and (max-width: 768px) {
.shippingTable .shippingTableBody .shippingTableRow {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30% 18% 39%;
column-gap: 16px;
}
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {

24
styles/css/vtex.store-footer.css
View File

@ -1,11 +1,13 @@
.row--menu-row {
padding-right: 24px;
}
.row--menu-row .rowContainer {
align-items: flex-start;
}
.row--payment-methods {
padding-top: 16px;
}
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.footerLayout {
background: #000;
}

5
styles/sass/pages/product/vtexComponents/vtex.store-components.scss
View File

@ -409,7 +409,7 @@
grid-template-areas: "entrega frete prazo";
@media #{$mq-mobile}{
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30% 18% 39%;
}
.shippingTableHeadDeliveryName,
@ -458,7 +458,8 @@
margin-top: 15px;
@media #{$mq-mobile}{
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30% 18% 39%;
column-gap: 16px;
}
.shippingTableCellDeliveryName {

152
styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
View File

@ -281,7 +281,7 @@
:global(.vtex-styleguide-9-x-input) {
height: 40px;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: flex-start;
padding: 0 0 0 14px;
font-family: $font-family;
@ -338,3 +338,153 @@
}
}
.flexRow--newsletter__footer {
height: 175px;
:global(.vtex-store-components-3-x-container ){
padding: 0;
margin: 0;
}
.flexRowContent--newsletter__footer {
padding: 32px 0 16px 0;
width: 100%;
background: $color-black0;
display: flex;
align-items: center;
justify-content: center;
.stretchChildrenWidth {
width: 774px !important;
height: 127px;
@media #{$mq-tablet}, #{$mq-mobile}{
width: 100% !important;
height: auto;
}
:global(.vtex-store-components-3-x-label) {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $color-white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
&::after {
content: "Receba ofertas e novidades por e-mail";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 16px;
line-height: 22px;
}
}
}
:global(.vtex-store-components-3-x-form) {
max-width: 774px;
}
:global(.vtex-store-components-3-x-inputGroup) {
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
:global(.vtex-input ) {
width: 690px;
height: 32px;
@media #{$mq-tablet}, #{$mq-mobile}{
width: calc(100% - 84px);
}
:global(.vtex-input-prefix__group) {
border: none;
height: 32px;
}
:global(.vtex-styleguide-9-x-input){
background: transparent;
border: none;
border-bottom: 1px solid $color-gray6;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
padding: 0;
height: 32px;
@media #{$mq-tablet}, #{$mq-mobile} {
padding-left: 20px;
font-size: 12px;
line-height: 16px;
}
&::placeholder {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media #{$mq-tablet}, #{$mq-mobile} {
padding-left: 20px;
font-size: 12px;
line-height: 16px;
}
}
}
}
:global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
margin: 0;
width: 84px;
:global(.vtex-button) {
padding: 0;
border: none;
background: transparent;
height: 32px;
width: 100%;
:global(.vtex-button__label) {
background: transparent;
border: none;
border-bottom: 3px solid #BFBFBF;
cursor: pointer;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-white;
height: 32px;
}
}
}
}
}
}

3
styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,3 @@
.footerLayout {
background: $color-black0;
}