forked from M3-Academy/m3-academy-template-checkout
feat: Adiciona area de email desktop
This commit is contained in:
parent
0fcce0e4df
commit
0c456bd3bc
@ -11,15 +11,11 @@ export default class CheckoutUI {
|
||||
this.events();
|
||||
this.setFooterDropdown();
|
||||
}
|
||||
|
||||
this.carrinhoVazio();
|
||||
}
|
||||
|
||||
selectors() {
|
||||
this.title = $(".footerCheckout__title");
|
||||
this.contents = $(".footerCheckout__content");
|
||||
|
||||
this.fraseCarrinhoVazio = $(".empty-cart-title");
|
||||
}
|
||||
|
||||
events() {
|
||||
@ -61,8 +57,4 @@ export default class CheckoutUI {
|
||||
$el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
|
||||
});
|
||||
}
|
||||
|
||||
carrinhoVazio() {
|
||||
this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
await this.carrinho();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -14,6 +15,19 @@ export default class Footer {
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
//CARRINHO VAZIO
|
||||
this.fraseCarrinhoVazio = await waitElement(".empty-cart-title");
|
||||
this.continuarCompra = await waitElement("#cart-choose-products");
|
||||
//carrinho
|
||||
this.frete = await waitElement(".shipping-date");
|
||||
this.unidade = await waitElement(".product-price");
|
||||
}
|
||||
|
||||
carrinho() {
|
||||
this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
|
||||
this.continuarCompra.innerHTML = `continuar comprando`;
|
||||
this.frete.innerHTML = `Frete`;
|
||||
this.unidade.innerHTML = `Unidade`;
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
|
||||
@ -1,16 +1,32 @@
|
||||
h1#orderform-title {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: $color-black-500;
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
border-color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $color-black;
|
||||
font-family: $font-family-secundary;
|
||||
margin-top: 6px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black-500;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: lighen($color-black, 10);
|
||||
color: lighen($color-black-500, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,30 +38,53 @@
|
||||
justify-content: center;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 21px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
color: $color-black-500;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family-secundary;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-gray4;
|
||||
color: $color-black-500;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family-secundary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
/*left: -61px;*/
|
||||
margin: 0 0 24.56px;
|
||||
|
||||
input {
|
||||
/*width: 65.8%;*/
|
||||
width: 82%;
|
||||
height: 50px;
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
padding: 0 16px;
|
||||
border: 2px solid $color-gray3;
|
||||
padding: 0 14px;
|
||||
border: 1px solid $color-black-500;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-black-500;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@ -53,13 +92,21 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black;
|
||||
border-radius: 5px;
|
||||
background-color: $color-blue2;
|
||||
color: $color-black-500;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
height: 54px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 126.76px;
|
||||
height: 52px;
|
||||
right: 45px;
|
||||
top: -1px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
@ -69,19 +116,30 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
color: $color-red;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
width: 366px;
|
||||
height: 116px;
|
||||
padding: 16px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-black-500;
|
||||
border-radius: 5px;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
margin: 0 0 8px 0;
|
||||
color: $color-black-500;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin: 0 0 9.56px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -89,17 +147,27 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: $color-black;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-black-500;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: $color-blue2;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.icon-lock {
|
||||
right: 0;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
|
||||
@ -262,6 +262,10 @@
|
||||
color: $color-gray6;
|
||||
}
|
||||
}
|
||||
|
||||
.new-product-price-label {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
td.quantity {
|
||||
|
||||
@ -74,13 +74,11 @@ body {
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-gray2;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
margin: 40px 0 30px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
|
||||
@ -23,6 +23,8 @@ $color-blue: #4267b2;
|
||||
$color-blue2: #00c8ff;
|
||||
$color-blue3: #2f8ea8;
|
||||
|
||||
$color-red: #ff0000;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user