forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feature/checkout' (#1) from feature/checkout into main
Reviewed-on: #1
This commit is contained in:
commit
5e028b2439
@ -7,16 +7,122 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
await this.catalogoApi();
|
||||
this.footerBanner();
|
||||
this.footerDev();
|
||||
this.onUpdate();
|
||||
}
|
||||
|
||||
async 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.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.checkoutPagamento = await waitElement(".cart-template");
|
||||
this.footerLogo = document.querySelector(".footerCheckout__stamps");
|
||||
this.paymentText = document.querySelector(".notification");
|
||||
this.footerDeveloped = document.querySelector(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
footerBanner() {
|
||||
this.paymentText.innerHTML = `
|
||||
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
|
||||
`;
|
||||
|
||||
this.footerLogo.innerHTML = `
|
||||
<li class="logo-footer-cards">
|
||||
<figure>
|
||||
|
||||
<img class="logo1" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo2" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
|
||||
|
||||
|
||||
<img class="logo3" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo4" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo5" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo6" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
|
||||
|
||||
<img class="logo7" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />
|
||||
|
||||
<span class="footerCheckout__stamps__divider"></span>
|
||||
|
||||
<img class="logo8" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
|
||||
</figure>
|
||||
|
||||
</li>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
footerDev() {
|
||||
this.footerDeveloped.innerHTML = `
|
||||
<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<figure class="logo-vtex">
|
||||
<img class="logo-vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<figure class="logo-m3">
|
||||
<img class="logo-m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
async catalogoApi() {
|
||||
this.footerPrateleira.innerHTML = `
|
||||
<h2 class="card-title">Você também pode gostar:</h2>
|
||||
<ul class="products-list"></ul>`;
|
||||
fetch(
|
||||
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
|
||||
).then((response) => {
|
||||
response.json().then((res) => {
|
||||
res.forEach((product) => {
|
||||
const novaUl = document.querySelector(".products-list");
|
||||
const name = product.productName;
|
||||
const link = product.link;
|
||||
const image = product.items[0].images[0].imageUrl;
|
||||
novaUl.innerHTML += `
|
||||
<li class="product-cards">
|
||||
<figure>
|
||||
<img class="products-image" src ="${image}" />
|
||||
</figure>
|
||||
<h3 class ="product-name">${name}</h3>
|
||||
<ul class= "size-items">
|
||||
${product.items
|
||||
.map((name) => {
|
||||
return `<li class="size-cards"> ${name.name} </li>`;
|
||||
})
|
||||
.join(" ")}
|
||||
</ul>
|
||||
<a class="product-link" href="${link}">
|
||||
VER PRODUTO
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
});
|
||||
});
|
||||
this.addCarrossel();
|
||||
}
|
||||
|
||||
/*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
|
||||
@ -24,17 +130,81 @@ export default class Footer {
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
if (carrinhoEstaVazio()) {
|
||||
target.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}*/
|
||||
|
||||
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
|
||||
let target = this.checkoutVazio;
|
||||
let myCart = document.querySelector("#cart-title");
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(() => {
|
||||
if (target.style.display == "none") {
|
||||
this.footerPrateleira.classList.remove("desable");
|
||||
myCart.classList.remove("desable");
|
||||
this.catalogoApi();
|
||||
} else {
|
||||
this.footerPrateleira.classList.add("desable");
|
||||
myCart.classList.add("desable");
|
||||
this.footerPrateleira.innerHTML = "";
|
||||
}
|
||||
});
|
||||
/*window.addEventListener("hashchange", () => {
|
||||
if ((window.location.hash = "#/cart")) {
|
||||
if (target.style.display == "none") {
|
||||
this.footerPrateleira.classList.remove("desable");
|
||||
this.catalogoApi();
|
||||
}
|
||||
} else {
|
||||
this.footerPrateleira.classList.add("desable");
|
||||
}
|
||||
});*/
|
||||
});
|
||||
|
||||
observer.observe(this.checkoutVazio, {
|
||||
attributes: true,
|
||||
});
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement(".products-list");
|
||||
setTimeout(() => {
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 601,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
/* if (window.innerWidth <= 1024) {
|
||||
$(elemento).slick({
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Header {
|
||||
@ -8,14 +7,260 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
//console.log(this.item);
|
||||
this.progressBarHtml();
|
||||
await this.progressBarProgress();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.item = await waitElement("#my-element", {
|
||||
/* this.item = await waitElement("#my-element", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});*/
|
||||
this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
progressBarHtml() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
<li>
|
||||
<div class="containerLi">
|
||||
<div>
|
||||
<p class="progress-bar-text">Meu Carrinho</p>
|
||||
<p id="progress-bar-circle-1" class="progress-bar-circle-1" ></p>
|
||||
<p class="progress-bar-line-1"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="central">
|
||||
<div class="containerLi">
|
||||
<div>
|
||||
<p class="progress-bar-text">Dados Pessoais</p>
|
||||
<p id="progress-bar-circle-2" class="progress-bar-circle-2" ></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="containerLi">
|
||||
<div>
|
||||
<p class="progress-bar-text">Pagamento</p>
|
||||
<p id="progress-bar-circle-3" class="progress-bar-circle-3" ></p>
|
||||
<p class="progress-bar-line-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
async progressBarProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.add("active");
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.hash == "#/email" ||
|
||||
window.location.hash == "#/profile" ||
|
||||
window.location.hash == "#/shipping"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.add("active");
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (window.location.hash == "#/payment") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.add("active");
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,15 @@
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $color-black;
|
||||
color: $color-black2;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: lighen($color-black, 10);
|
||||
@ -25,63 +32,127 @@
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
color: $color-black2;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-family: $font-family-secundary;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-gray4;
|
||||
color: $color-black2;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-family: $font-family-secundary;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 47px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
color: $color-black2;
|
||||
font-family: $font-family;
|
||||
padding: 0 16px;
|
||||
border: 2px solid $color-gray3;
|
||||
border: 1px solid $color-black2;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
width: 65.737%;
|
||||
@media (min-width: 2500px) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@media (max-width: 1024px) {
|
||||
width: 84.498% !important;
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 57.6% !important;
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black;
|
||||
border-radius: 5px;
|
||||
background-color: $color-blue2;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
border: none;
|
||||
color: $color-black2;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
width: 17.326%;
|
||||
font-family: $font-family;
|
||||
height: 54px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@media (min-width: 2500px) {
|
||||
width: 219px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 30px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 49px;
|
||||
/* position: absolute; */
|
||||
top: -8px;
|
||||
width: 33.8%;
|
||||
}
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 49px;
|
||||
}
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
color: $color-black2;
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -89,11 +160,19 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: $color-black;
|
||||
color: $color-black2;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: $color-blue2;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -101,7 +180,7 @@
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: #303030;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -118,10 +197,27 @@
|
||||
padding: 16px;
|
||||
|
||||
.accordion-heading {
|
||||
.icon-user,
|
||||
.icon-home,
|
||||
.icon-credit-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
color: $color-black;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
font-family: font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
@ -130,7 +226,7 @@
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background-color: $color-blue2;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
@ -143,10 +239,28 @@
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
div.form-step.box-info {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
display: none;
|
||||
color: $color-black;
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -157,9 +271,10 @@
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $color-gray6;
|
||||
box-shadow: none;
|
||||
width: 95.331%;
|
||||
}
|
||||
|
||||
.help.error {
|
||||
@ -170,6 +285,7 @@
|
||||
.box-client-info-pj {
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
display: none;
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
@ -182,18 +298,20 @@
|
||||
|
||||
button.submit {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
background: $color-blue2;
|
||||
color: $color-white;
|
||||
margin-top: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
background: $color-blue2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($color-black, 5);
|
||||
background: $color-blue2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,7 +388,65 @@
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
p.input.ship-postalCode.required.text {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
label {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
#ship-postalCode {
|
||||
padding-right: 67.612%;
|
||||
}
|
||||
}
|
||||
|
||||
p.input.ship-country.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input .ship-complement .text {
|
||||
display: inline-block;
|
||||
width: 95.331%;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
#ship-number {
|
||||
width: 98.67%;
|
||||
}
|
||||
|
||||
#ship-city {
|
||||
width: 98.67%;
|
||||
}
|
||||
|
||||
#ship-state {
|
||||
width: 98.712%;
|
||||
}
|
||||
|
||||
div {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
}
|
||||
@ -286,4 +462,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.input.ship-country.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p.input.postalCode.text {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p.input.ship-postalCode.required.text {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-black;
|
||||
background: $color-green;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
@ -114,11 +114,11 @@
|
||||
color: $color-black;
|
||||
padding: 0 0 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
&.quantity-price,
|
||||
&.shipping-date {
|
||||
display: none;
|
||||
@ -127,22 +127,24 @@
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: auto;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 72px;
|
||||
@media (min-width: 2500px) {
|
||||
height: 146px;
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
width: 60px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
width: auto;
|
||||
@media (min-width: 2500px) {
|
||||
height: 146px;
|
||||
max-width: 100%;
|
||||
width: 146px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -155,7 +157,8 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blue;
|
||||
font-family: $font-family-secundary;
|
||||
color: #000000;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
@ -178,12 +181,53 @@
|
||||
}
|
||||
}
|
||||
|
||||
th.shipping-date,
|
||||
th.quantity,
|
||||
th.product,
|
||||
th.product-price {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
th.quantity-price {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.shipping-date {
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.quantity-price {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -218,7 +262,11 @@
|
||||
td.quantity {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border-radius: 8px;
|
||||
width: 99px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -234,7 +282,7 @@
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
display: block;
|
||||
@ -243,6 +291,7 @@
|
||||
padding: 8px 0;
|
||||
width: 38px;
|
||||
color: $color-gray2;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(lg, max) {
|
||||
@ -253,17 +302,19 @@
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding: 1px 12px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: $color-blue2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-minus-sign {
|
||||
&:before {
|
||||
content: "-";
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -308,6 +359,13 @@
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.total-selling-price {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
}
|
||||
}
|
||||
|
||||
.item-remove {
|
||||
@ -339,9 +397,15 @@
|
||||
}
|
||||
|
||||
.summary {
|
||||
/* @media (min-width: 2500px) {
|
||||
display: flex;
|
||||
}*/
|
||||
.cart-more-options {
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
/*@media (min-width: 2500px) {
|
||||
width: max-content;
|
||||
}*/
|
||||
|
||||
.srp-container {
|
||||
padding: 0 0 0 10px;
|
||||
@ -351,6 +415,11 @@
|
||||
}
|
||||
|
||||
.srp-main-title {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
margin: 32px 0 12px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@ -364,6 +433,12 @@
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
width: 552px;
|
||||
}
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
@ -405,18 +480,23 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $color-black;
|
||||
background-color: $color-blue2;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
@ -441,6 +521,9 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
@media (min-width: 2500px) {
|
||||
width: 543.67px;
|
||||
}
|
||||
}
|
||||
|
||||
&__current {
|
||||
@ -453,7 +536,11 @@
|
||||
}
|
||||
|
||||
label {
|
||||
width: 50%;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
@ -462,6 +549,10 @@
|
||||
}
|
||||
|
||||
.srp-postal-code {
|
||||
#ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
label {
|
||||
font-family: $font-family;
|
||||
@ -470,14 +561,14 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-gray3;
|
||||
color: $color-black2;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
padding: 12px 8px;
|
||||
@ -485,9 +576,9 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $color-black;
|
||||
background-color: $color-blue2;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
@ -495,10 +586,13 @@
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
top: 36px;
|
||||
top: 26px;
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
width: 100px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
@ -510,16 +604,18 @@
|
||||
}
|
||||
|
||||
small a {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $color-blue;
|
||||
margin-top: 7px;
|
||||
color: $color-black2;
|
||||
margin-top: 4px;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
display: none;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
@ -608,7 +704,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -624,7 +720,7 @@
|
||||
}
|
||||
|
||||
.link-coupon-add {
|
||||
color: #303030;
|
||||
color: $color-black;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -673,17 +769,19 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: $color-black;
|
||||
background: $color-blue2;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
color: $color-black2;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 6px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 94px;
|
||||
width: 133px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -704,6 +802,11 @@
|
||||
.accordion-group {
|
||||
tr {
|
||||
border-color: #e5e5e5;
|
||||
th {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
@ -718,6 +821,12 @@
|
||||
line-height: 16px;
|
||||
color: $color-black;
|
||||
padding: 12px 0;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
width: 153px;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -734,10 +843,16 @@
|
||||
td.info,
|
||||
td.monetary {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
line-height: 25px;
|
||||
color: $color-black;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
width: 153px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -766,7 +881,7 @@
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -776,15 +891,15 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $color-green;
|
||||
background: $color-blue2;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
transition: ease-in 0.22s all;
|
||||
@ -797,14 +912,20 @@
|
||||
&:after {
|
||||
content: "finalizar compra";
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
text-shadow: none;
|
||||
color: $color-black2;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,181 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mini-cart {
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
@media (max-width: 1024px) {
|
||||
width: 98%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
@media (max-width: 1024px) {
|
||||
width: 98%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
width: 66.1132%;
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
.box-client-info-pf {
|
||||
label,
|
||||
input {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
height: 51px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
}
|
||||
label.checkbox.newsletter-label {
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
#opt-in-newsletter {
|
||||
width: 6.53%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.span6 {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.client-email {
|
||||
@media (max-width: 1024px) {
|
||||
margin: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
#client-email {
|
||||
@media (max-width: 1024px) {
|
||||
width: 94.7792% !important;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.client-first-name {
|
||||
width: 42.933%;
|
||||
margin-right: 25px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603% !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
margin-right: 60px;
|
||||
}
|
||||
#client-first-name {
|
||||
width: 100% !important;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-last-name {
|
||||
width: 42.933%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-right: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
margin-right: 60px;
|
||||
}
|
||||
#client-last-name {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-document {
|
||||
width: 42.933%;
|
||||
margin-right: 25px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
}
|
||||
#client-document {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-phone {
|
||||
width: 42.933%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-left: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
}
|
||||
#client-phone {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#holder-document-0,
|
||||
.FormFieldLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.PaymentCardNumber input {
|
||||
display: block;
|
||||
width: 223px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
width: 393px;
|
||||
height: 292px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@ -9,29 +9,61 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 170px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-black2;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
border-radius: 0px;
|
||||
font-family: $font-family-secundary;
|
||||
width: 287px;
|
||||
height: 24px;
|
||||
color: $color-black2;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
margin: auto;
|
||||
margin-bottom: 264px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 638.67px;
|
||||
height: 66px;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@ html {
|
||||
}
|
||||
|
||||
footer .footerCheckout__wrapper {
|
||||
width: 94.9734%;
|
||||
margin: auto auto 0 auto;
|
||||
width: 100%;
|
||||
margin-top: 56px;
|
||||
}
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
@ -50,12 +50,23 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $color-black;
|
||||
text-shadow: none;
|
||||
span {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 15%);
|
||||
@ -66,20 +77,34 @@ body {
|
||||
color: $color-black !important;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-gray2;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
margin: 40px 0 30px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin: 16px 0 16px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500) {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
cart-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
@ -101,14 +101,32 @@
|
||||
position: absolute;
|
||||
}
|
||||
.slick-prev {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: 155px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
left: 10px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 26px;
|
||||
height: 56px;
|
||||
top: 251px;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
border: none;
|
||||
bottom: 235px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
right: 10px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 26px;
|
||||
height: 56px;
|
||||
top: 251px;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
|
||||
@ -1,12 +1,132 @@
|
||||
/* _footer.scss */
|
||||
.desable {
|
||||
display: none;
|
||||
}
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
&__prateleira {
|
||||
.card-title {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 38px;
|
||||
color: $color-black2;
|
||||
font-family: font-family-secundary;
|
||||
text-align: center;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: $color-black2;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 485.07px;
|
||||
height: 34.99px;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 97.19%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.products-image {
|
||||
width: 97.19%;
|
||||
}
|
||||
|
||||
.size-items {
|
||||
list-style-type: none;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 92%;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.size-cards {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
margin-bottom: 20px;
|
||||
background-color: $color-blue2;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
padding: 4.78px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
/* identical to box height */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a.product-link {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
background: #00c8ff;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
width: 97%;
|
||||
color: white;
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $color-black2;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
@ -18,9 +138,13 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
width: 537px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -31,6 +155,40 @@
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
.logo-footer-cards {
|
||||
display: flex;
|
||||
|
||||
.logo1,
|
||||
.logo6,
|
||||
.logo7 {
|
||||
width: 35.65px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 69.63px;
|
||||
}
|
||||
}
|
||||
.logo2,
|
||||
.logo3,
|
||||
.logo5 {
|
||||
width: 34.78px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 67.93px;
|
||||
}
|
||||
}
|
||||
.logo4 {
|
||||
width: 36.52px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 71.33px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo8 {
|
||||
width: 53px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 103.52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
@ -50,6 +208,33 @@
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
span {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-m3 {
|
||||
margin: 0;
|
||||
width: 28.66px;
|
||||
height: 15.65px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 55.98px;
|
||||
height: 30.55px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-vtex {
|
||||
margin: 0;
|
||||
width: 44.92px;
|
||||
height: 16px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 87.73px;
|
||||
height: 31.24px;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
|
||||
@ -1,36 +1,181 @@
|
||||
/* _header.scss */
|
||||
|
||||
.headerCheckout {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
border-bottom: 1px solid $color-black;
|
||||
.container {
|
||||
width: auto !important;
|
||||
width: 79.532% !important;
|
||||
.progress-bar {
|
||||
width: 446px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 790.7px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
li .containerLi {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.central .containerLi {
|
||||
align-items: center;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
li:last-child .containerLi {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
li .containerLi div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black2;
|
||||
width: 39.9103%;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
li.central {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li #progress-bar-circle-1,
|
||||
li #progress-bar-circle-2,
|
||||
li #progress-bar-circle-3 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
li #progress-bar-circle-1.active,
|
||||
li #progress-bar-circle-2.active,
|
||||
li #progress-bar-circle-3.active {
|
||||
border: none;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.progress-bar-line-1 {
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid $color-black2;
|
||||
}
|
||||
|
||||
.progress-bar-line-2 {
|
||||
position: absolute;
|
||||
right: 21%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid $color-black2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
}
|
||||
}
|
||||
&__wrapper {
|
||||
margin-top: 29px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 155.58px;
|
||||
height: 99.35%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 382.07px;
|
||||
height: 91.2px;
|
||||
}
|
||||
img {
|
||||
height: 52px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family;
|
||||
margin-left: 8px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
height: auto;
|
||||
@media (min-width: 2500px) {
|
||||
width: 29.47px;
|
||||
height: 41.46px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,16 +6,19 @@ $font-family-secundary:"Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #292929;
|
||||
$color-black2: #000000;
|
||||
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
$color-gray3: #f0f0f0;
|
||||
$color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #E0E0E0;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue2: #00C8FF;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user