diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index f19f6a9..06569f2 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -193,22 +193,23 @@ export default class Header { "progress-bar-circle-1" ].classList.remove("active"); } + } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + console.log("teste 1"); + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); } } } else if (window.location.hash == "#/payment") { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index d7de79c..4459302 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -4,20 +4,29 @@ } &__wrapper { display: flex; - position: relative; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid $black; + @media (min-width: 1025px) { padding: 33.5px 130px; } + + @media (min-width: 2500px) { + padding: 33.5px 256px; + } } .progress-bar { - position: absolute; + display: flex; + flex-direction: column; right: 31.5%; top: 33%; + @media (min-width: 2500px) { + right: 41%; + } + .containerLi { display: flex; position: relative; @@ -35,40 +44,60 @@ } &-text { - font-family: "Tenor Sans"; + font-family: $font-family-secundary; font-weight: 400; font-size: 12px; line-height: 14px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } &-line-1, &-line-2 { position: absolute; - width: 181px; - top: 199%; - left: 50%; + width: 169px; + top: 82%; + left: 55%; border: 1px solid $black; + + @media (min-width: 2500px) { + width: 240px; + top: 79%; + left: 55%; + } } &-line-2 { - left: -240%; + width: 166px; + left: -223%; + + @media (min-width: 2500px) { + width: 230px; + left: -143%; + } } &-circle-1, &-circle-2, &-circle-3 { display: flex; - position: absolute; height: 10px; width: 10px; align-self: center; - background-color: $white; + background: $white; border: 1px solid $black; border-radius: 50%; margin-left: 40%; margin-top: 9px; padding: 0; - z-index: map-get($z-index, level2); + + @media (min-width: 2500px) { + height: 22px; + width: 22px; + } } .active { @@ -78,18 +107,26 @@ &__logo { width: 15.66%; + @media (min-width: 1025px) { width: 15.28%; + + img { + width: 100%; + } + } + @media (min-width: 2500px) { + width: 17.059%; } } &__safeBuy { display: flex; + position: relative; span { - display: flex; - width: 100%; - align-items: center; + min-width: fit-content; + height: 50%; text-transform: uppercase; font-family: $font-family; font-style: normal; @@ -98,11 +135,26 @@ line-height: 16px; color: $color-gray; margin-left: 8px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } img { - width: 9.19%; - height: 13.3px; + position: absolute; + width: 11.25%; + top: -11%; + left: -11px; + + @media (min-width: 2500px) { + width: 14.34%; + top: -15%; + left: -27px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 9d51f4c..8719d46 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,6 +1,7 @@ /* fonts */ @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;