diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index c2dc62a..bb3b7b1 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -13,6 +13,10 @@ width: 15.2829%; margin: 29px 0; + @include mq(xxl, min) { + width: 19.2161%; + } + img { width: 100%; } @@ -25,6 +29,12 @@ width: 12px; height: 15px; margin-right: 8px; + + @include mq(xxl, min) { + width: 29.47px; + height: 41.46px; + margin-right: 7.9px; + } } span { align-items: center; @@ -36,6 +46,11 @@ font-size: 12px; line-height: 16px; color: $color-black; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } i { @@ -46,8 +61,11 @@ .progress-bar { width: 446px; + @include mq(xxl, min) { + width: 1078.86px; + } + ul { - border: 1px solid red; list-style: none; display: flex; align-items: center; @@ -82,6 +100,12 @@ font-size: 12px; line-height: 14px; margin-bottom: 9px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + margin-bottom: 15px; + } } .progress-bar-line-left, @@ -91,16 +115,30 @@ bottom: 5px; height: 1px; border-top: 1px solid $color-black-500; + + @include mq(xxl, min) { + bottom: 11px; + } } .progress-bar-line-left { left: 26%; width: 96%; + + @include mq(xxl, min) { + left: 21.2%; + width: 434px; + } } .progress-bar-line-right { right: 21%; width: 100%; + + @include mq(xxl, min) { + right: 17.5%; + width: 450px; + } } .active { @@ -115,6 +153,11 @@ height: 12px; border: 1px solid $color-black-500; border-radius: 50%; + + @include mq(xxl, min) { + width: 24px; + height: 24px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f9652d1..9b4f872 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -28,6 +28,7 @@ $grid-breakpoints: ( md: 768px, lg: 992px, xl: 1200px, + xxl: 2500px, ) !default; $z-index: (