cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

develop #6

Merged
cainamilech merged 5 commits from develop into main 2022-12-22 02:55:46 +00:00
Conversation 0 Commits 5 Files Changed 10 +679 -196
10 changed files with 679 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 682aca310b - Show all commits

16
bash.exe.stackdump
View File

@ -1,16 +0,0 @@
Stack trace:
Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (000007D0000, 000007D0101, 00000000001, 5C74DE1CAC3C)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
000FFFFCD30 0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF)
000FFFFCD30 0021005B335 (00210358290, 00000001000, 00000000004, 00210355C90)
000FFFFCD30 0021005B847 (002100DF51E, 00000000000, 00000000000, 00000000000)
000FFFFCD30 0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000)
000FFFFCD30 00210048C0C (00000000000, 00000000000, 00000000000, 00000000000)
000FFFFFFF0 00210047716 (00000000000, 00000000000, 00000000000, 00000000000)
000FFFFFFF0 002100477C4 (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace

47
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,14 +7,13 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
await this.carrinho(); await this.replaceHtml();
this.renderPrateleira(); this.renderPrateleira();
this.onUpdate(); this.onUpdate();
this.addCarrossel();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.title = await waitElement("#cart-title"); this.title = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
//CARRINHO VAZIO //CARRINHO VAZIO
@ -86,31 +85,29 @@ export default class Footer {
} }
async addCarrossel() { async addCarrossel() {
const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 }); const prateleira = await waitElement(".carrosel-items", { timeout: 6000, interval: 500 });
if (window.screen.width > 1024) {
$(prateleira).slick({ $(prateleira).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
infinite: true, infinite: true,
arrows: true, arrows: true,
}); responsive: [
} else if (window.screen.width < 600) { {
$(prateleira).slick({ breakpoint: 1025,
slidesToShow: 2, settings: {
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else if (window.screen.width <= 1024) {
$(prateleira).slick({
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, },
infinite: true, },
arrows: true, {
breakpoint: 600,
settings: {
slidesToShow: 2,
},
},
],
}); });
} }
}
async onUpdate() { async onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
@ -139,10 +136,20 @@ export default class Footer {
if (window.location.hash == "#/cart") { if (window.location.hash == "#/cart") {
this.onUpdate(); this.onUpdate();
this.prateleira(); this.prateleira();
} else {
window.addEventListener("hashchange", () => {
if (window.location.hash !== "#/cart") {
this.removePrateleira();
}
if (window.location.hash == "#/cart") {
this.requestApi();
this.addCarrossel();
}
});
} }
} }
carrinho() { replaceHtml() {
this.title.innerHTML = ``; this.title.innerHTML = ``;
this.continuarCompra.innerHTML = `continuar comprando`; this.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`; this.frete.innerHTML = `Frete`;

184
checkout/src/arquivos/js/components/Header.js
View File

@ -67,34 +67,24 @@ export default class Header {
const progressBarLista = document.querySelectorAll("#progressBar ul li"); const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => { progressBarLista.forEach((li) => {
const circle1 = li.children[0].children[0].children["progress-bar-circle-1"];
const circle2 = li.children[0].children[0].children["progress-bar-circle-2"];
const circle3 = li.children[0].children[0].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
li.children[0].children[0].children["progress-bar-circle-1"].classList.add( circle1.classList.add("active");
"active"
);
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
if ( if (circle2.classList.contains("active")) {
li.children[0].children[0].children[ circle2.classList.remove("active");
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
if ( if (circle3.classList.contains("active")) {
li.children[0].children[0].children[ circle3.classList.remove("active");
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
} }
} }
} else if ( } else if (
@ -102,98 +92,56 @@ export default class Header {
window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
) { ) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
if ( if (circle1.classList.contains("active")) {
li.children[0].children[0].children[ circle1.classList.remove("active");
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
li.children[0].children[0].children["progress-bar-circle-2"].classList.add( circle2.classList.add("active");
"active"
);
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
if ( if (circle3.classList.contains("active")) {
li.children[0].children[0].children[ circle3.classList.remove("active");
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
} }
} }
} else if ( } else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) { ) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
if ( if (circle1.classList.contains("active")) {
li.children[0].children[0].children[ circle1.classList.remove("active");
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
if ( if (circle2.classList.contains("active")) {
li.children[0].children[0].children[ circle2.classList.remove("active");
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
li.children[0].children[0].children["progress-bar-circle-3"].classList.add( circle3.classList.add("active");
"active"
);
} }
} }
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") { if (window.location.hash == "#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
li.children[0].children[0].children[ circle1.classList.add("active");
"progress-bar-circle-1"
].classList.add("active");
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
if ( if (circle2.classList.contains("active")) {
li.children[0].children[0].children[ circle2.classList.remove("active");
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
if ( if (circle3.classList.contains("active")) {
li.children[0].children[0].children[ circle3.classList.remove("active");
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
} }
} }
} else if ( } else if (
@ -201,64 +149,36 @@ export default class Header {
window.location.hash == "#/profile" || window.location.hash == "#/profile" ||
window.location.hash == "#/shipping" window.location.hash == "#/shipping"
) { ) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
if ( if (circle1.classList.contains("active")) {
li.children[0].children[0].children[ circle1.classList.remove("active");
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
li.children[0].children[0].children[ circle2.classList.add("active");
"progress-bar-circle-2"
].classList.add("active");
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
if ( if (circle3.classList.contains("active")) {
li.children[0].children[0].children[ circle3.classList.remove("active");
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
} }
} }
} else if (window.location.hash == "#/payment") { } else if (window.location.hash == "#/payment") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) { if (circle1) {
if ( if (circle1.classList.contains("active")) {
li.children[0].children[0].children[ circle1.classList.remove("active");
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-2"]) { if (circle2) {
if ( if (circle2.classList.contains("active")) {
li.children[0].children[0].children[ circle2.classList.remove("active");
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
} }
} }
if (li.children[0].children[0].children["progress-bar-circle-3"]) { if (circle3) {
li.children[0].children[0].children[ circle3.classList.add("active");
"progress-bar-circle-3"
].classList.add("active");
} }
} }
}); });

353
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -6,6 +6,11 @@ h1#orderform-title {
color: $color-black-500; color: $color-black-500;
margin: 17px 0; margin: 17px 0;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin: 17px 16px; margin: 17px 16px;
} }
@ -44,6 +49,11 @@ h1#orderform-title {
color: lighen($color-black-500, 10); color: lighen($color-black-500, 10);
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
@ -73,6 +83,11 @@ h1#orderform-title {
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -93,6 +108,11 @@ h1#orderform-title {
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -125,6 +145,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 90% !important; width: 90% !important;
} }
@ -151,6 +176,12 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
width: 219px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
right: 1.7%; right: 1.7%;
} }
@ -181,6 +212,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
text-transform: capitalize; text-transform: capitalize;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
text-align: center; text-align: center;
} }
@ -195,6 +231,11 @@ h1#orderform-title {
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
border-radius: 5px; border-radius: 5px;
@include mq(xxl, min) {
width: 742px;
height: 200px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 309px; width: 309px;
@ -215,6 +256,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin: 0 0 9.56px 0; margin: 0 0 9.56px 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
@ -227,6 +273,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black-500; color: $color-black-500;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
i::before { i::before {
@ -234,6 +285,10 @@ h1#orderform-title {
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
margin-right: 6px; margin-right: 6px;
@include mq(xxl, min) {
font-size: 28px;
}
} }
} }
} }
@ -247,6 +302,10 @@ h1#orderform-title {
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
@include mq(xxl, min) {
font-size: unset;
}
} }
} }
} }
@ -287,8 +346,8 @@ h1#orderform-title {
.client-document, .client-document,
.client-phone { .client-phone {
float: left !important; float: left !important;
width: 47.4%; width: 47.4%;
@include mq(tablet, max) { @include mq(tablet, max) {
width: 49.4%; width: 49.4%;
} }
@ -428,6 +487,11 @@ h1#orderform-title {
margin-bottom: 14px; margin-bottom: 14px;
padding: 0; padding: 0;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
i::before { i::before {
display: none; display: none;
/*fill: #303030;*/ /*fill: #303030;*/
@ -456,6 +520,11 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
/* General configurations */ /* General configurations */
@ -479,6 +548,11 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
margin-bottom: 1px; margin-bottom: 1px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
@ -496,6 +570,11 @@ h1#orderform-title {
box-sizing: border-box; box-sizing: border-box;
padding: 13px 12px; padding: 13px 12px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
&::placeholder { &::placeholder {
color: $color-gray10; color: $color-gray10;
} }
@ -503,6 +582,10 @@ h1#orderform-title {
.help.error { .help.error {
color: $color-red; color: $color-red;
@include mq(xxl, min) {
font-size: 24px;
}
} }
.box-client-info-pj { .box-client-info-pj {
@ -526,6 +609,11 @@ h1#orderform-title {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
@ -547,6 +635,12 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
height: 61px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin-bottom: 13px; margin-bottom: 13px;
} }
@ -573,6 +667,11 @@ h1#orderform-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.shp-lean { .shp-lean {
@ -596,6 +695,11 @@ h1#orderform-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -618,6 +722,11 @@ h1#orderform-title {
background-position: 8px 9px; background-position: 8px 9px;
} }
@include mq(xxl, min) {
background-size: 46.45px 46.45px;
padding: 12px 90px 12px 72px;
}
a { a {
position: absolute; position: absolute;
right: 13px; right: 13px;
@ -628,6 +737,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
text-transform: lowercase; text-transform: lowercase;
color: $color-blue2; color: $color-blue2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -680,6 +794,11 @@ h1#orderform-title {
&::before { &::before {
content: "Identificação"; content: "Identificação";
font-size: 16px; font-size: 16px;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
} }
@ -707,12 +826,22 @@ h1#orderform-title {
color: unset; color: unset;
font-size: 0; font-size: 0;
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
i.icon-edit { i.icon-edit {
margin-left: auto; margin-left: auto;
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
} }
} }
} }
@ -723,6 +852,10 @@ h1#orderform-title {
height: 164px; height: 164px;
box-sizing: border-box; box-sizing: border-box;
@include mq(xxl, min) {
height: 234px;
}
.form-step.box-info { .form-step.box-info {
position: relative; position: relative;
margin-top: 11px; margin-top: 11px;
@ -730,12 +863,34 @@ h1#orderform-title {
.client-profile-email { .client-profile-email {
position: absolute; position: absolute;
top: 20px; top: 20px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
top: 35px;
}
} }
.client-profile-summary { .client-profile-summary {
@include mq(xxl, min) {
margin-bottom: 10px;
}
.name {
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
margin-bottom: 10px;
}
}
.tel { .tel {
position: absolute; position: absolute;
top: 40px; top: 40px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
top: 70px;
}
} }
} }
} }
@ -755,6 +910,11 @@ h1#orderform-title {
margin: 2px 8px 2px 0px; margin: 2px 8px 2px 0px;
border: 1px solid $color-gray12; border: 1px solid $color-gray12;
border-radius: 3px; border-radius: 3px;
@include mq(xxl, min) {
height: 34px;
width: 34px;
}
} }
} }
} }
@ -775,11 +935,21 @@ h1#orderform-title {
color: unset; color: unset;
font-size: 0; font-size: 0;
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
i.icon-edit { i.icon-edit {
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
} }
} }
} }
@ -797,6 +967,11 @@ h1#orderform-title {
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: $color-black; color: $color-black;
margin-bottom: 0; margin-bottom: 0;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
} }
.accordion-body { .accordion-body {
@ -814,6 +989,21 @@ h1#orderform-title {
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: $color-gray2; color: $color-gray2;
margin-bottom: 16px; margin-bottom: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
p,
button,
span,
div,
h3 {
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -861,8 +1051,12 @@ h1#orderform-title {
color: $color-gray14; color: $color-gray14;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-image: none !important; background-image: none !important;
@include mq(xxl, min) {
font-size: 28px;
line-height: 24px;
}
} }
} }
@ -873,13 +1067,13 @@ h1#orderform-title {
#payment-group-custom203PaymentGroupPaymentGroup, #payment-group-custom203PaymentGroupPaymentGroup,
#payment-group-instantPaymentPaymentGroup, #payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup, #payment-group-PSEPaymentGroup,
#TransferPaymentGroup, #TransferPaymentGroup,*/
#payment-group-customPrivate_502PaymentGroup, #payment-group-customPrivate_502PaymentGroup,
#payment-group-custom201PaymentGroupPaymentGroup, #payment-group-custom201PaymentGroupPaymentGroup,
#payment-group-MercadoPagoPaymentGroup, #payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup { #payment-group-SPEIPaymentGroup {
display: none; display: none;
}*/ }
} }
} }
@ -901,6 +1095,17 @@ h1#orderform-title {
.step.accordion-group.shipping-data { .step.accordion-group.shipping-data {
padding: 24px 17px 17px 17px; padding: 24px 17px 17px 17px;
/*PADRAO 4K PARA TEXTOS ALTERNATIVOS*/
p,
button,
span,
div {
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
}
//ICONE //ICONE
#edit-shipping-data { #edit-shipping-data {
display: contents !important; display: contents !important;
@ -911,12 +1116,22 @@ h1#orderform-title {
color: unset; color: unset;
font-size: 0; font-size: 0;
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
i.icon-edit { i.icon-edit {
margin-left: auto; margin-left: auto;
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) {
width: 39.24px !important;
height: 40.58px !important;
}
} }
} }
@ -943,6 +1158,11 @@ h1#orderform-title {
border-radius: 100px; border-radius: 100px;
color: #41115d; color: #41115d;
text-shadow: none; text-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
.vtex-omnishipping-1-x-deliveryOptionInactive { .vtex-omnishipping-1-x-deliveryOptionInactive {
@ -953,6 +1173,11 @@ h1#orderform-title {
line-height: 19px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
color: #c4c4c4; color: #c4c4c4;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
.input.ship-country.text { .input.ship-country.text {
@ -973,6 +1198,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
#ship-postalCode { #ship-postalCode {
@ -989,6 +1219,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
/*FORMA DE ENTREGA*/ /*FORMA DE ENTREGA*/
@ -1002,6 +1237,11 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
#delivery-packages-options { #delivery-packages-options {
@ -1018,6 +1258,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.shp-option-text-time, .shp-option-text-time,
@ -1027,6 +1272,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -1039,6 +1289,13 @@ h1#orderform-title {
border-radius: 3px; border-radius: 3px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png");
@include mq(xxl, min) {
width: 29px;
height: 29px;
background-repeat: no-repeat;
background-size: contain;
}
path { path {
fill: transparent; fill: transparent;
} }
@ -1092,6 +1349,11 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
&::after { &::after {
content: "-"; content: "-";
margin-left: 2px; margin-left: 2px;
@ -1106,6 +1368,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -1123,6 +1390,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.address-summary { .address-summary {
@ -1134,6 +1406,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.vtex-omnishipping-1-x-address { .vtex-omnishipping-1-x-address {
@ -1154,6 +1431,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
input { input {
@ -1204,6 +1486,11 @@ h1#orderform-title {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
.summary-cart-template-holder { .summary-cart-template-holder {
@ -1225,11 +1512,22 @@ h1#orderform-title {
width: 60px; width: 60px;
height: 60px; height: 60px;
@include mq(xxl, min) {
width: 116.5px;
height: 116.5px;
}
img { img {
max-width: 60px; max-width: 60px;
height: 60px; height: 60px;
width: 60px; width: 60px;
object-fit: cover; object-fit: cover;
@include mq(xxl, min) {
max-width: 116.5px;
width: 116.5px;
height: 116.5px;
}
} }
} }
@ -1241,6 +1539,10 @@ h1#orderform-title {
align-items: end; align-items: end;
justify-content: center; justify-content: center;
@include mq(xxl, min) {
font-size: 15px;
}
.shipping-date { .shipping-date {
width: max-content; width: max-content;
} }
@ -1266,6 +1568,12 @@ h1#orderform-title {
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
width: 227px;
}
@include mq(md, max) { @include mq(md, max) {
top: 25%; top: 25%;
margin-left: 70px; margin-left: 70px;
@ -1284,6 +1592,11 @@ h1#orderform-title {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }
@ -1301,6 +1614,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
margin-right: 17px; margin-right: 17px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin-right: 0; margin-right: 0;
} }
@ -1326,6 +1644,11 @@ h1#orderform-title {
line-height: 19px; line-height: 19px;
padding-top: 25px; padding-top: 25px;
padding-bottom: 25px; padding-bottom: 25px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
&.info { &.info {
@ -1354,11 +1677,21 @@ h1#orderform-title {
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 36px;
line-height: 49px;
}
} }
td.monetary { td.monetary {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }

226
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -135,6 +135,7 @@
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
background: $color-white; background: $color-white;
border: none; border: none;
@ -205,12 +206,25 @@
} }
} }
/*VALOR TOTAL CARRINHO FIXO 4K*/
@include mq(xxl, min) {
.cart-fixed.affix-top.cart-fixed-transition {
.span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
width: 100%;
}
}
}
//CART TABLET MOBILE //CART TABLET MOBILE
.cart-template-holder { .cart-template-holder {
@include mq(tablet, max) { @include mq(tablet, max) {
} }
.cart { .cart {
@include mq(xxl, min) {
padding: 16px 56px 16px 31px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
padding: 16px; padding: 16px;
margin: 16px 0; margin: 16px 0;
@ -221,6 +235,20 @@
} }
.summary-template-holder { .summary-template-holder {
/*4K*/
@include mq(xxl, min) {
.span5.totalizers.summary-totalizers.cart-totalizers.pull-right {
width: 688.35px;
.coupon {
width: unset;
span {
font-size: 24px;
line-height: 28px;
}
}
}
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin: 0 16px; margin: 0 16px;
width: auto; width: auto;
@ -322,12 +350,20 @@
.product-name { .product-name {
padding: 0 0 0 16px; padding: 0 0 0 16px;
@include mq(xxl, min) {
box-sizing: border-box;
width: 632px;
}
@include mq(md, max) { @include mq(md, max) {
/*width: 250px;*/
position: absolute; position: absolute;
top: 0; top: 0;
} }
@media only screen and (max-width: 490px) {
margin-left: 75px !important;
}
a { a {
color: $color-black-500; color: $color-black-500;
font-style: normal; font-style: normal;
@ -342,7 +378,7 @@
} }
@include mq(md, max) { @include mq(md, max) {
margin-left: 15px; /*margin-left: 15px; testar*/
} }
} }
@ -726,6 +762,10 @@
.srp-data { .srp-data {
width: 280px; width: 280px;
@include mq(xxl, min) {
width: 543.67px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 343px; width: 343px;
} }
@ -753,6 +793,12 @@
font-style: normal; font-style: normal;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
height: 60.98px;
}
&:hover { &:hover {
background-color: lighten($color-blue2, 5); background-color: lighten($color-blue2, 5);
} }
@ -778,6 +824,10 @@
text-transform: uppercase; text-transform: uppercase;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
left: 1px; left: 1px;
@include mq(xxl, min) {
height: 57px;
}
} }
&__current { &__current {
@ -791,6 +841,18 @@
&__pickup { &__pickup {
color: $color-gray7; color: $color-gray7;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
&__delivery {
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
label { label {
@ -803,7 +865,15 @@
} }
.srp-postal-code { .srp-postal-code {
&__form {
@include mq(xxl, min) {
width: 333.96px;
}
}
.ship-postalCode { .ship-postalCode {
@include mq(xxl, min) {
width: 300px;
}
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -812,6 +882,11 @@
line-height: 16px; line-height: 16px;
color: $color-black-500; color: $color-black-500;
margin-bottom: 2px; margin-bottom: 2px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
input { input {
@ -823,6 +898,12 @@
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(xxl, min) {
width: 333.96px;
height: 55px;
font-size: 24px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 215px; width: 215px;
} }
@ -856,6 +937,15 @@
background-color: darken($color-blue2, 5); background-color: darken($color-blue2, 5);
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
width: 194px;
height: 55px;
right: -210px;
top: 46px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 120px; width: 120px;
right: -213px; right: -213px;
@ -875,6 +965,12 @@
text-decoration-line: underline; text-decoration-line: underline;
color: $color-black-500; color: $color-black-500;
margin-top: 4px; margin-top: 4px;
@include mq(xxl, min) {
font-size: 20px;
line-height: 23px;
margin-top: 5px;
}
} }
} }
@ -884,6 +980,10 @@
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
@include mq(xxl, min) {
font-size: 20px;
}
} }
} }
} }
@ -898,6 +998,10 @@
color: #303030; color: #303030;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@include mq(xxl, min) {
font-size: 28px;
}
} }
#deliver-at-text a { #deliver-at-text a {
@ -905,6 +1009,10 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 32px;
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -920,6 +1028,25 @@
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
} }
svg {
@include mq(xxl, min) {
width: 28px;
height: 28px;
}
}
&__sla {
@include mq(xxl, min) {
font-size: 28px;
}
}
&__price {
@include mq(xxl, min) {
font-size: 28px;
}
}
} }
.srp-delivery-select { .srp-delivery-select {
@ -930,18 +1057,46 @@
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
.srp-delivery-current-many {
@include mq(xxl, min) {
font-size: 28px;
&__name {
font-size: 28px;
}
&__sla {
font-size: 20px;
}
svg {
width: 50px;
height: 50px;
}
}
}
.srp-shipping-current-many { .srp-shipping-current-many {
&__name { &__name {
color: #303030; color: #303030;
@include mq(xxl, min) {
font-size: 28px;
}
} }
&__sla { &__sla {
color: #7d7d7d; color: #7d7d7d;
@include mq(xxl, min) {
font-size: 28px;
}
} }
&__price { &__price {
color: #7d7d7d; color: #7d7d7d;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 28px;
}
} }
&__arrow svg { &__arrow svg {
@ -981,7 +1136,7 @@
color: $color-black-500; color: $color-black-500;
text-decoration: none; text-decoration: none;
@include mq(xxl, max) { @include mq(xxl, min) {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
} }
@ -1057,6 +1212,13 @@
max-width: 204.32px; max-width: 204.32px;
padding: 0 12px; padding: 0 12px;
@include mq(xxl, min) {
height: 50px;
font-size: 24px;
width: 278px;
max-width: 278px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 86.2%; width: 86.2%;
box-sizing: border-box; box-sizing: border-box;
@ -1069,6 +1231,11 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
} }
@include mq(sm, max) { @include mq(sm, max) {
@ -1095,11 +1262,15 @@
width: 133px; width: 133px;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) { @include mq(xxl, min) {
width: 13.4%; font-size: 24px;
line-height: 28px;
height: 45px;
width: 200px;
} }
@include mq(tablet, max) { @include mq(tablet, max) {
width: 13.4%;
margin-left: 0; margin-left: 0;
} }
@ -1128,6 +1299,13 @@
line-height: 14px; line-height: 14px;
color: $color-black-500; color: $color-black-500;
@include mq(xxl, min) {
font-size: 24px;
top: 70px;
right: 180px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 0; font-size: 0;
} }
@ -1153,6 +1331,12 @@
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
padding: 12px 0; padding: 12px 0;
/*4K*/
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
&.info { &.info {
@ -1163,6 +1347,10 @@
&.monetary { &.monetary {
text-align: right; text-align: right;
font-family: $font-family-secundary; font-family: $font-family-secundary;
/*4K*/
@include mq(xxl, min) {
width: 200px;
}
} }
} }
} }
@ -1176,6 +1364,12 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: $color-black; color: $color-black;
/*4K*/
@include mq(xxl, min) {
font-size: 36px;
line-height: 49px;
}
} }
} }
} }
@ -1187,6 +1381,10 @@
flex-direction: column; flex-direction: column;
width: 352px; width: 352px;
@include mq(xxl, min) {
width: 688.35px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 100%; width: 100%;
padding-bottom: 0 !important; padding-bottom: 0 !important;
@ -1196,7 +1394,6 @@
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
float: none; float: none;
/*margin-bottom: 50px;*/
} }
@include mq(md, min) { @include mq(md, min) {
@ -1220,6 +1417,11 @@
line-height: 14px; line-height: 14px;
color: $color-black-500; color: $color-black-500;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -1257,8 +1459,20 @@
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
text-shadow: none; text-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
letter-spacing: 0.05em;
} }
} }
} }
} }
} }
}
.checkout-container.row-fluid.cart-active {
@include mq(md, max) {
overflow: hidden;
}
}

12
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -10,7 +10,6 @@ html {
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; width: 94.9734%;
margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
@ -25,6 +24,12 @@ body {
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;
@include mq(lg, max) {
padding-right: 0;
padding-left: 0;
}
@include mq(md, max) { @include mq(md, max) {
padding-left: 0; padding-left: 0;
@ -83,6 +88,11 @@ body {
margin: 40px 0 30px; margin: 40px 0 30px;
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }

14
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -226,21 +226,31 @@
} }
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
background-size: contain; background-size: contain;
left: 10px; left: 10px;
@include mq(xxl, min) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center;
}
@include mq(md, max) { @include mq(md, max) {
left: 0px; left: 0px;
} }
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
background-size: contain; background-size: contain;
right: 10px; right: 10px;
@include mq(xxl, min) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center;
}
@include mq(md, max) { @include mq(md, max) {
right: 0; right: 0;
} }

4
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -20,6 +20,10 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@include mq(xxl, min) {
margin: 16px 62px 16px 63px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;

3
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -34,7 +34,7 @@
} }
@include mq(cstm, max) { @include mq(cstm, max) {
margin-right: 50px; margin-right: 40px;
} }
img { img {
@ -43,6 +43,7 @@
} }
&__safeBuy { &__safeBuy {
justify-content: end;
display: flex; display: flex;
width: 15.2829%; width: 15.2829%;

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -41,7 +41,7 @@ $grid-breakpoints: (
fold: 350, fold: 350,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 599px,
lg: 992px, lg: 992px,
tablet: 1025px, tablet: 1025px,
xl: 1200px, xl: 1200px,