diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..29f8467 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,172 @@ -/* _header.scss */ .headerCheckout { .container { width: auto !important; } &__wrapper { - align-items: center; display: flex; - justify-content: space-between; + align-items: center; + justify-content: space-around; + padding: 16px; + border-bottom: 1px solid $black; + + @media (min-width: 1025px) { + padding: 33.5px 0; + } + + @media (min-width: 2500px) { + padding: 33.5px 0; + } + } + .progress-bar { + display: flex; + flex-direction: column; + right: 31.5%; + top: 33%; + @media (max-width: 1024px) { + display: none; + } + @media (min-width: 2500px) { + right: 41%; + } + + .containerLi { + display: flex; + position: relative; + align-items: center; + } + ul { + display: flex; + margin: 0; + gap: 100px; + list-style: none; + } + + p { + margin-bottom: 0; + } + + &-text { + 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: 171px; + top: 82%; + left: 55%; + border: 1px solid $black; + z-index: 0; + + @media (min-width: 2500px) { + width: 240px; + top: 79%; + left: 55%; + } + } + + &-line-2 { + width: 166px; + left: -223%; + + @media (min-width: 2500px) { + width: 230px; + left: -143%; + } + } + + &-circle-1, + &-circle-2, + &-circle-3 { + display: flex; + height: 10px; + width: 10px; + align-self: center; + background: $white; + border: 1px solid $black; + border-radius: 50%; + margin-left: 40%; + margin-top: 9px; + padding: 0; + + @media (min-width: 2500px) { + height: 22px; + width: 22px; + } + } + + .active { + background: $black; + } } &__logo { - img { - height: 52px; - width: auto; + width: 45.35%; + + @media (min-width: 1025px) { + width: 17.059%; + } + + @media (min-width: 1025px) { + width: 15.28%; + + img { + width: 100%; + } + } + @media (min-width: 2500px) { + width: 19.22%; } } &__safeBuy { + justify-content: flex-end; + display: flex; + align-items: center; + + @media (min-width: 1025px) { + width: 15.5%; + } + + @media (min-width: 2500px) { + width: 20%; + } + span { - align-items: center; - display: flex; + min-width: fit-content; + height: 50%; text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; + 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; + } } - i { - margin-right: 8px; + img { + width: 4.5%; + min-width: 12px; + + @media (min-width: 2500px) { + width: 6.1%; + } } } }