andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #2

Merged
andreamatsunaga merged 3 commits from development into main 2022-12-19 04:54:39 +00:00
Conversation 0 Commits 3 Files Changed 12 +658 -149
12 changed files with 658 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,42 +7,58 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.replaceEmptyCartContent(); await this.stampsHTML();
this.renderPrateleira(); await this.developedByHTML();
this.stampsHTML(); await this.onUpdate();
this.developedByHTML(); await this.renderPrateleira();
this.onUpdate(); await this.replaceCartContent();
// await this.replaceProfileContent();
} }
async selectors() { async selectors() {
console.log("iniciando 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.cartTitle = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.emptyCartTitle = await waitElement(".empty-cart-title"); this.cart = await waitElement(".cart");
this.continueShopping = await waitElement("#cart-choose-products"); this.cartTitle = await waitElement("#cart-title");
this.frete = await waitElement(".shipping-date"); this.frete = await waitElement(".shipping-date");
this.unidade = await waitElement(".product-price"); this.unidade = await waitElement(".product-price");
this.iconMinus = await waitElement(".icon-minus-sign");
this.iconPlus = await waitElement(".icon-plus-sign");
this.prateleira = await waitElement(".footerCheckout__prateleira"); this.prateleira = await waitElement(".footerCheckout__prateleira");
this.naoSeiMeuCep = await waitElement(".ship-postalCode");
// this.prateleiraSlick = await waitElement(".prateleira__carousel") // this.prateleiraSlick = await waitElement(".prateleira__carousel")
} }
replaceEmptyCartContent() { async replaceCartContent() {
if (this.checkoutVazio) { console.log("entrou no replaceCart")
console.log("entrou no if do replaceContent()")
this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
this.continueShopping.textContent = "Continuar comprando";
this.frete.textContent = "Frete";
this.unidade.textContent = "Unidade";
this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
if(this.cart) {
console.log("entrou no if do replaceCart()")
console.log(this.cart)
this.frete.textContent = "Frete";
console.log(this.frete)
this.unidade.textContent = "Unidade";
console.log(this.unidade)
} }
} }
onUpdate() { // async replaceProfileContent() {
// if(this.identificacao) {
// }
// const identificacao = await waitElement(".accordion-heading");
// if(identificacao) {
// console.log("entrou no if identificacao")
// identificacao.children[0].children[1].textContent = "Identificação";
// console.log(identificacao)
// }
// }
async onUpdate() {
console.log("chamada do 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
@ -52,20 +68,27 @@ export default class Footer {
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { attributes: true }; let config = { attributes: true };
// this.cartTitle.style.display = "none"; if(this.checkoutVazio.style.display == "block") {
// this.prateleira.style.display = "none"; console.log("Carrinho está vazio ou não está no #/cart")
this.cartTitle.style.display = "none";
this.prateleira.style.display = "none";
} else {
console.log("Carrinho NÃO está vazio e está no #/cart");
this.cartTitle.style.display = "block";
this.prateleira.style.display = "block";
}
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(() => { mutations.forEach(() => {
if(this.checkoutVazio.style.display == "block") { if(this.checkoutVazio.style.display == "block") {
console.log("Carrinho está vazio") console.log("Carrinho está vazio ou não está no #/cart")
this.cartTitle.style.display = "none"; this.cartTitle.style.display = "none";
this.prateleira.style.display = "none"; this.prateleira.style.display = "none";
} else { } else {
console.log("Carrinho NÃO está vazio e está no #/cart");
console.log("Carrinho NÃO está vazio");
this.cartTitle.style.display = "block"; this.cartTitle.style.display = "block";
this.prateleira.style.display = "block"; this.prateleira.style.display = "block";
} }
@ -74,6 +97,18 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.cartTitle.style.display = "none";
this.prateleira.style.display = "block";
// this.renderPrateleira();
} else {
this.cartTitle.style.display = "block";
this.prateleira.style.display = "none";
}
})
} }
async renderPrateleira() { async renderPrateleira() {
@ -141,11 +176,15 @@ export default class Footer {
this.prateleira.appendChild(prateleiraSlick); this.prateleira.appendChild(prateleiraSlick);
prateleiraSlick.innerHTML = cardsStructure; prateleiraSlick.innerHTML = cardsStructure;
if(window.innerWidth > 1024) { // if(window.innerWidth > 1024) {
this.addCarrossel(prateleiraSlick); this.addCarrossel(prateleiraSlick);
} // }
} }
} }
// else {
// this.prateleira.style.display = none;
// }
} }
async addCarrossel(element) { async addCarrossel(element) {
@ -154,11 +193,27 @@ export default class Footer {
$(element).slick({ $(element).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
infinite: false infinite: false,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
}
]
}); });
} }
async stampsHTML() { async stampsHTML() {
console.log("entrou no stamps")
const stamps = await waitElement('.footerCheckout__stamps'); const stamps = await waitElement('.footerCheckout__stamps');
// console.log(stamps.children[0], stamps.children[2]); // console.log(stamps.children[0], stamps.children[2]);
@ -204,6 +259,8 @@ export default class Footer {
} }
async developedByHTML() { async developedByHTML() {
console.log("entrou no developedBy")
const developedBy = await waitElement('.footerCheckout__developedBy'); const developedBy = await waitElement('.footerCheckout__developedBy');
// console.log(developedBy.children[0].children[0]); // console.log(developedBy.children[0].children[0]);

24
checkout/src/arquivos/js/components/Header.js
View File

@ -7,18 +7,22 @@ export default class Header {
} }
async init() { async init() {
console.log("entrou no init do header")
await this.selectors(); await this.selectors();
this.progressBarStructure(); await this.progressBarStructure();
await this.progressBarMove(); await this.progressBarMove();
} }
async selectors() { async selectors() {
// this.header = await waitElement(".headerCheckout"); // this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement("#progressBar");
console.log("progressBar await element")
} }
progressBarStructure() { async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarStructure")
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul class="progress-bar__container"> <ul class="progress-bar__container">
<li class="progress-bar__stage"> <li class="progress-bar__stage">
@ -48,7 +52,9 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
const progressBarStages = document.querySelectorAll((".progress-bar__stage")); console.log("entrou no if do progressBarMove")
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
progressBarStages.forEach((stage) => { progressBarStages.forEach((stage) => {
@ -182,16 +188,4 @@ export default class Header {
}) })
} }
} }
// async progressBarMove() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll(("#progressBar ul li"));
// progressBarList.forEach((li) => {
// console.log("Aqui vem seu código")
// })
// }
// }
} }

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

