From c942b3f5a6812e68019c65c7572d954398bb3b41 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 20 Dec 2022 07:33:13 -0300 Subject: [PATCH 1/5] feat: adiciona css checkout com produto 1024px --- .../sass/checkout/_checkout-autenticacao.scss | 75 +++++++++---- .../sass/checkout/_checkout-carrinho.scss | 106 +++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 8 ++ checkout/src/arquivos/sass/lib/_slick.scss | 18 +++ .../src/arquivos/sass/partials/_footer.scss | 13 ++- .../src/arquivos/sass/partials/_header.scss | 5 + 6 files changed, 197 insertions(+), 28 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 37af741..08ea459 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -214,12 +214,12 @@ p { label { color: $color-gray9; - font-weight: 500; font-family: "Open Sans"; font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; #opt-in-newsletter { width: 18px; @@ -262,9 +262,8 @@ button.submit { border: none; - border-radius: 5px; + border-radius: 8px; background: $color-blue; - margin-top: 8px; outline: none; transition: all 0.2s linear; width: 100%; @@ -306,6 +305,15 @@ font-weight: 500; } + .vtex-omnishipping-1-x-shippingSectionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + } + .shp-lean { border: 1px solid $color-gray11; border-radius: 0; @@ -325,9 +333,13 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray9; } .shp-summary-group-info { @@ -341,13 +353,13 @@ color: #303030; padding: 12px; - &:first-child::before { - content: ""; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - background-size: 21px 20px; - width: 21px; - height: 20px; - } + // &:first-child::before { + // content: ""; + // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + // background-size: 21px 20px; + // width: 21px; + // height: 20px; + // } @include mq(md, max) { background-position: 8px 9px; @@ -358,10 +370,6 @@ font-weight: 500; text-decoration: underline; } - - .ship-street { - display: none !important; - } } .shp-summary-group-price, @@ -424,6 +432,33 @@ max-width: 280px; } } + + .vtex-omnishipping-1-x-address { + .ship-street, + .ship-neighborhood, + .ship-city, + .ship-state { + display: none; + } + + .ship-number { + input { + width: 155%; + height: 25px; + border-radius: 8px; + margin-bottom: 20px; + } + } + + .ship-receiverName { + input { + width: 95%; + border-radius: 8px; + height: 25px; + margin: 0; + } + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2114b41..9a9f90a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,12 +17,16 @@ display: none; } .cart { - // border: 1px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px 16px; margin-bottom: 0 !important; + @media (max-width: 1024px) { + padding: 7px 16px; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -150,6 +154,11 @@ } .cart-items { + @media (max-width: 1024px) { + thead { + display: none; + } + } .shipping-date { font-size: 0; @@ -164,6 +173,10 @@ .product-item { padding: 16px 0; + @media (max-width: 1024px) { + position: relative; + } + .shipping-estimate-date { color: $color-gray6; @@ -218,6 +231,11 @@ padding-right: 0; white-space: normal; + @media (max-width: 1024px) { + position: absolute; + top: 0; + } + @include mq(lg, max) { width: 250px; } @@ -231,6 +249,10 @@ transition: ease-in 0.22s all; margin-left: 11px; + @media (max-width: 1024px) { + margin-left: 16px; + } + &:hover { color: darken($color-blue, 10); text-decoration: none; @@ -263,6 +285,10 @@ width: 7%; } + @media (max-width: 1024px) { + display: none; + } + &::before { content: ""; } @@ -285,6 +311,13 @@ .product-price { font-size: 0; + @media (max-width: 1024px) { + min-width: 130px; + position: absolute; + left: 87.5%; + top: 25%; + } + &::before { content: "Unidade"; font-size: 14px; @@ -293,9 +326,9 @@ margin-left: 35px; } min-width: 100px; - @include mq(md, max) { - min-width: 78px; - } + // @include mq(md, max) { + // min-width: 78px; + // } @media (max-width: 490px) { position: absolute; bottom: 0; @@ -310,6 +343,11 @@ position: absolute; margin: 8px 0 0 35px; left: 2.5%; + + @media (max-width: 1024px) { + margin: 8px 0 0 47px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -339,6 +377,10 @@ width: 64.91% !important; position: relative; + @media (max-width: 1024px) { + margin: 28px 0 0 16px; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -404,6 +446,10 @@ .quantity-price { text-align: left; + @media (max-width: 1024px) { + display: none; + } + .icon-question-sign { display: none; } @@ -466,6 +512,11 @@ color: $color-gray8; font-size: 15px; + @media (max-width: 1024px) { + position: absolute; + top: 0; + } + @include mq(md, max) { font-size: 18px; } @@ -492,7 +543,7 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; + padding: 0 0 0 16px; @include mq(md, max) { padding: 0 16px; @@ -544,6 +595,10 @@ .srp-data { width: 280px; + @media (max-width: 1024px) { + margin-bottom: 48px; + } + .ship-country { display: none; } @@ -570,6 +625,10 @@ line-height: 16px; letter-spacing: 0.05em; + @media (max-width: 1024px) { + width: 122.5%; + } + &:hover { background-color: lighten($color-black, 5); } @@ -583,6 +642,10 @@ .srp-toggle { margin: 0 0 20px; + @media (max-width: 1024px) { + width: 122.5%; + } + &__wrapper { background-color: $color-white; border-radius: 100px; @@ -634,6 +697,10 @@ height: 36px; padding: 12px 8px; width: 132.31%; + + @media (max-width: 1024px) { + width: 165.39%; + } } & ~ button { @@ -653,6 +720,11 @@ width: 76.93%; text-transform: uppercase; + @media (max-width: 1024px) { + width: 92.31%; + right: -213px; + } + // &:hover { // background-color: lighten($color-black, 5); // } @@ -753,6 +825,11 @@ margin-top: 49px; width: 353px; + @media (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 16px; + } .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -825,6 +902,10 @@ padding: 0 12px; width: 50.52%; + @media (max-width: 1024px) { + width: 83.1%; + } + @include mq(sm, max) { max-width: 100%; width: 100%; @@ -843,6 +924,11 @@ width: 37.824%; margin-left: 12px; + @media (max-width: 1024px) { + width: 13.46%; + margin-left: 5px; + } + @include mq(md, max) { width: 138px; } @@ -899,6 +985,11 @@ } } } + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } } .cart-links-bottom { @@ -906,6 +997,11 @@ flex-direction: column; width: 354px; + @media (max-width: 1024px) { + width: 97%; + padding: 0 16px; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f2920f1..20c3763 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,6 +16,10 @@ footer .footerCheckout__prateleira, header { width: 79.53125%; margin: 0 auto; + + @media (max-width: 1024px) { + width: 100%; + } } body { @@ -51,6 +55,10 @@ body { .container-order-form, .container-cart { width: 80%; + + @media (max-width: 1024px) { + width: 100%; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 7dcf708..a1ffcd7 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -78,6 +78,16 @@ margin: 0 2px 0 8px; } + @media (max-width: 1024px) { + &:first-child { + margin: 0 8px 0 16px; + } + + &:last-child { + margin: 0 16px 0 8px; + } + } + [dir="rtl"] & { float: right; } @@ -119,6 +129,10 @@ width: 14px; height: 30px; color: $color-gray6; + + @media (max-width: 1024px) { + left: 2.5%; + } } .slick-next { // z-index: 4; @@ -130,6 +144,10 @@ width: 14px; height: 30px; color: $color-gray6; + + @media (max-width: 1024px) { + left: 96.5%; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 4d6ef7f..88fdf04 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -150,8 +150,8 @@ height: 65px; @media (max-width: 1024px) { - flex-direction: column; - align-items: flex-start; + display: grid; + padding-top: 16px; } &::before, @@ -169,10 +169,11 @@ font-size: 10px; line-height: 14px; text-transform: capitalize; - max-width: 40%; + max-width: auto; @media (max-width: 1024px) { margin: 15px 0; + order: 2; } @include mq(md, max) { @@ -189,6 +190,11 @@ width: 33.224%; max-width: 404px; + @media (max-width: 1024px) { + width: auto; + order: 1; + } + span { display: flex; justify-content: space-between; @@ -228,6 +234,7 @@ @media (max-width: 1024px) { margin-top: 10px !important; + order: 3; } li:first-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a147cd9..620728d 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,6 +5,11 @@ width: 100%; height: 95px; border-bottom: 1px solid $color-black; + + @media (max-width: 1024px) { + height: 70px; + } + .container { display: flex; justify-content: center; From f1a48010f73502520a7500d2236478ababb3c694 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 20 Dec 2022 08:11:01 -0300 Subject: [PATCH 2/5] feat: adiciona css checkout email 1024px --- .../sass/checkout/_checkout-autenticacao.scss | 39 ++++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 4 ++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 08ea459..4485c48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -19,6 +19,13 @@ line-height: 16px; text-transform: uppercase; + @media (max-width: 1024px) { + font-size: 10px; + line-height: 12px; + font-weight: 400; + margin-right: 16px; + } + &:hover { color: lighen($color-black, 10); } @@ -34,6 +41,10 @@ h3 { margin-bottom: 16px; + @media (max-width: 1024px) { + margin: 38px 0; + } + span { color: $color-black; font-family: "Tenor Sans"; @@ -41,6 +52,11 @@ font-size: 20px; line-height: 23px; text-transform: uppercase; + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } small { @@ -50,6 +66,11 @@ font-size: 20px; line-height: 23px; text-transform: uppercase; + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } } } @@ -58,6 +79,10 @@ margin: 0 0 16px; width: 54.883%; + @media (max-width: 1024px) { + width: 97% !important; + } + input { position: relative; height: 50px; @@ -99,6 +124,10 @@ top: -1.5%; width: 22.555%; + @media (max-width: 1024px) { + width: 12.762%; + } + @media (max-width: 490px) { height: 48px; margin: 0; @@ -127,6 +156,10 @@ padding: 16px; } + @media (max-width: 1024px) { + width: 30.177%; + } + h3 { color: $color-black; margin: 0 0 8px 0; @@ -151,10 +184,14 @@ } } - i::before { + .icon-lock::before { color: $color-black; font-size: 6rem; opacity: 0.5; + + @media (max-width: 1024px) { + display: none; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 20c3763..78fe3ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -87,6 +87,10 @@ body { letter-spacing: 0.05em; text-transform: uppercase; + @media (max-width: 1024px) { + margin: 20px 0 20px 16px; + } + @include mq(md, max) { margin-left: 30px; } From 1853b3d2e302561dc00a649c82db598e927f82a3 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 21 Dec 2022 08:31:44 -0300 Subject: [PATCH 3/5] feat: adiciona css checkout dados pessoais 1024px --- checkout/src/arquivos/js/components/Footer.js | 21 +-- .../sass/checkout/_checkout-autenticacao.scss | 22 +++- .../sass/checkout/_checkout-carrinho.scss | 22 ++-- .../sass/checkout/_checkout-pagamento.scss | 124 +++++++++++++++++- checkout/src/arquivos/sass/lib/_slick.scss | 2 + .../src/arquivos/sass/partials/_footer.scss | 8 ++ 6 files changed, 175 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 77b6c85..4e860da 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,17 +8,17 @@ export default class Footer { async init() { this.list = await this.fetchApiData(); await this.selectors(); + this.events(); this.cartTitle = await waitElement("#cart-title"); if (window.location.hash === "#/cart") { await this.cartUpdate(); } this.emptyButton = await waitElement(".link-choose-products"); - this.paymentsMethods = await waitElement(".footerCheckout__payments"); - this.certification = await waitElement(".footerCheckout__vtexpci"); this.emptyCartButton(); + this.paymentsMethods = await waitElement(".footerCheckout__payments"); this.addPaymentsMethodsIcons(); + this.certification = await waitElement(".footerCheckout__vtexpci"); this.addCertificationIcon(); - this.events(); this.items = await waitElement(".footerCheckout__prateleira-container"); await this.renderItems(); await this.addCarrossel(); @@ -39,7 +39,6 @@ export default class Footer { events() { window.addEventListener("hashchange", this.outPrateleira.bind(this)); - window.addEventListener("resize", this.onRisize.bind(this)); } async cartUpdate() { @@ -176,12 +175,6 @@ export default class Footer { `; } - async onRisize(e) { - const windowSize = e.target.innerWidth; - - console.log(windowSize); - } - async addCarrossel() { const elemento = await waitElement(".footerCheckout__prateleira-container"); $(elemento).slick({ @@ -192,6 +185,14 @@ export default class Footer { "", nextArrow: "", + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + ], }); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 4485c48..e883986 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -80,7 +80,7 @@ width: 54.883%; @media (max-width: 1024px) { - width: 97% !important; + width: 96.875% !important; } input { @@ -128,6 +128,10 @@ width: 12.762%; } + @media (max-width: 900px) { + font-size: 8px; + } + @media (max-width: 490px) { height: 48px; margin: 0; @@ -149,7 +153,7 @@ border: 1px solid $color-black; border-radius: 5px; margin-top: 10px; - width: 35.743%; + width: 366px; @media (min-width: 1025px) and (max-width: 1026px) { margin-top: 0; @@ -157,7 +161,7 @@ } @media (max-width: 1024px) { - width: 30.177%; + width: 343px; } h3 { @@ -204,6 +208,16 @@ border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + width: 90.052%; + + @media (max-width: 1024px) { + width: 293.77%; + margin-left: 16px; + } + + @media (max-width: 767px) { + width: 141.5%; + } // .accordion-heading { // span { @@ -253,7 +267,7 @@ color: $color-gray9; font-family: "Open Sans"; font-style: normal; - font-weight: 700; + font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 9a9f90a..4007ad2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -74,6 +74,8 @@ display: flex; align-items: center; color: $color-black; + display: flex; + justify-content: space-between; &:not(:first-child) { margin-top: 8px; @@ -233,11 +235,8 @@ @media (max-width: 1024px) { position: absolute; - top: 0; - } - - @include mq(lg, max) { - width: 250px; + margin-left: 65px; + width: 15%; } a { @@ -379,6 +378,11 @@ @media (max-width: 1024px) { margin: 28px 0 0 16px; + width: 11% !important; + } + + @media (max-width: 750px) { + width: 15% !important; } @media (max-width: 490px) { @@ -396,9 +400,9 @@ color: $color-gray2; box-shadow: none; - @include mq(lg, max) { - width: 24px !important; - } + // @include mq(lg, max) { + // width: 24px !important; + // } } .icon-plus-sign { @@ -429,7 +433,7 @@ .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { - position: inherit; + position: relative; bottom: inherit; left: inherit; height: inherit; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index baf2901..7dcb0fd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -7,6 +7,11 @@ body .container-main.container-order-form .orderform-template.active { border: 1px solid $color-gray5; border-radius: 8px; + @media (max-width: 1024px) { + width: 98.413%; + margin-left: 16px; + } + .description { margin: 0 !important; width: 90px; @@ -21,7 +26,7 @@ body .container-main.container-order-form .orderform-template.active { .url { height: 60px; - width: 78.93px; + width: 60px; margin-right: 7px; img { @@ -33,6 +38,117 @@ body .container-main.container-order-form .orderform-template.active { .orderform-template-holder { width: 66.1132%; + .row-fluid { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + + .client-email { + @media (max-width: 767px) { + width: 102%; + } + + #client-email { + width: 95.67%; + + @media (max-width: 1024px) { + width: 98.54%; + } + + @media (max-width: 767px) { + max-width: 100% !important; + height: 42px !important; + } + } + } + + .client-first-name { + width: 50%; + margin: 0; + @media (max-width: 1024px) { + } + + #client-first-name { + width: 85.87%; + @media (max-width: 1024px) { + width: 95.512%; + } + } + } + + .client-last-name { + width: 50%; + + label { + margin-left: 10px; + } + + @media (max-width: 1024px) { + } + + #client-last-name { + width: 85.87%; + margin-left: 8px; + @media (max-width: 1024px) { + width: 95.512%; + margin-left: 7px; + } + } + } + + .client-document { + width: 50%; + margin-right: 0; + + @media (max-width: 1024px) { + margin: 0; + } + + #client-document { + width: 86.585%; + + @media (max-width: 1024px) { + width: 95.512%; + margin-bottom: 0; + } + } + } + + .client-phone { + width: 50%; + + @media (max-width: 1024px) { + margin: 0; + } + + label { + margin-left: 10px; + } + + #client-phone { + width: 85.87%; + margin-left: 8px; + + @media (max-width: 1024px) { + width: 95.512%; + margin-bottom: 0; + } + } + } + + #shipping-data { + margin: 0; + } + + #payment-data { + margin: 0; + .step { + margin-bottom: 17px; + } + } + } + .client-profile-data { .accordion-group { .accordion-heading { @@ -169,4 +285,10 @@ body .container-main.container-order-form .orderform-template.active { color: $color-gray2; } } + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + padding-right: 16px; + } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index a1ffcd7..32c0d08 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -132,6 +132,7 @@ @media (max-width: 1024px) { left: 2.5%; + top: 48%; } } .slick-next { @@ -147,6 +148,7 @@ @media (max-width: 1024px) { left: 96.5%; + top: 48%; } } .slick-arrow.slick-hidden { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 88fdf04..7583f8d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -82,6 +82,10 @@ @media (min-width: 1025px) and (max-width: 1107px) { font-size: 11.5px; } + + @media (min-width: 600px) and (max-width: 690px) { + font-size: 10.5px; + } } &__sku { @@ -113,6 +117,10 @@ @media (min-width: 1025px) and (max-width: 1107px) { font-size: 9.7px; } + + @media (min-width: 600px) and (max-width: 714px) { + font-size: 8.5px; + } } } From d53bb7c372d12ca86cfcca078b3d5d8085d8d476 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 21 Dec 2022 12:31:56 -0300 Subject: [PATCH 4/5] refactor: ajusta css resumo pedido --- .../sass/checkout/_checkout-autenticacao.scss | 2 +- .../sass/checkout/_checkout-carrinho.scss | 25 +++++++--- .../sass/checkout/_checkout-pagamento.scss | 50 ++++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 4 ++ 4 files changed, 59 insertions(+), 22 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e883986..fc68707 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -207,7 +207,7 @@ border-radius: 8px; border: 1px solid $color-gray3; font-family: $font-family; - padding: 16px; + // padding: 16px; width: 90.052%; @media (max-width: 1024px) { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 4007ad2..c95dc4b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -62,8 +62,6 @@ } .cart { - // border: 1px solid $color-gray4; - ul li { border-top: none; margin-top: 0; @@ -114,11 +112,27 @@ line-height: 16px; text-align: right; text-decoration-line: underline; + margin-right: 17px; } .summary-totalizers { + td { + border-top: 1px solid $color-gray3; + padding: 24px 17px !important; + box-sizing: border-box; + } td.info { width: 100%; + font-family: "Open Sans"; + font-weight: 400 !important; + line-height: 19px !important; + color: $color-gray9 !important; + } + + td.monetary { + font-size: 14px !important; + text-align: center !important; + color: $color-gray9 !important; } } @@ -230,7 +244,7 @@ } .product-name { - padding-right: 0; + padding-right: 10px; white-space: normal; @media (max-width: 1024px) { @@ -829,11 +843,6 @@ margin-top: 49px; width: 353px; - @media (max-width: 1024px) { - width: 100%; - margin: 0; - padding: 0 16px; - } .coupon-data { #cart-link-coupon-add { text-decoration: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 7dcb0fd..dc5d58b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,6 +1,6 @@ body .container-main.container-order-form .orderform-template.active { .mini-cart { - width: 32.3242%; + width: 32.52%; margin-left: unset; margin-right: 0; float: right; @@ -9,6 +9,7 @@ body .container-main.container-order-form .orderform-template.active { @media (max-width: 1024px) { width: 98.413%; + height: 397px; margin-left: 16px; } @@ -34,6 +35,23 @@ body .container-main.container-order-form .orderform-template.active { width: 100%; } } + + .totalizers { + margin: 0 !important; + } + + .table { + tfoot { + .info { + font-weight: 700 !important; + color: $color-gray2 !important; + } + + .monetary { + color: $color-gray2 !important; + } + } + } } .orderform-template-holder { width: 66.1132%; @@ -99,27 +117,26 @@ body .container-main.container-order-form .orderform-template.active { .client-document { width: 50%; - margin-right: 0; + margin: 0; @media (max-width: 1024px) { - margin: 0; } #client-document { width: 86.585%; + margin-bottom: 0; @media (max-width: 1024px) { width: 95.512%; - margin-bottom: 0; } } } .client-phone { width: 50%; + margin: 0; @media (max-width: 1024px) { - margin: 0; } label { @@ -129,10 +146,10 @@ body .container-main.container-order-form .orderform-template.active { #client-phone { width: 85.87%; margin-left: 8px; + margin-bottom: 0; @media (max-width: 1024px) { width: 95.512%; - margin-bottom: 0; } } } @@ -151,6 +168,7 @@ body .container-main.container-order-form .orderform-template.active { .client-profile-data { .accordion-group { + padding: 16px 16px 28.41px 16px; .accordion-heading { .accordion-toggle { &::after { @@ -200,10 +218,11 @@ body .container-main.container-order-form .orderform-template.active { .shipping-data { .accordion-group { + padding: 24.5px 16px; .accordion-heading { span { color: #303030; - margin-bottom: 8px; + margin-bottom: 15px; padding: 0; i::before { @@ -246,10 +265,11 @@ body .container-main.container-order-form .orderform-template.active { .payment-data { .accordion-group { + padding: 24.5px 16px; .accordion-heading { span { color: #303030; - margin-bottom: 8px; + margin-bottom: 15px; padding: 0; i::before { @@ -278,11 +298,15 @@ body .container-main.container-order-form .orderform-template.active { } .summary-cart-template-holder { - .cart::before { - content: "Resumo do Pedido"; - font-size: 16px; - line-height: 19px; - color: $color-gray2; + .cart { + border: none; + + &::before { + content: "Resumo do Pedido"; + font-size: 16px; + line-height: 19px; + color: $color-gray2; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 78fe3ae..a2ac728 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -22,6 +22,10 @@ header { } } +table { + border-collapse: unset !important; +} + body { display: flex; flex-direction: column; From 18f641135c0f71f5c40f957599503411a8796dff Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 22 Dec 2022 08:14:30 -0300 Subject: [PATCH 5/5] feat: css checkout entrega e pagamento 1280px --- .../sass/checkout/_checkout-autenticacao.scss | 185 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 31 ++- .../sass/checkout/_checkout-pagamento.scss | 28 ++- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 220 insertions(+), 26 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index fc68707..ccd4aee 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -373,8 +373,13 @@ label { background-color: $color-white; box-shadow: none; - color: #303030; + color: $color-gray9 !important; padding: 8px 12px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; svg path { fill: #d8c8ac; @@ -394,23 +399,33 @@ } .shp-summary-group-info { - border-color: $color-gray4; + border: none !important; } .address-summary { background: none; border-color: $color-gray11; border-radius: 8px; - color: #303030; + color: $color-gray9; padding: 12px; + position: relative; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; - // &:first-child::before { - // content: ""; - // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - // background-size: 21px 20px; - // width: 21px; - // height: 20px; - // } + &:first-child::before { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") !important; + background-size: 25px 25px; + width: 25px; + height: 25px; + display: block; + position: absolute; + top: 28%; + right: 89%; + } @include mq(md, max) { background-position: 8px 9px; @@ -421,6 +436,50 @@ font-weight: 500; text-decoration: underline; } + + .street { + left: 15%; + position: absolute; + } + + .neighborhood { + position: absolute; + left: 15%; + } + + .neighborhood-delimiter-after { + position: absolute; + left: 36.5%; + } + + .city { + position: absolute; + left: 39%; + } + + .state-delimiter { + position: absolute; + left: 63%; + } + + .state { + position: absolute; + left: 65%; + } + + #force-shipping-fields { + top: 50%; + position: absolute; + left: 80%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: none; + color: $color-blue; + text-transform: lowercase; + } } .shp-summary-group-price, @@ -439,6 +498,7 @@ .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { @@ -471,6 +531,79 @@ td { padding: 25px 0 !important; } + + .info { + border-bottom: 1px solid #f0f0f0; + } + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + color: $color-gray9 !important; + } + + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray11; + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: $color-gray12 !important; + } + + .steps-view { + width: 59.746%; + height: 292px; + } + + .link-gift-card { + display: none !important; + } + + .payment-group-list-btn { + width: 100%; + + .pg-deposito { + display: none; + } + + .pg-transferencia-bancaria { + display: none; + } + + #payment-group-creditDirectSalePaymentGroup { + display: none; + } + + #payment-group-promissoryPaymentGroup { + display: none; + } + + .pg-money { + display: none; + } + + #payment-group-instantPaymentPaymentGroup { + display: none; + } + + #payment-group-PSEPaymentGroup { + display: none; + } + + .pg-promisory---monica { + display: none; + } + + .pg-desconto-em-folha { + display: none; + } + + #payment-group-MercadoPagoPaymentGroup { + display: none; + } + + #payment-group-SPEIPaymentGroup { + display: none; + } } } @@ -479,12 +612,23 @@ display: flex; flex-direction: column; input { - width: 280px; - max-width: 280px; + width: 94.95%; + max-width: 100%; + height: 35px; } } .vtex-omnishipping-1-x-address { + label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray9; + } + .ship-street, .ship-neighborhood, .ship-city, @@ -493,22 +637,33 @@ } .ship-number { + width: 100%; input { - width: 155%; + width: 94.95%; height: 25px; border-radius: 8px; - margin-bottom: 20px; + // margin-bottom: 20px; } } .ship-receiverName { + width: 100%; input { - width: 95%; + width: 94.95%; border-radius: 8px; height: 25px; margin: 0; } } + + .ship-complement { + width: 100%; + input { + width: 94.95%; + border-radius: 8px; + height: 25px; + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index c95dc4b..74c67a7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -137,19 +137,34 @@ } #payment-data-submit { - background: $color-black; + background: $color-green2; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); + position: absolute; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-top: 20px; + + i { + display: none; } - &:active { - background: darken($color-black, 5); - } + // &:hover { + // background: lighten($color-black, 5); + // } + + // &:active { + // background: darken($color-black, 5); + // } } } @@ -959,7 +974,7 @@ .accordion-group { tr { - border-color: #e5e5e5; + border-bottom: 1px solid $color-gray5 !important; td { &.empty { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index dc5d58b..9b26eeb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -41,6 +41,11 @@ body .container-main.container-order-form .orderform-template.active { } .table { + tbody { + tr { + border-bottom: 1px solid $color-gray5 !important; + } + } tfoot { .info { font-weight: 700 !important; @@ -168,7 +173,7 @@ body .container-main.container-order-form .orderform-template.active { .client-profile-data { .accordion-group { - padding: 16px 16px 28.41px 16px; + padding: 26.41px 16px 28.41px 16px; .accordion-heading { .accordion-toggle { &::after { @@ -205,6 +210,7 @@ body .container-main.container-order-form .orderform-template.active { width: 20px; height: 20px; content: ""; + margin-right: 8px; } img { @@ -248,6 +254,7 @@ body .container-main.container-order-form .orderform-template.active { width: 20px; height: 20px; content: ""; + margin-right: 8px; } } @@ -266,6 +273,11 @@ body .container-main.container-order-form .orderform-template.active { .payment-data { .accordion-group { padding: 24.5px 16px; + width: 89.75%; + + @media (max-width: 1024px) { + width: 144%; + } .accordion-heading { span { color: #303030; @@ -280,13 +292,23 @@ body .container-main.container-order-form .orderform-template.active { a { align-items: center; - background-color: #303030; + background: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + 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: ""; + margin-right: 8px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ea18390..29312fd 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,10 +20,12 @@ $color-gray8: #c4c4c4; $color-gray9: #7d7d7d; $color-gray10: #ededed; $color-gray11: #e0e0e0; +$color-gray12: #f2f2f2; $color-blue: #00c8ff; $color-green: #4caf50; +$color-green2: #298541; $color-red: #ff0000;