diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7a3d0c7..b88ee57 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -137,7 +137,7 @@ export default class Footer { slidesToScroll: 1, responsive: [ { - breakpoint: 1024, + breakpoint: 1025, settings: { slidesToShow: 3, slidesToScroll: 1, diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 14b62ba..763e388 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,4 +3,5 @@ @import "./partials/header"; @import "./partials/footer"; @import "./partials/prateleira"; +@import "./partials/tablet"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 4dc93a2..a8013f1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -3,10 +3,6 @@ padding-bottom: 167px; } - @include mq(sm, max) { - padding-bottom: 250px; - } - .client-pre-email { border-color: $color-gray4; font-family: $font-family; @@ -960,7 +956,7 @@ .accordion-inner { @include mq(sm, max) { - padding: 0 16px !important; + padding: 0; } } @@ -1587,10 +1583,6 @@ p.client-profile-summary { } .summary-totalizers { - @include mq(sm, max) { - padding: 0 !important; - } - @include mq(xl, min) { padding-top: 17px !important; } @@ -1650,9 +1642,20 @@ p.client-profile-summary { font-size: 20px; } } + +#ship-number { + width: 99.5%; +} + +#ship-complement { + width: 96%; +} + +#ship-receiverName { + width: 96%; +} //Pagamento -label.FormFieldLabel, -#holder-document-0 { - display: none; +.card-flags { + display: block; } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 54e4f27..32e6aff 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,11 +1,38 @@ /* _prateleira.scss */ .footerCheckout__prateleira { padding: 0 132px; + display: flex; + flex-direction: column; + gap: 20px; + + &::before { + content: "VocĂȘ tambem pode gostar:"; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 24px; + line-height: 38px; + align-self: center; + color: #000000; + + @include mq(sm, max) { + font-size: 14px; + line-height: 28px; + } + + @include mq(xl, min) { + font-size: 48px; + line-height: 76px; + } + } @include mq(sm, max) { padding: 0 16px; } + @include mq(md, max) { + padding: 0 16px; + } + @include mq(xl, min) { padding: 0 250px; } @@ -34,6 +61,10 @@ @include mq(sm, max) { left: 15px; } + + @include mq(md, max) { + left: 26px; + } } .slick-next { @@ -55,6 +86,10 @@ @include mq(sm, max) { right: 16px; } + + @include mq(md, max) { + right: 36px; + } } .prateleira { @@ -65,6 +100,10 @@ @include mq(xl, min) { width: 97% !important; } + + @include mq(md, max) { + width: 96.7% !important; + } } &__product-name { diff --git a/checkout/src/arquivos/sass/partials/_tablet.scss b/checkout/src/arquivos/sass/partials/_tablet.scss new file mode 100644 index 0000000..c4fac49 --- /dev/null +++ b/checkout/src/arquivos/sass/partials/_tablet.scss @@ -0,0 +1,166 @@ +@media screen and (min-width: 376px) and (max-width: 1024px) { + .checkout-container { + padding-bottom: 109px; + } + + .orderform-template-holder { + width: 100% !important; + } + + .form-page { + margin: -16px; + } + + .row-fluid { + display: flex; + flex-direction: column; + width: 100%; + + .summary { + width: 99.8% !important; + } + } + + #client-profile-data { + width: 100%; + padding: 0 16px; + } + + #client-email { + width: 98.8%; + height: 32px; + } + + .client-first-name, + .client-last-name, + .client-document, + .client-phone { + width: 50%; + margin-right: 0 !important; + } + + #client-first-name, + #client-document { + width: 95.7%; + height: 34px; + } + + #client-last-name, + #client-phone { + width: 97%; + height: 34px; + } + + .newsletter-label { + margin-top: -23px; + } + + .box-step { + width: 100.2%; + } + + #shipping-data { + width: 93.4%; + margin-left: 16px; + } + + .shipping-data { + width: 100%; + .active { + width: 100%; + padding: 24px 17px 44px !important; + } + } + + #postalCode-finished-loading { + width: 32.31%; + } + + #ship-postalCode { + width: 98.51%; + max-width: 100%; + height: 35px; + } + + small { + padding-top: 10px; + } + + #delivery-packages-options { + width: 100%; + } + + #force-shipping-fields { + float: right; + } + + #ship-number { + width: 99.6%; + height: 25px; + } + + #ship-complement, + #ship-receiverName { + width: 98.51% !important; + height: 25px; + } + + .postalCode { + left: 149px !important; + } + + #payment-data { + width: 93.4%; + margin-left: 16px; + } + + .store-country-BRA { + width: 100%; + margin-bottom: 17px !important; + } + + .payment-group-list-btn { + width: 97.4%; + } + + .steps-view { + width: 96.85% !important; + } + + .SecurityEnvironmentIcon { + display: none; + } + + #creditCardpayment-card-0Number { + width: 98%; + } + + .card-flags { + display: flex !important; + justify-content: center !important; + } + + #creditCardpayment-card-0Brand { + width: 90%; + } + + #go-to-cart-button { + width: 99.8%; + border: 1px solid #e5e5e5; + border-top: none; + border-bottom: none; + + a { + float: right; + } + } + + .mini-cart { + width: 100% !important; + padding: 0 16px !important; + } + + #payment-data-submit { + margin-top: 5px !important; + } +}