diff --git a/checkout/src/arquivos/js/components/CheckoutContent.js b/checkout/src/arquivos/js/components/CheckoutContent.js index c5c9907..21a6c49 100644 --- a/checkout/src/arquivos/js/components/CheckoutContent.js +++ b/checkout/src/arquivos/js/components/CheckoutContent.js @@ -19,6 +19,13 @@ export default class Content { interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.div = await waitElement(".vtex-omnishipping-1-x-address", { + //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar + timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise + interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + }); + this.div.children[0].classList.add("dados-wrapper"); + this.btn = await waitElement(".btn-go-to-payment", { //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 178603e..efe62bf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -3,11 +3,20 @@ padding-bottom: 167px; } + @include mq(sm, max) { + padding-bottom: 250px; + } + .client-pre-email { border-color: $color-gray4; font-family: $font-family; padding-top: 14px; + @include mq(sm, max) { + width: 91.4% !important; + // border: none; + } + label { margin-top: 0; } @@ -17,6 +26,24 @@ a { color: $color-black; font-size: 14px; + line-height: 16px; + font-family: $font-family-secundary; + text-transform: uppercase; + + @include mq(sm, max) { + padding-right: 0 !important; + } + + @include mq(md, max) { + font-size: 10px; + line-height: 12px; + padding-right: 16px; + } + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } &:hover { color: lighen($color-black, 10); @@ -44,6 +71,11 @@ text-transform: uppercase; color: #000000; + @include mq(sm, max) { + font-size: 12px !important; + line-height: 14px !important; + } + @include mq(xl, min) { font-size: 40px; line-height: 47px; @@ -66,6 +98,11 @@ color: #000000; padding: 0; + @include mq(sm, max) { + font-size: 12px !important; + line-height: 14px !important; + } + @include mq(md, max) { font-size: 14px; line-height: 16px; @@ -85,6 +122,10 @@ align-items: center; justify-content: center; + @include mq(sm, max) { + justify-content: normal; + } + @include mq(md, max) { width: 98%; } @@ -107,6 +148,10 @@ width: auto; } + @include mq(sm, max) { + width: 64.3% !important; + } + @include mq(md, max) { width: 100%; } @@ -140,6 +185,11 @@ position: absolute; } + @include mq(sm, max) { + right: 0px; + height: 52px; + } + @include mq(md, max) { width: 12.4%; } @@ -163,6 +213,11 @@ top: 50px; margin-top: 3px; + @include mq(sm, max) { + transform: translateX(100%); + top: 56px; + } + @include mq(xl, min) { font-size: 24px; line-height: 33px; @@ -253,6 +308,10 @@ .shipping-data, .payment-data, .client-profile-data { + @include mq(sm, max) { + padding: 0 16px; + } + .accordion-group { border: 1px solid #f0f0f0; border-radius: 8px; @@ -274,6 +333,10 @@ background-size: 20px 20px; outline: 0; + @include mq(sm, max) { + padding: 0; + } + &::before { content: ""; } @@ -333,6 +396,16 @@ border: 1px solid #e0e0e0; border-radius: 5px; box-shadow: none; + + @include mq(sm, max) { + height: 34px; + } + } + + #client-email { + @include mq(sm, max) { + height: 40px; + } } .help.error { @@ -356,6 +429,10 @@ p.submit { margin-top: 45px; + + @include mq(sm, max) { + margin-bottom: 20px; + } } button.submit { @@ -371,6 +448,10 @@ transition: all 0.2s linear; width: 100%; + @include mq(sm, max) { + margin: 0; + } + &:hover { background: lighten($color-black, 5); } @@ -388,6 +469,21 @@ text-decoration: underline; } + .ship-postalCode { + .input-small { + @include mq(sm, max) { + max-width: 100%; + width: 96.1%; + } + } + + small { + @include mq(sm, max) { + margin-top: 10px !important; + } + } + } + .vtex-omnishipping-1-x-deliveryGroup { p { color: #303030; @@ -495,6 +591,10 @@ color: #00c8ff; font-weight: 500; padding: 0 13px 0 14px; + + @include mq(sm, max) { + padding: 0 15px 0 15px; + } } } @@ -584,6 +684,12 @@ border-radius: 100px; } + .vtex-omnishipping-1-x-deliveryChannelsWrapper { + @include mq(sm, max) { + width: 100%; + } + } + .vtex-omnishipping-1-x-deliveryOptionActive { color: #292929; } @@ -622,9 +728,10 @@ .success { height: 35px; - padding-right: 203px; border: 1px solid #c4c4c4; border-radius: 8px; + width: 96%; + max-width: 100%; } small { @@ -646,6 +753,10 @@ font-size: 14px; line-height: 19px; color: #7d7d7d; + + @include mq(sm, max) { + margin-bottom: 11px; + } } .vtex-omnishipping-1-x-leanShippingGroupList { @@ -685,6 +796,12 @@ } } +.box-client-info-pf { + @include mq(sm, max) { + width: 100%; + } +} + .form-step.box-info { display: flex; flex-direction: column-reverse; @@ -704,6 +821,16 @@ .newsletter { margin-top: -8px; margin-bottom: 0 !important; + + @include mq(sm, max) { + margin: 0; + } + + #opt-in-newsletter { + @include mq(sm, max) { + height: 13px; + } + } } .box-client-info-pj { @@ -879,6 +1006,11 @@ a#payment-group-Bancolombia\ TransferPaymentGroup { div#payments-title { span.accordion-toggle.collapsed.accordion-toggle-active { margin-bottom: 76px; + + @include mq(sm, max) { + margin-bottom: 92px; + } + span { &::after { content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; @@ -903,20 +1035,27 @@ div { } div.cart-template.mini-cart.span4 { - border: 1px solid #e5e5e5; - border-radius: 8px; - max-height: 403px; - .cart-fixed { height: auto !important; h2 { + border: 1px solid #e5e5e5; + border-radius: 8px 8px 0 0; + border-bottom: none; text-align: left; padding: 24px 0 34px 17px; + + @include mq(sm, max) { + margin: 0; + } } div { .cart { border: none; + + border-right: 1px solid #e5e5e5; + border-left: 1px solid #e5e5e5; + border-radius: 0; padding: 0 17px 19px 17px; margin: 0; @@ -934,13 +1073,17 @@ div.cart-template.mini-cart.span4 { } span { - max-width: 115px; + max-width: 116px; white-space: initial; font-family: $font-family-secundary; font-weight: 400; font-size: 12px; line-height: 14px; color: #000000; + + @include mq(sm, max) { + max-width: 120px; + } } img { @@ -964,6 +1107,13 @@ div.cart-template.mini-cart.span4 { } } + .summary { + border: 1px solid #e5e5e5; + border-radius: 0 0 8px 8px; + border-top: none; + width: 99.4%; + } + p#go-to-cart-button { margin: 0; max-height: 16px; @@ -985,13 +1135,8 @@ div.cart-template.mini-cart.span4 { padding-top: 0; } - .accordion-inner { - // border: 2px solid red; - } - .totalizers-list { - border: 1px solid #e5e5e5; - border-radius: 8px; + border: none; tr.Items, tr.Discounts { @@ -1018,9 +1163,8 @@ div.cart-template.mini-cart.span4 { } tfoot { - border: 1px solid #e5e5e5; - border-radius: 8px; - border-bottom: none; + border: none; + border-top: 1px solid #e5e5e5; td.info { padding: 30px 0 22px 17px; @@ -1041,6 +1185,10 @@ div.cart-template.mini-cart.span4 { border-radius: 8px; margin-top: 20px; + @include mq(sm, max) { + margin-top: 0; + } + i { display: none; } @@ -1067,6 +1215,70 @@ p.client-profile-summary { } } +.client-first-name, +.client-last-name { + @include mq(sm, max) { + width: 45.7%; + } +} + +.client-last-name { + @include mq(sm, max) { + position: absolute; + top: 75px; + right: 5px; + } +} + +#client-document, +#client-phone { + @include mq(sm, max) { + width: 90.3%; + } +} + +.client-phone { + @include mq(sm, max) { + position: absolute; + right: -2px; + } +} + +.dados-wrapper { + display: flex; + flex-direction: column; +} + +#ship-number { + @include mq(sm, max) { + width: 99.4%; + height: 25px; + } +} + +#ship-complement { + @include mq(sm, max) { + width: 100%; + } +} + +.summary-totalizers { + @include mq(sm, max) { + padding: 0 !important; + } +} + +#btn-go-to-payment { + @include mq(sm, max) { + margin-bottom: 20px; + } +} + +.link-box-edit { + @include mq(sm, max) { + padding: 0 !important; + } +} //Pagamento label.FormFieldLabel, diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 03ccfa3..dbbbaf6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -19,6 +19,10 @@ padding: 0 16px; margin-bottom: 0; + @include mq(sm, max) { + height: 91px; + } + @include mq(md, max) { margin: 0px 0 48px 0; border-left: none; @@ -114,6 +118,10 @@ .cart-items { .product-item { padding: 16px 0; + + @include mq(sm, max) { + padding: 0 !important; + } } th { @@ -186,7 +194,7 @@ width: 60px; @include mq(sm, max) { - width: 72px; + padding: 4px 0 0 0 !important; } @include mq(xl, min) { @@ -242,9 +250,9 @@ line-height: 14px; transition: ease-in 0.22s all; - @include mq(xl, min) { - font-size: 24px; - line-height: 28px; + @include mq(sm, max) { + top: 6px !important; + left: 53px !important; } @include mq(md, max) { @@ -253,6 +261,11 @@ left: 92px; } + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + &:hover { color: darken($color-blue, 10); text-decoration: none; @@ -290,6 +303,11 @@ padding: 23px 0 0 0; text-align: initial; + @include mq(sm, max) { + right: -4px !important; + top: 28px !important; + } + @include mq(md, max) { padding: 0; position: absolute; @@ -355,6 +373,11 @@ padding: 0; width: max-content; + @include mq(sm, max) { + left: -8px !important; + top: 7px !important; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -490,6 +513,11 @@ color: #c4c4c4; font-size: 15px; + @include mq(sm, max) { + font-size: 13px !important; + top: 2px !important; + } + @include mq(md, max) { font-size: 18px; position: absolute; @@ -522,6 +550,10 @@ margin: 0; width: max-content; + @include mq(sm, max) { + margin-bottom: 0 !important; + } + @include mq(md, max) { margin-bottom: 68px; } @@ -585,6 +617,10 @@ margin: 0; transition: all 0.2s linear; + @include mq(sm, max) { + margin-bottom: 38px; + } + @include mq(xl, min) { font-size: 28px; line-height: 38px; @@ -619,6 +655,10 @@ width: 100%; } + @include mq(sm, max) { + margin-bottom: 66px; + } + @include mq(xl, min) { width: 543px; } @@ -957,6 +997,7 @@ .coupon-fields { margin-bottom: 0; + width: 100%; @include mq(sm, max) { span { @@ -982,12 +1023,10 @@ max-width: 160px; @include mq(sm, max) { - max-width: 100%; - width: 100%; } @include mq(md, max) { - width: 774px; + width: 78.1%; max-width: 774px; } @@ -1017,9 +1056,14 @@ width: 133px; text-transform: uppercase; + @include mq(sm, max) { + margin-left: 5px; + } + @include mq(md, max) { margin-left: 2px; - width: 133px; + width: 13.4%; + min-width: fit-content; } @include mq(xl, min) { @@ -1193,13 +1237,17 @@ margin-top: 48px; margin-bottom: 54px; - @include mq(xl, min) { - margin-bottom: 68px; + @include mq(sm, max) { + margin-top: 10px !important; } @include mq(md, max) { margin-bottom: 41px; } + + @include mq(xl, min) { + margin-bottom: 68px; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..831f5b4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,8 +4,32 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + @include mq(sm, max) { + float: initial; + width: 100%; + display: flex !important; + justify-content: center !important; + border: none; + margin-top: 17px; + } + + .cart-fixed { + @include mq(sm, max) { + width: 91.5%; + } + } + .payment-confirmation-wrap { + @include mq(sm, max) { + border: none; + } + } } .orderform-template-holder { width: 66.1132%; + + @include mq(sm, max) { + width: 100%; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 3ef913b..6b511c3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -49,9 +49,8 @@ width: 28.1%; margin: 0; - @include mq(xl, min) { - width: 29.9%; - padding: 15px 19px; + @include mq(sm, max) { + width: 56% !important; } @include mq(md, max) { @@ -61,6 +60,11 @@ align-items: center; justify-content: center; } + + @include mq(xl, min) { + width: 29.9%; + padding: 15px 19px; + } } .link-choose-products::after { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 8357ab5..ea00207 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -22,6 +22,10 @@ justify-content: space-between; width: auto; + @include mq(sm, max) { + padding-top: 34px !important; + } + @include mq(md, max) { flex-direction: column; align-items: flex-start; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index bbe54e4..2bd2279 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -178,6 +178,7 @@ img { width: 100%; + object-fit: contain; @include mq(xl, min) { width: 382px;