Merge pull request 'Develop' (#4) from Develop into main

Reviewed-on: #4
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-27 03:01:09 +00:00
commit c27e8ba1fd
12 changed files with 1115 additions and 143 deletions

View 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

View File

@ -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"),
} }

View File

@ -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');

View File

@ -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);
}
} }

View File

@ -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;
}
} }
} }
} }

View File

@ -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
}
}
} }
} }
} }

View File

@ -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;
}

View File

@ -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;

View File

@ -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;
} }
} }

View File

@ -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;

View File

@ -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;
}
}
}
}
}
}
}
}

View File

@ -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;