forked from M3-Academy/m3-academy-template-checkout
feature/main #5
@ -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
|
||||
@ -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`;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
|
||||
|
||||
@ -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