cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/main #2

Merged
cainamilech merged 17 commits from feature/main into develop 2022-12-17 18:50:24 +00:00
Conversation 0 Commits 17 Files Changed 9 +1601 -435
9 changed files with 1601 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
bash.exe.stackdump Normal file
View File

@ -0,0 +1,16 @@
Stack trace:
Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
000FFFFCD30 0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF)
000FFFFCD30 0021005B335 (00210358290, 00000001000, 00000000004, 00210355C90)
000FFFFCD30 0021005B847 (002100DF51E, 00000000000, 00000000000, 00000000000)
000FFFFCD30 0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000)
000FFFFCD30 00210048C0C (00000000000, 00000000000, 00000000000, 00000000000)
000FFFFFFF0 00210047716 (00000000000, 00000000000, 00000000000, 00000000000)
000FFFFFFF0 002100477C4 (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace

13
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -32,9 +32,7 @@ export default class CheckoutUI {
toggleFooterDropdown(event) { toggleFooterDropdown(event) {
event.target.classList.toggle("closed"); event.target.classList.toggle("closed");
event.target.nextElementSibling.classList.toggle( event.target.nextElementSibling.classList.toggle("dropdown__content--closed");
"dropdown__content--closed"
);
} }
init() { init() {
@ -56,14 +54,7 @@ export default class CheckoutUI {
resizeImages() { resizeImages() {
$(".product-image img").each((i, el) => { $(".product-image img").each((i, el) => {
const $el = $(el); const $el = $(el);
$el.attr( $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
"src",
alterarTamanhoImagemSrcVtex(
$el.attr("src"),
this.width,
this.height
)
);
}); });
} }
} }

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

@ -7,34 +7,116 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); await this.carrinho();
this.prateleira();
this.onUpdate();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); 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");
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
//pagamento
this.notification = await waitElement(".notification");
} }
onUpdate() { async prateleira() {
if (this.checkoutVazio.style.display == "none") {
this.requestApi();
this.addCarrossel();
window.addEventListener("hashchange", () => {
if (window.location.hash !== "#/cart") {
this.removePrateleira();
}
if (window.location.hash == "#/cart") {
this.requestApi();
this.addCarrossel();
}
});
}
}
async removePrateleira() {
let prateleira = this.footerPrateleira;
prateleira.innerHTML = ``;
}
async requestApi() {
let prateleira = this.footerPrateleira;
prateleira.innerHTML = `<h2>Você também pode gostar:</h2>
<ul class=carrosel-items></ul>`;
const url = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`;
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
return data.map(function (product) {
let li = document.createElement("li");
li.setAttribute("id", product.productId);
li.innerHTML = `
<img src="${product.items[0].images[0].imageUrl}" alt="${
product.productName
}" />
<p class="product-name">${product.productName}</p>
<div class="product-variation">${product.items
.map((name) => {
return `<a name="product-variation__variation" class="product-variation__variation">${name.name}</a>`;
})
.join("")}</div>
<button class="product-btn">Ver produto</button>`;
prateleira.children[1].appendChild(li);
});
});
}
async addCarrossel() {
const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 });
if (window.screen.width > 1024) {
$(prateleira).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
}
}
async onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.map((mutation) => {
console.log(mutation.type); const display = mutation.target.attributes.style.nodeValue;
console.log(mutation);
if (display == "display: none;") {
this.prateleira();
} else if (display == "display: block;") {
this.removePrateleira();
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() {
const elemento = await waitElement("#my-element"); carrinho() {
$(elemento).slick({ this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
slidesToShow: 4, this.continuarCompra.innerHTML = `continuar comprando`;
slidesToScroll: 1, this.frete.innerHTML = `Frete`;
}); this.unidade.innerHTML = `Unidade`;
} }
} }

940
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

File diff suppressed because it is too large Load Diff

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

@ -2,9 +2,50 @@
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
} }
h1#cart-title.hide {
font-weight: 700;
font-size: 24px;
line-height: 33px;
letter-spacing: 0.05em;
color: $color-black;
margin: 17px 0 16px;
}
.cart-template .cart-items th {
font-family: $font-family-secundary;
font-weight: 400;
padding: 0 0 17px;
text-align: start;
}
} }
.cart-template { .cart-template {
.empty-cart-title {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
margin: 0 0 32px;
}
.empty-cart-message {
display: none;
}
#cart-choose-products {
color: $color-black-500;
border: 1px solid $color-black-500;
background: $color-white;
font-family: $font-family-secundary;
font-weight: 400;
letter-spacing: normal;
border-radius: 0%;
padding: 15px 64px 17px 65px;
margin: 0;
}
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
@ -13,7 +54,8 @@
display: none; display: none;
} }
.cart { .cart {
border: 3px solid $color-gray3; font-family: $font-family-secundary;
border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
@ -106,8 +148,13 @@
} }
.cart-items { .cart-items {
.product-item { tr.product-item {
padding: 16px 0; position: relative;
}
td {
text-align: start;
padding: 0;
} }
th { th {
@ -127,7 +174,7 @@
} }
.product-image { .product-image {
height: auto; height: 60px;
padding: 0; padding: 0;
width: 60px; width: 60px;
@ -136,9 +183,10 @@
} }
img { img {
max-width: 60px;
height: 60px; height: 60px;
max-width: 100%; width: 60px;
width: auto; object-fit: cover;
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -148,25 +196,20 @@
} }
.product-name { .product-name {
padding-right: 0; padding: 0 0 0 16px;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
a { a {
color: $color-blue; color: $color-black-500;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} }
@ -179,7 +222,7 @@
} }
td.shipping-date { td.shipping-date {
color: $color-gray2; color: $color-gray6;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -188,8 +231,10 @@
} }
} }
.product-price { td.product-price {
min-width: 100px; min-width: 100px;
top: 13px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -200,7 +245,6 @@
} }
span.list-price { span.list-price {
color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@ -210,22 +254,32 @@
} }
.old-product-price-label { .old-product-price-label {
color: $color-gray6;
text-transform: lowercase; text-transform: lowercase;
} }
.muted {
color: $color-gray6;
}
}
.new-product-price-label {
text-transform: lowercase;
} }
} }
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 0; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 13px 0 0;
height: 34px;
max-height: 38px; max-height: 38px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 9px 0;
width: max-content !important; width: max-content !important;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -234,15 +288,13 @@
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3; border: 0;
border-radius: 0;
border-width: 0 1px;
display: block; display: block;
max-height: 38px; max-height: 38px;
margin: 0 !important; margin: 0 !important;
padding: 8px 0; padding: 0;
width: 38px; width: 38px;
color: $color-gray2; color: $color-black-500;
box-shadow: none; box-shadow: none;
@include mq(lg, max) { @include mq(lg, max) {
@ -253,24 +305,24 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; color: $color-blue2;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; padding: 1px 11px;
} }
} }
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-";
font-size: 16px; font-size: 16px;
padding-right: 0;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+";
font-size: 14px; font-size: 14px;
padding-left: 0;
} }
} }
@ -308,6 +360,13 @@
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
.total-selling-price {
font-family: $font-family;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
} }
.item-remove { .item-remove {
@ -315,8 +374,10 @@
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: $color-gray4; color: $color-gray7;
font-size: 15px; font-size: 15px;
width: 10px;
height: 10px;
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
@ -339,24 +400,25 @@
} }
.summary { .summary {
margin-top: 48px;
.cart-more-options { .cart-more-options {
padding: 0;
margin: 0; margin: 0;
width: max-content; width: max-content;
.srp-container { .srp-container {
padding: 0 0 0 10px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
.srp-main-title { .srp-main-title {
margin: 32px 0 12px; margin: 0 0 11px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 33px;
color: $color-gray2; color: $color-black-500;
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
@ -365,30 +427,37 @@
.srp-description { .srp-description {
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-weight: 400;
font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 10.65px;
width: 276px;
max-width: 276px;
} }
button.shp-open-options { button.shp-open-options {
background-color: $color-gray5; width: 157px;
height: 44px;
background-color: $color-gray8;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-gray2; color: $color-black-500;
font-size: 16px; font-size: 14px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 19px; line-height: 19px;
font-weight: 500; font-weight: 400;
outline: none; outline: none;
padding: 12px 40px; padding: 12px 41px;
transition: all 0.2s linear; transition: all 0.2s linear;
mix-blend-mode: normal;
margin-top: 0;
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray4, 5);
} }
&:active { &:active {
background-color: darken($color-gray5, 5); background-color: darken($color-gray4, 5);
} }
} }
} }
@ -405,31 +474,32 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; margin-top: 10px;
height: 42px;
background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 100%; width: 100%;
font-weight: 700;
font-style: normal;
font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
font-style: normal;
letter-spacing: 0.05em; letter-spacing: 0.05em;
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue2, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue2, 5);
} }
} }
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 10px;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
@ -439,17 +509,23 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
left: 1px;
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black-500;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black-500;
}
&__pickup {
color: $color-gray7;
} }
label { label {
@ -466,18 +542,17 @@
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-black; color: $color-black-500;
margin-bottom: 12px; margin-bottom: 2px;
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray7;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
@ -485,51 +560,64 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-white; color: $color-white;
font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 0.05em;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -150px;
top: 36px; top: 28px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 100px;
text-transform: uppercase; text-transform: uppercase;
padding-top: 8px;
padding-bottom: 9px;
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue2, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue2, 5);
} }
} }
small a { small a {
font-family: $font-family; font-size: 0px;
&::before {
content: "Não sei meu código postal";
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue; text-decoration-line: underline;
margin-top: 7px; color: $color-black-500;
margin-top: 4px;
}
} }
span.help.error { span.help.error {
color: red; color: $color-red;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px;
} }
} }
} }
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
}
.srp-result { .srp-result {
strong, strong,
.srp-items { .srp-items {
@ -592,9 +680,12 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 346px; width: 354px;
margin-bottom: 5px;
.coupon-data { .coupon-data {
margin-bottom: 8px;
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -603,12 +694,12 @@
} }
} }
span { span {
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black-500;
text-decoration: none; text-decoration: none;
} }
} }
@ -621,6 +712,11 @@
.coupon-column { .coupon-column {
.coupon { .coupon {
margin: 0; margin: 0;
width: 362px;
div {
text-align: start;
}
} }
.link-coupon-add { .link-coupon-add {
@ -630,10 +726,10 @@
} }
.coupon-label label { .coupon-label label {
margin-bottom: 12px; margin-bottom: 4px;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
@ -641,7 +737,8 @@
} }
.coupon-fields { .coupon-fields {
margin-bottom: 32px; position: relative;
margin-bottom: 42px;
@include mq(sm, max) { @include mq(sm, max) {
span { span {
@ -657,14 +754,23 @@
} }
input { input {
border: 2px solid $color-gray3; border: 1px solid $color-gray5;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray4; /*color: $color-gray4;*/
font-size: 12px; font-size: 12px;
height: 34px; height: 36px;
width: 178px;
max-width: 204.32px;
padding: 0 12px; padding: 0 12px;
max-width: 160px;
&::placeholder {
color: $color-gray7;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
}
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,17 +779,21 @@
} }
button { button {
background: $color-black; font-family: $font-family;
background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-black-500;
font-size: 12px; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 0.05em;
margin-left: 6px; margin-left: 15px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 133px;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
@ -691,19 +801,33 @@
} }
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue2, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue2, 5);
} }
} }
&::after {
content: "Adicionar cupom de desconto";
position: absolute;
top: 54px;
right: 98px;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black-500;
}
} }
} }
.accordion-group { .accordion-group {
tr { tr {
border-color: #e5e5e5; border-color: #e5e5e5;
padding: 0;
td { td {
&.empty { &.empty {
@ -722,10 +846,12 @@
&.info { &.info {
text-align: left; text-align: left;
font-family: $font-family-secundary;
} }
&.monetary { &.monetary {
text-align: right; text-align: right;
font-family: $font-family-secundary;
} }
} }
} }
@ -733,10 +859,11 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 25px;
color: $color-black; color: $color-black;
} }
} }
@ -747,7 +874,7 @@
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 343px; width: 352px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -764,46 +891,51 @@
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: 14.91px;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 0px;
} }
a { a {
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black-500;
font-family: $font-family-secundary;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue2;
border: none; border-radius: 8px;
border-radius: 5px;
display: block; display: block;
font-size: 0; font-size: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding: 13px 19px;
border: 0;
&:hover { &:hover {
background-color: darken($color-green, 5); background-color: darken($color-blue2, 5);
}
&:active {
background-color: darken($color-blue2, 5);
} }
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-style: normal;
font-size: 13px; font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-black-500;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px;
text-shadow: none; text-shadow: none;
} }
} }

4
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -16,7 +16,7 @@ footer .footerCheckout__prateleira,
header { header {
@include mq(tablet, min) { @include mq(tablet, min) {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto 56px auto;
} }
@include mq(tablet, max) { @include mq(tablet, max) {
@ -74,13 +74,11 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 500;
font-size: 36px; font-size: 36px;
line-height: 42px; line-height: 42px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {

89
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,3 +1,18 @@
.footerCheckout {
&__prateleira {
h2 {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: $color-black-500;
margin-bottom: 20px;
}
}
}
/* Slider */ /* Slider */
.slick-slider { .slick-slider {
@ -13,12 +28,13 @@
-ms-touch-action: pan-y; -ms-touch-action: pan-y;
touch-action: pan-y; touch-action: pan-y;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
margin: 0;
} }
.slick-list { .slick-list {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin: 0; margin: 0 -8px;
padding: 0; padding: 0;
&:focus { &:focus {
@ -61,7 +77,10 @@
visibility: hidden; visibility: hidden;
} }
} }
.slick-slide { .slick-slide {
margin: 0 8px;
float: left; float: left;
height: 100%; height: 100%;
min-height: 1px; min-height: 1px;
@ -69,9 +88,64 @@
[dir="rtl"] & { [dir="rtl"] & {
float: right; float: right;
} }
li {
text-align: center;
img { img {
display: block; display: block;
margin-bottom: 20px;
} }
p {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: $color-black-500;
}
.product-variation {
display: flex;
justify-content: center;
margin-bottom: 20px;
&__variation {
margin: 0 2.5px;
background: $color-blue2;
border-radius: 8px;
padding: 5px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
}
.product-btn {
width: 100%;
height: 42px;
justify-content: center;
text-align: center;
background: $color-blue2;
border-radius: 8px;
border: none;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
}
&.slick-loading img { &.slick-loading img {
display: none; display: none;
} }
@ -99,15 +173,22 @@
.slick-arrow { .slick-arrow {
font-size: 0; font-size: 0;
position: absolute; position: absolute;
width: 13.64px;
height: 29.47px;
border: none;
z-index: 4;
top: 45%;
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; background-size: contain;
left: 10px; left: 10px;
} }
.slick-next { .slick-next {
z-index: 4; background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center;
background-size: contain;
right: 10px; right: 10px;
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {

5
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,7 +1,10 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
width: 100%;
border-bottom: 1px solid $color-black-500;
.container { .container {
width: auto !important; width: 79.53125% !important;
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;

15
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -15,10 +15,25 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #989898;
$color-gray7: #c4c4c4;
$color-gray8: #ededed;
$color-gray9: #e0e0e0;
$color-gray10: #bdbdbd;
$color-gray11: #808080;
$color-gray12: #828282;
$color-gray13: #f2f2f2;
$color-gray14: #58595b;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00c8ff;
$color-red: #ff0000;
$color-orange: #f15a31;
$color-green: #4caf50; $color-green: #4caf50;
$color-green2: #298541;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (