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 target2 = this.prateleira;
|
||||
let Footer = this.Footer;
|
||||
const MeuCarrinho = this.MeuCarrinho
|
||||
const MeuCarrinho = this.MeuCarrinho;
|
||||
let config = {
|
||||
childList: false,
|
||||
attributes: true,
|
||||
@ -63,7 +63,8 @@ export default class Footer {
|
||||
attributeFilter:["style"],
|
||||
subtree:false,
|
||||
characterData:true,
|
||||
characterDataOldValue:true};
|
||||
characterDataOldValue:true
|
||||
};
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (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;"){
|
||||
console.log("entrei no if",mutation.oldValue)
|
||||
MeuCarrinho.classList.add('hide');
|
||||
target2.classList.add('hide')
|
||||
Footer.classList.remove('footerCheckout__ComSlick')
|
||||
target2.classList.add('hide');
|
||||
Footer.classList.remove('footerCheckout__ComSlick');
|
||||
}else{
|
||||
console.log("entrei no else",mutation.oldValue)
|
||||
MeuCarrinho.classList.remove('hide');
|
||||
target2.classList.remove('hide')
|
||||
Footer.classList.add('footerCheckout__ComSlick')
|
||||
target2.classList.remove('hide');
|
||||
Footer.classList.add('footerCheckout__ComSlick');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
@ -100,7 +100,7 @@ export default class Footer {
|
||||
<h2 class="SLick_title">Você também pode gostar:</h2>
|
||||
<ul class="slick">
|
||||
<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"
|
||||
alt="Sandália Azul Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -117,7 +117,7 @@ export default class Footer {
|
||||
<button class="Ver__produto">Ver Produto</button>
|
||||
</li>
|
||||
<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"
|
||||
alt="Sandália Roxo Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -133,7 +133,7 @@ export default class Footer {
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<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"
|
||||
alt="Sandália Verde Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -148,7 +148,7 @@ export default class Footer {
|
||||
</div>
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<li class="quadrado">
|
||||
<li class="quadrado">
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/162369/Rectangle-64.png?v=637363001466570000"
|
||||
alt="Jaqueta Masculina Thermoball Eco" placeholder="Imagem"
|
||||
@ -163,7 +163,7 @@ export default class Footer {
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<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"
|
||||
alt="Sandália Amarela Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -184,6 +184,8 @@ export default class Footer {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
variableWidth:false,
|
||||
adaptiveHeight: false,
|
||||
|
||||
prevArrow: $(".Fakebutton-Prev"),
|
||||
nextArrow: $(".Fakebutton-Next"),
|
||||
responsive:[{
|
||||
@ -193,6 +195,7 @@ export default class Footer {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
variableWidth:false,
|
||||
adaptiveHeight: false,
|
||||
prevArrow: $(".Fakebutton-Prev"),
|
||||
nextArrow: $(".Fakebutton-Next"),
|
||||
}
|
||||
@ -204,6 +207,7 @@ export default class Footer {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
variableWidth:false,
|
||||
adaptiveHeight: false,
|
||||
prevArrow: $(".Fakebutton-Prev"),
|
||||
nextArrow: $(".Fakebutton-Next"),
|
||||
}
|
||||
|
||||
@ -21,8 +21,10 @@ export default class Header {
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
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.Finalizar_Pedido = await waitElement("#orderform-title");
|
||||
this.Finalizar_Pagamento = await waitElement(".store-country-BRA");
|
||||
this.step = document.querySelector('.completed');
|
||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.Footer = await waitElement(".footerCheckout");
|
||||
@ -67,7 +69,7 @@ export default class Header {
|
||||
step2.classList.remove('completed');
|
||||
step3.classList.remove('completed');
|
||||
li.children[1].classList.add('completed');
|
||||
target2.classList.toggle('hide')
|
||||
target2.classList.remove('hide')
|
||||
Footer.classList.add('footerCheckout__ComSlick')
|
||||
}
|
||||
}
|
||||
@ -76,6 +78,7 @@ export default class Header {
|
||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){
|
||||
MeuCarrinho.classList.add('hide');
|
||||
this.Finalizar_Pedido.classList.remove('hide')
|
||||
this.Finalizar_Pagamento.classList.add('hide');
|
||||
if(li.children[1].id === "step_2"){
|
||||
step1.classList.remove('completed');
|
||||
step3.classList.remove('completed');
|
||||
@ -84,9 +87,14 @@ export default class Header {
|
||||
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"){
|
||||
MeuCarrinho.classList.add('hide');
|
||||
this.Finalizar_Pedido.classList.remove('hide')
|
||||
this.Finalizar_Pagamento.classList.remove('hide');
|
||||
if(li.children[1].id === "step_3"){
|
||||
step1.classList.remove('completed');
|
||||
step2.classList.remove('completed');
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Footer {
|
||||
|
||||
constructor() {
|
||||
|
||||
this.init();
|
||||
console.log("app.js funcionando")
|
||||
|
||||
}
|
||||
|
||||
async init() {
|
||||
|
||||
await this.selectors();
|
||||
await this.event();
|
||||
await this.TextTransfer();
|
||||
await this.onUpdate();
|
||||
await this.getPoint();
|
||||
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -43,18 +50,26 @@ export default class Footer {
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
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.cartfixed = await waitElement(".cart-fixed");
|
||||
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_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.Finalizar_btn = document.createElement("button");
|
||||
this.more = document.createElement("p");
|
||||
this.PedidoSumary = document.createElement("h2");
|
||||
this.wrapper = document.createElement("tr");
|
||||
}
|
||||
async event() {
|
||||
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(){
|
||||
this.cep = await waitElement('.ship-postalCode small a');
|
||||
@ -71,19 +86,78 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
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 Dados_profile_payment =this.Dados_profile_payment.children[0]
|
||||
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_2 = this.table.children[0].children[0].children[2];
|
||||
tbodywrapper.classList.add("flex")
|
||||
tbodywrapper.appendChild(this.more)
|
||||
tbodywrapper.appendChild(this.Finalizar_btn)
|
||||
tbody.appendChild(tbodywrapper)
|
||||
console.log(this.LapisAzul,"lapis azul")
|
||||
tbodywrapper.classList.add("flex");
|
||||
tbodywrapper.appendChild(this.more);
|
||||
tbodywrapper.appendChild(this.Finalizar_btn);
|
||||
totalizaer.appendChild(tbodywrapper);
|
||||
// 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")
|
||||
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 =`
|
||||
FINALIZAR COMPRA
|
||||
<a id="Finalizar" href="https://m3academy.myvtex.com/checkout/#/email">
|
||||
FINALIZAR COMPRA
|
||||
</a>
|
||||
`
|
||||
this.PedidoSumary.innerHTML =`
|
||||
Resumo do Pedido
|
||||
`
|
||||
dadosProfile.innerHTML =`
|
||||
Identificação
|
||||
@ -91,6 +165,9 @@ export default class Footer {
|
||||
this.more.innerHTML =`
|
||||
Escolher mais produtos
|
||||
`
|
||||
this.safeP.innerHTML =`
|
||||
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
|
||||
`
|
||||
table.innerHTML=
|
||||
`
|
||||
Frete
|
||||
@ -160,4 +237,112 @@ export default class Footer {
|
||||
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{
|
||||
|
||||
font-weight: 700 !important;
|
||||
color: $color-black !important;
|
||||
}
|
||||
@ -7,9 +8,134 @@
|
||||
color: $color-black;
|
||||
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 {
|
||||
@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 {
|
||||
border-color: $color-gray4;
|
||||
border-color: $color-black;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
@ -31,9 +157,23 @@
|
||||
justify-content: center;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
|
||||
margin-bottom: 16px;
|
||||
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;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
@ -46,6 +186,19 @@
|
||||
}
|
||||
|
||||
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;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
@ -98,12 +251,19 @@
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
@include mq(IVK, min) {
|
||||
width: 36.1%;
|
||||
height: 42%;
|
||||
}
|
||||
padding: 16px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
|
||||
h3 {
|
||||
@include mq(IVK, min) {
|
||||
font-size: 24px;
|
||||
}
|
||||
color: #303030;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
@ -113,6 +273,9 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
@include mq(IVK, min) {
|
||||
font-size: 24px;
|
||||
}
|
||||
color: $color-black;
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -126,6 +289,9 @@
|
||||
}
|
||||
|
||||
i::before {
|
||||
@include mq(IVK, min) {
|
||||
font-size: 11.5rem;
|
||||
}
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
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,
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
// @include mq(xll, max) {
|
||||
// border: 0 !important;
|
||||
// }
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
|
||||
.client-profile-summary{
|
||||
.name{
|
||||
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
.accordion-heading {
|
||||
.accordion-toggle{
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
@include mq(IVK, min) {
|
||||
font-size: 32px;
|
||||
margin: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
}
|
||||
@ -169,7 +389,31 @@
|
||||
padding: 0;
|
||||
|
||||
/* 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 {
|
||||
color: $color-black;
|
||||
}
|
||||
@ -241,7 +485,7 @@
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
|
||||
label {
|
||||
label{
|
||||
background-color: $color-white;
|
||||
box-shadow: none;
|
||||
color: #303030;
|
||||
@ -261,15 +505,41 @@
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
border-color: $color-gray4;
|
||||
border-color: $color-gray6;
|
||||
@include mq(IVK, min) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.address-summary {
|
||||
position: relative;
|
||||
background: none;
|
||||
border-color: $color-gray4;
|
||||
border-radius: 0;
|
||||
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) {
|
||||
background-position: 8px 9px;
|
||||
@ -289,6 +559,14 @@
|
||||
|
||||
.shp-summary-group-price {
|
||||
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 {
|
||||
@ -306,8 +584,14 @@
|
||||
}
|
||||
|
||||
.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");
|
||||
#Finalizar{
|
||||
text-decoration: none;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include mq(md, max) {
|
||||
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{
|
||||
td{
|
||||
height: 0;
|
||||
@ -36,16 +56,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.cart-template {
|
||||
.cart-totalizers{
|
||||
@include mq(xll, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.cart-template {
|
||||
font-family: $font-family;
|
||||
.summary-template-holder{
|
||||
div{
|
||||
border: 0 !important;
|
||||
@include mq(xll, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mq(md, max) {
|
||||
@ -55,34 +76,51 @@
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
margin-top: 44px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
// @include mq(md, max) {
|
||||
// margin: 0px 0 25px 0;
|
||||
// border-left: none;
|
||||
// border-right: none;
|
||||
// border-radius: 0;
|
||||
// }
|
||||
@include mq(xll, max) {
|
||||
margin: 30px 0 25px 0;
|
||||
}
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
top: -40px;
|
||||
position: relative !important;
|
||||
}
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
@include mq(xll, max) {
|
||||
right: 0;
|
||||
.payment-confirmation-wrap{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
h2 {
|
||||
background: $color-white;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@include mq(xll, max) {
|
||||
right: 197px;
|
||||
top: -22px;
|
||||
// width: 351%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -94,7 +132,7 @@
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $color-gray4;
|
||||
// border: 1px solid $color-gray4;
|
||||
|
||||
ul li {
|
||||
border-top: none;
|
||||
@ -104,9 +142,10 @@
|
||||
&:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.shipping-date{
|
||||
display: none;
|
||||
}
|
||||
.shipping-date,
|
||||
.price {
|
||||
color: #7d7d7d;
|
||||
@ -115,11 +154,32 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
background: $color-white;
|
||||
width: 330px;
|
||||
@include mq(IVK, min) {
|
||||
width: 94.89%;
|
||||
}
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
@include mq(xll, max) {
|
||||
left: 0;
|
||||
bottom: 29px;
|
||||
z-index: map-get($map:$z-index, $key: level5);
|
||||
}
|
||||
color: #303030;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -186,6 +246,10 @@
|
||||
height: 60px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
@include mq(IVK, min) {
|
||||
height: 146px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
@ -209,7 +273,6 @@
|
||||
line-height: 14px;
|
||||
transition: ease-in 0.22s all;
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-blue, 10);
|
||||
text-decoration: none;
|
||||
@ -279,7 +342,8 @@
|
||||
width: max-content !important;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 84px !important;
|
||||
margin-left: 63px !important;
|
||||
width: 66px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -797,10 +861,18 @@
|
||||
|
||||
&.info {
|
||||
text-align: left;
|
||||
@include mq(IVK, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px
|
||||
}
|
||||
}
|
||||
|
||||
&.monetary {
|
||||
text-align: right;
|
||||
@include mq(IVK, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -814,9 +886,39 @@
|
||||
line-height: 21px;
|
||||
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{
|
||||
top: 121px;
|
||||
width: 140%;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background: $color-blue-100;
|
||||
border-radius: 8px;
|
||||
@ -831,23 +933,6 @@
|
||||
height: 48px;
|
||||
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-right: 0;
|
||||
float: right;
|
||||
@include mq(xll, max) {
|
||||
width: 100%;
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
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{
|
||||
display: none;
|
||||
}
|
||||
.photo{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 16px;
|
||||
@include mq(IVK, min) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
#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{
|
||||
background: transparent !important;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid $color-black !important;
|
||||
border: 1px solid $color-black;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 100px;
|
||||
}
|
||||
div{
|
||||
background: transparent !important;
|
||||
border-radius: 16px !important;
|
||||
border-radius: 32px !important;
|
||||
box-shadow: 0px 0px 3px rgba(196, 196, 196, 1);
|
||||
}
|
||||
span{
|
||||
color: $color-black;
|
||||
text-shadow: none !important;
|
||||
// color:#7D7D7D;
|
||||
// text-shadow: 0.3px 1px #292929 !important;
|
||||
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{
|
||||
width: 296px;
|
||||
height: 35px;
|
||||
.ship-number{
|
||||
width: 100%;
|
||||
}
|
||||
#ship-number,
|
||||
#ship-receiverName,
|
||||
#ship-postalCode,
|
||||
#ship-complement{
|
||||
@include mq(xll, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
@include mq(IVK, min) {
|
||||
width: 96% !important;
|
||||
height: 61px !important;
|
||||
font-size: 28px;
|
||||
}
|
||||
width: 296px;
|
||||
height: 35px;
|
||||
max-width: 100%!important;
|
||||
}
|
||||
#ship-receiverName{
|
||||
width: 296px;
|
||||
height: 35px;
|
||||
#ship-number{
|
||||
width: 97% !important;
|
||||
}
|
||||
#ship-postalCode{
|
||||
width: 96% !important;
|
||||
margin-bottom: 10px;
|
||||
width: 172px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.ship-country{
|
||||
display: none;
|
||||
}
|
||||
@ -47,6 +196,9 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
.input-small{
|
||||
width: 142px !important;
|
||||
height: 42px !important;
|
||||
@include mq(IVK,min){
|
||||
height: 51px !important;
|
||||
}
|
||||
}
|
||||
.box-client-info-pf{
|
||||
.client-notice{
|
||||
@ -59,24 +211,50 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@include mq(IVK,min){
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
.help, .error{
|
||||
color: red !important;
|
||||
}
|
||||
.input-xlarge{
|
||||
@include mq(IVK,max){
|
||||
width: 84%;
|
||||
}
|
||||
@include mq(IVK,min){
|
||||
width: 92.24%;
|
||||
height: 51px;
|
||||
}
|
||||
width: 298px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
.accordion-group{
|
||||
width: 332px;
|
||||
border-radius: 4px!important;
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid $color-gray6 !important;
|
||||
.newsletter-text,
|
||||
p,
|
||||
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,
|
||||
.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-size: 20px;
|
||||
fill: transparent !important;
|
||||
|
||||
@include mq(IVK, min) {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
background-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#go-to-shipping,
|
||||
@ -123,11 +305,24 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
width: 100% !important;
|
||||
background: $color-blue-100 !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{
|
||||
width: 100% !important;
|
||||
@include mq(xll, max) {
|
||||
width: 95% !important;
|
||||
|
||||
}
|
||||
width: 88% !important;
|
||||
background: $color-green_2 !important;
|
||||
text-transform: uppercase !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));
|
||||
}
|
||||
#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-SPEIPaymentGroup,
|
||||
#payment-group-MercadoPagoPaymentGroup,
|
||||
@ -150,19 +356,31 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
#payment-group-creditDirectSalePaymentGroup{
|
||||
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{
|
||||
display: flex;
|
||||
height: 452px;
|
||||
@include mq(xll, max) {
|
||||
height: 744px;
|
||||
}
|
||||
}
|
||||
.accordion-group{
|
||||
width: 680px !important;
|
||||
height: 452px !important;
|
||||
}
|
||||
// h3{
|
||||
// display: block !important;
|
||||
// }
|
||||
span,
|
||||
a{
|
||||
@include mq(IVK, min) {
|
||||
width: 406px;
|
||||
font-size: 28px;
|
||||
}
|
||||
width: 210px;
|
||||
height: 50px;
|
||||
}
|
||||
@ -183,12 +401,117 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
.payment-group-item-text{
|
||||
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{
|
||||
@include mq(xll, max) {
|
||||
right: -8px;
|
||||
top: 40%;
|
||||
width: 97%;
|
||||
}
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
top: 33px;
|
||||
@include mq(IVK, min) {
|
||||
width: 62.5%;
|
||||
height: 594px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.PaymentCardHolderDocument{
|
||||
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%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100% !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) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.body-cart {
|
||||
font-family: $font-family;
|
||||
}
|
||||
@ -50,6 +73,12 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 86%;
|
||||
@include mq(IVK, min) {
|
||||
height: 100%;
|
||||
}
|
||||
@include mq(xll, max) {
|
||||
width: 90.5%;
|
||||
}
|
||||
}
|
||||
.container-cart{
|
||||
display: flex;
|
||||
@ -77,6 +106,10 @@ body {
|
||||
}
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
@include mq(xll, max) {
|
||||
font-size: 24px;
|
||||
line-height: 33px ;
|
||||
}
|
||||
color: $color-gray2;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
|
||||
@ -1,12 +1,31 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
|
||||
/* _footer.scss */
|
||||
#product-name2616,
|
||||
#product-name2621{
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
#shipping-estimate-date{
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
position: relative;
|
||||
border-top: 1px solid;
|
||||
color: $color-gray2;
|
||||
margin-top: 100px;
|
||||
&__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{
|
||||
&__images{
|
||||
@ -146,20 +165,22 @@
|
||||
}
|
||||
}
|
||||
&__prateleira{
|
||||
// background: gray;
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
width: 100% !important;
|
||||
height: 390px;
|
||||
// margin-bottom: 54px !important;
|
||||
top: -505px;
|
||||
// height: 390px;
|
||||
margin-top: 54px;
|
||||
margin-bottom: 54px !important;
|
||||
bottom: 70px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.slick{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
width: 123%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.SLick_title{
|
||||
font-family: 'Tenor Sans', sans-serif;
|
||||
@ -176,7 +197,8 @@
|
||||
z-index: map-get($map:$z-index, $key: level5);
|
||||
position: absolute;
|
||||
@include mq(xll, max) {
|
||||
left: 29px;
|
||||
top: 49%;
|
||||
left: 6%;
|
||||
}
|
||||
}
|
||||
.Fakebutton-Next{
|
||||
@ -186,7 +208,8 @@
|
||||
z-index: map-get($map:$z-index, $key: level5);
|
||||
top: 227px;
|
||||
@include mq(xll, max) {
|
||||
right: 22px;
|
||||
top: 49%;
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
.quadrado{
|
||||
@ -194,11 +217,15 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 242px !important;
|
||||
height: 390px;
|
||||
width: 100% !important;
|
||||
// height: 390px;
|
||||
margin-right: 16px;
|
||||
background: transparent;
|
||||
flex-direction: column;
|
||||
@include mq(xll, max) {
|
||||
// width: 43.7% !important;
|
||||
// height: 112.734% !important;
|
||||
}
|
||||
&__btn{
|
||||
button{
|
||||
display: inline-flex;
|
||||
@ -211,39 +238,37 @@
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
@include mq(xll, max) {
|
||||
width: 16px ;
|
||||
@include mq(x, max) {
|
||||
width:17.09%;
|
||||
height: 18px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.cor{
|
||||
width: 54px !important;
|
||||
height: 28px !important;
|
||||
width: 54px;
|
||||
height: 28px;
|
||||
@include mq(xll, max) {
|
||||
width: 46px ;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
.verde{
|
||||
width: 54px !important;
|
||||
height: 28px !important;
|
||||
width: 54px;
|
||||
height: 28px;
|
||||
}
|
||||
.azul{
|
||||
width: 46px !important;
|
||||
height: 28px !important;
|
||||
width: 46px;
|
||||
height: 28px;
|
||||
}
|
||||
.jaq__azul{
|
||||
width: 112px !important;
|
||||
height: 28px !important;
|
||||
width: 112px;
|
||||
height: 28px;
|
||||
white-space: nowrap;
|
||||
@include mq(xll, max) {
|
||||
width: 164px ;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Ver__produto{
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
color: $color-white;
|
||||
@ -251,36 +276,37 @@
|
||||
border: 0;
|
||||
background-color: $color-blue-100;
|
||||
@include mq(xll, max) {
|
||||
width: 106px;
|
||||
height: 42px;
|
||||
|
||||
}
|
||||
}
|
||||
.imago{
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
@include mq(xll, max) {
|
||||
width: 112px !important;
|
||||
height: 394px !important;
|
||||
@include mq(xll, max) {
|
||||
width: 100% !important;
|
||||
height: 41.626% !important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slide{
|
||||
position: relative;
|
||||
@include mq(xll, max) {
|
||||
img{
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-list {
|
||||
// width: 1016px;
|
||||
// left: -49px;
|
||||
position: absolute;
|
||||
width: 68.84%;
|
||||
position: initial;
|
||||
top: 0px;
|
||||
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 */
|
||||
.headerCheckout {
|
||||
// position: relative;
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
margin: 0 16px 0 16px;
|
||||
width: 92% !important;
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
.container {
|
||||
margin: 30px 0 30px 0;
|
||||
width: auto !important;
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
margin: 16px 0 16px 0;
|
||||
}
|
||||
.progress-bar{
|
||||
@ -143,7 +143,7 @@
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
height: 16px;
|
||||
span{
|
||||
font-weight: 400;
|
||||
|
||||
@ -1 +1,22 @@
|
||||
/* _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,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
x: 1024px,
|
||||
xl: 1200px,
|
||||
xll:1280px,
|
||||
desc: 1280px,
|
||||
IVK : 2500px
|
||||
) !default;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user