diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1247c4b..77e3b2d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -14,8 +14,14 @@ export default class Footer { this.createShelf(); this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - // await this.shelfUpdate(); - this.addCarrossel(); + if (window.innerWidth > 1024){ + this.addCarrossel(); + } + if (window.innerWidth < 1024){ + this.addCarrosselMobile(); + } + this.prateleiraView(); + } async selectors() { @@ -29,6 +35,7 @@ export default class Footer { timeout: 5000, interval: 1000, }); + this.pratWrapper = await waitElement(".footerCheckout") } onUpdate() { @@ -54,8 +61,17 @@ export default class Footer { infinite: false, }); } + async addCarrosselMobile() { + const elemento = await waitElement(".footerCheckout__shelfList"); + $(elemento).slick({ + slidesToShow: 3, + slidesToScroll: 1, + arrows: true, + infinite: false, + }); + } addIconVtexAndM3() { - if (this.iconsVtexAndM3 && window.innerWidth > 1024) { + if (this.iconsVtexAndM3) { this.iconsVtexAndM3.innerHTML = `
  • @@ -75,7 +91,7 @@ export default class Footer { } addIconsCardAndVtxpci() { - if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) { + if (this.iconesCartoesAndVtexpci) { this.iconesCartoesAndVtexpci.innerHTML = `
  • Img bandeira Mastercard @@ -140,4 +156,64 @@ export default class Footer { return peçaBase; }); } + + async prateleiraView() { + if (this.prateleira) { + const FooterCheck = document.querySelectorAll(".footerCheckout"); + FooterCheck.forEach((f) => { + const prat = f.children[0]; + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (prat) { + prat.classList.add("view"); + } + + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (prat) { + prat.classList.add("view"); + } + + } else if ( + window.location.hash === "#/email" || + window.location.hash === "#/profile" || + window.location.hash === "#/shipping" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + + } else if (window.location.hash == "#/payment") { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } + }); + }); + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 779b8e5..ca21ab2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -4,6 +4,10 @@ font-family: $font-family; padding-top: 8px; + @media screen and (max-width: 1024px) { + padding-top: 11px; + } + .link-cart { a { color: $color-black2; @@ -13,9 +17,14 @@ line-height: 16px; text-transform: uppercase; - // &:hover { - // color: lighen($color-black, 10); - // } + @media screen and (max-width: 1024px) { + margin-right: 16px; + } + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } @@ -29,6 +38,11 @@ margin-bottom: 20px; margin-top: 7px; + @media screen and (max-width: 1024px) { + margin-bottom: 38px; + margin-top: 49px; + } + span { color: $color-black2; font-family: $font-family-secundary; @@ -36,6 +50,16 @@ line-height: 23px; text-transform: uppercase; font-weight: 400; + + @media screen and (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } small { @@ -46,6 +70,16 @@ text-transform: uppercase; font-weight: 400; padding: 0; + + @media screen and (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } } } @@ -56,6 +90,14 @@ width: 57%; justify-content: flex-start; + @media screen and (min-width: 2500px) { + padding: 1px 0; + } + + @media screen and (max-width: 1024px) { + width: 97%; + } + input { box-shadow: none; color: $color-black; @@ -67,6 +109,11 @@ border-radius: 5px 0px 0px 5px; width: 77%; height: 52px; + + @media screen and (max-width: 1024px) { + width: 88%; + } + &::placeholder{ color: $color-black2; font-weight: 400; @@ -74,6 +121,11 @@ line-height: 16px; display: flex; align-items: center; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } @media (max-width: 490px) { @@ -109,6 +161,17 @@ line-height: 19px; letter-spacing: 0.05em; text-transform: uppercase; + color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + + @media screen and (max-width: 1024px) { + padding: 4px 18px; + height: 50px; + } } span.help.error { @@ -119,6 +182,11 @@ font-weight: 700; font-size: 12px; line-height: 16px; + + @media screen and (max-width: 1024px) { + left: 435px; + margin-top: 7px; + } } } @@ -135,6 +203,11 @@ font-size: 12px; line-height: 16px; margin: 0 0 8px 0; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } ul { @@ -148,12 +221,21 @@ font-size: 12px; line-height: 16px; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } i::before { color: $color-blue2; font-size: 1rem; opacity: 1; + + @media screen and (min-width: 2500px) { + font-size: 1.5rem; + } } } } @@ -162,6 +244,10 @@ color: $color-black; font-size: 6rem; opacity: 0.5; + + @media screen and (min-width: 2500px) { + font-size: 9.8rem; + } } } } @@ -192,6 +278,15 @@ font-family: $font-family; padding: 17px 17px 29px 17px; + @media screen and (max-width: 1024px) { + padding: 17px 17px 44px 17px; + margin-bottom: 17px; + .PaymentCardNumber input { + width: 97%; + height: 33px; + } + } + span{ font-size: 12px; line-height: 14px; @@ -376,6 +471,10 @@ color: #303030; padding: 8px 12px; + @media screen and (max-width: 1024px) { + padding: 13px 12px; + } + svg path { fill: #d8c8ac; } @@ -404,7 +503,14 @@ border-radius: 8px; color: #303030; padding: 12px; - padding-top: 2px; + padding-top: 15px; + position: relative; + + span.street, + span.neighborhood{ + padding-left: 31px; + } + &::before{ content: ""; width: 24px; @@ -412,6 +518,9 @@ background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); background-repeat: no-repeat; background-size: 24px; + position: absolute; + left: 11px; + top: 23px; } @include mq(md, max) { @@ -471,11 +580,26 @@ input#ship-complement.input-large, input#ship-receiverName.input-xlarge { width: 95%; + + @media screen and (max-width: 1024px) { + width: 98.5%; + } + } + .payment-group{ + width: 32.7%; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .steps-view{ width: 57%; margin-top: 35px; + @media screen and (max-width: 1024px) { + width: 96.85%; + } + } span.payment-group-item-text{ background-image: none !important; @@ -496,13 +620,20 @@ line-height: 24px; text-align: center; letter-spacing: -0.01em; + margin-left: 0; + width: 76.8%; + + @media screen and (max-width: 1024px) { + margin-left: 0; + width: 94.6%; + } &-text{ padding: 5px 0 5px 0; } } .payment-group-item.active{ - margin-left: 5px; + margin-left: 0px; border-radius: 6px; border-right: 1px solid $color-orange ; border: 1px solid $color-orange; @@ -510,6 +641,13 @@ text-decoration: none; opacity: 1; background: rgba(220, 221, 227, 0.3); + width: 76.8%; + + + @media screen and (max-width: 1024px) { + margin-left: 0; + width: 94.6%; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 54706cf..e7dd5bf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -7,7 +7,7 @@ width: 64%; height: 25px; } -input#creditCardpayment-card-0Number.input.medium{ +input#creditCardpayment-card-0Number.input.medium { width: 64%; height: 25px; } @@ -26,6 +26,24 @@ input#creditCardpayment-card-0Number.input.medium{ border-radius: 5px; padding: 16px 16px 5px 16px; + @media screen and (max-width: 1024px) { + padding: 16px 0; + position: relative; + } + .table.cart-items { + @media screen and (max-width: 1024px) { + thead { + display: none; + } + tbody { + .shipping-date.empty, + .quantity-price { + display: none; + } + } + } + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -41,7 +59,14 @@ input#creditCardpayment-card-0Number.input.medium{ width: 99.5%; border: 1px solid $color-gray5; height: 397px !important; + max-height: 397px !important; border-radius: 8px; + + @media screen and (max-width: 1024px) { + margin: 0; + padding-bottom: 50px; + } + h2 { background: $color-white; border: none; @@ -65,10 +90,19 @@ input#creditCardpayment-card-0Number.input.medium{ .cart { border: none; + @media screen and (max-width: 1024px) { + padding: 34px 16px 16px 16px; + } + ul li { border-top: none; margin-top: 0; padding-top: 0; + .hproduct.item.muted { + span.shipping-date.pull-left { + display: none; + } + } &:not(:first-child) { margin-top: 8px; @@ -117,14 +151,6 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 19px; letter-spacing: 0.05em; text-transform: uppercase; - - // &:hover { - // background: lighten($color-black, 5); - // } - - // &:active { - // background: darken($color-black, 5); - // } } } @@ -136,8 +162,13 @@ input#creditCardpayment-card-0Number.input.medium{ .product-item { padding: 16px 0; - .product-name{ + .product-name { padding-top: 10px; + + @media screen and (max-width: 1024px) { + position: absolute; + padding-top: 5px; + } } } @@ -150,32 +181,47 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 16px; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { display: none; } } - &.shipping-date{ + &.shipping-date { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Frete"; font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } - &.product-price{ + &.product-price { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Unidade"; font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } @@ -185,6 +231,15 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: 60px; + @media screen and (min-width: 2500px) { + width: 146px; + height: 156px; + } + + @media screen and (max-width: 1024px) { + padding: 0 16px; + } + @include mq(sm, max) { width: 72px; } @@ -194,19 +249,28 @@ input#creditCardpayment-card-0Number.input.medium{ max-width: 100%; width: 100%; + @media screen and (min-width: 2500px) { + height: 156px; + } + + @media screen and (min-width: 2500px) { + width: 146px; + // height: 156px; + } + @include mq(sm, max) { height: 72px; width: auto; } } } - .badge{ + .badge { display: none; } - #hproduct-item-2616{ + #hproduct-item-2616 { width: 60px; } - .price{ + .price { padding-top: 15px; } .product-name { @@ -232,11 +296,16 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; transition: ease-in 0.22s all; - &:hover { - color: darken($color-blue, 10); - text-decoration: none; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } + // &:hover { + // color: darken($color-blue, 10); + // text-decoration: none; + // } + @media (max-width: 490px) { margin-left: 23px; } @@ -248,11 +317,25 @@ input#creditCardpayment-card-0Number.input.medium{ } } + td.quantity-price{ + @media screen and (min-width: 2500px) { + width: 188px; + } + } td.shipping-date { color: $color-gray2; font-size: 12px; line-height: 14px; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + @media screen and (max-width: 1024px) { + display: none; + } + @include mq(md, max) { display: none; } @@ -274,6 +357,16 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + @media screen and (max-width: 1024px) { + padding-left: 8px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -284,8 +377,20 @@ input#creditCardpayment-card-0Number.input.medium{ } } } - td.product-price{ + td.product-price { padding: 10px 5px 0 5px; + @media screen and (max-width: 1024px) { + float: right; + padding: 26px 16px 0 0; + height: 37px; + } + } + td.item-remove { + @media screen and (max-width: 1024px) { + position: absolute; + right: 10px; + top: 11px; + } } td.quantity { @@ -301,6 +406,12 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: max-content !important; + @media screen and (max-width: 1024px) { + float: left; + height: 34px; + margin: 28px auto 0; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -318,6 +429,10 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-gray2; box-shadow: none; + @media screen and (max-width: 1024px) { + padding: 0 3px; + } + @include mq(lg, max) { width: 24px !important; } @@ -332,7 +447,7 @@ input#creditCardpayment-card-0Number.input.medium{ // padding: 1px 12px; } } - .item-quantity-change-decrement{ + .item-quantity-change-decrement { width: 16px; height: 16px; margin-left: 11px; @@ -347,7 +462,7 @@ input#creditCardpayment-card-0Number.input.medium{ &:before { content: "-"; font-size: 14px; - background-color: #00C8FF; + background-color: #00c8ff; border-radius: 50%; height: 100%; width: 100%; @@ -393,10 +508,19 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 16px; color: $color-black; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } - &.total-selling-price{ + &.total-selling-price { font-weight: 700; line-height: 19px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } } } @@ -408,13 +532,15 @@ input#creditCardpayment-card-0Number.input.medium{ } .item-remove { - @media (max-width: 490px) { - top: 0; - } .icon::before { color: $color-gray4; font-size: 15px; + @media screen and (max-width: 1024px) { + color: $color-gray8; + font-size: 13px; + } + @include mq(md, max) { font-size: 18px; } @@ -446,6 +572,15 @@ input#creditCardpayment-card-0Number.input.medium{ @include mq(md, max) { padding: 0 16px; } + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + max-width: none; + } + + @media screen and (max-width: 1024px) { + padding: 0 0 0 16px; + } .srp-main-title { margin: 33px 0 12px; @@ -455,6 +590,11 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 33px; color: $color-black2; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-top: 0; } @@ -465,6 +605,16 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 18px; margin: 0 0 10px; + + @media screen and (min-width: 2500px) { + max-width: 34.5rem; + font-size: 28px; + line-height: 36px; + } + + @media screen and (max-width: 1024px) { + max-width: 17.32rem; + } } button.shp-open-options { @@ -482,6 +632,11 @@ input#creditCardpayment-card-0Number.input.medium{ margin-top: 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -496,6 +651,10 @@ input#creditCardpayment-card-0Number.input.medium{ width: 280px; margin-top: 0; + @media screen and (max-width: 1024px) { + width: 343px; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -522,14 +681,6 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 19px; letter-spacing: 0.05em; - - // &:hover { - // background-color: lighten($color-black, 5); - // } - - // &:active { - // background-color: darken($color-black, 5); - // } } } @@ -558,7 +709,7 @@ input#creditCardpayment-card-0Number.input.medium{ .blue { color: $color-black2 !important; } - .gray{ + .gray { color: $color-gray8; } @@ -613,13 +764,10 @@ input#creditCardpayment-card-0Number.input.medium{ width: 100px; text-transform: uppercase; - // &:hover { - // background-color: lighten($color-black, 5); - // } - - // &:active { - // background-color: darken($color-black, 5); - // } + @media screen and (max-width: 1024px) { + right: -36px; + top: 28px; + } } small a { @@ -631,13 +779,13 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-black2; margin-top: 7px; - &::after{ + &::after { content: "Não sei meu código postal"; font-size: 10px; line-height: 12px; font-weight: 400; - :hover{ + :hover { text-decoration: underline; } } @@ -718,6 +866,10 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: 346px; + @media screen and (min-width: 2500px) { + width: 688px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -733,6 +885,11 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; color: $color-black2; text-decoration: none; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -744,15 +901,16 @@ input#creditCardpayment-card-0Number.input.medium{ .coupon-column { .coupon { margin: 0; - } .link-coupon-add { - color: #303030; + font-family: $font-family-secundary; + color: $color-black2; font-size: 12px; + line-height: 14px; text-decoration: underline; } - .coupon-label{ + .coupon-label { margin-bottom: 4px; } .coupon-label label { @@ -765,6 +923,10 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-gray2; cursor: none; text-align: left; + + @media screen and (max-width: 1024px) { + margin: 48px 0 4px 0; + } } .coupon-fields { @@ -795,6 +957,14 @@ input#creditCardpayment-card-0Number.input.medium{ width: 51%; margin-right: 7.4px; + @media screen and (max-width: 1024px) { + padding: 0 0 0 12px; + margin-right: 0; + max-width: none; + width: 84.5%; + float: left; + } + @include mq(sm, max) { max-width: 100%; width: 100%; @@ -821,14 +991,6 @@ input#creditCardpayment-card-0Number.input.medium{ @include mq(md, max) { width: 138px; } - - // &:hover { - // background-color: lighten($color-black, 5); - // } - - // &:active { - // background-color: darken($color-black, 5); - // } } } } @@ -850,6 +1012,15 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 16px; color: $color-black; padding: 12px 0; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + + @media screen and (max-width: 1024px) { + padding: 10px 0; + } } &.info { @@ -859,6 +1030,10 @@ input#creditCardpayment-card-0Number.input.medium{ &.monetary { text-align: right; + + @media screen and (min-width: 2500px) { + width: 188px; + } } } } @@ -871,51 +1046,68 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 19px; color: $color-black; - // padding-top: 30px; float: none; + + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 49px; + } } - td.info{ + td.info { font-weight: 700; font-size: 18px; line-height: 25px; - // padding-left: 17px; font-family: $font-family; + + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 49px; + } + + @media screen and (max-width: 1024px) { + padding: 14px 0; + } } - td.monetary{ + td.monetary { padding-right: 0px; } } } } } - .Items{ + .Items { // border-top: 1px solid; border-bottom: 1px solid; - .info{ - padding: 20px 0 10px 0 ; + .info { + padding: 20px 0 10px 0; padding-left: 0; float: none; } - .monetary{ - padding-right: 0px ; + .monetary { + padding-right: 0px; float: none; } } - .Discounts{ + .Discounts { border-bottom: 1px solid; - .info{ - padding: 20px 0 10px 0 ; + .info { + padding: 20px 0 10px 0; padding-left: 0; float: none; } - .monetary{ - padding-right: 0px ; + .monetary { + padding-right: 0px; float: none; } } - .coupon-data{ + .coupon-data { display: block !important; margin-top: 33px; + + @media screen and (max-width: 1024px) { + margin-top: 48.35px; + margin-bottom: 10px; + } } .cart-links-bottom { @@ -940,6 +1132,11 @@ input#creditCardpayment-card-0Number.input.medium{ text-align: center; margin-bottom: 14px; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @include mq(md, max) { margin-bottom: 0px; } @@ -952,6 +1149,16 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; color: $color-black2; text-decoration: none; + + &#cart-choose-more-products.more.link-choose-more-products { + margin-right: 0; + + @media screen and (min-width: 2500px) { + height: 156px; + font-size: 24px; + line-height: 28px; + } + } } } @@ -965,10 +1172,6 @@ input#creditCardpayment-card-0Number.input.medium{ transition: ease-in 0.22s all; padding: 12px 19px; - // &:hover { - // background-color: darken($color-green, 5); - // } - &:after { content: "finalizar compra"; font-family: $font-family; @@ -980,6 +1183,11 @@ input#creditCardpayment-card-0Number.input.medium{ vertical-align: middle; line-height: 19px; text-shadow: none; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 64ababb..ae343e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,12 +4,22 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin-bottom: 70px; + } + .payment-submit-wrap{ margin-top: 15px; } } .orderform-template-holder { width: 66.1132%; + @media screen and (max-width: 1024px) { + width: 100%; + } } - + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 1a32b2b..80eb4a8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -17,6 +17,9 @@ margin: 170px 0 32px 0; font-size: 0px; line-height: 0px; + @media screen and (max-width: 1024px) { + margin: 170px 0 22px 0; + } &::after{ content: "SEU CARRINHO ESTÁ VAZIO"; @@ -25,6 +28,16 @@ font-size: 24px; line-height: 33px; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + + @media screen and (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } } } @@ -47,9 +60,10 @@ width: 31.74%; padding: 15px 0; - &:hover { - background: lighten($color-white, 5); - } + @media screen and (max-width: 1024px) { + width: 30.31%; + } + &::before{ content: "Continuar comprando"; font-family: $font-family-secundary; @@ -60,6 +74,11 @@ text-align: center; color: $color-black2; text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 3b46e0d..6e4d7b1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,10 +12,17 @@ footer .footerCheckout__wrapper { width: 100%; margin: auto auto 0 auto; border-top: 1px solid $color-black2; - .container{ + + .container { display: flex; align-items: center; width: 94.9734%; + @media screen and (max-width: 1024px) { + flex-direction: column; + align-items: baseline; + width: 97%; + gap: 16px; + } } } footer .footerCheckout__prateleira, @@ -23,14 +30,20 @@ header { width: 100%; margin: 0 auto; } -header{ +header { border-bottom: 1px solid $color-black2; padding: 29px 0; + @media screen and (max-width: 1024px) { + padding: 16px 0; + } } -.headerCheckout__safeBuy{ +.headerCheckout__safeBuy { display: flex; gap: 8px; height: 15px; + @media screen and (min-width: 2500px) { + height: 33px; + } } body { @@ -38,73 +51,103 @@ body { flex-direction: column; min-height: 100% !important; padding-top: 0 !important; + position: relative; - .PaymentCardNumber input { + .SecurityEnvironmentIcon { + @media screen and (max-width: 1024px) { + display: none; + } + } + .view { + display: block !important; + } + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: $color-gray12 !important; + } + + #creditCardpayment-card-0Number { width: 64%; height: 25px; + @media screen and (max-width: 1024px) { + width: 97%; + height: 33px; + } } - p.PaymentCardHolderDocument.input.text.required.mask{ + div.row-fluid.orderform-template.span12.active{ + min-height: 580px; + } + p.PaymentCardHolderDocument.input.text.required.mask { display: none; } - .PaymentInstallments select{ + .PaymentInstallments select { width: 68%; } - input#creditCardpayment-card-0Name.input-medium{ + input#creditCardpayment-card-0Name.input-medium { width: 34%; height: 25px; } - .input#creditCardpayment-card-0Code.input-mini{ + .input#creditCardpayment-card-0Code.input-mini { width: 16%; height: 25px; } - #ship-postalCode{ + #ship-postalCode { border: 1px solid $color-gray8; border-radius: 8px; + + @media screen and (max-width: 1024px) { + width: 100%; + } } - #find-pickups-manualy-button-denied{ + #find-pickups-manualy-button-denied { color: $color-black2; outline: none; - &:hover{ + &:hover { background: $color-white; color: $color-black2; } - &:active{ + &:active { background: $color-white; color: $color-black2; } } - #payment-data-submit{ - i.icon-lock{ + #payment-data-submit { + i.icon-lock { display: none; } } - tbody.totalizers-list{ - tr.srp-summary-result.hide{ + p.input.ship-postalCode.required.text { + @media screen and (max-width: 1024px) { + width: 75%; + } + } + + tbody.totalizers-list { + tr.srp-summary-result.hide { display: none; } } - div.cart-fixed.cart-fixed-transition.affix-top{ - .Items{ + div.cart-fixed.cart-fixed-transition.affix-top { + .Items { border-top: 1px solid $color-gray10; border-bottom: 1px solid $color-gray10; - .info{ + .info { padding: 26px 0 !important; padding-left: 17px !important; float: none; } - .monetary{ + .monetary { padding-right: 17px !important; float: none; } } - .Discounts{ + .Discounts { border-bottom: 1px solid $color-gray10; - .info{ + .info { padding: 26px 0 !important; padding-left: 17px !important; float: none; } - .monetary{ + .monetary { padding-right: 17px !important; float: none; } @@ -115,33 +158,33 @@ body { padding-top: 30px; padding-bottom: 0px; } - td.info{ + td.info { padding-left: 17px; } - td.monetary{ + td.monetary { padding-right: 17px; } } - div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right { margin-bottom: 0; } - button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ - margin-top: 47px; - } + } + button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block { + margin-top: 47px; } div.step.accordion-group.client-profile-data { - .client-profile-email{ + .client-profile-email { margin-bottom: 6px; } - .client-profile-summary{ - span{ + .client-profile-summary { + span { margin-bottom: 6px; } } - span{ + span { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Identificação"; font-family: $font-family-secundary; font-style: normal; @@ -155,14 +198,14 @@ body { span.email, span.name, span.tel, - span.newsletter-text{ - &::after{ + span.newsletter-text { + &::after { display: none; } } span.email, span.name, - span.tel{ + span.tel { font-family: $font-family; font-style: normal; font-weight: 400; @@ -170,7 +213,7 @@ body { line-height: 16px; color: $color-gray2; } - span.newsletter-text{ + span.newsletter-text { font-family: $font-family; font-style: normal; font-weight: 400; @@ -179,27 +222,17 @@ body { color: $color-gray9; } } - // form.form-page.client-pre-email.anim-death.anim-current{ - // span{ - // div#client-profile-data.span6.client-profile-data span{ - // font-size: 20px; - // line-height: 23px; - // } - // &::after{ - // display: none; - // } - // } - // } a#payment-group-creditCardPaymentGroup.payment-group-item, a#payment-group-bankInvoicePaymentGroup.payment-group-item { display: block; - } - .payment-group-list-btn{ + .payment-group-list-btn { width: 105%; + @media screen and (max-width: 1024px) { + width: 100%; + } } - @include mq(md, max) { padding-left: 0; } @@ -226,10 +259,180 @@ body { .container-order-form, .container-cart { width: 80%; + @media screen and (max-width: 1024px) { + width: 100%; + } + } + .row-fluid .full-cart.active, + .row-fluid .orderform-template.active { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + .row-fluid { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + #client-profile-data { + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + + span.help.error { + font-size: 12px; + line-height: 14px; + &::after { + display: none; + } + } + } + p.client-email.input.text.required { + @media screen and (max-width: 1024px) { + width: 100%; + } + + #client-email { + @media screen and (max-width: 1024px) { + width: 98.5%; + } + } + } + p.client-first-name.input.pull-left.text.required { + @media screen and (max-width: 1024px) { + width: 50%; + margin-right: 0.5%; + } + #client-first-name { + @media screen and (max-width: 1024px) { + width: 95.7%; + } + } + } + p.client-last-name.input.pull-left.text.required { + @media screen and (max-width: 1024px) { + width: 49.5%; + } + #client-last-name { + @media screen and (max-width: 1024px) { + width: 96.9%; + } + } + } + p.client-document.input.pull-left.text.required.mask { + @media screen and (max-width: 1024px) { + width: 50%; + margin-right: 0.5%; + margin-bottom: 0; + } + #client-document { + @media screen and (max-width: 1024px) { + width: 95.7%; + } + } + } + p.client-phone.input.pull-left.text.required.mask { + @media screen and (max-width: 1024px) { + width: 49.5%; + margin-bottom: 0; + } + #client-phone { + @media screen and (max-width: 1024px) { + width: 96.9%; + } + } + } + p.newsletter { + @media screen and (max-width: 1024px) { + margin-top: 0; + } + } + } + #shipping-data { + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin: 0; + } + div.accordion-inner.shipping-container { + div.box-step { + #postalCode-finished-loading { + @media screen and (max-width: 1024px) { + width: 33%; + } + } + p.input.ship-postalCode.required.text { + @media screen and (max-width: 1024px) { + width: 100%; + } + #ship-postalCode { + @media screen and (max-width: 1024px) { + max-width: 98.5%; + } + } + } + div.vtex-omnishipping-1-x-address { + @media screen and (max-width: 1024px) { + margin-bottom: 0; + } + p.input.ship-number.required.text { + @media screen and (max-width: 1024px) { + margin-right: 0; + } + } + } + } + } + } + #payment-data { + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin: 0; + } + div.step.accordion-group.store-country-BRA.active { + @media screen and (max-width: 1024px) { + width: 96.4%; + } + } + } + } + } + .container-cart { + @media screen and (max-width: 1024px) { + width: 100%; + } } } -.row-fluid .full-cart.active{ +.row-fluid .full-cart.active { margin-bottom: 0; + + .row-fluid.summary { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + .span5.totalizers.summary-totalizers.cart-totalizers.pull-right { + @media screen and (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 16px; + } + } + } + .clearfix.pull-right.cart-links.cart-links-bottom.hide { + width: 97%; + padding: 0 16px; + + @media screen and (min-width: 2500px) { + width: 34.4%; + padding: 0; + } + + @media screen and (max-width: 1024px) { + margin-bottom: 25px; + } + } } .btn-success { @@ -251,12 +454,17 @@ body { margin: 17px 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-left: 30px; } } -#cart-title{ - display: block !important; +#cart-title { + // display: block !important; font-weight: 700; font-size: 24px; line-height: 33px; @@ -265,8 +473,16 @@ body { margin: 16px 0; letter-spacing: 0.05em; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } +} +#orderform-title { + @media screen and (max-width: 1024px) { + margin: 16px 0 16px 16px; + } } - .dropdown { &__content { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 3a13fe0..5b06b97 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -20,6 +20,11 @@ text-transform: capitalize; width: 33.33%; + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 27px; + } + &::after{ content: "."; } @@ -51,6 +56,10 @@ width: 10.8%; margin-right: 0px } + @media screen and (max-width: 1024px) { + width: 11.8%; + margin-right: 1.6%; + } } .footer-imgs-vtexpci{ width: 84.4%; @@ -73,6 +82,11 @@ width: 33.33%; justify-content: flex-end; + @media screen and (max-width: 1024px) { + justify-content: normal; + + } + .Link1{ justify-content: end; @@ -103,6 +117,11 @@ line-height: 12px; text-decoration: none; + @media screen and (min-width: 2500px) { + font-size: 18px; + line-height: 25px; + } + span { margin-right: 8px; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 76bdaa9..f58c6ba 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -3,6 +3,9 @@ .container { width: 79.53125%; margin: 0 auto; + @media screen and (max-width: 1024px) { + width: 97%; + } } &__wrapper { align-items: center; @@ -16,9 +19,12 @@ padding: 0; grid-template-columns: 2fr 1fr 2fr; width: 439px; - /* border: 1px solid rgb(59, 51, 51); */ margin: 0; + @media screen and (min-width: 2500px) { + width: 1078px; + } + .li-volta-borda-1, .li-volta-borda-2, .li-volta-centro { @@ -34,6 +40,11 @@ margin-bottom: 9px; font-family: $font-family-secundary; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } .p-bola1, .p-bola2, @@ -43,6 +54,11 @@ width: 10px; height: 10px; background-color: $color-white; + + @media screen and (min-width: 2500px) { + width: 22px; + height: 22px; + } } .div-itens{ display: flex; @@ -75,6 +91,12 @@ margin: 0; width: 97%; transform: translateY(-7px); + + @media screen and (min-width: 2500px) { + transform: translateY(-12px); + left: 21.6%; + width: 100.5%; + } } .p-borda-2{ border-top: 1.5px solid black; @@ -84,6 +106,12 @@ margin: 0; width: 100.8%; transform: translateY(-7px); + + @media screen and (min-width: 2500px) { + transform: translateY(-12px); + right: 17.8%; + width: 104.2%; + } } .active{ background: $color-black2; @@ -96,6 +124,11 @@ img { height: 37.14px; width: auto; + + @media screen and (min-width: 2500px) { + min-width: 382px; + height: 91.2px; + } } } @@ -110,6 +143,11 @@ font-size: 12px; line-height: 14px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } i { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 0e2c226..bee6bfe 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -6,6 +6,13 @@ .footerCheckout__prateleira{ width: 79.38%; margin-bottom: 54px; + display: none; + margin: 0 9.7% 54px auto; + + @media screen and (max-width: 1024px) { + width: 96.5%; + margin: 0 1% 54px auto; + } } .footerCheckout__shelfList{ margin: 0; @@ -29,6 +36,11 @@ line-height: 38px; text-align: center; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 76px; + } } .footerCheckout__shelfList-name{ font-family: $font-family; @@ -40,6 +52,10 @@ color: $color-black2; margin: 20px 0; width: 95%; + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } .footerCheckout__shelfList-skus-wrapper{ .footerCheckout__shelfList-skus{ @@ -58,6 +74,11 @@ font-weight: 700; font-size: 13px; line-height: 18px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } display: flex; text-align: center; @@ -89,6 +110,11 @@ font-weight: 700; font-size: 13px; line-height: 18px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 78a25f6..784f5a1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -26,6 +26,7 @@ $color-gray8: #C4C4C4; $color-gray9: #808080; $color-gray10: #E0E0E0; $color-gray11: #828282; +$color-gray12: #F2F2F2; $color-blue: #4267b2; $color-blue2: #00C8FF;