From 0b54e92bb46c91ffd9a0fb0f0f0eaa907b31769e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Mon, 19 Dec 2022 22:50:18 -0300 Subject: [PATCH 1/4] feat: Adiciona area de entrega do carrinho 2500 --- checkout/src/arquivos/js/components/Footer.js | 1 + .../sass/checkout/_checkout-carrinho.scss | 168 +++++++++++++++++- checkout/src/arquivos/sass/lib/_slick.scss | 14 +- 3 files changed, 180 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index db385b4..d9961b7 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -10,6 +10,7 @@ export default class Footer { await this.carrinho(); this.renderPrateleira(); this.onUpdate(); + this.addCarrossel(); } async selectors() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 65a4b2b..5a6196f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -211,6 +211,10 @@ } .cart { + @include mq(xxl, min) { + padding: 16px 56px 16px 31px; + } + @include mq(tablet, max) { padding: 16px; margin: 16px 0; @@ -221,6 +225,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,6 +340,11 @@ .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; @@ -726,6 +749,10 @@ .srp-data { width: 280px; + @include mq(xxl, min) { + width: 543.67px; + } + @include mq(tablet, max) { width: 343px; } @@ -778,6 +805,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 +822,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 +846,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 +863,11 @@ line-height: 16px; color: $color-black-500; margin-bottom: 2px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } input { @@ -823,6 +879,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 +918,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 +946,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 +961,10 @@ position: absolute; left: 0; width: 100%; + + @include mq(xxl, min) { + font-size: 20px; + } } } } @@ -898,6 +979,10 @@ color: #303030; font-weight: 400; font-size: 14px; + + @include mq(xxl, min) { + font-size: 28px; + } } #deliver-at-text a { @@ -905,6 +990,10 @@ font-size: 16px; font-weight: 500; + @include mq(xxl, min) { + font-size: 32px; + } + &:hover { text-decoration: underline; } @@ -920,6 +1009,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 +1038,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 { @@ -1153,6 +1289,12 @@ line-height: 16px; color: $color-black; padding: 12px 0; + + /*4K*/ + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -1163,6 +1305,10 @@ &.monetary { text-align: right; font-family: $font-family-secundary; + /*4K*/ + @include mq(xxl, min) { + width: 200px; + } } } } @@ -1176,6 +1322,12 @@ font-size: 18px; line-height: 25px; color: $color-black; + + /*4K*/ + @include mq(xxl, min) { + font-size: 36px; + line-height: 49px; + } } } } @@ -1187,6 +1339,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 +1352,6 @@ padding: 0 16px; width: calc(100% - 32px); float: none; - /*margin-bottom: 50px;*/ } @include mq(md, min) { @@ -1220,6 +1375,11 @@ line-height: 14px; color: $color-black-500; font-family: $font-family-secundary; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -1257,6 +1417,12 @@ text-transform: uppercase; vertical-align: middle; text-shadow: none; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + } } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 3776b83..629d6ff 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -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; } -- 2.34.1 From a10017a22f8026e20c21e584e5ef24b31833bad6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 20 Dec 2022 23:35:48 -0300 Subject: [PATCH 2/4] feat: Adiciona identificacao 2500 --- .../sass/checkout/_checkout-autenticacao.scss | 113 +++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 58 ++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 5 + .../src/arquivos/sass/partials/_footer.scss | 4 + .../src/arquivos/sass/partials/_header.scss | 3 +- 5 files changed, 176 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 52e0607..f61c6ef 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -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; } @@ -287,8 +292,8 @@ h1#orderform-title { .client-document, .client-phone { float: left !important; - width: 47.4%; + @include mq(tablet, max) { width: 49.4%; } @@ -428,6 +433,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 +466,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 +494,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 +516,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 +528,10 @@ h1#orderform-title { .help.error { color: $color-red; + + @include mq(xxl, min) { + font-size: 24px; + } } .box-client-info-pj { @@ -526,6 +555,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 +581,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; } @@ -680,6 +720,11 @@ h1#orderform-title { &::before { content: "Identificação"; font-size: 16px; + + @include mq(xxl, min) { + font-size: 32px; + line-height: 37px; + } } } @@ -707,12 +752,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; 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 +778,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 +789,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 +836,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 +861,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; 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 +893,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 { @@ -911,12 +1012,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; background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + + @include mq(xxl, min) { + width: 39.24px !important; + height: 40.58px !important; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 5a6196f..ddf0014 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -135,6 +135,7 @@ .cart-fixed { font-family: $font-family; width: 100%; + h2 { background: $color-white; border: none; @@ -205,6 +206,15 @@ } } + /*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) { @@ -346,11 +356,14 @@ } @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; @@ -365,7 +378,7 @@ } @include mq(md, max) { - margin-left: 15px; + /*margin-left: 15px; testar*/ } } @@ -780,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); } @@ -1117,7 +1136,7 @@ color: $color-black-500; text-decoration: none; - @include mq(xxl, max) { + @include mq(xxl, min) { font-size: 24px; line-height: 28px; } @@ -1193,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; @@ -1205,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) { @@ -1231,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; } @@ -1264,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; } @@ -1428,3 +1470,9 @@ } } } + +.checkout-container.row-fluid.cart-active { + @include mq(md, max) { + overflow: hidden; + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 3f9a975..384d388 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -83,6 +83,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; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 61f1cac..3243c6c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -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; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index d4874d7..5019043 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -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%; -- 2.34.1 From d7d3fdbc1ef2d41807f1c81bda384f8bd9d29fc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 20 Dec 2022 23:37:56 -0300 Subject: [PATCH 3/4] feat: Adiciona identificao 2500 --- bash.exe.stackdump | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 bash.exe.stackdump diff --git a/bash.exe.stackdump b/bash.exe.stackdump deleted file mode 100644 index 512b978..0000000 --- a/bash.exe.stackdump +++ /dev/null @@ -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 -- 2.34.1 From c61f735d7c9df0c0bc92efab6ef1fdd8c8faac40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 21 Dec 2022 23:50:31 -0300 Subject: [PATCH 4/4] feat: Finaliza layout 2500 --- checkout/src/arquivos/js/components/Footer.js | 60 +++-- checkout/src/arquivos/js/components/Header.js | 184 ++++---------- .../sass/checkout/_checkout-autenticacao.scss | 240 +++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 7 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 5 files changed, 323 insertions(+), 170 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d9961b7..8b701ad 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -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`; diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 79dfc97..e40730f 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -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"); } } }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index f61c6ef..126c401 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -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; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 384d388..db74f01 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -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; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 296bc65..7bbe7e3 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -41,7 +41,7 @@ $grid-breakpoints: ( fold: 350, cstm: 400, sm: 576px, - md: 768px, + md: 599px, lg: 992px, tablet: 1025px, xl: 1200px, -- 2.34.1