forked from M3-Academy/m3-academy-template-checkout
feature/main #5
@ -7,15 +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
|
||||
@ -87,30 +85,28 @@ 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({
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
});
|
||||
}
|
||||
$(prateleira).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
async onUpdate() {
|
||||
@ -140,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`;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -49,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;
|
||||
@ -78,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;
|
||||
@ -98,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;
|
||||
@ -130,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;
|
||||
}
|
||||
@ -156,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%;
|
||||
}
|
||||
@ -186,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;
|
||||
}
|
||||
@ -200,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;
|
||||
|
||||
@ -220,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 {
|
||||
@ -232,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 {
|
||||
@ -239,6 +285,10 @@ h1#orderform-title {
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
margin-right: 6px;
|
||||
|
||||
@include mq(xxl, min) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -252,6 +302,10 @@ h1#orderform-title {
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
|
||||
@include mq(xxl, min) {
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -613,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 {
|
||||
@ -636,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 {
|
||||
@ -658,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;
|
||||
@ -668,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -760,8 +834,8 @@ h1#orderform-title {
|
||||
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) {
|
||||
@ -868,8 +942,8 @@ h1#orderform-title {
|
||||
|
||||
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) {
|
||||
@ -915,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -962,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -974,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;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1002,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;
|
||||
@ -1020,8 +1124,8 @@ h1#orderform-title {
|
||||
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) {
|
||||
@ -1054,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 {
|
||||
@ -1064,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 {
|
||||
@ -1084,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 {
|
||||
@ -1100,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*/
|
||||
@ -1113,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 {
|
||||
@ -1129,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,
|
||||
@ -1138,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1150,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;
|
||||
}
|
||||
@ -1203,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;
|
||||
@ -1217,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1234,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 {
|
||||
@ -1245,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 {
|
||||
@ -1265,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 {
|
||||
@ -1315,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 {
|
||||
@ -1336,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1352,6 +1539,10 @@ h1#orderform-title {
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(xxl, min) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.shipping-date {
|
||||
width: max-content;
|
||||
}
|
||||
@ -1377,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;
|
||||
@ -1395,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1412,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;
|
||||
}
|
||||
@ -1437,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 {
|
||||
@ -1465,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -41,7 +41,7 @@ $grid-breakpoints: (
|
||||
fold: 350,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
md: 599px,
|
||||
lg: 992px,
|
||||
tablet: 1025px,
|
||||
xl: 1200px,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user