From a95858376c95058dd575f011f7b1a47bd66913ee Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Mon, 12 Dec 2022 10:31:58 -0300 Subject: [PATCH] feat(checkout): Cria barra de progresso desktop e 4k --- checkout/src/arquivos/js/components/Header.js | 49 ++++++- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/partials/_header.scss | 134 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 27 ++-- 4 files changed, 192 insertions(+), 20 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..51d65fe 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,51 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarContent(); } 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"); + } + + progressBarContent() { + // console.log(this.progressBar.innerHTML); + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..093b6c0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -13,7 +13,7 @@ footer .footerCheckout__wrapper { margin: auto auto 0 auto; } footer .footerCheckout__prateleira, -header { +header .container { width: 79.53125%; margin: 0 auto; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..d26ec35 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -7,16 +7,125 @@ align-items: center; display: flex; justify-content: space-between; + padding: 29px 131px; + border-bottom: 1px solid $color-black2; + + @include mq(pg, max) { + padding: 16px; + } + + @include mq(xxl, min) { + padding: 29px 256px; + } + } + + #progressBar { + width: 439px; + + @include mq(xxl, min) { + width: 1078.86px; + } + } + + #progressBar ul { + display: flex; + justify-content: space-between; + list-style-type: none; + margin: 0; + } + + #progressBar li .containerProgressBar { + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + font-family: "Tenor Sans", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + } + + #progressBar li.center-li { + width: auto; + } + + .containerProgressBar .progress-bar-first-line, + .progress-bar-second-line { + width: 181px; + bottom: 5px; + border: 1px solid $color-black2; + position: absolute; + margin: 0; + + @include mq(xxl, min) { + width: 444px; + bottom: 10px; + } + } + + .progress-bar-first-line { + left: 60%; + // transform: translate(-50%); + } + + .progress-bar-second-line { + right: 40%; + z-index: -1; + + @include mq(xxl, min) { + right: 58%; + } + // transform: translate(-50%); + } + + .containerProgressBar .progress-bar-first-circle, + .progress-bar-second-circle, + .progress-bar-third-circle { + margin: 0 auto; + width: 12px; + height: 12px; + margin-top: 9px; + border: 1px solid $color-black2; + border-radius: 50%; + background: $color-white; + + @include mq(xxl, min) { + width: 24px; + height: 24px; + } } &__logo { img { height: 52px; width: auto; + cursor: pointer; + + @include mq(pg, max) { + height: 32.12px; + width: 155px; + } + + @include mq(cstm, max) { + height: 33px; + width: 155px; + } + + @include mq(xxl, min) { + height: 91.2px; + } } } &__safeBuy { + display: flex; span { align-items: center; display: flex; @@ -27,10 +136,33 @@ font-size: 12px; line-height: 14px; color: $color-gray; + + @include mq(pg, max) { + line-height: 16px; + color: $color-black; + } + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + color: $color-black; + } } - i { + img { margin-right: 8px; + max-width: 12px; + height: 15px; + + @include mq(pg, max) { + height: 13.33px; + } + + @include mq(xxl, min) { + margin-right: 7.9px; + height: 41.46px; + max-width: 29.47px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..f03a179 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,10 +2,11 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; @@ -21,18 +22,20 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + pg: 1025px, + xl: 1200px, + xxl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1