forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'Develop' (#4) from Develop into main
Reviewed-on: #4
This commit is contained in:
commit
c27e8ba1fd
3
checkout/src/arquivos/assets/svgs/Rectangle 138.svg
Normal file
3
checkout/src/arquivos/assets/svgs/Rectangle 138.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect id="Rectangle 138" x="0.5" y="0.5" width="17" height="17" rx="2.5" stroke="#C4C4C4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 195 B |
@ -55,7 +55,7 @@ export default class Footer {
|
|||||||
let target = this.checkoutVazio;
|
let target = this.checkoutVazio;
|
||||||
let target2 = this.prateleira;
|
let target2 = this.prateleira;
|
||||||
let Footer = this.Footer;
|
let Footer = this.Footer;
|
||||||
const MeuCarrinho = this.MeuCarrinho
|
const MeuCarrinho = this.MeuCarrinho;
|
||||||
let config = {
|
let config = {
|
||||||
childList: false,
|
childList: false,
|
||||||
attributes: true,
|
attributes: true,
|
||||||
@ -63,7 +63,8 @@ export default class Footer {
|
|||||||
attributeFilter:["style"],
|
attributeFilter:["style"],
|
||||||
subtree:false,
|
subtree:false,
|
||||||
characterData:true,
|
characterData:true,
|
||||||
characterDataOldValue:true};
|
characterDataOldValue:true
|
||||||
|
};
|
||||||
let observer = new MutationObserver((mutations) => {
|
let observer = new MutationObserver((mutations) => {
|
||||||
mutations.forEach(function (mutation) {
|
mutations.forEach(function (mutation) {
|
||||||
console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
|
console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
|
||||||
@ -71,18 +72,17 @@ export default class Footer {
|
|||||||
if(mutation.oldValue == "display: none;"){
|
if(mutation.oldValue == "display: none;"){
|
||||||
console.log("entrei no if",mutation.oldValue)
|
console.log("entrei no if",mutation.oldValue)
|
||||||
MeuCarrinho.classList.add('hide');
|
MeuCarrinho.classList.add('hide');
|
||||||
target2.classList.add('hide')
|
target2.classList.add('hide');
|
||||||
Footer.classList.remove('footerCheckout__ComSlick')
|
Footer.classList.remove('footerCheckout__ComSlick');
|
||||||
}else{
|
}else{
|
||||||
console.log("entrei no else",mutation.oldValue)
|
console.log("entrei no else",mutation.oldValue)
|
||||||
MeuCarrinho.classList.remove('hide');
|
MeuCarrinho.classList.remove('hide');
|
||||||
target2.classList.remove('hide')
|
target2.classList.remove('hide');
|
||||||
Footer.classList.add('footerCheckout__ComSlick')
|
Footer.classList.add('footerCheckout__ComSlick');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
observer.observe(target, config);
|
observer.observe(target, config);
|
||||||
}
|
}
|
||||||
async addCarrossel() {
|
async addCarrossel() {
|
||||||
@ -100,7 +100,7 @@ export default class Footer {
|
|||||||
<h2 class="SLick_title">Você também pode gostar:</h2>
|
<h2 class="SLick_title">Você também pode gostar:</h2>
|
||||||
<ul class="slick">
|
<ul class="slick">
|
||||||
<li class="quadrado">
|
<li class="quadrado">
|
||||||
<img type="image"
|
<img class="imago" type="image"
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164491/azul-1.jpg?v=637781133812700000"
|
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164491/azul-1.jpg?v=637781133812700000"
|
||||||
alt="Sandália Azul Spike Amarração" placeholder="Imagem"
|
alt="Sandália Azul Spike Amarração" placeholder="Imagem"
|
||||||
disabled
|
disabled
|
||||||
@ -117,7 +117,7 @@ export default class Footer {
|
|||||||
<button class="Ver__produto">Ver Produto</button>
|
<button class="Ver__produto">Ver Produto</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="quadrado">
|
<li class="quadrado">
|
||||||
<img type="image"
|
<img class="imago" type="image"
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164493/roxo-1.jpg?v=637781136320600000"
|
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164493/roxo-1.jpg?v=637781136320600000"
|
||||||
alt="Sandália Roxo Spike Amarração" placeholder="Imagem"
|
alt="Sandália Roxo Spike Amarração" placeholder="Imagem"
|
||||||
disabled
|
disabled
|
||||||
@ -133,7 +133,7 @@ export default class Footer {
|
|||||||
<button class="Ver__produto" >Ver Produto</button>
|
<button class="Ver__produto" >Ver Produto</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="quadrado">
|
<li class="quadrado">
|
||||||
<img type="image"
|
<img class="imago" type="image"
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164495/verde-1.jpg?v=63778113885273000"
|
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164495/verde-1.jpg?v=63778113885273000"
|
||||||
alt="Sandália Verde Spike Amarração" placeholder="Imagem"
|
alt="Sandália Verde Spike Amarração" placeholder="Imagem"
|
||||||
disabled
|
disabled
|
||||||
@ -148,7 +148,7 @@ export default class Footer {
|
|||||||
</div>
|
</div>
|
||||||
<button class="Ver__produto" >Ver Produto</button>
|
<button class="Ver__produto" >Ver Produto</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="quadrado">
|
<li class="quadrado">
|
||||||
<img class="imago" type="image"
|
<img class="imago" type="image"
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/162369/Rectangle-64.png?v=637363001466570000"
|
src="https://agenciamagma.vteximg.com.br/arquivos/ids/162369/Rectangle-64.png?v=637363001466570000"
|
||||||
alt="Jaqueta Masculina Thermoball Eco" placeholder="Imagem"
|
alt="Jaqueta Masculina Thermoball Eco" placeholder="Imagem"
|
||||||
@ -163,7 +163,7 @@ export default class Footer {
|
|||||||
<button class="Ver__produto" >Ver Produto</button>
|
<button class="Ver__produto" >Ver Produto</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="quadrado">
|
<li class="quadrado">
|
||||||
<img type="image"
|
<img class="imago" type="image"
|
||||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/165591/SANDALIA-AMARELA.png?v=63797"
|
src="https://agenciamagma.vteximg.com.br/arquivos/ids/165591/SANDALIA-AMARELA.png?v=63797"
|
||||||
alt="Sandália Amarela Spike Amarração" placeholder="Imagem"
|
alt="Sandália Amarela Spike Amarração" placeholder="Imagem"
|
||||||
disabled
|
disabled
|
||||||
@ -184,6 +184,8 @@ export default class Footer {
|
|||||||
slidesToShow: 4,
|
slidesToShow: 4,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
variableWidth:false,
|
variableWidth:false,
|
||||||
|
adaptiveHeight: false,
|
||||||
|
|
||||||
prevArrow: $(".Fakebutton-Prev"),
|
prevArrow: $(".Fakebutton-Prev"),
|
||||||
nextArrow: $(".Fakebutton-Next"),
|
nextArrow: $(".Fakebutton-Next"),
|
||||||
responsive:[{
|
responsive:[{
|
||||||
@ -193,6 +195,7 @@ export default class Footer {
|
|||||||
slidesToShow: 2,
|
slidesToShow: 2,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
variableWidth:false,
|
variableWidth:false,
|
||||||
|
adaptiveHeight: false,
|
||||||
prevArrow: $(".Fakebutton-Prev"),
|
prevArrow: $(".Fakebutton-Prev"),
|
||||||
nextArrow: $(".Fakebutton-Next"),
|
nextArrow: $(".Fakebutton-Next"),
|
||||||
}
|
}
|
||||||
@ -204,6 +207,7 @@ export default class Footer {
|
|||||||
slidesToShow: 3,
|
slidesToShow: 3,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
variableWidth:false,
|
variableWidth:false,
|
||||||
|
adaptiveHeight: false,
|
||||||
prevArrow: $(".Fakebutton-Prev"),
|
prevArrow: $(".Fakebutton-Prev"),
|
||||||
nextArrow: $(".Fakebutton-Next"),
|
nextArrow: $(".Fakebutton-Next"),
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,8 +21,10 @@ export default class Header {
|
|||||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||||
});
|
});
|
||||||
|
this.totalizer = await waitElement(".totalizers-list");
|
||||||
this.MeuCarrinho = await waitElement("#cart-title");
|
this.MeuCarrinho = await waitElement("#cart-title");
|
||||||
this.Finalizar_Pedido = await waitElement("#orderform-title");
|
this.Finalizar_Pedido = await waitElement("#orderform-title");
|
||||||
|
this.Finalizar_Pagamento = await waitElement(".store-country-BRA");
|
||||||
this.step = document.querySelector('.completed');
|
this.step = document.querySelector('.completed');
|
||||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||||
this.Footer = await waitElement(".footerCheckout");
|
this.Footer = await waitElement(".footerCheckout");
|
||||||
@ -67,7 +69,7 @@ export default class Header {
|
|||||||
step2.classList.remove('completed');
|
step2.classList.remove('completed');
|
||||||
step3.classList.remove('completed');
|
step3.classList.remove('completed');
|
||||||
li.children[1].classList.add('completed');
|
li.children[1].classList.add('completed');
|
||||||
target2.classList.toggle('hide')
|
target2.classList.remove('hide')
|
||||||
Footer.classList.add('footerCheckout__ComSlick')
|
Footer.classList.add('footerCheckout__ComSlick')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -76,6 +78,7 @@ export default class Header {
|
|||||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){
|
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){
|
||||||
MeuCarrinho.classList.add('hide');
|
MeuCarrinho.classList.add('hide');
|
||||||
this.Finalizar_Pedido.classList.remove('hide')
|
this.Finalizar_Pedido.classList.remove('hide')
|
||||||
|
this.Finalizar_Pagamento.classList.add('hide');
|
||||||
if(li.children[1].id === "step_2"){
|
if(li.children[1].id === "step_2"){
|
||||||
step1.classList.remove('completed');
|
step1.classList.remove('completed');
|
||||||
step3.classList.remove('completed');
|
step3.classList.remove('completed');
|
||||||
@ -84,9 +87,14 @@ export default class Header {
|
|||||||
Footer.classList.remove('footerCheckout__ComSlick');
|
Footer.classList.remove('footerCheckout__ComSlick');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
|
||||||
|
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){
|
||||||
|
this.Finalizar_Pagamento.classList.remove('hide');
|
||||||
|
}
|
||||||
if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){
|
if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){
|
||||||
MeuCarrinho.classList.add('hide');
|
MeuCarrinho.classList.add('hide');
|
||||||
this.Finalizar_Pedido.classList.remove('hide')
|
this.Finalizar_Pedido.classList.remove('hide')
|
||||||
|
this.Finalizar_Pagamento.classList.remove('hide');
|
||||||
if(li.children[1].id === "step_3"){
|
if(li.children[1].id === "step_3"){
|
||||||
step1.classList.remove('completed');
|
step1.classList.remove('completed');
|
||||||
step2.classList.remove('completed');
|
step2.classList.remove('completed');
|
||||||
|
|||||||
@ -1,15 +1,22 @@
|
|||||||
import { waitElement } from "m3-utils";
|
import { waitElement } from "m3-utils";
|
||||||
|
|
||||||
export default class Footer {
|
export default class Footer {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
console.log("app.js funcionando")
|
console.log("app.js funcionando")
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
|
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
await this.event();
|
await this.event();
|
||||||
await this.TextTransfer();
|
await this.TextTransfer();
|
||||||
|
await this.onUpdate();
|
||||||
|
await this.getPoint();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
async selectors() {
|
||||||
@ -43,18 +50,26 @@ export default class Footer {
|
|||||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||||
});
|
});
|
||||||
this.tbody = await waitElement(".accordion-inner");
|
this.divtotalizaer = await waitElement(".totalizers");
|
||||||
this.LapisAzul = await waitElement(".icon-edit");
|
this.LapisAzul = await waitElement(".icon-edit");
|
||||||
|
this.cartfixed = await waitElement(".cart-fixed");
|
||||||
this.btnCep = await waitElement("#shipping-calculate-link");
|
this.btnCep = await waitElement("#shipping-calculate-link");
|
||||||
|
this.Dados_profile_payment_wrapper = await waitElement("#payment-data");
|
||||||
this.Dados_profile = document.querySelectorAll(".accordion-group")[1];
|
this.Dados_profile = document.querySelectorAll(".accordion-group")[1];
|
||||||
|
this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3];
|
||||||
|
this.safeP = document.createElement("p");
|
||||||
|
this.Dados_profileAll = document.querySelectorAll(".accordion-group");
|
||||||
this.pay__Wrapper = document.createElement("div");
|
this.pay__Wrapper = document.createElement("div");
|
||||||
this.Finalizar_btn = document.createElement("button");
|
this.Finalizar_btn = document.createElement("button");
|
||||||
this.more = document.createElement("p");
|
this.more = document.createElement("p");
|
||||||
|
this.PedidoSumary = document.createElement("h2");
|
||||||
this.wrapper = document.createElement("tr");
|
this.wrapper = document.createElement("tr");
|
||||||
}
|
}
|
||||||
async event() {
|
async event() {
|
||||||
this.btnCep.addEventListener("click",this.nonExist.bind(this))
|
this.btnCep.addEventListener("click",this.nonExist.bind(this))
|
||||||
|
window.addEventListener("hashchange", this.TextTransfer.bind(this));
|
||||||
|
window.addEventListener('resize', this.getPoint.bind(this));
|
||||||
|
window.addEventListener("hashchange", this.nonExist.bind(this));
|
||||||
}
|
}
|
||||||
async nonExist(){
|
async nonExist(){
|
||||||
this.cep = await waitElement('.ship-postalCode small a');
|
this.cep = await waitElement('.ship-postalCode small a');
|
||||||
@ -71,19 +86,78 @@ export default class Footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
async TextTransfer(){
|
async TextTransfer(){
|
||||||
|
console.log(this.cartfixed.children[1].children[0].children[0],"tabela");
|
||||||
|
this.safeP.classList.add("safep")
|
||||||
|
this.cartfixed.children[0].classList.add("hide");
|
||||||
|
this.cartfixed.children[1].children[0].children[0].appendChild(this.PedidoSumary)
|
||||||
|
this.PedidoSumary.classList.add("payment_Sumary")
|
||||||
|
const payment_group = this.Dados_profile_payment_wrapper;
|
||||||
const dadosProfile =this.Dados_profile.children[0].children[0].children[1]
|
const dadosProfile =this.Dados_profile.children[0].children[0].children[1]
|
||||||
|
const Dados_profile_payment =this.Dados_profile_payment.children[0]
|
||||||
const tbodywrapper = this.wrapper;
|
const tbodywrapper = this.wrapper;
|
||||||
const tbody = this.tbody.children[1].children[3];
|
const totalizaer = this.divtotalizaer;
|
||||||
const table = this.table.children[0].children[0].children[1];
|
const table = this.table.children[0].children[0].children[1];
|
||||||
const table_2 = this.table.children[0].children[0].children[2];
|
const table_2 = this.table.children[0].children[0].children[2];
|
||||||
tbodywrapper.classList.add("flex")
|
tbodywrapper.classList.add("flex");
|
||||||
tbodywrapper.appendChild(this.more)
|
tbodywrapper.appendChild(this.more);
|
||||||
tbodywrapper.appendChild(this.Finalizar_btn)
|
tbodywrapper.appendChild(this.Finalizar_btn);
|
||||||
tbody.appendChild(tbodywrapper)
|
totalizaer.appendChild(tbodywrapper);
|
||||||
console.log(this.LapisAzul,"lapis azul")
|
// console.log(this.Dados_profileAll,"Todos os conteiners de pagamento")
|
||||||
|
// console.log(Dados_profile_payment,"Todos os conteiners de pagamento")
|
||||||
const IconDev = document.querySelector(".footerCheckout__developedBy")
|
const IconDev = document.querySelector(".footerCheckout__developedBy")
|
||||||
|
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
|
||||||
|
Dados_profile_payment.appendChild(this.safeP)
|
||||||
|
payment_group
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[2]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =`
|
||||||
|
Cartão de Débito
|
||||||
|
`
|
||||||
|
payment_group
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[9]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =
|
||||||
|
`
|
||||||
|
Boleto à Vista
|
||||||
|
`
|
||||||
|
payment_group
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[10]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =`
|
||||||
|
Boleto Faturado
|
||||||
|
`
|
||||||
|
}
|
||||||
this.Finalizar_btn.innerHTML =`
|
this.Finalizar_btn.innerHTML =`
|
||||||
FINALIZAR COMPRA
|
<a id="Finalizar" href="https://m3academy.myvtex.com/checkout/#/email">
|
||||||
|
FINALIZAR COMPRA
|
||||||
|
</a>
|
||||||
|
`
|
||||||
|
this.PedidoSumary.innerHTML =`
|
||||||
|
Resumo do Pedido
|
||||||
`
|
`
|
||||||
dadosProfile.innerHTML =`
|
dadosProfile.innerHTML =`
|
||||||
Identificação
|
Identificação
|
||||||
@ -91,6 +165,9 @@ export default class Footer {
|
|||||||
this.more.innerHTML =`
|
this.more.innerHTML =`
|
||||||
Escolher mais produtos
|
Escolher mais produtos
|
||||||
`
|
`
|
||||||
|
this.safeP.innerHTML =`
|
||||||
|
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
|
||||||
|
`
|
||||||
table.innerHTML=
|
table.innerHTML=
|
||||||
`
|
`
|
||||||
Frete
|
Frete
|
||||||
@ -160,4 +237,112 @@ export default class Footer {
|
|||||||
CONTINUAR COMPRANDO
|
CONTINUAR COMPRANDO
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
async getPoint() {
|
||||||
|
let target = document
|
||||||
|
.getElementsByClassName("summary-cart-template-holder")[0];
|
||||||
|
// let targetsetatrr = target.setAttribute("style","width: 100%;")
|
||||||
|
let targetatrr = target.getAttribute("data-bind")
|
||||||
|
|
||||||
|
console.log(target,
|
||||||
|
"Co-ordinate of the element:",targetatrr);
|
||||||
|
}
|
||||||
|
async onUpdate() {
|
||||||
|
const target = this.Dados_profile_payment_wrapper;
|
||||||
|
const safeP = document.createElement("p");
|
||||||
|
safeP.innerHTML =`
|
||||||
|
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
|
||||||
|
`
|
||||||
|
let config = {
|
||||||
|
childList: false,
|
||||||
|
attributes: true,
|
||||||
|
attributeOldValue:true,
|
||||||
|
subtree:false,
|
||||||
|
characterData:true,
|
||||||
|
characterDataOldValue:true
|
||||||
|
};
|
||||||
|
let observer = new MutationObserver((mutations) => {
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue);
|
||||||
|
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
|
||||||
|
console.log("o pai está aberto",mutation.oldValue)
|
||||||
|
console.log(mutation)
|
||||||
|
console.log(target)
|
||||||
|
target.children[0].children[0].appendChild(safeP)
|
||||||
|
target
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[2]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =`
|
||||||
|
Cartão de Débito
|
||||||
|
`
|
||||||
|
target
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[9]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =`
|
||||||
|
Boleto à Vista
|
||||||
|
`
|
||||||
|
target
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[10]
|
||||||
|
.children[0]
|
||||||
|
.innerHTML =`
|
||||||
|
Boleto Faturado
|
||||||
|
`
|
||||||
|
console.log(target
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[10]
|
||||||
|
.children[0]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log("o pai está fechado",mutation.oldValue);
|
||||||
|
console.log(mutation)
|
||||||
|
console.log(target)
|
||||||
|
console.log(target
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[4]
|
||||||
|
.children[0]
|
||||||
|
.children[1]
|
||||||
|
.children[3]
|
||||||
|
.children[10]
|
||||||
|
.children[0]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(target, config);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
#orderform-title{
|
#orderform-title{
|
||||||
|
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
color: $color-black !important;
|
color: $color-black !important;
|
||||||
}
|
}
|
||||||
@ -7,9 +8,134 @@
|
|||||||
color: $color-black;
|
color: $color-black;
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
}
|
}
|
||||||
|
#client-pre-email{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-client-info{
|
||||||
|
.newsletter-label{
|
||||||
|
@include mq(IVK,min){
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newsletter{
|
||||||
|
#opt-in-newsletter{
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.newsletter-text{
|
||||||
|
@include mq(IVK,min){
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-pf{
|
||||||
|
width: 100%;
|
||||||
|
.client{
|
||||||
|
&-email{
|
||||||
|
#client-email{
|
||||||
|
@include mq(md,max){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@include mq(IVK,min){
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-first-name,
|
||||||
|
&-last-name,
|
||||||
|
&-document,
|
||||||
|
&-phone{
|
||||||
|
width: 49%;
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 310px){
|
||||||
|
width: 45% !important;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 767px){
|
||||||
|
display: inline-flex;
|
||||||
|
width: 48%;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 99999999px){
|
||||||
|
display: inline-flex;
|
||||||
|
width: 40% !important;
|
||||||
|
float: left !important;
|
||||||
|
margin-left: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-first-name{
|
||||||
|
#client-first-name
|
||||||
|
{
|
||||||
|
width: 96% !important;
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 98.34% !important;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-last-name{
|
||||||
|
#client-last-name{
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 98.34% !important;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 767px){
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 97% !important;
|
||||||
|
}
|
||||||
|
width: 99% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-document{
|
||||||
|
#client-document
|
||||||
|
{
|
||||||
|
width: 96% !important;
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 98.34% !important;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-phone{
|
||||||
|
#client-phone
|
||||||
|
{
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 98.34% !important;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 767px){
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
width: 99% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.checkout-container {
|
.checkout-container {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
height: 133%;
|
||||||
|
}
|
||||||
|
.icon-lock{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left:85.64%;
|
||||||
|
top: 51px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.client-pre-email {
|
.client-pre-email {
|
||||||
border-color: $color-gray4;
|
border-color: $color-black;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
|
||||||
@ -31,9 +157,23 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
|
margin-bottom: 16px;
|
||||||
span {
|
span {
|
||||||
|
@include mq(xll, max) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 47px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
}
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
font-family: $font-family-secundary;
|
font-family: $font-family-secundary;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -46,6 +186,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
|
@include mq(xll, max) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 47px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
}
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
font-family: $font-family-secundary;
|
font-family: $font-family-secundary;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -98,12 +251,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.emailInfo {
|
.emailInfo {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 36.1%;
|
||||||
|
height: 42%;
|
||||||
|
}
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border: 1px solid $color-gray4;
|
border: 1px solid $color-gray4;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
color: #303030;
|
color: #303030;
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
}
|
}
|
||||||
@ -113,6 +273,9 @@
|
|||||||
|
|
||||||
li {
|
li {
|
||||||
span {
|
span {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@ -126,6 +289,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
i::before {
|
i::before {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 11.5rem;
|
||||||
|
}
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
@ -133,21 +299,75 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#shipping-data{
|
||||||
|
.accordion-group{
|
||||||
|
.accordion-heading{
|
||||||
|
span{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 32px;
|
||||||
|
margin: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
.accordion-inner{
|
||||||
|
|
||||||
|
.box-step{
|
||||||
|
.shp-summary-group{
|
||||||
|
&-content{
|
||||||
|
.shp-summary-group-info{
|
||||||
|
.shp-summary-group-address{
|
||||||
|
.address-summary{
|
||||||
|
span{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.shipping-data,
|
.shipping-data,
|
||||||
.payment-data,
|
.payment-data,
|
||||||
.client-profile-data {
|
.client-profile-data {
|
||||||
.accordion-group {
|
.accordion-group {
|
||||||
|
// @include mq(xll, max) {
|
||||||
|
// border: 0 !important;
|
||||||
|
// }
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid $color-gray4;
|
border: 1px solid $color-gray4;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
|
.client-profile-summary{
|
||||||
|
.name{
|
||||||
|
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.accordion-heading {
|
.accordion-heading {
|
||||||
|
.accordion-toggle{
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #303030;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 32px;
|
||||||
|
margin: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
span {
|
span {
|
||||||
color: #303030;
|
color: #303030;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
i::before {
|
i::before {
|
||||||
fill: #303030;
|
fill: #303030;
|
||||||
}
|
}
|
||||||
@ -169,7 +389,31 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
/* General configurations */
|
/* General configurations */
|
||||||
|
.box-step{
|
||||||
|
.link-change-shipping{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.shp-summary-group{
|
||||||
|
&-content{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
.shp-summary-package{
|
||||||
|
.shp-summary-package-time{
|
||||||
|
span{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-left: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.client-notice {
|
.client-notice {
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
}
|
}
|
||||||
@ -241,7 +485,7 @@
|
|||||||
border: 1px solid $color-gray4;
|
border: 1px solid $color-gray4;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
label {
|
label{
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
@ -261,15 +505,41 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.shp-summary-group-info {
|
.shp-summary-group-info {
|
||||||
border-color: $color-gray4;
|
border-color: $color-gray6;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.address-summary {
|
.address-summary {
|
||||||
|
position: relative;
|
||||||
background: none;
|
background: none;
|
||||||
border-color: $color-gray4;
|
border-color: $color-gray4;
|
||||||
border-radius: 0;
|
|
||||||
color: #303030;
|
color: #303030;
|
||||||
padding: 12px;
|
padding: 26px;
|
||||||
|
.street,
|
||||||
|
.neighborhood{
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
.postalCode{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
&::before{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 33px;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: no-repeat;
|
||||||
|
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
|
||||||
|
background-size: 24px;
|
||||||
|
@include mq(xll, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
background-position: 8px 9px;
|
background-position: 8px 9px;
|
||||||
@ -289,6 +559,14 @@
|
|||||||
|
|
||||||
.shp-summary-group-price {
|
.shp-summary-group-price {
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-left: 34px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.shp-summary-package {
|
.shp-summary-package {
|
||||||
@ -306,8 +584,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
color:#7D7D7D;
|
||||||
|
text-shadow: 0.3px 1px #292929;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.vtex-omnishipping-1-x-deliveryOptionInactive{
|
||||||
|
color:rgba(196, 196, 196, 1) !important;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,29 @@
|
|||||||
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
|
||||||
|
#Finalizar{
|
||||||
|
text-decoration: none;
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cart-fixed{
|
||||||
|
.summary-template-holder{
|
||||||
|
border-bottom: 1px solid $color-gray5;
|
||||||
|
border-left: 1px solid $color-gray5;
|
||||||
|
border-right: 1px solid $color-gray5;
|
||||||
|
border-top-left-radius: 0 !important;
|
||||||
|
border-top-right-radius: 0 !important;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
small{
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
.totalizers-list{
|
.totalizers-list{
|
||||||
td{
|
td{
|
||||||
height: 0;
|
height: 0;
|
||||||
@ -36,16 +56,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.cart-template {
|
.cart-totalizers{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart-template {
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
.summary-template-holder{
|
.summary-template-holder{
|
||||||
div{
|
div{
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
@include mq(xll, max) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
@ -55,34 +76,51 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.cart {
|
.cart {
|
||||||
border: 3px solid $color-gray3;
|
border-top: 1px solid $color-gray5;
|
||||||
|
border-left: 1px solid $color-gray5;
|
||||||
|
border-right: 1px solid $color-gray5;
|
||||||
|
border-bottom-left-radius: 0 !important;
|
||||||
|
border-bottom-right-radius: 0 !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-top: 44px;
|
margin-top: 44px;
|
||||||
|
|
||||||
@include mq(md, max) {
|
// @include mq(md, max) {
|
||||||
margin: 0px 0 25px 0;
|
// margin: 0px 0 25px 0;
|
||||||
border-left: none;
|
// border-left: none;
|
||||||
border-right: none;
|
// border-right: none;
|
||||||
border-radius: 0;
|
// border-radius: 0;
|
||||||
}
|
// }
|
||||||
@include mq(xll, max) {
|
@include mq(xll, max) {
|
||||||
margin: 30px 0 25px 0;
|
margin: 30px 0 25px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cart-fixed.affix {
|
.cart-fixed.affix {
|
||||||
|
top: -40px;
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
}
|
}
|
||||||
.cart-fixed {
|
.cart-fixed {
|
||||||
font-family: $font-family;
|
@include mq(xll, max) {
|
||||||
width: 100%;
|
right: 0;
|
||||||
|
.payment-confirmation-wrap{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
font-family: $font-family;
|
||||||
|
width: 100%;
|
||||||
|
height: 100% !important;
|
||||||
h2 {
|
h2 {
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
border: none;
|
border: none;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
right: 197px;
|
||||||
|
top: -22px;
|
||||||
|
// width: 351%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-unavailable {
|
.item-unavailable {
|
||||||
@ -94,7 +132,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cart {
|
.cart {
|
||||||
border: 1px solid $color-gray4;
|
// border: 1px solid $color-gray4;
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@ -104,9 +142,10 @@
|
|||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
border-top: 1px solid #e5e5e5;
|
|
||||||
}
|
}
|
||||||
|
.shipping-date{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.shipping-date,
|
.shipping-date,
|
||||||
.price {
|
.price {
|
||||||
color: #7d7d7d;
|
color: #7d7d7d;
|
||||||
@ -115,11 +154,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.summary-template-holder {
|
.summary-template-holder {
|
||||||
|
@include mq(xll, max) {
|
||||||
|
bottom: 28px;
|
||||||
|
position: relative;
|
||||||
|
z-index: map-get($map:$z-index, $key: level1);
|
||||||
|
width: 94.6%;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 1280px) {
|
||||||
|
bottom: 28px;
|
||||||
|
position: relative;
|
||||||
|
z-index: map-get($map:$z-index, $key: level1);
|
||||||
|
width: 94.8%
|
||||||
|
}
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
|
width: 330px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 94.89%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#go-to-cart-button a {
|
#go-to-cart-button a {
|
||||||
|
@include mq(xll, max) {
|
||||||
|
left: 0;
|
||||||
|
bottom: 29px;
|
||||||
|
z-index: map-get($map:$z-index, $key: level5);
|
||||||
|
}
|
||||||
color: #303030;
|
color: #303030;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -186,6 +246,10 @@
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
height: 146px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@include mq(sm, max) {
|
@include mq(sm, max) {
|
||||||
height: 72px;
|
height: 72px;
|
||||||
@ -209,7 +273,6 @@
|
|||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
transition: ease-in 0.22s all;
|
transition: ease-in 0.22s all;
|
||||||
font-family: $font-family-secundary;
|
font-family: $font-family-secundary;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: darken($color-blue, 10);
|
color: darken($color-blue, 10);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -279,7 +342,8 @@
|
|||||||
width: max-content !important;
|
width: max-content !important;
|
||||||
|
|
||||||
@media (max-width: 490px) {
|
@media (max-width: 490px) {
|
||||||
margin-left: 84px !important;
|
margin-left: 63px !important;
|
||||||
|
width: 66px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -797,10 +861,18 @@
|
|||||||
|
|
||||||
&.info {
|
&.info {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.monetary {
|
&.monetary {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -814,9 +886,39 @@
|
|||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
}
|
}
|
||||||
|
td.monetary {
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td.info{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 49px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
p{
|
||||||
|
margin-bottom: 14px;
|
||||||
|
margin-top: 17px;
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
color:$color-black
|
||||||
|
}
|
||||||
button{
|
button{
|
||||||
top: 121px;
|
top: 121px;
|
||||||
width: 140%;
|
width: 100%;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: $color-blue-100;
|
background: $color-blue-100;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -831,23 +933,6 @@
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.flex{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
p{
|
|
||||||
margin-bottom: 14px;
|
|
||||||
margin-top: 17px;
|
|
||||||
font-family: $font-family-secundary;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400 !important;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
color:$color-black
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,42 +4,191 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
margin-left: unset;
|
margin-left: unset;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
float: right;
|
float: right;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.orderform-template-holder {
|
.orderform-template-holder {
|
||||||
width: 66.1132%;
|
width: 66.1132%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// @include mq(IVK, min) {
|
||||||
|
|
||||||
|
.box-payment-option{
|
||||||
|
iframe{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body-order-form{
|
||||||
|
.totalizers-list{
|
||||||
|
tr{
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
border-top: 1px solid black;
|
||||||
|
margin-left: 17px;
|
||||||
|
left: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-align-last: start;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
left: -6px;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tfoot{
|
||||||
|
.info{
|
||||||
|
width: 93% !important;
|
||||||
|
}
|
||||||
|
tr{
|
||||||
|
border-top: 1px solid;
|
||||||
|
margin-right: 17px;
|
||||||
|
left: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-align-last: start;
|
||||||
|
text-indent: -17px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart-fixed {
|
||||||
|
top: -42px;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
right: 194px;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart-items{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
align-items: flex-start;
|
||||||
|
.payment_Sumary{
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
margin: 24px 0px 34px 0;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 32px !important;
|
||||||
|
line-height: 37px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hproduct{
|
||||||
|
.fn{
|
||||||
|
width: 115px !important;
|
||||||
|
height: 34px;
|
||||||
|
white-space: break-spaces !important;
|
||||||
|
color: $color-black;
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
width: 228px !important;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.summary-cart-template-holder{
|
||||||
|
width: 332px;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 95%;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 94.89%;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
#is-corporate-client{
|
#is-corporate-client{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.photo{
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-left: 16px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
#postalCode-finished-loading{
|
#postalCode-finished-loading{
|
||||||
|
.shipping-method-wrapper{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
height: 55px;
|
||||||
|
p{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
#shipping-option-delivery{
|
||||||
|
.shp-method-option-text{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.shipping-method-toggle{
|
.shipping-method-toggle{
|
||||||
background: transparent !important;
|
border: 1px solid $color-black;
|
||||||
border-radius: 16px !important;
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||||
border: 1px solid $color-black !important;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
div{
|
div{
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border-radius: 16px !important;
|
border-radius: 32px !important;
|
||||||
|
box-shadow: 0px 0px 3px rgba(196, 196, 196, 1);
|
||||||
}
|
}
|
||||||
span{
|
span{
|
||||||
color: $color-black;
|
// color:#7D7D7D;
|
||||||
text-shadow: none !important;
|
// text-shadow: 0.3px 1px #292929 !important;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-style: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#ship-number{
|
.ship-number{
|
||||||
width: 296px;
|
width: 100%;
|
||||||
height: 35px;
|
|
||||||
}
|
}
|
||||||
|
#ship-number,
|
||||||
|
#ship-receiverName,
|
||||||
|
#ship-postalCode,
|
||||||
#ship-complement{
|
#ship-complement{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 96% !important;
|
||||||
|
height: 61px !important;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
width: 296px;
|
width: 296px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
max-width: 100%!important;
|
||||||
}
|
}
|
||||||
#ship-receiverName{
|
#ship-number{
|
||||||
width: 296px;
|
width: 97% !important;
|
||||||
height: 35px;
|
|
||||||
}
|
}
|
||||||
|
#ship-postalCode{
|
||||||
|
width: 96% !important;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 172px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
.ship-country{
|
.ship-country{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -47,6 +196,9 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
.input-small{
|
.input-small{
|
||||||
width: 142px !important;
|
width: 142px !important;
|
||||||
height: 42px !important;
|
height: 42px !important;
|
||||||
|
@include mq(IVK,min){
|
||||||
|
height: 51px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.box-client-info-pf{
|
.box-client-info-pf{
|
||||||
.client-notice{
|
.client-notice{
|
||||||
@ -59,24 +211,50 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
|
@include mq(IVK,min){
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.help, .error{
|
.help, .error{
|
||||||
color: red !important;
|
color: red !important;
|
||||||
}
|
}
|
||||||
.input-xlarge{
|
.input-xlarge{
|
||||||
|
@include mq(IVK,max){
|
||||||
|
width: 84%;
|
||||||
|
}
|
||||||
|
@include mq(IVK,min){
|
||||||
|
width: 92.24%;
|
||||||
|
height: 51px;
|
||||||
|
}
|
||||||
width: 298px;
|
width: 298px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.accordion-group{
|
.accordion-group{
|
||||||
width: 332px;
|
|
||||||
border-radius: 4px!important;
|
border-radius: 4px!important;
|
||||||
border: 1px solid $color-gray3;
|
border: 1px solid $color-gray3;
|
||||||
border: 1px solid $color-gray6 !important;
|
border: 1px solid $color-gray6 !important;
|
||||||
.newsletter-text,
|
.newsletter-text,
|
||||||
p,
|
p,
|
||||||
label{
|
label{
|
||||||
color: #7D7D7D !important;
|
color: #7D7D7D;
|
||||||
|
font-weight: 700;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28px !important;
|
||||||
|
line-height: 38px;
|
||||||
|
margin-left: 34px !important;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
input,
|
input,
|
||||||
.cart{
|
.cart{
|
||||||
@ -114,7 +292,11 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
|
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
|
||||||
background-size: 20px;
|
background-size: 20px;
|
||||||
fill: transparent !important;
|
fill: transparent !important;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
background-size: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#go-to-shipping,
|
#go-to-shipping,
|
||||||
@ -123,11 +305,24 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
background: $color-blue-100 !important;
|
background: $color-blue-100 !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
height: 42px !important;
|
height: 42px;
|
||||||
|
border-radius: 8px;
|
||||||
|
@include mq(IVK,min){
|
||||||
|
height: 61px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#payment-data-submit{
|
#payment-data-submit{
|
||||||
width: 100% !important;
|
@include mq(xll, max) {
|
||||||
|
width: 95% !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
width: 88% !important;
|
||||||
background: $color-green_2 !important;
|
background: $color-green_2 !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
height: 42px !important;
|
height: 42px !important;
|
||||||
@ -135,7 +330,18 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||||
}
|
}
|
||||||
#payment-data{
|
#payment-data{
|
||||||
width: 719px !important;
|
@include mq(xll, max) {
|
||||||
|
width: 100%;
|
||||||
|
.accordion-group{
|
||||||
|
width: 137%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.store-country-BRA.active{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 92.443%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
right: 0;
|
||||||
#payment-group-custom204PaymentGroupPaymentGroup,
|
#payment-group-custom204PaymentGroupPaymentGroup,
|
||||||
#payment-group-SPEIPaymentGroup,
|
#payment-group-SPEIPaymentGroup,
|
||||||
#payment-group-MercadoPagoPaymentGroup,
|
#payment-group-MercadoPagoPaymentGroup,
|
||||||
@ -150,19 +356,31 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
#payment-group-creditDirectSalePaymentGroup{
|
#payment-group-creditDirectSalePaymentGroup{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.store-country-BRA.active{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
height: 803px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-small{
|
||||||
|
background: transparent !important;
|
||||||
|
border: 0 !important;
|
||||||
|
&:hover{
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
.form-step{
|
.form-step{
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 452px;
|
height: 452px;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
height: 744px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.accordion-group{
|
|
||||||
width: 680px !important;
|
|
||||||
height: 452px !important;
|
|
||||||
}
|
|
||||||
// h3{
|
|
||||||
// display: block !important;
|
|
||||||
// }
|
|
||||||
span,
|
span,
|
||||||
a{
|
a{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 406px;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
width: 210px;
|
width: 210px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
@ -183,12 +401,117 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
.payment-group-item-text{
|
.payment-group-item-text{
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
.payment-group{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
.payment-group-list-btn{
|
||||||
|
width: 100%;
|
||||||
|
a{
|
||||||
|
width: 100%;
|
||||||
|
span{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.steps-view{
|
.steps-view{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
right: -8px;
|
||||||
|
top: 40%;
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: -2px;
|
top: 33px;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 62.5%;
|
||||||
|
height: 594px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.PaymentCardHolderDocument{
|
.PaymentCardHolderDocument{
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
.payment-group-item.active{
|
||||||
|
margin: 0 0 0 5px;
|
||||||
|
}
|
||||||
|
#client-profile-data{
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 152%;
|
||||||
|
.link-cart{
|
||||||
|
margin: 14px 0 100px 0;
|
||||||
|
}
|
||||||
|
.filled{
|
||||||
|
width: 90% !important;
|
||||||
|
height: 164px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
// width: 152%;
|
||||||
|
// .link-cart{
|
||||||
|
// margin: 14px 0 100px 0;
|
||||||
|
// }
|
||||||
|
height: 628px !important;
|
||||||
|
.filled{
|
||||||
|
width: 90.541% !important;
|
||||||
|
height: 234px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filled{
|
||||||
|
width: 332px;
|
||||||
|
height: 164px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#shipping-data{
|
||||||
|
#force-shipping-fields{
|
||||||
|
text-decoration: none;
|
||||||
|
color: $color-blue-100;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px;
|
||||||
|
}
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 100%;
|
||||||
|
.accordion-group{
|
||||||
|
width: 137%;
|
||||||
|
}
|
||||||
|
.filled{
|
||||||
|
width: 92% !important;
|
||||||
|
height: 164px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
p{
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
.address-summary{
|
||||||
|
span,
|
||||||
|
#force-shipping-fields{
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#go-to-cart-button{
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
#orderform-minicart-to-cart{
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.safep{
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
width: 622px;
|
||||||
|
height: 48px;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -17,17 +17,40 @@ header {
|
|||||||
width: 79.53125%;
|
width: 79.53125%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100% !important;
|
min-height: 100% !important;
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
|
justify-content: space-between;
|
||||||
|
@media screen and (min-width: 2500px){
|
||||||
|
#app-container{
|
||||||
|
.App{
|
||||||
|
height: 100%;
|
||||||
|
div{
|
||||||
|
.CardForm{
|
||||||
|
div{
|
||||||
|
.PaymentCardNumber{
|
||||||
|
background: pink;
|
||||||
|
.FormFieldLabel {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ChangeNumberOfPayments{
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.body-cart {
|
&.body-cart {
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
}
|
}
|
||||||
@ -50,6 +73,12 @@ body {
|
|||||||
.container-order-form,
|
.container-order-form,
|
||||||
.container-cart {
|
.container-cart {
|
||||||
width: 86%;
|
width: 86%;
|
||||||
|
@include mq(IVK, min) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@include mq(xll, max) {
|
||||||
|
width: 90.5%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.container-cart{
|
.container-cart{
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -77,6 +106,10 @@ body {
|
|||||||
}
|
}
|
||||||
#cart-title,
|
#cart-title,
|
||||||
#orderform-title {
|
#orderform-title {
|
||||||
|
@include mq(xll, max) {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 33px ;
|
||||||
|
}
|
||||||
color: $color-gray2;
|
color: $color-gray2;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|||||||
@ -1,12 +1,31 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
|
||||||
/* _footer.scss */
|
/* _footer.scss */
|
||||||
|
#product-name2616,
|
||||||
|
#product-name2621{
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
#shipping-estimate-date{
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
.footerCheckout {
|
.footerCheckout {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-top: 1px solid;
|
border-top: 1px solid;
|
||||||
color: $color-gray2;
|
color: $color-gray2;
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
&__ComSlick{
|
&__ComSlick{
|
||||||
margin-top: 450px !important;
|
margin-top: 32.33%;
|
||||||
|
@media screen and (min-width: 0px) and (max-width: 575px){
|
||||||
|
margin-top: 400px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 576px) and (max-width: 768px){
|
||||||
|
margin-top: 500px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 1280px){
|
||||||
|
margin-top: 600px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__payments{
|
&__payments{
|
||||||
&__images{
|
&__images{
|
||||||
@ -146,20 +165,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__prateleira{
|
&__prateleira{
|
||||||
// background: gray;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 390px;
|
// height: 390px;
|
||||||
// margin-bottom: 54px !important;
|
margin-top: 54px;
|
||||||
top: -505px;
|
margin-bottom: 54px !important;
|
||||||
|
bottom: 70px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.slick{
|
.slick{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 123%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
.SLick_title{
|
.SLick_title{
|
||||||
font-family: 'Tenor Sans', sans-serif;
|
font-family: 'Tenor Sans', sans-serif;
|
||||||
@ -176,7 +197,8 @@
|
|||||||
z-index: map-get($map:$z-index, $key: level5);
|
z-index: map-get($map:$z-index, $key: level5);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include mq(xll, max) {
|
@include mq(xll, max) {
|
||||||
left: 29px;
|
top: 49%;
|
||||||
|
left: 6%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.Fakebutton-Next{
|
.Fakebutton-Next{
|
||||||
@ -186,7 +208,8 @@
|
|||||||
z-index: map-get($map:$z-index, $key: level5);
|
z-index: map-get($map:$z-index, $key: level5);
|
||||||
top: 227px;
|
top: 227px;
|
||||||
@include mq(xll, max) {
|
@include mq(xll, max) {
|
||||||
right: 22px;
|
top: 49%;
|
||||||
|
right: 5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.quadrado{
|
.quadrado{
|
||||||
@ -194,11 +217,15 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 242px !important;
|
width: 100% !important;
|
||||||
height: 390px;
|
// height: 390px;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@include mq(xll, max) {
|
||||||
|
// width: 43.7% !important;
|
||||||
|
// height: 112.734% !important;
|
||||||
|
}
|
||||||
&__btn{
|
&__btn{
|
||||||
button{
|
button{
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@ -211,39 +238,37 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
@include mq(xll, max) {
|
@include mq(x, max) {
|
||||||
width: 16px ;
|
width:17.09%;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
margin-bottom: 5px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cor{
|
.cor{
|
||||||
width: 54px !important;
|
width: 54px;
|
||||||
height: 28px !important;
|
height: 28px;
|
||||||
@include mq(xll, max) {
|
@include mq(xll, max) {
|
||||||
width: 46px ;
|
width: 46px ;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.verde{
|
.verde{
|
||||||
width: 54px !important;
|
width: 54px;
|
||||||
height: 28px !important;
|
height: 28px;
|
||||||
}
|
}
|
||||||
.azul{
|
.azul{
|
||||||
width: 46px !important;
|
width: 46px;
|
||||||
height: 28px !important;
|
height: 28px;
|
||||||
}
|
}
|
||||||
.jaq__azul{
|
.jaq__azul{
|
||||||
width: 112px !important;
|
width: 112px;
|
||||||
height: 28px !important;
|
height: 28px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@include mq(xll, max) {
|
|
||||||
width: 164px ;
|
|
||||||
height: 42px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.Ver__produto{
|
.Ver__produto{
|
||||||
|
margin-top: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
@ -251,36 +276,37 @@
|
|||||||
border: 0;
|
border: 0;
|
||||||
background-color: $color-blue-100;
|
background-color: $color-blue-100;
|
||||||
@include mq(xll, max) {
|
@include mq(xll, max) {
|
||||||
width: 106px;
|
|
||||||
height: 42px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.imago{
|
.imago{
|
||||||
background: #eeeeee;
|
background: #eeeeee;
|
||||||
}
|
@include mq(xll, max) {
|
||||||
|
width: 100% !important;
|
||||||
@include mq(xll, max) {
|
height: 41.626% !important;;
|
||||||
width: 112px !important;
|
}
|
||||||
height: 394px !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.slick-slide{
|
.slick-slide{
|
||||||
position: relative;
|
position: relative;
|
||||||
@include mq(xll, max) {
|
|
||||||
img{
|
|
||||||
width: 164px;
|
|
||||||
height: 164px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.slick-list {
|
.slick-list {
|
||||||
// width: 1016px;
|
width: 68.84%;
|
||||||
// left: -49px;
|
position: initial;
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 10.78125%;
|
left: 10.78125%;
|
||||||
width: 79.375%;
|
}
|
||||||
height: 466px !important;
|
|
||||||
|
/* the slides */
|
||||||
|
.slick-slide {
|
||||||
|
// min-width: 242px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the parent */
|
||||||
|
.slick-list {
|
||||||
|
min-width: 242px;
|
||||||
|
margin: 0 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
// position: relative;
|
// position: relative;
|
||||||
@include mq(desc,max){
|
@include mq(xll,max){
|
||||||
margin: 0 16px 0 16px;
|
margin: 0 16px 0 16px;
|
||||||
width: 92% !important;
|
width: 92% !important;
|
||||||
}
|
}
|
||||||
@ -16,7 +16,7 @@
|
|||||||
.container {
|
.container {
|
||||||
margin: 30px 0 30px 0;
|
margin: 30px 0 30px 0;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
@include mq(desc,max){
|
@include mq(xll,max){
|
||||||
margin: 16px 0 16px 0;
|
margin: 16px 0 16px 0;
|
||||||
}
|
}
|
||||||
.progress-bar{
|
.progress-bar{
|
||||||
@ -143,7 +143,7 @@
|
|||||||
i {
|
i {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
@include mq(desc,max){
|
@include mq(xll,max){
|
||||||
height: 16px;
|
height: 16px;
|
||||||
span{
|
span{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -1 +1,22 @@
|
|||||||
/* _mais-categorias.scss */
|
/* _mais-categorias.scss */
|
||||||
|
.steps-view{
|
||||||
|
|
||||||
|
#app-container{
|
||||||
|
background: pink !important;
|
||||||
|
.App{
|
||||||
|
div{
|
||||||
|
.CardForm{
|
||||||
|
div{
|
||||||
|
.PaymentCardNumber{
|
||||||
|
.FormFieldLabel {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -30,9 +30,9 @@ $grid-breakpoints: (
|
|||||||
sm: 576px,
|
sm: 576px,
|
||||||
md: 768px,
|
md: 768px,
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
|
x: 1024px,
|
||||||
xl: 1200px,
|
xl: 1200px,
|
||||||
xll:1280px,
|
xll:1280px,
|
||||||
desc: 1280px,
|
|
||||||
IVK : 2500px
|
IVK : 2500px
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user