SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adicionado o estilo do newsletter

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-02-09 13:33:02 -03:00
parent 7939458532
commit 1c41441801
3 changed files with 113 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
store/blocks/pdp/product.jsonc
View File

@ -137,7 +137,7 @@
"props": {
"blockClass": "cart"
},
"children": ["product-quantity", "flex-layout.row#buy-button"]
"children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
},
"flex-layout.row#product-name": {
"props": {
@ -152,11 +152,20 @@
"showValueNameForImageVariation": true
}
},
"product-quantity#qtd": {
"props": {
"width": "25%",
"size": "regular",
"blockClass": "buyQtd"
}
//"children": ["product-quantity"]
},
"flex-layout.row#buy-button": {
"props": {
"width": "80%",
"blockClass": "buyButton"
"blockClass": "buyButton",
"marginTop": "4",
"marginBottom": "7",
"paddingRight": "0"
},
"children": ["add-to-cart-button"]

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

@ -174,4 +174,54 @@
font-size: 16px;
line-height: 22px;
color: #929292;
}
.newsletter {
margin-top: 64px;
}
.newsletter .container {
display: flex;
height: 175px;
padding: 0 0 0 0;
background: black;
align-items: center;
justify-content: center;
}
.newsletter .container .label {
display: flex;
flex-direction: column;
font-size: 0;
}
.newsletter .container .label::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;
}
.newsletter .container .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 .container :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;
}
.newsletter .container :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
}

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

@ -179,3 +179,53 @@
color: #929292;
}
}
.newsletter {
margin-top: 64px;
.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;
}
}
}