From c40aaa514bef45ae17d1fee18f10ec6480f058ee Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Sun, 18 Dec 2022 17:11:54 -0300 Subject: [PATCH] =?UTF-8?q?feat(checkout):=20estiliza=C3=A7=C3=A3o=20das?= =?UTF-8?q?=20paginas=20de=20checkout,=20junto=20com=20as=20variveis.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-autenticacao.scss | 340 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 10 +- .../sass/checkout/_checkout-pagamento.scss | 21 ++ .../sass/checkout/_checkout-vazio.scss | 22 +- .../src/arquivos/sass/checkout/_checkout.scss | 204 ++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 13 + 6 files changed, 535 insertions(+), 75 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..7a7afe8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,12 +6,12 @@ .link-cart { a { - color: $color-black; + color: $color-black2; + font-weight: 400; + font-family: $font-family-secundary; font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } + line-height: 16px; + text-transform: uppercase; } } @@ -22,30 +22,55 @@ justify-content: center; h3 { - margin-bottom: 16px; + margin-bottom: 20px; + margin-top: 7px; span { - color: #303030; - font-size: 24px; + color: $color-black2; + font-family: $font-family-secundary; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; } small { - color: $color-gray4; + color: $color-black2; + font-family: $font-family-secundary; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; + padding: 0; } } } .client-email { - margin: 0 0 16px; + display: flex; + margin: 0 0 47px; + width: 57%; + justify-content: flex-start; input { box-shadow: none; color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 1px solid $color-black2; + border-right: none; box-sizing: border-box; - border-radius: 5px; + border-radius: 5px 0px 0px 5px; + width: 77%; + height: 52px; + &::placeholder{ + color: $color-black2; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + } @media (max-width: 490px) { width: auto; @@ -68,19 +93,44 @@ } } + #btn-client-pre-email{ + right: 14px; + padding: 4px 26px; + height: 52px; + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + position: static; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + span.help.error { color: red; + position: absolute; + left: 213px; + top: 50px; + font-weight: 700; + font-size: 12px; + line-height: 16px; } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black2; + border-radius: 5px; h3 { - color: #303030; + color: $color-black2; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; margin: 0 0 8px 0; } @@ -89,11 +139,16 @@ li { span { - color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black2; } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; } @@ -108,35 +163,97 @@ } } + .newsletter{ + margin-bottom: 44px; + } + + #go-to-shipping{ + width: 100%; + margin-bottom: 3px; + margin-top: 0; + } + + p.input.ship-country.text{ + display: none; + + } + + .vtex-omnishipping-1-x-addressFormPart1 small{ + margin-left: 0; + } + .shipping-data, .payment-data, .client-profile-data { + .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; + border-radius: 8px; font-family: $font-family; - padding: 16px; + padding: 17px 17px 29px 17px; + + span{ + font-size: 12px; + line-height: 14px; + } + + .accordion-toggle{ + font-weight: 400; + font-size: 16px; + line-height: 20px; + } + + div.row-fluid:before{ + display: none; + } + + p.link.link-gift-card{ + display: none !important; + } + .row-fluid:before{ + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seu dados"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + } .accordion-heading { span { - color: #303030; - margin-bottom: 8px; + color: $color-black; + margin-bottom: 15px; padding: 0; - i::before { - fill: #303030; + i { + font-size: 0; + line-height: 0; + &.icon-edit{ + + &::before{ + content: ""; + width: 20px; + height: 20px; + background-image:url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png) ; + background-repeat: no-repeat; + margin-top: 7px; + background-size: contain; + } + } } } a { align-items: center; - background-color: #303030; + background-color: $color-white; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + display: block !important; + outline: none; } } @@ -144,24 +261,47 @@ padding: 0; /* General configurations */ + .box-client-info-pj{ + display: none; + } .client-notice { color: $color-black; + display: none; } p { label { - color: $color-black; - font-weight: 500; + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + span.newsletter-text{ + color: $color-gray9; + } } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid $color-gray10; box-shadow: none; + padding: 10px 6px; + + &#opt-in-newsletter{ + border-radius: 3px; + color: $color-gray11; + } } + #ship-postalCode{ + width: 100%; + max-width: 95%; + } + .help.error { color: red; } @@ -180,13 +320,25 @@ font-weight: 500; } + .submit.btn-submit-wrapper{ + margin-top: 0; + } + button.submit { + width: 100%; border: none; - border-radius: 5px; - background: $color-black; + border-radius: 8px; + background: $color-blue2; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; + letter-spacing: 0.05em; + text-transform: uppercase; &:hover { background: lighten($color-black, 5); @@ -197,24 +349,29 @@ } } - /* Shipping configurations */ + /* Shipping */ .ship-postalCode small a { - color: #303030; - font-weight: 500; + color: $color-black; + font-weight: 400; + font-size: 12px; + line-height: 16px; text-decoration: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-gray2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + font-style: normal; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray10; + border-radius: 8px; + margin-bottom: 15px; label { background-color: $color-white; @@ -230,30 +387,47 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-gray2; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + margin-bottom: 11px; + font-style: normal; } .shp-summary-group-info { border-color: $color-gray4; + border: none; } .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; + border-color: $color-gray10; + border-radius: 8px; color: #303030; padding: 12px; + padding-top: 2px; + &::before{ + content: ""; + width: 24px; + height: 24px; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-repeat: no-repeat; + background-size: 24px; + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: $color-blue2; + float: right; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-transform: lowercase; } } @@ -264,25 +438,89 @@ .shp-summary-group-price { padding-right: 16px; + display: none; } .shp-summary-package { - padding-left: 16px; + padding-left: 12px; } .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-purple; } + + .vtex-omnishipping-1-x-deliveryOptionInactive{ + color: $color-gray8; + } + + p.input.ship-number.required.text{ + width: 100%; + } + + input#ship-number.input-mini, + input#ship-complement.input-large, + input#ship-receiverName.input-xlarge { + width: 95%; + } + + .steps-view{ + width: 57%; + margin-top: 35px; + + } + + span.payment-group-item-text{ + background-image: none !important; + } + + .payment-group-item{ + border-right: 1px solid $color-black2 ; + border: 1px solid $color-black2; + border-radius: 6px; + display: none; + opacity: 0.3; + margin-bottom: 12px; + mix-blend-mode: normal; + padding: 13px 24.5px; + background: $color-gray3; + color: $color-gray6; + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &-text{ + padding: 5px 0 5px 0; + } + } + + .payment-group-item.active{ + margin-left: 5px; + border-radius: 6px; + border-right: 1px solid $color-orange ; + border: 1px solid $color-orange; + color: $color-orange; + text-decoration: none; + opacity: 1; + background: rgba(220, 221, 227, 0.3); + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..70a0e34 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -782,7 +782,7 @@ .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; border-radius: 5px; display: block; @@ -791,7 +791,7 @@ padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-black, 5); } &:after { @@ -799,11 +799,11 @@ font-family: $font-family; font-weight: 500; font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; text-transform: uppercase; - vertical-align: middle; + letter-spacing: 0.05em; line-height: 19px; + vertical-align: middle; + color: $color-white; text-shadow: none; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..6ced2a3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,3 +9,24 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } + +body .container-main.container-order-form .orderform-template.active { + .mini-cart { + width: 32.3242%; + margin-left: unset; + margin-right: 0; + float: right; + .payment-submit-wrap{ + margin-top: 15px; + } + } + .orderform-template-holder { + width: 66.1132%; + } + +} + +.cart-template .cart-fixed #payment-data-submit + { + background-color: $color-blue2; + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..e52c9d6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -3,6 +3,7 @@ &-content { color: $color-black; text-align: center; + color: $color-black; @include mq(md, max) { padding: 0 16px; @@ -10,14 +11,25 @@ } &-title { - font-size: 20px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black2; } + &-message { + display: none; + } + &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: $color-white; + color: $color-black !important; + border-radius: 1px solid $color-black2; transition: ease-in 0.22s all; outline: none; font-family: $font-family; @@ -27,11 +39,11 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; text-transform: uppercase; &:hover { background: lighten($color-black, 5); + color: $color-white !important; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..1a9f365 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,14 +9,29 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; + border-top: 1px solid $color-black2; + .container{ + display: flex; + align-items: center; + width: 94.9734%; + } } footer .footerCheckout__prateleira, header { - width: 79.53125%; + width: 100%; margin: 0 auto; } +header{ + border-bottom: 1px solid $color-black2; + padding: 29px 0; +} +.headerCheckout__safeBuy{ + display: flex; + gap: 8px; + height: 15px; +} body { display: flex; @@ -24,6 +39,156 @@ body { min-height: 100% !important; padding-top: 0 !important; + .PaymentCardNumber input { + width: 64%; + height: 25px; + } + p.PaymentCardHolderDocument.input.text.required.mask{ + display: none; + } + .PaymentInstallments select{ + width: 68%; + } + input#creditCardpayment-card-0Name.input-medium{ + width: 34%; + height: 25px; + } + .input#creditCardpayment-card-0Code.input-mini{ + width: 16%; + height: 25px; + } + #ship-postalCode{ + border: 1px solid $color-gray8; + border-radius: 8px; + } + #find-pickups-manualy-button-denied{ + color: $color-black2; + outline: none; + &:hover{ + background: $color-white; + color: $color-black2; + } + &:active{ + background: $color-white; + color: $color-black2; + } + } + #payment-data-submit{ + i.icon-lock{ + display: none; + } + } + tbody.totalizers-list{ + tr.srp-summary-result.hide{ + display: none; + } + } + div.cart-fixed.cart-fixed-transition.affix-top{ + .Items{ + border-top: 1px solid $color-gray10; + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + .Discounts{ + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + tfoot { + td.info, + td.monetary { + padding-top: 30px; + padding-bottom: 0px; + } + td.info{ + padding-left: 17px; + } + td.monetary{ + padding-right: 17px; + } + } + 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; + } + } + div#client-profile-data.span6.client-profile-data{ + .client-profile-email{ + margin-bottom: 6px; + } + .client-profile-summary{ + span{ + margin-bottom: 6px; + } + } + span{ + font-size: 0; + line-height: 0; + &::after{ + content: "Identificação"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } + } + span.accordion-toggle.collapsed, + span.email, + span.name, + span.tel, + span.newsletter-text{ + &::after{ + display: none; + } + } + span.email, + span.name, + span.tel{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + span.newsletter-text{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + } + } + + a#payment-group-creditCardPaymentGroup.payment-group-item, + a#payment-group-bankInvoicePaymentGroup.payment-group-item { + display: block; + + } + .payment-group-list-btn{ + width: 105%; + } + @include mq(md, max) { padding-left: 0; } @@ -47,34 +212,33 @@ body { padding-left: 0; } } + .container-order-form, .container-cart { width: 80%; } } +.row-fluid .full-cart.active{ + margin-bottom: 0; +} .btn-success { - background: $color-black; + background: $color-white; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($color-white, 15%); } } -.emailInfo h3 { - color: $color-black !important; -} - #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 17px 0; text-transform: uppercase; @include mq(md, max) { @@ -82,6 +246,18 @@ body { } } +#cart-title{ + display: block !important; + font-weight: 700; + font-size: 24px; + line-height: 33px; + width: max-content; + color: $color-black; + margin: 16px 0; + letter-spacing: 0.05em; + +} + .dropdown { &__content { &--closed { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..b36b9c4 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,18 +6,31 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; +$color-purple: #41115D; + $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #58595B; +$color-gray7: #EDEDED; +$color-gray8: #C4C4C4; +$color-gray9: #808080; +$color-gray10: #E0E0E0; +$color-gray11: #828282; $color-blue: #4267b2; +$color-blue2: #00C8FF; $color-green: #4caf50; +$color-green2: #298541; + +$color-orange: #F15A31; /* Grid breakpoints */ $grid-breakpoints: (