From 717488bd42bbc2146bffc362184c16bdce5316b6 Mon Sep 17 00:00:00 2001 From: Vinicius Date: Sun, 18 Dec 2022 20:37:04 -0200 Subject: [PATCH] feat(checkout): melhora checkout --- .../sass/checkout/_checkout-autenticacao.scss | 117 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 31 +++-- .../sass/checkout/_checkout-pagamento.scss | 1 + .../src/arquivos/sass/utils/_variaveis.scss | 2 +- checkout/src/arquivos/sass/utils/utils.scss | 38 +++--- 5 files changed, 134 insertions(+), 55 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index da91259..d804008 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -161,22 +161,23 @@ padding: 16px; .accordion-heading { + .accordion-toggle { + margin: 0; + .icon-home { + display: none; + } + } span { color: #292929; margin-bottom: 8px; - font-size: 0px; + font-size: 16px; margin-top: 7px; margin-bottom: 25px; padding: 0; - &::after { - content: "Identificação"; - font-size: 16px; - font-weight: 400; - line-height: 19px; - } i::before { fill: #303030; + display: none; } } @@ -195,22 +196,91 @@ .accordion-inner { padding: 0; + .totalizers-list { + color: $color-gray2; + + tr { + border: 1px solid $color-gray5; + } + } + + .notification { + margin-top: 14px; + color: $color-gray2; + } + + .box-step { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-address { + .ship-number { + display: block; + width: 100%; + #ship-number { + display: block; + width: 100%; + } + } + .ship-complement { + #ship-complement { + display: block; + width: 100%; + } + } + } + } + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + + .ship-postalCode { + max-width: 100%; + #ship-postalCode { + display: block; + width: 100%; + max-width: 100%; + margin: 0 0 10px; + } + } + } + .box-info { + padding-top: 25px; + } + .shipping-summary-info { + color: $color-gray2; + padding-top: 15px; + } + .box-edit { + .row-fluid { + .box-client-info-pf { + margin-top: 36px; + } + } + + .box-client-info { + .newsletter { + margin: 12px 0 0; + } + } + } + } + /* General configurations */ .client-notice { color: $color-black; + display: none; } - p { label { - color: $color-black; + color: #7d7d7d; font-weight: 500; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid $color-gray5; box-shadow: none; } @@ -220,11 +290,13 @@ } .box-client-info-pj { + display: none; .link a#is-corporate-client, .link a#not-corporate-client { color: $color-black; font-weight: 500; text-decoration: underline; + display: none; } } @@ -235,17 +307,24 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; - margin-top: 8px; + background: $color-blue; + margin-top: 39px; outline: none; transition: all 0.2s linear; + color: $color-white; + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 19.07px; + cursor: pointer; + text-transform: uppercase; &:hover { - background: lighten($color-black, 5); + background: lighten($color-blue, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-blue, 5); } } @@ -303,7 +382,7 @@ } a { - color: #303030; + color: $color-blue; font-weight: 500; text-decoration: underline; } @@ -328,12 +407,12 @@ } .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); + color: $color-black; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 8277189..516cbc7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -16,7 +16,6 @@ .cart { border: 3px solid $color-gray3; box-sizing: border-box; - border-radius: 5px; margin-bottom: 48px !important; @@ -29,10 +28,21 @@ } .cart-fixed.affix { position: relative !important; + z-index: none !important; } .cart-fixed { font-family: $font-family; width: 100%; + z-index: none !important; + + .summary-cart-template-holder { + z-index: none !important; + overflow: none; + + .cart { + border: none; + } + } h2 { background: $color-white; border: none; @@ -66,17 +76,6 @@ .price { color: #7d7d7d; } - - .shipping-date { - font-size: 0 !important; - } - - &::after { - content: "Frete"; - color: #7d7d7d; - font-size: 14px; - line-height: 16.38px; - } } } @@ -98,18 +97,18 @@ } #payment-data-submit { - background: $color-black; + background: $color-green; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($color-green, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-green, 5); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..1810509 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,6 +4,7 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + overflow: none !important; } .orderform-template-holder { width: 66.1132%; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ac1c010..de927c0 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -13,7 +13,7 @@ $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; -$color-gray5: #e5e5e5; +$color-gray5: #e0e0e0; $color-blue: #00c8ff; $color-green: #4caf50; diff --git a/checkout/src/arquivos/sass/utils/utils.scss b/checkout/src/arquivos/sass/utils/utils.scss index 20f3092..90d6d72 100644 --- a/checkout/src/arquivos/sass/utils/utils.scss +++ b/checkout/src/arquivos/sass/utils/utils.scss @@ -1,18 +1,18 @@ -.sprite{ +.sprite { display: inline-block; vertical-align: middle; } .no-buttom { - border: none; + border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; - outline: none; - text-align: inherit; + outline: none; + text-align: inherit; /* inherit font & color from ancestor */ color: inherit; @@ -26,24 +26,24 @@ -moz-osx-font-smoothing: inherit; /* Corrects inability to style clickable `input` types in iOS */ - appearance: none; + appearance: none; - &::-moz-focus-inner { - border: 0; - padding: 0; - } + &::-moz-focus-inner { + border: 0; + padding: 0; + } } - -.itens-inline{ - >*{ display: inline-block;} +.itens-inline { + > * { + display: inline-block; + } } -%notificacao{ - - padding: 7.5px 10px ; - min-height: 1em; - border-radius: 3px; - border-right: solid 5px; - display: block; +%notificacao { + padding: 7.5px 10px; + min-height: 1em; + border-radius: 3px; + border-right: solid 5px; + display: block; }