@ -10,14 +10,21 @@
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border: none;
// border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $black-300; font-family: $font-family-secundary;
font-size: 14px; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #000000;
&:hover { &:hover {
color: lighen($black-300, 10); color: lighen($black-300, 10);
@ -34,28 +41,43 @@
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span, small {
color: #303030; line-height: 23px;
font-size: 24px; font-family: $font-family-secundary;
font-size: 20px;
font-weight: 400;
font-style: normal;
text-align: center;
text-transform: uppercase;
color: $black-500;
} }
small { // small {
color: $color-gray4; // color: $color-gray4;
} // }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 24px;
input { input {
box-shadow: none; border: 1px solid $black-500;
color: $black-300; border-radius: 5px 0px 0px 5px;
font-family: $font-family; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
// display: flex;
// align-items: center;
color: $black-500;
box-shadow: none;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
@ -63,11 +85,23 @@
} }
button { button {
background-color: $black-300; height: 52px;
border-radius: 5px; padding: 12px 14px;
border: none; display: flex;
align-items: center;
border: none;
border-radius: 0px 8px 8px 0px;
line-height: 19px;
font-family: $font-family; font-family: $font-family;
height: 54px; font-size: 14px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: $black-500;
background: $blue-300;
right: 0; right: 0;
top: 0; top: 0;
@ -79,19 +113,36 @@
} }
span.help.error { span.help.error {
color: red; margin-top: 3px;
line-height: 16px;
font-family: $font-family;
font-size: 12px;
font-weight: 700;
font-style: normal;
text-align: center;
color: $red-300;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; width: 400px;
height: 150px;
padding: 16px 16px 24px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $black-500;
border-radius: 0; border-radius: 5px;
h3 { h3 {
color: #303030; margin: 0 0 9px;
margin: 0 0 8px 0; font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: #000000;
// margin: 0 0 8px 0;
} }
ul { ul {
@ -99,11 +150,18 @@
li { li {
span { span {
color: $black-300; font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
align-items: center;
color: #000000;
} }
i::before { i::before {
color: $black-300; color: $blue-300;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -122,20 +180,48 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border: 1px solid #F0F0F0;
border: 1px solid $color-gray4; border-radius: 8px;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 28px 17px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; font-family: 'Tenor Sans';
margin-bottom: 8px; font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
margin-bottom: 15px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; display: none;
} }
.icon-user {
~ span {
font-size: 0;
}
&::after {
content: "Identificação";
line-height: 19px;
font-family: $font-family-secundary;
font-size: 16px;
font-weight: 400;
font-style: normal;
color: $black-300;
letter-spacing: 0.05em;
text-shadow: none;
vertical-align: middle;
}
}
} }
a { a {
@ -147,28 +233,47 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
// &::after {
// content: "";
// width: 20px;
// height: 20px;
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
// }
} }
} }
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.box-client-info {
margin-bottom: 44px;
padding-top: 11px;
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $black-300; display: none;
} }
p { p {
margin-bottom: 16px;
label { label {
color: $black-300; font-family: 'Open Sans';
font-weight: 500; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #7D7D7D;
} }
select, select,
input { input {
border-radius: 0; padding: 12px;
border: 1px solid $color-gray4; border: 1px solid #E0E0E0;
border-radius: 5px;
box-shadow: none; box-shadow: none;
} }
@ -178,6 +283,8 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $black-300; color: $black-300;
@ -191,19 +298,32 @@
} }
button.submit { button.submit {
width: 100%;
background: #00C8FF;
border-radius: 8px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFF;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $black-300; margin-bottom: 16px;
margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($black-300, 5); background: lighten($blue-300, 5);
} }
&:active { &:active {
background: darken($black-300, 5); background: darken($blue-300, 5);
} }
} }

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

