diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 8760340..49da798 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (00000780000, 00000780101, 00000000001, E9C64E3ED582) +000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9308dda..e3324f6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -90,12 +90,21 @@ export default class Footer { async addCarrossel() { const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); - if (window.screen.width > 1024) { + if (window.screen.width > 102) { $(prateleira).slick({ - slidesToShow: 4, + slidesToShow: 3, slidesToScroll: 1, infinite: true, arrows: true, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 4, + slidesToScroll: 1, + }, + }, + ], }); } } @@ -132,7 +141,7 @@ export default class Footer { carrinho() { this.title.innerHTML = ``; - this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; + //this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.continuarCompra.innerHTML = `continuar comprando`; this.frete.innerHTML = `Frete`; this.unidade.innerHTML = `Unidade`; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 8cd0b95..23a9426 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -13,6 +13,10 @@ h1#orderform-title { font-family: $font-family; padding-top: 8px; + @include mq(tablet, max) { + padding-top: 0; + } + .link-cart { a { font-family: $font-family-secundary; @@ -28,6 +32,11 @@ h1#orderform-title { &:hover { color: lighen($color-black-500, 10); } + + @include mq(tablet, max) { + font-size: 10px; + line-height: 12px; + } } } @@ -48,6 +57,11 @@ h1#orderform-title { line-height: 23px; text-transform: uppercase; font-family: $font-family-secundary; + + @include mq(tablet, max) { + font-size: 14px; + line-height: 16px; + } } small { @@ -58,6 +72,11 @@ h1#orderform-title { line-height: 23px; text-transform: uppercase; font-family: $font-family-secundary; + + @include mq(tablet, max) { + font-size: 14px; + line-height: 16px; + } } } } @@ -66,6 +85,11 @@ h1#orderform-title { /*left: -61px;*/ margin: 0 0 24.56px; + @include mq(tablet, max) { + width: 100%; + text-align: initial; + } + input { /*width: 65.8%;*/ width: 82%; @@ -82,6 +106,10 @@ h1#orderform-title { font-size: 12px; line-height: 16px; + @include mq(tablet, max) { + width: 90%; + } + &::placeholder { color: $color-black-500; } @@ -108,6 +136,10 @@ h1#orderform-title { letter-spacing: 0.05em; text-transform: uppercase; + @include mq(tablet, max) { + right: 0; + } + &:hover { background: lighten($color-blue2, 5); } @@ -130,6 +162,10 @@ h1#orderform-title { font-size: 12px; line-height: 16px; text-transform: capitalize; + + @include mq(tablet, max) { + text-align: center; + } } } @@ -141,6 +177,14 @@ h1#orderform-title { border: 1px solid $color-black-500; border-radius: 5px; + @include mq(tablet, max) { + width: 309px; + + i.icon-lock { + display: none; + } + } + h3 { color: $color-black-500; font-style: normal; @@ -184,6 +228,139 @@ h1#orderform-title { } } + //DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE + .row-fluid.orderform-template { + @include mq(tablet, max) { + display: flex; + flex-direction: column; + } + + .orderform-template-holder.span8 { + @include mq(tablet, max) { + width: 100% !important; + } + + .row-fluid { + @include mq(tablet, max) { + width: 100%; + display: flex; + flex-direction: column; + } + + //IDENTIFICAÇÃO + .span6.client-profile-data { + @include mq(tablet, max) { + width: 100%; + } + + .client-first-name, + .client-last-name, + .client-document, + .client-phone { + @include mq(tablet, max) { + width: 49.4%; + } + + input { + @include mq(tablet, max) { + width: 100%; + } + } + } + + .client-first-name, + .client-document { + @include mq(tablet, max) { + margin-right: 1.2%; + } + } + } + + //ENTREGA + #shipping-data { + @include mq(tablet, max) { + width: 100%; + margin: 0; + } + + .accordion-inner { + #postalCode-finished-loading { + @include mq(tablet, max) { + width: 309px; + height: 36px; + } + } + .ship-postalCode { + @include mq(tablet, max) { + margin-top: 25px; + } + } + .vtex-omnishipping-1-x-summaryPackage { + @include mq(tablet, max) { + justify-content: start; + } + } + .vtex-omnishipping-1-x-SummaryItemContent { + @include mq(tablet, max) { + position: relative; + } + + .vtex-omnishipping-1-x-SummaryItemPrice { + @include mq(tablet, max) { + position: absolute; + bottom: 1%; + left: 14%; + } + } + } + } + } + + //PAGAMENTO + #payment-data { + @include mq(tablet, max) { + width: 100%; + margin: 0; + } + .payment-group { + @include mq(tablet, max) { + width: 100%; + } + } + .steps-view { + @include mq(tablet, max) { + width: 100%; + box-sizing: border-box; + } + } + } + } + } + + //MINICART + .cart-template.mini-cart.span4 { + @include mq(tablet, max) { + width: 100%; + } + + .totalizers { + @include mq(tablet, max) { + margin-top: 0; + } + } + .cart-fixed.cart-fixed-transition.affix { + @include mq(tablet, max) { + padding-bottom: 4px; + } + #payment-data-submit { + @include mq(tablet, max) { + position: inherit; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { @@ -323,7 +500,6 @@ h1#orderform-title { border: none; border-radius: 8px; background: $color-blue2; - outline: none; transition: all 0.2s linear; letter-spacing: 0.05em; @@ -333,6 +509,10 @@ h1#orderform-title { font-size: 14px; line-height: 19px; + @include mq(tablet, max) { + margin-bottom: 13px; + } + &:hover { background: lighten($color-blue2, 5); } @@ -743,6 +923,8 @@ h1#orderform-title { .input.ship-postalCode { label { font-size: 0; + display: flex; + align-items: center; &::before { content: "CEP:"; @@ -1140,6 +1322,14 @@ h1#orderform-title { height: 42px; margin: 0; + &:hover { + background: lighten($color-green2, 5); + } + + &:active { + background: darken($color-green2, 5); + } + i { display: none; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 787e2a5..21ae3ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -32,6 +32,12 @@ text-align: center; text-transform: uppercase; margin: 0 0 32px; + + @include mq(tablet, max) { + margin-bottom: 22px; + font-size: 18px; + line-height: 25px; + } } .empty-cart-message { @@ -48,6 +54,12 @@ border-radius: 0%; padding: 15px 64px 17px 65px; margin: 0; + font-size: 14px; + line-height: 16px; + + @include mq(tablet, max) { + padding: 16px 26px; + } } } .empty-cart-title { @@ -89,6 +101,11 @@ border-radius: 5px; padding: 16px; + @include mq(tablet, max) { + padding: 0; + border: none; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -184,6 +201,10 @@ td { text-align: start; padding: 0; + + @include mq(tablet, max) { + vertical-align: top; + } } th { @@ -194,6 +215,10 @@ font-size: 14px; line-height: 16px; + @include mq(tablet, max) { + display: none; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -255,6 +280,10 @@ font-size: 12px; line-height: 14px; + @include mq(tablet, max) { + display: none; + } + @include mq(md, max) { display: none; } @@ -264,6 +293,13 @@ min-width: 100px; top: 13px; + @include mq(tablet, max) { + position: absolute; + right: 0; + top: 40%; + text-align: end; + } + @include mq(md, max) { min-width: 78px; } @@ -311,6 +347,12 @@ padding: 9px 0; width: max-content !important; + @include mq(tablet, max) { + position: absolute; + left: 7.7%; + top: 20%; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -371,6 +413,12 @@ } } + td.quantity-price { + @include mq(tablet, max) { + display: none; + } + } + .quantity-price, .best-price { .icon-question-sign { @@ -399,6 +447,7 @@ } .item-remove { + text-align: end; @media (max-width: 490px) { top: 0; } @@ -431,6 +480,11 @@ .summary { margin-top: 48px; + @include mq(tablet, max) { + display: flex; + flex-direction: column; + } + .cart-more-options { padding: 0; margin: 0; @@ -494,6 +548,10 @@ .srp-data { width: 280px; + @include mq(tablet, max) { + width: 343px; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -586,6 +644,10 @@ height: 36px; padding: 12px 8px; width: 172px; + + @include mq(tablet, max) { + width: 215px; + } } & ~ button { @@ -615,6 +677,11 @@ &:active { background-color: darken($color-blue2, 5); } + + @include mq(tablet, max) { + width: 120px; + right: -213px; + } } small a { @@ -712,6 +779,11 @@ width: 354px; margin-bottom: 5px; + @include mq(tablet, max) { + margin: 48px 0 0 0; + width: 100%; + } + .coupon-data { margin-bottom: 8px; @@ -743,6 +815,10 @@ margin: 0; width: 362px; + @include mq(tablet, max) { + width: 100%; + } + div { text-align: start; } @@ -793,6 +869,12 @@ max-width: 204.32px; padding: 0 12px; + @include mq(tablet, max) { + width: 86.2%; + box-sizing: border-box; + max-width: none; + } + &::placeholder { color: $color-gray7; font-family: $font-family-secundary; @@ -825,6 +907,14 @@ width: 133px; text-transform: uppercase; + @include mq(tablet, max) { + width: 13.4%; + } + + @include mq(tablet, max) { + margin-left: 0; + } + @include mq(md, max) { width: 138px; } @@ -849,6 +939,10 @@ font-size: 12px; line-height: 14px; color: $color-black-500; + + @include mq(tablet, max) { + font-size: 0; + } } } } @@ -905,6 +999,11 @@ flex-direction: column; width: 352px; + @include mq(tablet, max) { + width: 100%; + padding-bottom: 0 !important; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -936,6 +1035,10 @@ } } + .link-choose-more-products { + margin: 0; + } + .btn-place-order-wrapper { a { background: $color-blue2; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index b8e5e08..6a21522 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -20,7 +20,7 @@ header { } @include mq(tablet, max) { - margin: 0 16px; + /*margin: 0 16px;*/ } } @@ -55,7 +55,13 @@ body { } .container-order-form, .container-cart { + box-sizing: border-box; /*teste*/ width: 80%; + + @include mq(tablet, max) { + width: 100%; + padding: 0 16px; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 5446c03..6767f6c 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,5 +1,9 @@ .footerCheckout { &__prateleira { + @include mq(tablet, max) { + padding: 0 16px; + margin-bottom: 54px; + } h2 { font-family: $font-family-secundary; font-style: normal; @@ -102,6 +106,10 @@ font-size: 13px; line-height: 18px; color: $color-black-500; + + @media (min-width: 1025px) and (max-width: 1110px) { + height: 36px; + } } .product-variation { @@ -124,6 +132,7 @@ letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; + white-space: nowrap; } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 144fd13..8f3d875 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -19,6 +19,13 @@ display: flex; align-items: center; justify-content: space-between; + + @include mq(tablet, max) { + align-items: flex-start; + flex-direction: column; + padding: 16px 8px; + margin: 0; + } } } @@ -33,6 +40,12 @@ text-transform: capitalize; max-width: 40%; + @include mq(tablet, max) { + margin-bottom: 16px; + margin-left: 8px; + order: 1; + } + @include mq(md, max) { margin-bottom: 24px; max-width: 100%; @@ -46,6 +59,10 @@ list-style: none; margin: 0; + @include mq(tablet, max) { + margin-bottom: 16px; + } + li { display: flex; @@ -101,6 +118,12 @@ display: flex; list-style-type: none; + @include mq(tablet, max) { + margin: 0 0 0 8px; + + order: 2; + } + li:last-child { margin-left: 10.73px; figure { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 17b8961..5791233 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,6 +5,10 @@ .container { width: 79.53125% !important; + + @include mq(tablet, max) { + width: 992px !important; + } } &__wrapper { align-items: center;