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

feature/main #5

Merged
cainamilech merged 4 commits from feature/main into develop 2022-12-22 02:54:34 +00:00
Conversation 0 Commits 4 Files Changed 10 +323 -170
5 changed files with 323 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c61f735d7c - Show all commits

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

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

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

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

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

@ -49,6 +49,11 @@ h1#orderform-title {
color: lighen($color-black-500, 10); color: lighen($color-black-500, 10);
} }
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
@ -78,6 +83,11 @@ h1#orderform-title {
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -98,6 +108,11 @@ h1#orderform-title {
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(xxl, min) {
font-size: 40px;
line-height: 47px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -130,6 +145,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 90% !important; width: 90% !important;
} }
@ -156,6 +176,12 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
width: 219px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
right: 1.7%; right: 1.7%;
} }
@ -186,6 +212,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
text-transform: capitalize; text-transform: capitalize;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
text-align: center; text-align: center;
} }
@ -200,6 +231,11 @@ h1#orderform-title {
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
border-radius: 5px; border-radius: 5px;
@include mq(xxl, min) {
width: 742px;
height: 200px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
width: 309px; width: 309px;
@ -220,6 +256,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin: 0 0 9.56px 0; margin: 0 0 9.56px 0;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
@ -232,6 +273,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black-500; color: $color-black-500;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
i::before { i::before {
@ -239,6 +285,10 @@ h1#orderform-title {
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
margin-right: 6px; margin-right: 6px;
@include mq(xxl, min) {
font-size: 28px;
}
} }
} }
} }
@ -252,6 +302,10 @@ h1#orderform-title {
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
@include mq(xxl, min) {
font-size: unset;
}
} }
} }
} }
@ -613,6 +667,11 @@ h1#orderform-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.shp-lean { .shp-lean {
@ -636,6 +695,11 @@ h1#orderform-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -658,6 +722,11 @@ h1#orderform-title {
background-position: 8px 9px; background-position: 8px 9px;
} }
@include mq(xxl, min) {
background-size: 46.45px 46.45px;
padding: 12px 90px 12px 72px;
}
a { a {
position: absolute; position: absolute;
right: 13px; right: 13px;
@ -668,6 +737,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
text-transform: lowercase; text-transform: lowercase;
color: $color-blue2; color: $color-blue2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -760,8 +834,8 @@ h1#orderform-title {
i.icon-edit { i.icon-edit {
margin-left: auto; margin-left: auto;
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) { @include mq(xxl, min) {
@ -868,8 +942,8 @@ h1#orderform-title {
i.icon-edit { i.icon-edit {
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) { @include mq(xxl, min) {
@ -915,6 +989,21 @@ h1#orderform-title {
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: $color-gray2; color: $color-gray2;
margin-bottom: 16px; margin-bottom: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 48px;
}
}
p,
button,
span,
div,
h3 {
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -962,8 +1051,12 @@ h1#orderform-title {
color: $color-gray14; color: $color-gray14;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-image: none !important; background-image: none !important;
@include mq(xxl, min) {
font-size: 28px;
line-height: 24px;
}
} }
} }
@ -974,13 +1067,13 @@ h1#orderform-title {
#payment-group-custom203PaymentGroupPaymentGroup, #payment-group-custom203PaymentGroupPaymentGroup,
#payment-group-instantPaymentPaymentGroup, #payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup, #payment-group-PSEPaymentGroup,
#TransferPaymentGroup, #TransferPaymentGroup,*/
#payment-group-customPrivate_502PaymentGroup, #payment-group-customPrivate_502PaymentGroup,
#payment-group-custom201PaymentGroupPaymentGroup, #payment-group-custom201PaymentGroupPaymentGroup,
#payment-group-MercadoPagoPaymentGroup, #payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup { #payment-group-SPEIPaymentGroup {
display: none; display: none;
}*/ }
} }
} }
@ -1002,6 +1095,17 @@ h1#orderform-title {
.step.accordion-group.shipping-data { .step.accordion-group.shipping-data {
padding: 24px 17px 17px 17px; padding: 24px 17px 17px 17px;
/*PADRAO 4K PARA TEXTOS ALTERNATIVOS*/
p,
button,
span,
div {
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
}
//ICONE //ICONE
#edit-shipping-data { #edit-shipping-data {
display: contents !important; display: contents !important;
@ -1020,8 +1124,8 @@ h1#orderform-title {
i.icon-edit { i.icon-edit {
margin-left: auto; margin-left: auto;
background-size: contain; background-size: contain;
width: 21px !important; width: 20.26px !important;
height: 21px !important; height: 20.89px !important;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
@include mq(xxl, min) { @include mq(xxl, min) {
@ -1054,6 +1158,11 @@ h1#orderform-title {
border-radius: 100px; border-radius: 100px;
color: #41115d; color: #41115d;
text-shadow: none; text-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
.vtex-omnishipping-1-x-deliveryOptionInactive { .vtex-omnishipping-1-x-deliveryOptionInactive {
@ -1064,6 +1173,11 @@ h1#orderform-title {
line-height: 19px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
color: #c4c4c4; color: #c4c4c4;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
.input.ship-country.text { .input.ship-country.text {
@ -1084,6 +1198,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
#ship-postalCode { #ship-postalCode {
@ -1100,6 +1219,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
/*FORMA DE ENTREGA*/ /*FORMA DE ENTREGA*/
@ -1113,6 +1237,11 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
#delivery-packages-options { #delivery-packages-options {
@ -1129,6 +1258,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.shp-option-text-time, .shp-option-text-time,
@ -1138,6 +1272,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -1150,6 +1289,13 @@ h1#orderform-title {
border-radius: 3px; border-radius: 3px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png");
@include mq(xxl, min) {
width: 29px;
height: 29px;
background-repeat: no-repeat;
background-size: contain;
}
path { path {
fill: transparent; fill: transparent;
} }
@ -1203,6 +1349,11 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
&::after { &::after {
content: "-"; content: "-";
margin-left: 2px; margin-left: 2px;
@ -1217,6 +1368,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
} }
@ -1234,6 +1390,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.address-summary { .address-summary {
@ -1245,6 +1406,11 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
.vtex-omnishipping-1-x-address { .vtex-omnishipping-1-x-address {
@ -1265,6 +1431,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-gray2; color: $color-gray2;
@include mq(xxl, min) {
font-size: 24px;
line-height: 32px;
}
} }
input { input {
@ -1315,6 +1486,11 @@ h1#orderform-title {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 32px;
line-height: 37px;
}
} }
.summary-cart-template-holder { .summary-cart-template-holder {
@ -1336,11 +1512,22 @@ h1#orderform-title {
width: 60px; width: 60px;
height: 60px; height: 60px;
@include mq(xxl, min) {
width: 116.5px;
height: 116.5px;
}
img { img {
max-width: 60px; max-width: 60px;
height: 60px; height: 60px;
width: 60px; width: 60px;
object-fit: cover; object-fit: cover;
@include mq(xxl, min) {
max-width: 116.5px;
width: 116.5px;
height: 116.5px;
}
} }
} }
@ -1352,6 +1539,10 @@ h1#orderform-title {
align-items: end; align-items: end;
justify-content: center; justify-content: center;
@include mq(xxl, min) {
font-size: 15px;
}
.shipping-date { .shipping-date {
width: max-content; width: max-content;
} }
@ -1377,6 +1568,12 @@ h1#orderform-title {
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
width: 227px;
}
@include mq(md, max) { @include mq(md, max) {
top: 25%; top: 25%;
margin-left: 70px; margin-left: 70px;
@ -1395,6 +1592,11 @@ h1#orderform-title {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }
@ -1412,6 +1614,11 @@ h1#orderform-title {
line-height: 16px; line-height: 16px;
margin-right: 17px; margin-right: 17px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin-right: 0; margin-right: 0;
} }
@ -1437,6 +1644,11 @@ h1#orderform-title {
line-height: 19px; line-height: 19px;
padding-top: 25px; padding-top: 25px;
padding-bottom: 25px; padding-bottom: 25px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
&.info { &.info {
@ -1465,11 +1677,21 @@ h1#orderform-title {
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 36px;
line-height: 49px;
}
} }
td.monetary { td.monetary {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
} }

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

@ -10,7 +10,6 @@ html {
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; width: 94.9734%;
margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
@ -25,6 +24,12 @@ body {
flex-direction: column; flex-direction: column;
min-height: 100% !important; min-height: 100% !important;
padding-top: 0 !important; padding-top: 0 !important;
justify-content: space-between;
@include mq(lg, max) {
padding-right: 0;
padding-left: 0;
}
@include mq(md, max) { @include mq(md, max) {
padding-left: 0; padding-left: 0;

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

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