@ -51,14 +51,23 @@
} }
.cart-fixed { .cart-fixed {
// border: 1px solid #E5E5E5;
border-radius: 8px;
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
margin-bottom: 34px;
padding: 0;
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
text-align: left;
background: $color-white; background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
} }
.item-unavailable { .item-unavailable {
@ -83,10 +92,41 @@
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
img {
width: 60px;
height: 60px;
transform: translateX(-1);
}
span.badge {
display: none;
}
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
span.product-name,
span.shipping-date {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #000000;
}
span.price {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #292929;
}
} }
} }
@ -95,11 +135,22 @@
background: $color-white; background: $color-white;
} }
#go-to-cart-button a { #go-to-cart-button {
color: #303030; margin: 10px 0;
text-decoration: underline;
a {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: #000000;
}
} }
.summary-totalizers { .summary-totalizers {
td.info { td.info {
width: 100%; width: 100%;
@ -107,12 +158,29 @@
} }
#payment-data-submit { #payment-data-submit {
background: $black-300; background: #298541;
border-radius: 8px;
border: none; border: none;
border-radius: 0;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFF;
}
.icon-lock {
display: none;
}
&:hover { &:hover {
background: lighten($black-300, 5); background: lighten($black-300, 5);
} }
@ -133,14 +201,14 @@
// border-collapse: separate; // border-collapse: separate;
// border-spacing: 16px; // border-spacing: 16px;
.product-item { // .product-item {
// height: 60px; // // height: 60px;
// background: green; // // background: green;
} // }
thead tr { // thead tr {
// background: purple; // // background: purple;
} // }
th { th {
padding: 0; padding: 0;
@ -152,6 +220,11 @@
color: $black-300; color: $black-300;
text-align: left; text-align: left;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -168,6 +241,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
.product-image { .product-image {
@ -214,6 +288,11 @@
text-decoration: none; text-decoration: none;
} }
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} }
@ -233,6 +312,11 @@
font-style: normal; font-style: normal;
color: $gray-300; color: $gray-300;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -261,6 +345,10 @@
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(sm, max) { @include mq(sm, max) {
font-size: 12px; font-size: 12px;
@ -395,6 +483,11 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $black-300; color: $black-300;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -631,10 +724,15 @@
margin-bottom: 2px; margin-bottom: 2px;
line-height: 14px; line-height: 14px;
font-family: $font-family; font-family: $font-family;
font-size: 12px; font-size: 0;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
color: $black-300; color: $black-300;
&::after {
content: "Não sei meu código postal";
font-size: 12px;
}
} }
input { input {
@ -911,6 +1009,13 @@
} }
.accordion-group { .accordion-group {
table {
outline: 1px solid #E5E5E5;
// border-radius: 0 0 8px 8px;
// border-top: none;
}
tr { tr {
padding: 10px 0; padding: 10px 0;
line-height: 16px; line-height: 16px;
@ -930,12 +1035,18 @@
&.info, &.info,
&.monetary { &.monetary {
border-bottom: 1px solid #E0E0E0;
box-shadow: none;
font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
color: $black-300; text-align: right;
padding: 10px 0; color: #7D7D7D;
padding: 25px 17px;
} }
&.info { &.info {
@ -951,12 +1062,29 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
padding: 30px 17px 22px;
line-height: 25px; line-height: 25px;
font-family: $font-family; font-family: $font-family;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
color: $black-300; color: $black-300;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
}
td.info {
font-size: 18px;
line-height: 25px;
}
td.monetary {
font-size: 14px;
line-height: 19px;
text-align: right;
} }
} }
} }

42
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -5,7 +5,49 @@ body .container-main.container-order-form .orderform-template.active {
margin-right: 0; margin-right: 0;
float: right; float: right;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
.payment-data {
background: red;
}
} }
} }
.link-gift-card {
a {
display: none;
}
}
.payment-group-list-btn {
// a {
// color: yellow;
// &:nth-child(1),
// &:nth-child(2),
// &:nth-child(3),
// &:nth-child(4),
// {
// }
// }
a:nth-child(n+1):nth-child(-n+4),
a:nth-child(n+6):nth-child(-n+9),
a:nth-child(n+11):nth-child(-n+15)
{
display: none;
}
// a {
// display: none;
// }
}

