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

feat: adiciona e estiliza a newsletter

Browse Source
This commit is contained in:
Gabriel Gomes Fernandes 2023-02-08 00:55:02 -03:00
parent b52c15b9e0
commit 7a74f986fb
6 changed files with 167 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,8 @@
"condition-layout.product#availability",
"tab-layout#description",
"flex-layout.row#shelf",
"product-questions-and-answers"
"product-questions-and-answers",
"newsletter"
]
},
"html#breadcrumb": {
@ -245,6 +246,14 @@
"children": ["vtex.store-components:product-name"]
},
"newsletter": {
"props": {
"blockClass": "newsletter",
"label": "Assine nossa Newsletter",
"placeholder": "Digite seu e-mail"
}
},
"sku-selector": {
"props": {
"variationsSpacing": 3,

4
styles/css/vtex.slider-layout.css
View File

@ -14,6 +14,10 @@
}
.sliderLayoutContainer--carousel .sliderTrackContainer {
margin: 32px 27px 32px 27px;
padding-bottom: 32px;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack {
margin-bottom: 32px;
}
.sliderLayoutContainer--carousel .slide {
width: 100%;

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

@ -11,9 +11,6 @@
.container {
padding: 0 40px;
}
.container .newsletter {
background: red;
}
.container .productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
@ -320,3 +317,72 @@
max-height: 90px !important;
margin: 0 16px 0 0;
}
.newsletter--newsletter {
display: flex;
flex-direction: column;
height: 175px;
background-color: black;
padding-bottom: 16px;
padding-top: 32px;
}
.newsletter--newsletter .container--newsletter {
margin: 0;
}
.newsletter--newsletter .container--newsletter .form--newsletter {
max-width: 774px !important;
}
.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter {
display: flex;
flex-direction: column;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
}
.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #929292;
margin-top: 16px;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter {
padding-top: 16px;
border-bottom: 1px solid #929292;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) {
border: none;
height: 32px;
padding-bottom: 7px;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
background-color: transparent;
padding: 0;
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter {
padding: 0;
border-bottom: 3px solid white;
height: 32px;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) {
background-color: transparent;
border: none;
}
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #ffffff;
padding: 0px 16px 13px 16px !important;
}

1
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1 @@

5
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -4,6 +4,11 @@
.sliderTrackContainer {
margin: 32px 27px 32px 27px;
padding-bottom: 32px;
.sliderTrack {
margin-bottom: 32px;
}
}
.slide {

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

@ -1,8 +1,5 @@
.container {
padding: 0 40px;
.newsletter {
background: red;
}
.productNameContainer--quickview {
font-weight: 300;
@ -350,3 +347,81 @@
max-height: 90px !important;
margin: 0 16px 0 0;
}
.newsletter--newsletter {
display: flex;
flex-direction: column;
height: 175px;
background-color: black;
padding-bottom: 16px;
padding-top: 32px;
.container--newsletter {
margin: 0;
.form--newsletter {
max-width: 774px !important;
.label--newsletter {
display: flex;
flex-direction: column;
font-family: "Open Sans", sans-serif;
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", sans-serif;
font-size: 18px;
line-height: 25px;
color: #929292;
margin-top: 16px;
}
}
.inputGroup--newsletter {
padding-top: 16px;
border-bottom: 1px solid #929292;
:global(.vtex-input-prefix__group) {
border: none;
height: 32px;
padding-bottom: 7px;
:global(.vtex-styleguide-9-x-input) {
background-color: transparent;
padding: 0;
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #929292;
}
}
.buttonContainer--newsletter {
padding: 0;
border-bottom: 3px solid white;
height: 32px;
:global(.vtex-button) {
background-color: transparent;
border: none;
:global(.vtex-button__label) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #ffffff;
padding: 0px 16px 13px 16px !important;
}
}
}
}
}
}
}