forked from M3-Academy/m3-academy-template-checkout
development #2
@ -7,42 +7,58 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.replaceEmptyCartContent();
|
||||
this.renderPrateleira();
|
||||
this.stampsHTML();
|
||||
this.developedByHTML();
|
||||
this.onUpdate();
|
||||
await this.stampsHTML();
|
||||
await this.developedByHTML();
|
||||
await this.onUpdate();
|
||||
await this.renderPrateleira();
|
||||
await this.replaceCartContent();
|
||||
// await this.replaceProfileContent();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
console.log("iniciando selectors()")
|
||||
//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.cartTitle = await waitElement("#cart-title");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.emptyCartTitle = await waitElement(".empty-cart-title");
|
||||
this.continueShopping = await waitElement("#cart-choose-products");
|
||||
this.cart = await waitElement(".cart");
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
this.frete = await waitElement(".shipping-date");
|
||||
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.naoSeiMeuCep = await waitElement(".ship-postalCode");
|
||||
|
||||
// this.prateleiraSlick = await waitElement(".prateleira__carousel")
|
||||
}
|
||||
|
||||
replaceEmptyCartContent() {
|
||||
if (this.checkoutVazio) {
|
||||
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";
|
||||
async replaceCartContent() {
|
||||
console.log("entrou no replaceCart")
|
||||
|
||||
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:
|
||||
// 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
|
||||
@ -52,20 +68,27 @@ export default class Footer {
|
||||
let target = this.checkoutVazio;
|
||||
let config = { attributes: true };
|
||||
|
||||
// this.cartTitle.style.display = "none";
|
||||
// this.prateleira.style.display = "none";
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
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) => {
|
||||
mutations.forEach(() => {
|
||||
|
||||
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.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
|
||||
console.log("Carrinho NÃO está vazio");
|
||||
console.log("Carrinho NÃO está vazio e está no #/cart");
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
@ -74,6 +97,18 @@ export default class Footer {
|
||||
|
||||
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() {
|
||||
@ -141,11 +176,15 @@ export default class Footer {
|
||||
this.prateleira.appendChild(prateleiraSlick);
|
||||
prateleiraSlick.innerHTML = cardsStructure;
|
||||
|
||||
if(window.innerWidth > 1024) {
|
||||
// if(window.innerWidth > 1024) {
|
||||
this.addCarrossel(prateleiraSlick);
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
// else {
|
||||
// this.prateleira.style.display = none;
|
||||
// }
|
||||
}
|
||||
|
||||
async addCarrossel(element) {
|
||||
@ -154,11 +193,27 @@ export default class Footer {
|
||||
$(element).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: false
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
async stampsHTML() {
|
||||
console.log("entrou no stamps")
|
||||
|
||||
const stamps = await waitElement('.footerCheckout__stamps');
|
||||
|
||||
// console.log(stamps.children[0], stamps.children[2]);
|
||||
@ -204,6 +259,8 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async developedByHTML() {
|
||||
console.log("entrou no developedBy")
|
||||
|
||||
const developedBy = await waitElement('.footerCheckout__developedBy');
|
||||
|
||||
// console.log(developedBy.children[0].children[0]);
|
||||
|
||||
@ -7,18 +7,22 @@ export default class Header {
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log("entrou no init do header")
|
||||
await this.selectors();
|
||||
this.progressBarStructure();
|
||||
await this.progressBarStructure();
|
||||
await this.progressBarMove();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
// this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
console.log("progressBar await element")
|
||||
}
|
||||
|
||||
progressBarStructure() {
|
||||
async progressBarStructure() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
console.log("entrou no if do progressBarStructure")
|
||||
|
||||
this.progressBar.innerHTML = `
|
||||
<ul class="progress-bar__container">
|
||||
<li class="progress-bar__stage">
|
||||
@ -48,7 +52,9 @@ export default class Header {
|
||||
|
||||
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) => {
|
||||
|
||||
@ -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")
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -10,14 +10,21 @@
|
||||
|
||||
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
border: none;
|
||||
// border-color: $color-gray4;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $black-300;
|
||||
font-size: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
|
||||
&:hover {
|
||||
color: lighen($black-300, 10);
|
||||
@ -34,28 +41,43 @@
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
span, small {
|
||||
line-height: 23px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-gray4;
|
||||
}
|
||||
// small {
|
||||
// color: $color-gray4;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 24px;
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
color: $black-300;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
|
||||
|
||||
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;
|
||||
border: 2px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@ -63,11 +85,23 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $black-300;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
height: 52px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
line-height: 19px;
|
||||
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;
|
||||
top: 0;
|
||||
|
||||
@ -79,19 +113,36 @@
|
||||
}
|
||||
|
||||
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 {
|
||||
padding: 16px;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
padding: 16px 16px 24px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 9px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
color: #000000;
|
||||
|
||||
// margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -99,11 +150,18 @@
|
||||
|
||||
li {
|
||||
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 {
|
||||
color: $black-300;
|
||||
color: $blue-300;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -122,20 +180,48 @@
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
padding: 28px 17px;
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #292929;
|
||||
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
}
|
||||
i::before {
|
||||
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 {
|
||||
@ -147,28 +233,47 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
.box-client-info {
|
||||
margin-bottom: 44px;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
color: $black-300;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
|
||||
label {
|
||||
color: $black-300;
|
||||
font-weight: 500;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
padding: 12px;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -178,6 +283,8 @@
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: $black-300;
|
||||
@ -191,19 +298,32 @@
|
||||
}
|
||||
|
||||
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-radius: 5px;
|
||||
background: $black-300;
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background: lighten($black-300, 5);
|
||||
background: lighten($blue-300, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($black-300, 5);
|
||||
background: darken($blue-300, 5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -51,14 +51,23 @@
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
// border: 1px solid #E5E5E5;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
|
||||
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;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -83,10 +92,41 @@
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: translateX(-1);
|
||||
}
|
||||
|
||||
span.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
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;
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
color: #303030;
|
||||
text-decoration: underline;
|
||||
#go-to-cart-button {
|
||||
margin: 10px 0;
|
||||
|
||||
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 {
|
||||
td.info {
|
||||
width: 100%;
|
||||
@ -107,12 +158,29 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $black-300;
|
||||
background: #298541;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
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 {
|
||||
background: lighten($black-300, 5);
|
||||
}
|
||||
@ -133,14 +201,14 @@
|
||||
// border-collapse: separate;
|
||||
// border-spacing: 16px;
|
||||
|
||||
.product-item {
|
||||
// height: 60px;
|
||||
// background: green;
|
||||
}
|
||||
// .product-item {
|
||||
// // height: 60px;
|
||||
// // background: green;
|
||||
// }
|
||||
|
||||
thead tr {
|
||||
// background: purple;
|
||||
}
|
||||
// thead tr {
|
||||
// // background: purple;
|
||||
// }
|
||||
|
||||
th {
|
||||
padding: 0;
|
||||
@ -152,6 +220,11 @@
|
||||
color: $black-300;
|
||||
text-align: left;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
&.quantity-price,
|
||||
&.shipping-date {
|
||||
@ -168,6 +241,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
.product-image {
|
||||
@ -214,6 +288,11 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
}
|
||||
@ -233,6 +312,11 @@
|
||||
font-style: normal;
|
||||
color: $gray-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
@ -261,6 +345,10 @@
|
||||
|
||||
text-decoration-line: line-through;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 12px;
|
||||
@ -395,6 +483,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -631,10 +724,15 @@
|
||||
margin-bottom: 2px;
|
||||
line-height: 14px;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
font-size: 0;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color: $black-300;
|
||||
|
||||
&::after {
|
||||
content: "Não sei meu código postal";
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -911,6 +1009,13 @@
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
|
||||
table {
|
||||
outline: 1px solid #E5E5E5;
|
||||
// border-radius: 0 0 8px 8px;
|
||||
// border-top: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
padding: 10px 0;
|
||||
line-height: 16px;
|
||||
@ -930,12 +1035,18 @@
|
||||
|
||||
&.info,
|
||||
&.monetary {
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
box-shadow: none;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black-300;
|
||||
padding: 10px 0;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
color: #7D7D7D;
|
||||
|
||||
padding: 25px 17px;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -951,12 +1062,29 @@
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
padding: 30px 17px 22px;
|
||||
|
||||
line-height: 25px;
|
||||
font-family: $font-family;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,49 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.orderform-template-holder {
|
||||
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;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,17 +5,43 @@
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 0;
|
||||
margin: 0 0 32px;
|
||||
line-height: 33px;
|
||||
font-family: $font-family;
|
||||
font-size: 24px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
|
||||
&::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 {
|
||||
@ -23,26 +49,46 @@
|
||||
}
|
||||
|
||||
&-links {
|
||||
width: 325px;
|
||||
height: 46px;
|
||||
width: 32%; //327px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 0;
|
||||
color: $black-500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0;
|
||||
background: $color-white;
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
transition: ease-in 0.22s all;
|
||||
// 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 {
|
||||
background: lighten($blue-300, 5);
|
||||
@ -52,3 +98,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.transactions-container.row-fluid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -96,6 +96,15 @@ body {
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
@ -130,15 +130,12 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
.slick-prev {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
no-repeat center center;
|
||||
left: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
|
||||
@ -4,11 +4,19 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 54px;
|
||||
// margin-top: 262px;
|
||||
// background: cyan;
|
||||
|
||||
// border-top: none;
|
||||
// color: $color-gray2;
|
||||
|
||||
// @include mq(sm, max) {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// background: $color-white;
|
||||
// z-index: 5;
|
||||
// }
|
||||
|
||||
&__prateleira {
|
||||
// margin-top: 101px;
|
||||
height: 448px;
|
||||
@ -26,6 +34,16 @@
|
||||
// // // align-items: center;
|
||||
// // // display: flex;
|
||||
// // // 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);
|
||||
align-items: center;
|
||||
|
||||
@include mq(lg, max) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"stamps"
|
||||
"address"
|
||||
"developedBy"
|
||||
}
|
||||
|
||||
// text-align: center;
|
||||
// // // grid-auto-flow: column;
|
||||
// // // grid-auto-columns: max-content;
|
||||
@ -64,12 +90,24 @@
|
||||
// max-width: 40%;
|
||||
justify-self: flex-start;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
margin-bottom: 16px;
|
||||
grid-area: address;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
@ -80,9 +118,18 @@
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
// @include mq(md, max) {
|
||||
// align-self: center;
|
||||
// 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 {
|
||||
@ -106,6 +153,10 @@
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,6 +164,10 @@
|
||||
display: block;
|
||||
width: 53px;
|
||||
height: 33px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
@ -123,6 +178,11 @@
|
||||
margin: 0;
|
||||
justify-self: flex-end;
|
||||
|
||||
@include mq(lg, max) {
|
||||
grid-area: developedBy;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: $black-300;
|
||||
|
||||
@ -6,22 +6,48 @@
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 30px 256px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: 1fr 43.22% 1fr;
|
||||
//repeat(3, 1fr);
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
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 {
|
||||
img {
|
||||
height: 37.14px;
|
||||
width: auto;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 91.2px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 32.12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +56,7 @@
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
width: 440px;
|
||||
// width: 43.22%; //440px;
|
||||
|
||||
&__container {
|
||||
// position:relative;
|
||||
@ -58,7 +84,14 @@
|
||||
line-height: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 28px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--circle {
|
||||
@ -70,6 +103,11 @@
|
||||
&.active {
|
||||
background: $black-500;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
@ -106,6 +144,15 @@
|
||||
img {
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 29.47px;
|
||||
height: 41.46px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 13.33px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -114,6 +161,11 @@
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 33px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,18 @@
|
||||
|
||||
&--image {
|
||||
height: 242px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 485px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 164px;
|
||||
}
|
||||
}
|
||||
|
||||
&--description {
|
||||
@ -73,9 +85,6 @@
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
&--name {
|
||||
@ -89,16 +98,7 @@
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
&--options {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
list-style: none;
|
||||
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
button {
|
||||
@ -116,7 +116,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .slick-track {
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ $gray-100: #EDEDED;
|
||||
$gray-300: #989898;
|
||||
$blue-300: #00C8FF;
|
||||
$color-gray5: #e5e5e5;
|
||||
$red-300: #FF0000;
|
||||
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
@ -33,8 +34,8 @@ $grid-breakpoints: (
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
lg: 1025px,
|
||||
xl: 2500px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user