diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 3c46fd9..2f0e98e 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,7 +5,11 @@ padding: 29px 0; #progressBar { - width: 439px; + width: 440px; + + @include mq(xg, min) { + width: 1081px; + } ul { list-style-type: none; @@ -20,7 +24,7 @@ flex-direction: column; align-items: center; justify-content: center; - width: 39.40%; + width: 100%; } li .container-li { @@ -63,6 +67,12 @@ font-weight: 400; color: $color-black2; margin-bottom: 9px; + + @include mq(xg, min) { + line-height: 28px; + font-size: 24px; + margin-bottom: 15px; + } } #progress-bar-circle-1, @@ -74,6 +84,11 @@ background-color: $color-white; border-radius: 50%; z-index: map-get($z-index, level2 ); + + @include mq(xg, min) { + width: 24px; + height: 24px; + } } #progress-bar-circle-1.active, @@ -86,18 +101,31 @@ .progress-bar-line-1, .progress-bar-line-2 { position: absolute; - width: 177px; + width: 176px; height: 1px; border-top: 1px solid $color-black2; bottom: 5px; + + @include mq(xg, min) { + width: 449px; + bottom: 10px; + } } .progress-bar-line-1 { left: 25%; + + @include mq(xg, min) { + left: 21.5%; + } } .progress-bar-line-2 { right: 25%; + + @include mq(xg, min) { + right: 21.5%; + } } } } @@ -112,6 +140,10 @@ display: block; width: 53.741%; + @include mq(xg, min) { + width: 382px; + } + img { width: 100%; height: auto; @@ -134,10 +166,19 @@ font-size: 12px; line-height: 16px; color: $color-black; + + @include mq(xg, min) { + line-height: 33px; + font-size: 24px; + } } img { width: 12px; + + @include mq(xg, min) { + width: 29px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 02599ac..0dfa0b5 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -27,7 +27,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, + xg : 2500px ) !default; $z-index: (