82
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -5,17 +5,43 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
} }
&-title { &-title {
font-size: 0;
margin: 0 0 32px; margin: 0 0 32px;
line-height: 33px;
font-family: $font-family; @include mq(sm, max) {
font-size: 24px; margin: 0 0 22px;
color: $black-500; }
&::after {
content: "Seu Carrinho está vazio";
line-height: 33px;
font-family: $font-family;
font-size: 24px;
font-weight: 700;
font-style: normal;
color: $black-500;
text-align: center;
text-transform: uppercase;
vertical-align: bottom;
@include mq(xl, min) {
line-height: 65px;
font-size: 48px;
}
@include mq(lg, max) {
line-height: 25px;
font-size: 18px;
}
}
} }
&-message { &-message {
@ -23,26 +49,46 @@
} }
&-links { &-links {
width: 325px; width: 32%; //327px;
height: 46px; height: 48px;
margin: 0 auto; margin: 0 auto;
border: 1px solid $black-500;
@include mq(xl, min) {
height: 66px;
}
@include mq(sm, max) {
width: 100%;
}
.link-choose-products { .link-choose-products {
width: 100%;
height: 100%;
margin: 0;
padding: 0; padding: 0;
line-height: 16px; border: 1px solid $black-500;
font-family: $font-family-secundary;
font-size: 14px;
border: none;
border-radius: 0; border-radius: 0;
color: $black-500; display: flex;
align-items: center;
justify-content: center;
font-size: 0;
background: $color-white; background: $color-white;
transition: ease-in 0.22s all;
box-shadow: none; box-shadow: none;
transition: ease-in 0.22s all;
// outline: none; // outline: none;
// letter-spacing: 0.05em;
&::after {
content: "Continuar comprando";
line-height: 16px;
font-family: $font-family-secundary;
font-size: 14px;
color: $black-500;
@include mq(xl, min) {
line-height: 33px;
font-size: 28px;
}
}
&:hover { &:hover {
background: lighten($blue-300, 5); background: lighten($blue-300, 5);
@ -52,3 +98,7 @@
} }
} }
.transactions-container.row-fluid {
display: none;
}

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

@ -96,6 +96,15 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@include mq(xl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(lg, max) {
line-height: 33px;
}
} }
.dropdown { .dropdown {

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

@ -130,15 +130,12 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.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-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
no-repeat center center;
left: 10px; left: 10px;
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;

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

@ -4,11 +4,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 54px; gap: 54px;
// margin-top: 262px;
// background: cyan; // background: cyan;
// border-top: none; // border-top: none;
// color: $color-gray2; // color: $color-gray2;
// @include mq(sm, max) {
// position: fixed;
// bottom: 0;
// background: $color-white;
// z-index: 5;
// }
&__prateleira { &__prateleira {
// margin-top: 101px; // margin-top: 101px;
height: 448px; height: 448px;
@ -26,6 +34,16 @@
// // // align-items: center; // // // align-items: center;
// // // display: flex; // // // display: flex;
// // // justify-content: space-between; // // // justify-content: space-between;
@include mq(xl, min) {
padding: 16px 63px;
}
@include mq(sm, max) {
padding: 16px;
}
} }
@ -39,6 +57,14 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
align-items: center; align-items: center;
@include mq(lg, max) {
display: grid;
grid-template-areas:
"stamps"
"address"
"developedBy"
}
// text-align: center; // text-align: center;
// // // grid-auto-flow: column; // // // grid-auto-flow: column;
// // // grid-auto-columns: max-content; // // // grid-auto-columns: max-content;
@ -64,12 +90,24 @@
// max-width: 40%; // max-width: 40%;
justify-self: flex-start; justify-self: flex-start;
@include mq(xl, min) {
font-size: 20px;
line-height: 27px;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@include mq(lg, max) {
margin-bottom: 16px;
grid-area: address;
display: flex;
justify-content: space-between;
}
} }
&__stamps { &__stamps {
@ -80,9 +118,18 @@
margin: 0; margin: 0;
@include mq(md, max) { // @include mq(md, max) {
align-self: center; // align-self: center;
margin-bottom: 12px; // margin-bottom: 12px;
// }
@include mq(lg, max) {
margin-bottom: 16px;
grid-area: stamps;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 4px;
} }
&__divider { &__divider {
@ -106,6 +153,10 @@
display: block; display: block;
height: 20px; height: 20px;
width: auto; width: auto;
@include mq(xl, min) {
height: 40px;
}
} }
} }
@ -113,6 +164,10 @@
display: block; display: block;
width: 53px; width: 53px;
height: 33px; height: 33px;
@include mq(lg, max) {
width: 30px;
}
} }
&__developedBy { &__developedBy {
@ -123,6 +178,11 @@
margin: 0; margin: 0;
justify-self: flex-end; justify-self: flex-end;
@include mq(lg, max) {
grid-area: developedBy;
justify-self: flex-start;
}
a { a {
align-items: center; align-items: center;
color: $black-300; color: $black-300;

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

@ -6,22 +6,48 @@
width: 100%; width: 100%;
border-bottom: 1px solid $black-500; border-bottom: 1px solid $black-500;
@include mq(xl, min) {
padding: 30px 256px;
}
@include mq(lg, max) {
padding: 16px 16px;
}
.container { .container {
width: auto !important; width: auto !important;
} }
&__wrapper { &__wrapper {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr 43.22% 1fr;
//repeat(3, 1fr);
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
align-items: center; align-items: center;
@include mq(xl, min) {
grid-template-columns: 1fr 54.27% 1fr;
}
@include mq(lg, max) {
display: flex;
justify-content: space-between;
}
} }
&__logo { &__logo {
img { img {
height: 37.14px; height: 37.14px;
width: auto; width: auto;
@include mq(xl, min) {
height: 91.2px;
}
@include mq(lg, max) {
height: 32.12px;
}
} }
} }
@ -30,7 +56,7 @@
// top: 50%; // top: 50%;
// left: 50%; // left: 50%;
// transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
width: 440px; // width: 43.22%; //440px;
&__container { &__container {
// position:relative; // position:relative;
@ -58,7 +84,14 @@
line-height: 14px; line-height: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
font-weight: 400;
font-style: normal;
color: $black-500; color: $black-500;
@include mq(xl, min) {
line-height: 28px;
font-size: 24px;
}
} }
&--circle { &--circle {
@ -70,6 +103,11 @@
&.active { &.active {
background: $black-500; background: $black-500;
} }
@include mq(xl, min) {
width: 24px;
height: 24px;
}
} }
&::before, &::before,
@ -106,6 +144,15 @@
img { img {
width: 12px; width: 12px;
height: 15px; height: 15px;
@include mq(xl, min) {
width: 29.47px;
height: 41.46px;
}
@include mq(lg, max) {
height: 13.33px;
}
} }
span { span {
@ -114,6 +161,11 @@
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
color: $black-300; color: $black-300;
@include mq(xl, min) {
line-height: 33px;
font-size: 24px;
}
} }
} }
} }

25
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -45,6 +45,18 @@
&--image { &--image {
height: 242px; height: 242px;
@include mq(xl, min) {
height: 485px;
}
@include mq(lg, max) {
height: 320px;
}
@include mq(sm, max) {
height: 164px;
}
} }
&--description { &--description {
@ -73,9 +85,6 @@
button { button {
padding: 5px; padding: 5px;
} }
display: flex;
flex-direction: column;
gap: 20px;
} }
&--name { &--name {
@ -89,16 +98,7 @@
color: $black-500; color: $black-500;
} }
&--options {
margin: 0 auto;
display: flex;
gap: 5px;
list-style: none;
button {
padding: 5px;
}
}
&--link { &--link {
button { button {
@ -116,7 +116,6 @@
} }
} }
} }
}
// .slick-track { // .slick-track {

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

@ -17,6 +17,7 @@ $gray-100: #EDEDED;
$gray-300: #989898; $gray-300: #989898;
$blue-300: #00C8FF; $blue-300: #00C8FF;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$red-300: #FF0000;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
@ -33,8 +34,8 @@ $grid-breakpoints: (
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 1025px,
xl: 1200px xl: 2500px
) !default; ) !default;
$z-index: ( $z-index: (