feature/main #5

Merged
cainamilech merged 4 commits from feature/main into develop 2022-12-22 02:54:34 +00:00
10 changed files with 679 additions and 196 deletions

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

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,30 +85,28 @@ 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) { breakpoint: 1025,
$(prateleira).slick({ settings: {
slidesToShow: 2, slidesToShow: 3,
slidesToScroll: 1, },
infinite: true, },
arrows: true, {
}); breakpoint: 600,
} else if (window.screen.width <= 1024) { settings: {
$(prateleira).slick({ slidesToShow: 2,
slidesToShow: 3, },
slidesToScroll: 1, },
infinite: true, ],
arrows: true, });
});
}
} }
async onUpdate() { async onUpdate() {
@ -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`;

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

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

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

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

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

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;

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

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,