diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..db823f6 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,18 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black2; + .container { width: auto !important; + margin: 0; + padding: 24px 131px; + + @include mq(xl, min) { + padding: 29px 256px; + } } + &__wrapper { align-items: center; display: flex; @@ -11,26 +21,127 @@ &__logo { img { - height: 52px; - width: auto; + width: 155px; + height: 37px; + + @include mq(xl, min) { + width: 382px; + height: 91px; + } } } &__safeBuy { + display: flex; + align-items: center; + span { - align-items: center; - display: flex; + font-weight: 400; + line-height: 16px; text-transform: uppercase; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + color: $color-black1; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } } - i { + img { + width: 12px; + height: 14px; margin-right: 8px; + + @include mq(xl, min) { + width: 29px; + height: 41px; + } + } + } + + .progress-bar { + display: flex; + width: 439px; + height: 35px; + justify-content: space-between; + + @include mq(xl, min) { + width: 1078px; + height: 67px; + } + + &__container-items { + list-style: none; + } + + &__container-item { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + &__circle1, + &__circle2, + &__circle3 { + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid $color-black2; + + @include mq(xl, min) { + height: 24px; + width: 24px; + } + } + + &__line1, + &__line2 { + position: absolute; + background-color: $color-black2; + height: 1px; + bottom: 6px; + + @include mq(xl, min) { + bottom: 12px; + } + } + + &__line1 { + left: 59%; + width: 162px; + + @include mq(xl, min) { + width: 437px; + } + } + + &__line2 { + right: 60%; + width: 155px; + + @include mq(xl, min) { + width: 420px; + } + } + + .active { + background-color: $color-black2; + } + + &__text { + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } }