From 8e559fa379c0bef30342f27c0ed0daf6aa3dc6b6 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Tue, 13 Dec 2022 16:44:11 -0300 Subject: [PATCH] =?UTF-8?q?feat(header):=20cria=20header=20desktop=20com?= =?UTF-8?q?=20barra=20de=20progresso,=20renomeia=20vari=C3=A1vel=20-black?= =?UTF-8?q?=20para=20-300?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Header.js | 46 ++++++- .../sass/checkout/_checkout-autenticacao.scss | 28 ++--- .../sass/checkout/_checkout-carrinho.scss | 36 +++--- .../sass/checkout/_checkout-vazio.scss | 6 +- .../src/arquivos/sass/checkout/_checkout.scss | 6 +- .../src/arquivos/sass/partials/_header.scss | 114 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 3 +- 7 files changed, 178 insertions(+), 61 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..55f2c57 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,48 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarStructure(); + // await this.progressBarMove(); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); + // this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); } + + progressBarStructure() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + ` + } + + // if(this.progressBar && window.innerWidth <=1024) { + // this.progressBar.innerHTML = ""; + // } + } + + // async progressBarMove() { + // if (this.progressBar && window.innerWidth > 1024) { + // const progressBarList = document.querySelectorAll(("#progressBar ul li")); + // progressBarList.forEach((li) => { + // console.log("Aqui vem seu código") + // }) + // } + // } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..02e0d67 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,11 +6,11 @@ .link-cart { a { - color: $color-black; + color: $black-300; font-size: 14px; &:hover { - color: lighen($color-black, 10); + color: lighen($black-300, 10); } } } @@ -40,7 +40,7 @@ input { box-shadow: none; - color: $color-black; + color: $black-300; font-family: $font-family; padding: 0 16px; border: 2px solid $color-gray3; @@ -53,7 +53,7 @@ } button { - background-color: $color-black; + background-color: $black-300; border-radius: 5px; border: none; font-family: $font-family; @@ -89,11 +89,11 @@ li { span { - color: $color-black; + color: $black-300; } i::before { - color: $color-black; + color: $black-300; font-size: 1rem; opacity: 1; } @@ -101,7 +101,7 @@ } i::before { - color: $color-black; + color: $black-300; font-size: 6rem; opacity: 0.5; } @@ -146,12 +146,12 @@ /* General configurations */ .client-notice { - color: $color-black; + color: $black-300; } p { label { - color: $color-black; + color: $black-300; font-weight: 500; } @@ -170,7 +170,7 @@ .box-client-info-pj { .link a#is-corporate-client, .link a#not-corporate-client { - color: $color-black; + color: $black-300; font-weight: 500; text-decoration: underline; } @@ -183,17 +183,17 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $black-300; margin-top: 8px; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($black-300, 5); } &:active { - background: darken($color-black, 5); + background: darken($black-300, 5); } } @@ -281,7 +281,7 @@ } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + text-shadow: 1.3px 1px lighten($black-300, 50); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..8b03e45 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -85,18 +85,18 @@ } #payment-data-submit { - background: $color-black; + background: $black-300; border: none; border-radius: 0; color: $color-white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($black-300, 5); } &:active { - background: darken($color-black, 5); + background: darken($black-300, 5); } } } @@ -111,7 +111,7 @@ } th { - color: $color-black; + color: $black-300; padding: 0 0 16px; font-style: normal; font-weight: bold; @@ -253,7 +253,7 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $black-300; display: block; font-weight: 500; padding: 1px 12px; @@ -300,7 +300,7 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $black-300; } } @@ -405,7 +405,7 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $black-300; border: none; border-radius: 5px; color: $color-white; @@ -419,11 +419,11 @@ letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } } @@ -469,7 +469,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $black-300; margin-bottom: 12px; } @@ -485,7 +485,7 @@ } & ~ button { - background-color: $color-black; + background-color: $black-300; border: none; border-radius: 5px; color: $color-white; @@ -501,11 +501,11 @@ text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } @@ -673,7 +673,7 @@ } button { - background: $color-black; + background: $black-300; border: none; border-radius: 5px; color: $color-white; @@ -691,11 +691,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } } @@ -716,7 +716,7 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $black-300; padding: 12px 0; } @@ -737,7 +737,7 @@ font-weight: normal; font-size: 18px; line-height: 21px; - color: $color-black; + color: $black-300; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..c6d8e28 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,7 +1,7 @@ .empty-cart { font-family: $font-family; &-content { - color: $color-black; + color: $black-300; text-align: center; @include mq(md, max) { @@ -15,7 +15,7 @@ &-links { .link-choose-products { - background: $color-black; + background: $black-300; border: none; border-radius: 5px; transition: ease-in 0.22s all; @@ -31,7 +31,7 @@ text-transform: uppercase; &:hover { - background: lighten($color-black, 5); + background: lighten($black-300, 5); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..df0824c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -54,16 +54,16 @@ body { } .btn-success { - background: $color-black; + background: $black-300; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($black-300, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $black-300 !important; } #cart-title, diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..fb4ba6a 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,118 @@ /* _header.scss */ .headerCheckout { + // position: relative; + margin: 0; + padding: 30px 131px; + border-bottom: 1px solid $black-500; + .container { width: auto !important; } + &__wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + // display: flex; + // justify-content: space-between; align-items: center; - display: flex; - justify-content: space-between; } &__logo { img { - height: 52px; + height: 37.14px; width: auto; } } - &__safeBuy { - span { - align-items: center; - display: flex; - text-transform: uppercase; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray; + .progress-bar { + // position: absolute; + // top: 50%; + // left: 50%; + // transform: translate(-50%, -50%); + width: 440px; + + &__container { + // position:relative; + + margin: 0; + width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + // display: flex; + // align-items: center; + // justify-content: space-between; + list-style: none; } - i { - margin-right: 8px; + &__stage { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &--text { + margin: 0; + margin-bottom: 9px; + line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + color: $black-500; + } + + &--circle { + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid $black-500; + + // &:active { + // background: $black-500; + // } + } + + &::before, + &::after { + content: ''; + position: absolute; + bottom: 6.5px; + width: calc(50% - 7px); + height: 1px; + background: $black-500; + } + + &::before { + left: 0; + } + + &::after{ + left: calc(50% + 7px); + } + + &:first-child::before, + &:last-child::after { + display: none; + } + } + } + + &__safeBuy { + justify-self: flex-end; + display: flex; + align-items: center; + gap: 8px; + + img { + width: 12px; + height: 15px; + } + + span { + line-height: 16px; + font-family: $font-family; + font-size: 12px; + text-transform: uppercase; + color: $black-300; } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..fee8880 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -5,7 +5,8 @@ $font-family: "Open Sans", sans-serif; $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; +$black-300: #292929; +$black-500: #000000; $color-white: #fff;