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

feat(newsletter):adicionando estilos

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2023-01-27 11:41:29 -03:00
parent c621797b1e
commit 42778c432e
11 changed files with 193 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/sandalia-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

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

@ -3,9 +3,9 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"flex-layout.row#primeira-coluna",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
"newsletter",
"product-questions-and-answers"
@ -92,11 +92,14 @@
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
"showNavigationArrows": false
"showNavigationArrows": false,
"maxHeight":900
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
@ -184,5 +187,44 @@
"Pinterest": true
}
}
},
// teste do meu bloco
// "teste#content-main" :{
// "children": [ "flex-layout.row#content"]
// },
"flex-layout.row#primeira-coluna":{
"props": {
"blockClass": "flexCol",
"preventHorizontalStretch": true
},
"children":["image#image-1", "flex-layout.col#segunda-coluna"]
},
"flex-layout.col#segunda-coluna":{
"props": {
"paddingLeft": 7,
"width": "60%"
},
"children":["rich-text#texto-meio"]
},
"rich-text#texto-meio":{
"props": {
"text": "Descrição do produto\nSandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"textAlignment": "START",
"textPosition": "DIREITA",
"textColor": "black",
"font": "Open Sans",
"blockClass": "help-message"
}
},
"image#image-1": {
"props":{
"src":"assets/sandalia-image.png",
"maxHeight": 872,
"maxWidth": 872,
"blockClass":"imageElement"
}
}
}

3
store/blocks/product-summary/quickview.json
View File

@ -137,7 +137,8 @@
"product-images#quickview" : {
"props": {
"blockClass": "quickview",
"showNavigationArrows": true
"showNavigationArrows": true,
"maxHeight": 90
}
}
}

1
styles/css/vtex.breadcrumb.css
View File

@ -11,6 +11,7 @@
display: flex;
align-items: center;
background-color: white;
padding: 32px 0 16px 240px;
}
.container .homeLink .homeIcon {
display: none;

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

@ -9,4 +9,13 @@
/* Grid breakpoints */
.stack-layout {
background-color: yellow;
}
.flexRowContent {
padding: 0;
margin: 0;
}
.content-main {
background-color: red;
}

14
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,14 @@
/*
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 */
/* Grid breakpoints */
.title ::before {
content: " Veja tambem";
font-size: 16px;
color: red;
}

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

@ -8,10 +8,60 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: blue;
background: black;
border-bottom: 1px solid #FFFFFF;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding: 32px 0 23px 0;
}
.label {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #FFFFFF;
border: none;
}
.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;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.productBrand--quickview {
display: flex;
justify-content: end;
}
.productImagesThumb {
height: 90px !important;
width: 90px !important;
}
.imageElement {
padding-left: 32px;
}
.help-message {
padding: 0 0 60px 0;
background-color: red;
}

1
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -3,6 +3,7 @@
display: flex;
align-items: center;
background-color: white;
padding: 32px 0 16px 240px;
.homeLink {
.homeIcon {

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

@ -2,4 +2,11 @@
background-color: yellow;
}
.flexRowContent {
padding: 0;
margin:0;
}
.content-main {
background-color: red;
}

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

@ -1,8 +1,59 @@
.newsletter{
background: blue;
background: black;
border-bottom: 1px solid #FFFFFF;
margin:0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding: 32px 0 23px 0;
// margin:0;
}
.label {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #FFFFFF;
border: none;
}
.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;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.productBrand--quickview {
display: flex;
justify-content: end;
}
.productImagesThumb {
height: 90px !important;
width: 90px !important;
}
.imageElement{
padding-left: 32px;
}
.help-message {
padding: 0 0 60px 0;
background-color: red;
}

10
styles/sass/pages/vtex.shelf.scss Normal file
View File

@ -0,0 +1,10 @@
.title ::before {
content: " Veja tambem";
font-size: 16px;
color:red;
}
// .title {
// color: blue;
// }