From 0edadf08ab7d89186557b4016da26350e9f60ce3 Mon Sep 17 00:00:00 2001 From: ueberjames Date: Sun, 18 Dec 2022 18:15:15 -0300 Subject: [PATCH] =?UTF-8?q?stiliza=C3=A7=C3=A3o=20do=20screen=202500px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/js/components/CheckoutUI.js | 23 + .../sass/checkout/_checkout-autenticacao.scss | 115 +++-- .../sass/checkout/_checkout-carrinho.scss | 401 +++++++++++------- .../sass/checkout/_checkout-pagamento.scss | 124 +++++- .../src/arquivos/sass/checkout/_checkout.scss | 4 +- 5 files changed, 476 insertions(+), 191 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index 53e754c..5ac7bfe 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -1,3 +1,4 @@ +/* eslint-disable prettier/prettier */ import { isSmallerThen768 } from "../helpers/MediasMatch"; import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils"; import waitForEl from "../helpers/waitForEl"; @@ -40,6 +41,7 @@ export default class CheckoutUI { init() { this.configThumb(); + this.removerTitulo(); waitForEl(".product-image img", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); } @@ -68,4 +70,25 @@ export default class CheckoutUI { ); }); } + + async removerTitulo(){ + let orderForm = await window.vtexjs.Checkout.getOrderForm(); + let items = orderForm.items.length; + let idCart = document.querySelector("#cart-title"); + + $(window).on("orderFormUpdated.vtex", (evt, of) => { + if(of.items.length <= 0){ + idCart.style.display = "none"; + } + else { + idCart.style.display = "block"; + } + if( window.location.hash === '#/shipping' || window.location.hash === '#/payment' ){ + idCart.style.display = "none"; + } + }); + if(items === 0){ + idCart.style.display = "none"; + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index dac5159..404892e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -144,14 +144,27 @@ + @media (max-width: 375px) { - margin: 28px 16px 17px 16px; + margin: 28px 16px 17px 0px; border: 1px solid #F0F0F0; border-radius: 8px; + width: 87% !important; } + @media (max-width: 1024px) { + width: 96%; + } + + + .accordion-heading { + .accordion-toggle-active{ + i::after{ + content: ""; + } + } span { margin-bottom: 8px; @@ -164,8 +177,22 @@ color: #292929; i::before { - fill: #303030; - display: none; + content: ""; + // fill: #303030; + // display: none; + } + + i::after { + + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") ; + background-repeat: no-repeat; + background-size: 100% 100%; + width: 20px; + height: 20px; + display: block; + content: ""; + float: right; + } } @@ -178,6 +205,8 @@ display: flex; justify-content: center; padding: 6px 5px 6px 8px; + opacity: 0; + cursor: pointer; } } @@ -189,19 +218,22 @@ .client-notice { color: $color-black; + @media (max-width: 1024px) { display: none; } } - .vtex-omnishipping-1-x-SummaryItemContent{ - display: block; + .vtex-omnishipping-1-x-SummaryItemContent { + display: block; + + } + + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + } - } - .vtex-omnishipping-1-x-SummaryItemInfo{ - border: none; - } p { label { font-family: 'Open Sans'; @@ -353,7 +385,7 @@ color: #303030; padding: 12px; -border-radius: 8px; + border-radius: 8px; @include mq(md, max) { @@ -484,46 +516,45 @@ border-radius: 8px; } } - a { - align-items: center; - background: transparent; - background-color: white; - border-radius: 8px; - border: none; - color: white; - display: flex; - justify-content: center; - padding: 0; - margin-top: 10px; + // // a { + // // align-items: center; + // // background: transparent; + // // background-color: white; + // // border-radius: 8px; + // // border: none; + // // color: white; + // // display: flex; + // // justify-content: center; + // // padding: 0; + // // margin-top: 10px; - &::after { - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-size: 20px; - width: 20px; - height: 20px; - content: ""; - } + // // &::after { + // // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + // // background-size: 20px; + // // width: 20px; + // // height: 20px; + // // content: ""; + // // } + + // // img { + // // width: 20px; + // // height: 20px; + // // } + // // } + + // // } + } - img { - width: 20px; - height: 20px; - } - } - // } -} } -.pg-deposito, -.pg-transferencia-bancaria, -.link-payment-discounts-cod { - display: none; -} -.row-fluid{ + + + +.row-fluid { @media (max-width: 1024px) { width: 99%; margin-left: 5px; } } - diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index f846df8..8259a76 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -24,8 +24,8 @@ @media (max-width: 375px) { padding: 7px 16px; - .product-name{ - margin:0 ; + .product-name { + margin: 0; } } @@ -53,6 +53,8 @@ margin-left: 5px; height: 397px !important; margin-top: 17px; + border: 1px solid #E5E5E5; + border-radius: 8px; } h2 { @@ -175,10 +177,27 @@ .product-item { padding: 16px 0; } - .quantity { + span, + .product-name, + .total-selling-price, + .old-product-price, + .new-product-price, + .new-product-price-label, + .best-price, + .quantity-price span, + .product-name a { + @media (min-width: 2500px) { + font-weight: 400 !important; + font-size: 24px !important; + line-height: 28px !important; + + + } } + .quantity {} + th { color: $color-black; padding: 0 0 16px; @@ -188,23 +207,37 @@ line-height: 16px; @include mq(md, max) { + &.quantity-price, &.shipping-date { display: none; } } + @media (max-width: 1024px) { - display: none; + display: none; } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + + + } + } .product-image { height: auto; padding: 0; width: 60px; - @media (max-width: 1024px) {padding: 5px;} + + @media (max-width: 1024px) { + padding: 5px; + } @include mq(sm, max) { @@ -218,8 +251,8 @@ @media (max-width: 1024px) { height: 90px; - max-width: 100%; - width: 60px; + max-width: 100%; + width: 60px; } @@ -340,10 +373,15 @@ @media (max-width: 490px) { margin-left: 74px !important; } + @media (max-width: 1024px) { margin: 0 auto 0 0; } + @media (min-width: 2500px) { + margin-top: 35px; + } + input { background-color: $color-white; border: 1px solid transparent; @@ -392,6 +430,7 @@ } .item-quantity-change { + // margin: 0 11px; // background: #00C8FF; // width: 16px; @@ -432,6 +471,11 @@ @include mq(md, max) { display: none; } + + @media (min-width: 2500px) { + padding-right: 20px; + + } } .item-remove { @@ -472,8 +516,8 @@ padding: 0 0 0 10px; @media (max-width: 1024px) { - padding: 0; - margin: 16px; + padding: 0; + margin: 16px; } @@ -627,7 +671,7 @@ width: 172px; } - & ~ button { + &~button { background-color: $color-finalizar; border: none; border-radius: 5px; @@ -679,6 +723,7 @@ } .srp-result { + strong, .srp-items { color: #303030; @@ -747,6 +792,10 @@ } + @media (min-width: 2500px) { + width: 688px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -795,8 +844,8 @@ cursor: none; @media (max-width: 1024px) { - display: flex; - margin-left: 15px; + display: flex; + margin-left: 15px; } } @@ -830,7 +879,7 @@ @media (max-width: 1024px) { width: 100%; - max-width: 853px; + max-width: 853px; } @@ -903,170 +952,232 @@ padding: 10px; } - } - &.info { - text-align: left; - - @media (max-width: 1024px) { - margin-top: 43px; + @media (min-width: 2500px) { + font-weight: 400 !important; + font-size: 28px !important; + line-height: 33px !important; } } - &.monetary { - text-align: right; + &.info { + text-align: left; + + @media (max-width: 1024px) { + margin-top: 43px; + + } + } + + &.monetary { + text-align: right; + + @media (min-width: 2500px) { + width: 153px; + + } + } + } + } + + tfoot { + + td.info, + td.monetary { + // padding: 0 17px 0 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + font-family: "Open Sans"; + // font-style: normal; + // font-weight: 700; + // font-size: 18px; + color: #292929; } } } + } + } - tfoot { - td.info, - td.monetary { - // padding: 0 17px 0 0; - font-style: normal; - font-weight: 400; + .cart-links-bottom { + display: flex; + flex-direction: column; + width: 343px; + + + @media only screen and (max-width: 1024px) { + width: 97%; + padding-bottom: 0; + margin: 0 15px; + + } + @media only screen and (min-width: 2500px) { + width: 688px; + + } + + + + @include mq(md, max) { + padding: 0 16px; + width: calc(100% - 32px); + float: none; + margin-bottom: 50px; + } + + @include mq(md, min) { + // margin: 0; + // padding-bottom: 50px; + } + + .link-choose-more-products-wrapper { + display: block; + text-align: center; + margin-bottom: 16px; + + @include mq(md, max) { + margin-bottom: 0px; + } + + a { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-blue; + } + } + + .btn-place-order-wrapper { + a { + background: $color-finalizar; + border: none; + border-radius: 5px; + display: block; + font-size: 0; + transition: ease-in 0.22s all; + padding: 12px 19px; + + + + + &:hover { + background-color: darken($color-green, 5); + } + + &:after { + content: "finalizar compra"; + font-family: $font-family; + font-weight: 700; font-size: 14px; + letter-spacing: 0.05em; + color: $color-liPonto; + text-transform: uppercase; + vertical-align: middle; line-height: 19px; - color: $color-black; - font-family: "Open Sans"; - // font-style: normal; - // font-weight: 700; - // font-size: 18px; - color: #292929; + text-shadow: none; + + @media (min-width: 2500px) { + + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } } } - .cart-links-bottom { - display: flex; - flex-direction: column; - width: 343px; - - - @media only screen and (max-width: 1024px) { - width: 97%; - padding-bottom: 0; - margin: 0 15px; - - } - - - @include mq(md, max) { - padding: 0 16px; - width: calc(100% - 32px); - float: none; - margin-bottom: 50px; - } - - @include mq(md, min) { - // margin: 0; - // padding-bottom: 50px; - } - - .link-choose-more-products-wrapper { - display: block; - text-align: center; - margin-bottom: 16px; - - @include mq(md, max) { - margin-bottom: 0px; - } - - a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-blue; - } - } - - .btn-place-order-wrapper { - a { - background: $color-finalizar; - border: none; - border-radius: 5px; - display: block; - font-size: 0; - transition: ease-in 0.22s all; - padding: 12px 19px; - - &:hover { - background-color: darken($color-green, 5); - } - - &:after { - content: "finalizar compra"; - font-family: $font-family; - font-weight: 700; - font-size: 14px; - letter-spacing: 0.05em; - color: $color-liPonto; - text-transform: uppercase; - vertical-align: middle; - line-height: 19px; - text-shadow: none; - } - } - } + .coupon-fieldset { + padding-top: 40px; } -} -.coupon-fieldset{ - padding-top: 40px; -} + .item-remove { -.item-remove{ + display: block; + margin: -20px; + } - display: block; - margin: -20px; -} - -.coupon-data{ - margin-bottom: 20px; -} + .coupon-data { + margin-bottom: 20px; + } - .icon-lock{ - &::before{ + .icon-lock { + &::before { display: none; content: ""; } } -.ship-number, -.ship-complement, -.ship-receiverName { - width: 100%; - margin-bottom: 15px; + .ship-number, + .ship-complement, + .ship-receiverName { + width: 100%; + margin-bottom: 15px; -} + } -.vtex-shipping-preview-0-x-pc .ship-country { - display: none; -} -.description{ + .vtex-shipping-preview-0-x-pc .ship-country { + display: none; + } - span.pull-left{display: none;} -} + .description { -.cart-items tbody td { - vertical-align: middle; - padding: 0px; - margin: -12px; -} + span.pull-left { + display: none; + } + } -.vtex-omnishipping-1-x-svg{ - // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - border: 1px solid #C4C4C4; - border-radius: 3px; -} + .cart-items tbody td { + vertical-align: middle; + padding: 0px; + margin: -12px; + } -.vtex-omnishipping-1-x-leanShippingOptionActive{ - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); -} + .vtex-omnishipping-1-x-svg { + // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + border: 1px solid #C4C4C4; + border-radius: 3px; + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + + + p.client-document { + margin-right: 4px; + } + + .ship-postalCode { + display: contents; + } + + .input-small { + @media (max-width: 1024px) { + width: 97% !important; + max-width: unset; + } + + } + + .vtex-omnishipping-1-x-addressFormPart1 input { + @media (max-width: 1024px) { + width: 97% !important; + max-width: unset !important; + } + } + + .srp-main-title { + @media (min-width: 2500px) { + font-size: 48px !important; + line-height: 65px !important; + } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index a4aee72..f6c59b5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -10,8 +10,8 @@ body .container-main.container-order-form .orderform-template.active { } @media (max-width: 375px) { - margin: 0 16px; - width: 91%; + margin: 0 18px; + width: 95%; border-bottom: 0; } @@ -29,6 +29,87 @@ body .container-main.container-order-form .orderform-template.active { } } + .link-gift-card{ + #show-gift-card-group + { display: none;} + } + + .payment-body{ + .accordion-inner{ + .box-step{ + display: flex; + + .form-step{ + display: flex; + + @media (max-width: 1024px) { + display: block; + + } + + .payment-group{ + + .pg-deposito, + .pg-transferencia-bancaria, + .pg-money, + .pg-promisory---monica, + .pg-desconto-em-folha, + #payment-group-creditControlPaymentGroup, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + #payment-group-PSEPaymentGroup, + #payment-group-SPEIPaymentGroup, + + [data-name= "Bancolombia Transfer"]{ + display: none; + } + + span{ + background-image: none !important; + font-family: $font-family; + color: $color-liPonto; + font-size: 14px; + line-height: 24px; + text-align: center; + padding: 13px; + } + + a{ + background: $color-gray3; + border: 1px solid $color-liPonto; + border-radius: 6px; + margin-bottom: 12px; + padding: 0; + width: 209px; + text-decoration: none; + @media (max-width: 1024px) { + width: 958px; + + } + @media (max-width: 375px) { + width: 309px !important; + margin: 7px; + + } + + } + + .active{ + border: 1px solid #F15A31; + background: rgba(220, 221, 227, 0.3); + margin-left: 5px; + span{ + color:#F15A31 ; + } + } + + + } + + } + } + } + } } .row-fluid { @@ -40,6 +121,45 @@ body .container-main.container-order-form .orderform-template.active { } +.steps-view{ + width: 397px !important; + margin-left: 115px; + margin-top: 34px; + + @media (max-width: 1024px) { + width: 934px !important; + margin: 7px; + + } + + @media (max-width: 375px) { + width: 286px !important; + margin-left: 6px !important; + + } + + + + +} + + +.box-step-content{ + @media (max-width: 1024px) { + margin-left: -10px; + + } +} +.shipping-data +{ + width: 330px; +} +.container-order-form{ +width: 88%;} +.PaymentCardHolderDocument{ + display: none; +} + p.client-first-name, .client-last-name{ @media (max-width: 1024px) { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ad807c3..503d166 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -51,7 +51,7 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 88%; @media (max-width: 375px) { width: 100%; @@ -108,7 +108,7 @@ body { @media (max-width: 1024px) { margin-left: 16px; - + }