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() {
await this.selectors();
await this.carrinho();
await this.replaceHtml();
this.renderPrateleira();
this.onUpdate();
this.addCarrossel();
}
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.checkoutVazio = await waitElement(".empty-cart-content");
//CARRINHO VAZIO
@ -86,31 +85,29 @@ export default class Footer {
}
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({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else if (window.screen.width < 600) {
$(prateleira).slick({
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else if (window.screen.width <= 1024) {
$(prateleira).slick({
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
arrows: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
},
},
],
});
}
}
async onUpdate() {
//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") {
this.onUpdate();
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.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`;

View File

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

View File

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

View File

@ -135,6 +135,7 @@
.cart-fixed {
font-family: $font-family;
width: 100%;
h2 {
background: $color-white;
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-template-holder {
@include mq(tablet, max) {
}
.cart {
@include mq(xxl, min) {
padding: 16px 56px 16px 31px;
}
@include mq(tablet, max) {
padding: 16px;
margin: 16px 0;
@ -221,6 +235,20 @@
}
.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) {
margin: 0 16px;
width: auto;
@ -322,12 +350,20 @@
.product-name {
padding: 0 0 0 16px;
@include mq(xxl, min) {
box-sizing: border-box;
width: 632px;
}
@include mq(md, max) {
/*width: 250px;*/
position: absolute;
top: 0;
}
@media only screen and (max-width: 490px) {
margin-left: 75px !important;
}
a {
color: $color-black-500;
font-style: normal;
@ -342,7 +378,7 @@
}
@include mq(md, max) {
margin-left: 15px;
/*margin-left: 15px; testar*/
}
}
@ -726,6 +762,10 @@
.srp-data {
width: 280px;
@include mq(xxl, min) {
width: 543.67px;
}
@include mq(tablet, max) {
width: 343px;
}
@ -753,6 +793,12 @@
font-style: normal;
letter-spacing: 0.05em;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
height: 60.98px;
}
&:hover {
background-color: lighten($color-blue2, 5);
}
@ -778,6 +824,10 @@
text-transform: uppercase;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
left: 1px;
@include mq(xxl, min) {
height: 57px;
}
}
&__current {
@ -791,6 +841,18 @@
&__pickup {
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 {
@ -803,7 +865,15 @@
}
.srp-postal-code {
&__form {
@include mq(xxl, min) {
width: 333.96px;
}
}
.ship-postalCode {
@include mq(xxl, min) {
width: 300px;
}
label {
font-family: $font-family;
font-style: normal;
@ -812,6 +882,11 @@
line-height: 16px;
color: $color-black-500;
margin-bottom: 2px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
input {
@ -823,6 +898,12 @@
padding: 12px 8px;
width: 172px;
@include mq(xxl, min) {
width: 333.96px;
height: 55px;
font-size: 24px;
}
@include mq(tablet, max) {
width: 215px;
}
@ -856,6 +937,15 @@
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) {
width: 120px;
right: -213px;
@ -875,6 +965,12 @@
text-decoration-line: underline;
color: $color-black-500;
margin-top: 4px;
@include mq(xxl, min) {
font-size: 20px;
line-height: 23px;
margin-top: 5px;
}
}
}
@ -884,6 +980,10 @@
position: absolute;
left: 0;
width: 100%;
@include mq(xxl, min) {
font-size: 20px;
}
}
}
}
@ -898,6 +998,10 @@
color: #303030;
font-weight: 400;
font-size: 14px;
@include mq(xxl, min) {
font-size: 28px;
}
}
#deliver-at-text a {
@ -905,6 +1009,10 @@
font-size: 16px;
font-weight: 500;
@include mq(xxl, min) {
font-size: 32px;
}
&:hover {
text-decoration: underline;
}
@ -920,6 +1028,25 @@
svg path {
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 {
@ -930,18 +1057,46 @@
border: 1px solid $color-gray4;
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 {
&__name {
color: #303030;
@include mq(xxl, min) {
font-size: 28px;
}
}
&__sla {
color: #7d7d7d;
@include mq(xxl, min) {
font-size: 28px;
}
}
&__price {
color: #7d7d7d;
font-weight: 500;
@include mq(xxl, min) {
font-size: 28px;
}
}
&__arrow svg {
@ -981,7 +1136,7 @@
color: $color-black-500;
text-decoration: none;
@include mq(xxl, max) {
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
@ -1057,6 +1212,13 @@
max-width: 204.32px;
padding: 0 12px;
@include mq(xxl, min) {
height: 50px;
font-size: 24px;
width: 278px;
max-width: 278px;
}
@include mq(tablet, max) {
width: 86.2%;
box-sizing: border-box;
@ -1069,6 +1231,11 @@
font-weight: 400;
font-size: 12px;
line-height: 14px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
@include mq(sm, max) {
@ -1095,11 +1262,15 @@
width: 133px;
text-transform: uppercase;
@include mq(tablet, max) {
width: 13.4%;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
height: 45px;
width: 200px;
}
@include mq(tablet, max) {
width: 13.4%;
margin-left: 0;
}
@ -1128,6 +1299,13 @@
line-height: 14px;
color: $color-black-500;
@include mq(xxl, min) {
font-size: 24px;
top: 70px;
right: 180px;
}
@include mq(tablet, max) {
font-size: 0;
}
@ -1153,6 +1331,12 @@
line-height: 16px;
color: $color-black;
padding: 12px 0;
/*4K*/
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
}
&.info {
@ -1163,6 +1347,10 @@
&.monetary {
text-align: right;
font-family: $font-family-secundary;
/*4K*/
@include mq(xxl, min) {
width: 200px;
}
}
}
}
@ -1176,6 +1364,12 @@
font-size: 18px;
line-height: 25px;
color: $color-black;
/*4K*/
@include mq(xxl, min) {
font-size: 36px;
line-height: 49px;
}
}
}
}
@ -1187,6 +1381,10 @@
flex-direction: column;
width: 352px;
@include mq(xxl, min) {
width: 688.35px;
}
@include mq(tablet, max) {
width: 100%;
padding-bottom: 0 !important;
@ -1196,7 +1394,6 @@
padding: 0 16px;
width: calc(100% - 32px);
float: none;
/*margin-bottom: 50px;*/
}
@include mq(md, min) {
@ -1220,6 +1417,11 @@
line-height: 14px;
color: $color-black-500;
font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
@ -1257,8 +1459,20 @@
text-transform: uppercase;
vertical-align: middle;
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 {
width: 94.9734%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
@ -25,6 +24,12 @@ body {
flex-direction: column;
min-height: 100% !important;
padding-top: 0 !important;
justify-content: space-between;
@include mq(lg, max) {
padding-right: 0;
padding-left: 0;
}
@include mq(md, max) {
padding-left: 0;
@ -83,6 +88,11 @@ body {
margin: 40px 0 30px;
text-transform: uppercase;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) {
margin-left: 30px;
}

View File

@ -226,21 +226,31 @@
}
}
.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;
background-size: contain;
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) {
left: 0px;
}
}
.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;
background-size: contain;
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) {
right: 0;
}

View File

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

View File

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

View File

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