SavioCarvalhoMoraes/m3-academy-template-checkout-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(body): Trocando os estilos do carrinho

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-16 20:11:04 -03:00
parent 194d9ddbc6
commit e225f3d8ea
3 changed files with 633 additions and 598 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
checkout/src/arquivos/js/components/Footer.js
View File

@ -16,6 +16,8 @@ export default class Footer {
await this.renderIconsDeveloped(); await this.renderIconsDeveloped();
this.trocaTitle(); this.trocaTitle();
this.trocaFrete();
this.trocaUnidade();
} }
async selectors() { async selectors() {
@ -29,6 +31,8 @@ export default class Footer {
this.subTitleCart = await waitElement(".empty-cart-message"); this.subTitleCart = await waitElement(".empty-cart-message");
this.buttonCart = await waitElement("#cart-choose-products"); this.buttonCart = await waitElement("#cart-choose-products");
this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira"); this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira");
this.freteCarrinho = await waitElement(".shipping-date");
this.unidadeCarrinho = await waitElement(".product-price");
} }
onUpdate() { onUpdate() {
@ -126,4 +130,10 @@ export default class Footer {
this.subTitleCart.innerHTML = `<p></p>`; this.subTitleCart.innerHTML = `<p></p>`;
this.buttonCart.innerHTML = `Continuar comprando`; this.buttonCart.innerHTML = `Continuar comprando`;
} }
trocaFrete() {
this.freteCarrinho.innerHTML = `Frete`;
}
trocaUnidade() {
this.unidadeCarrinho.innerHTML = `Unidade`;
}
} }

39
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -111,10 +111,11 @@
} }
th { th {
font-family: $font-family-secundary;
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 16px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -147,15 +148,12 @@
} }
} }
.product-name {
padding-right: 0;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
a { a {
color: $color-blue; color: #000;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
@ -163,7 +161,7 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-black, 10);
text-decoration: none; text-decoration: none;
} }
@ -242,6 +240,7 @@
margin: 0 !important; margin: 0 !important;
padding: 8px 0; padding: 8px 0;
width: 38px; width: 38px;
font-family: $font-family-secundary;
color: $color-gray2; color: $color-gray2;
box-shadow: none; box-shadow: none;
@ -262,15 +261,15 @@
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; color: $color-blue-300;
font-size: 16px; font-size: 20px;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+"; font-size: 20px;
font-size: 14px; color: $color-blue-300;
} }
} }
@ -296,11 +295,16 @@
display: none; display: none;
} }
span { span {
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
text-transform: lowercase;
}
.total-selling-price {
text-transform: uppercase;
} }
} }
@ -336,9 +340,9 @@
border-bottom-color: #d8c8ac; border-bottom-color: #d8c8ac;
} }
} }
} }
.summary { .summary {
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;
@ -597,6 +601,8 @@
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
font-family: $font-family-secundary;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
@ -608,7 +614,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: #000;
text-decoration: none; text-decoration: none;
} }
} }
@ -742,9 +748,9 @@
} }
} }
} }
} }
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 343px; width: 343px;
@ -808,5 +814,4 @@
} }
} }
} }
}
} }

22
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -198,7 +198,27 @@
} }
} }
} }
/*Cart*/
.cart-items th {
font-family: $font-family-secundary !important;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-black;
}
.cart-template .cart-items td.quantity .icon-plus-sign:before {
color: $color-blue-300;
}
/*
.product {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-black;
}*/
/*CSS Body*/ /*CSS Body*/
.container-cart { .container-cart {
#cart-title { #cart-title {