feat: adiciona e estiliza a newsletter
This commit is contained in:
parent
b52c15b9e0
commit
7a74f986fb
@ -5,7 +5,8 @@
|
|||||||
"condition-layout.product#availability",
|
"condition-layout.product#availability",
|
||||||
"tab-layout#description",
|
"tab-layout#description",
|
||||||
"flex-layout.row#shelf",
|
"flex-layout.row#shelf",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers",
|
||||||
|
"newsletter"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
@ -245,6 +246,14 @@
|
|||||||
"children": ["vtex.store-components:product-name"]
|
"children": ["vtex.store-components:product-name"]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"newsletter": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "newsletter",
|
||||||
|
"label": "Assine nossa Newsletter",
|
||||||
|
"placeholder": "Digite seu e-mail"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"sku-selector": {
|
"sku-selector": {
|
||||||
"props": {
|
"props": {
|
||||||
"variationsSpacing": 3,
|
"variationsSpacing": 3,
|
||||||
|
@ -14,6 +14,10 @@
|
|||||||
}
|
}
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer {
|
.sliderLayoutContainer--carousel .sliderTrackContainer {
|
||||||
margin: 32px 27px 32px 27px;
|
margin: 32px 27px 32px 27px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack {
|
||||||
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
.sliderLayoutContainer--carousel .slide {
|
.sliderLayoutContainer--carousel .slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -11,9 +11,6 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
.container .newsletter {
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
.container .productNameContainer--quickview {
|
.container .productNameContainer--quickview {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -319,4 +316,73 @@
|
|||||||
max-width: 90px;
|
max-width: 90px;
|
||||||
max-height: 90px !important;
|
max-height: 90px !important;
|
||||||
margin: 0 16px 0 0;
|
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;
|
||||||
}
|
}
|
@ -0,0 +1 @@
|
|||||||
|
|
@ -4,6 +4,11 @@
|
|||||||
|
|
||||||
.sliderTrackContainer {
|
.sliderTrackContainer {
|
||||||
margin: 32px 27px 32px 27px;
|
margin: 32px 27px 32px 27px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
|
||||||
|
.sliderTrack {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
|
@ -1,8 +1,5 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
.newsletter {
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.productNameContainer--quickview {
|
.productNameContainer--quickview {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@ -350,3 +347,81 @@
|
|||||||
max-height: 90px !important;
|
max-height: 90px !important;
|
||||||
margin: 0 16px 0 0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user