forked from M3-Academy/challenge-vtex-io
Merge pull request 'feat: adiciona newsletter 1440px' (#18) from feature/adiciona-newsletter-1440px into development
Reviewed-on: #18
This commit is contained in:
commit
7b2698beef
@ -10,6 +10,7 @@
|
|||||||
// "shelf.relatedProducts",
|
// "shelf.relatedProducts",
|
||||||
"rich-text#shelfTitle",
|
"rich-text#shelfTitle",
|
||||||
"list-context.product-list#shelfProducts",
|
"list-context.product-list#shelfProducts",
|
||||||
|
"newsletter#pageProduct",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -253,5 +254,12 @@
|
|||||||
"list-context.product-list#shelfProducts": {
|
"list-context.product-list#shelfProducts": {
|
||||||
"blocks": ["product-summary.shelf#shelfProducts"],
|
"blocks": ["product-summary.shelf#shelfProducts"],
|
||||||
"children": ["slider-layout#demo-products"]
|
"children": ["slider-layout#demo-products"]
|
||||||
|
},
|
||||||
|
"newsletter#pageProduct": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "pageProduct",
|
||||||
|
"label": "Assine nossa newsletter",
|
||||||
|
"placeholder": "Digite seu e-mail"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -140,7 +140,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 232px;
|
left: 232px;
|
||||||
top: 33%;
|
top: 33%;
|
||||||
background: #292929;
|
background: #000000;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@ -169,7 +169,7 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
content: "Não sei meu CEP";
|
content: "Não sei meu CEP";
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #292929;
|
color: #000000;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,7 +198,7 @@
|
|||||||
content: "Entrega";
|
content: "Entrega";
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
display: block;
|
display: block;
|
||||||
color: #292929;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryEstimate {
|
.shippingTableHeadDeliveryEstimate {
|
||||||
@ -215,7 +215,7 @@
|
|||||||
content: "Prazo";
|
content: "Prazo";
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
display: block;
|
display: block;
|
||||||
color: #292929;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableHeadDeliveryPrice {
|
.shippingTableHeadDeliveryPrice {
|
||||||
@ -232,7 +232,7 @@
|
|||||||
content: "Frete";
|
content: "Frete";
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
display: block;
|
display: block;
|
||||||
color: #292929;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shippingTableRadioBtn {
|
.shippingTableRadioBtn {
|
||||||
@ -285,5 +285,70 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
color: #292929;
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter--pageProduct {
|
||||||
|
height: 175px;
|
||||||
|
margin: 64px 0 32px 0;
|
||||||
|
background: #000000;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--pageProduct {
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 32px;
|
||||||
|
width: 53.75%;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form--pageProduct {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--pageProduct {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--pageProduct::after {
|
||||||
|
content: "Receba ofertas e novidades por e-mail";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer--pageProduct {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer--pageProduct :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 4px solid #ffffff;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
@ -1,4 +1,13 @@
|
|||||||
.hideDecorators {
|
/*
|
||||||
border-left: 0;
|
0 - 600PX: Phone
|
||||||
border-right: 0;
|
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;500;600;700&display=swap%27");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.input {
|
||||||
|
border: none;
|
||||||
|
}
|
@ -287,3 +287,68 @@
|
|||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.newsletter--pageProduct {
|
||||||
|
height: 175px;
|
||||||
|
margin: 64px 0 32px 0;
|
||||||
|
background: $color-black;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--pageProduct {
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 32px;
|
||||||
|
width: 53.75%;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form--pageProduct {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--pageProduct {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--pageProduct::after {
|
||||||
|
content: "Receba ofertas e novidades por e-mail";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: $color-gray7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer--pageProduct {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer--pageProduct :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 4px solid $color-gray11;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px solid $color-gray11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
|
||||||
|
|
||||||
$color-black: #292929;
|
$color-black: #000000;
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
|
|
||||||
@ -14,6 +14,7 @@ $color-gray7: #929292;
|
|||||||
$color-gray8: #575757;
|
$color-gray8: #575757;
|
||||||
$color-gray9: #afafaf;
|
$color-gray9: #afafaf;
|
||||||
$color-gray10: #bfbfbf;
|
$color-gray10: #bfbfbf;
|
||||||
|
$color-gray11: #ffffff;
|
||||||
|
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user