From c6e87680ef5167809deb186857b67434f39e944e Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Sun, 18 Dec 2022 21:29:09 -0300 Subject: [PATCH] feat: css 2 parte --- checkout/src/arquivos/js/components/Footer.js | 15 +++++++++++ .../sass/checkout/_checkout-autenticacao.scss | 10 +++++--- .../sass/checkout/_checkout-carrinho.scss | 25 +++++++++++-------- .../src/arquivos/sass/utils/_variaveis.scss | 1 + .../template-checkout/checkout-header.html | 4 +++ 5 files changed, 41 insertions(+), 14 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9956c79..fd41b7a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,6 +9,7 @@ export default class Footer { await this.selectors(); this.onUpdate(); // this.apiFetch(); + // this.calculoFrete(); this.footer(); } @@ -17,6 +18,7 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); this.divPrateleira = await waitElement(".footerCheckout__prateleira"); + this.divCalculoFrete = await waitElement(".srp-data"); this.divFooter = await waitElement(".footerCheckout__wrapper"); } onUpdate() { @@ -34,6 +36,19 @@ export default class Footer { observer.observe(target, config); } + // calculoFrete() { + // this.divCalculoFrete.innerHTML = ` + //

Veja as opções de entrega para seus itens, + // com todos os prazos e valores.

+ // + // `; + // } + // voltarFrete() { + // this.divCalculoFrete.innerHTML = ` + //
Receber 1 item em ***00
+ // `; + // } + // apiFetch() { // let pratileira = this.divPrateleira; // pratileira.innerHTML = ` diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..c57ea52 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -53,7 +53,8 @@ } button { - background-color: $color-black; + background-color: $color-blue-figma; + color: $color-black; border-radius: 5px; border: none; font-family: $font-family; @@ -93,7 +94,7 @@ } i::before { - color: $color-black; + color: $color-blue-figma; font-size: 1rem; opacity: 1; } @@ -130,7 +131,7 @@ a { align-items: center; - background-color: #303030; + background-color: $color-blue-figma; border-radius: 8px; border: none; color: $color-white; @@ -183,7 +184,8 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $color-blue-figma; + color: $color-black; margin-top: 8px; outline: none; transition: all 0.2s linear; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..1aa341e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -85,7 +85,7 @@ } #payment-data-submit { - background: $color-black; + background: $color-green; border: none; border-radius: 0; color: $color-white; @@ -253,10 +253,14 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + background-color: $color-blue-figma; + color: $color-white; display: block; font-weight: 500; - padding: 1px 12px; + margin: 1px 12px; + border-radius: 50%; + border: 50%; + width: 18px; } } @@ -485,10 +489,10 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue-figma; border: none; border-radius: 5px; - color: $color-white; + color: $color-black; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -664,7 +668,7 @@ font-size: 12px; height: 34px; padding: 0 12px; - max-width: 160px; + width: 204px; @include mq(sm, max) { max-width: 100%; @@ -673,10 +677,10 @@ } button { - background: $color-black; + background: $color-blue-figma; border: none; border-radius: 5px; - color: $color-white; + color: $color-black; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -780,9 +784,10 @@ } } + .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue-figma; border: none; border-radius: 5px; display: block; @@ -800,7 +805,7 @@ font-weight: 500; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..dce6f29 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,7 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-blue-figma:#00C8FF; $color-blue: #4267b2; $color-green: #4caf50; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..6f14801 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -14,6 +14,10 @@
Cadeado Compra segura + + + +