diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..53e754c 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -32,6 +32,7 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); + // eslint-disable-next-line prettier/prettier event.target.nextElementSibling.classList.toggle( "dropdown__content--closed" ); @@ -56,6 +57,7 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); + // eslint-disable-next-line prettier/prettier $el.attr( "src", alterarTamanhoImagemSrcVtex( diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..eca57bb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -36,3 +36,6 @@ } } } + + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..a03d2fa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -124,3 +124,4 @@ body { } } } + diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..36ff011 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,6 +2,112 @@ .headerCheckout { .container { width: auto !important; + + #progressbar{ + width: 446px; + + ul{ + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 !important; + } + + li .containerLi { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + } + + li.central .containerLi{ + align-items: center; + margin-left: 7px; + } + + li:last-child .containerLi{ + align-items: flex-end; + } + + li .containerLi div{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + li{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: "Tenor Sans", sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 28px; + color: $color-liPonto; + @media (min-width: 2500) { + font-size: 24px; + + } + } + + li.central{ + width: auto; + } + + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3{ + width: 12px; + height: 12px; + border: 1px solide $color-liPonto; + border-radius: 50%; + @media (min-width: 2500) { + width: 24px; + height: 24px; + + } + } + + li #progress-bar-circle-1.active, + li #progress-bar-circle-2.active, + li #progress-bar-circle-3.active{ + border: none; + background-color: $color-liPonto; + } + + li .progress-bar-line-1{ + position: absolute; + left: 25%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid $color-liPonto; + } + + li .progress-bar-line-2{ + position: absolute; + left: 21%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid $color-liPonto; + } + + + } + + + + + + } &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..b7b821c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-liPonto: #000000; $color-white: #fff; diff --git a/package-lock.json b/package-lock.json index 3be68c7..4024f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "jquery": "^3.6.0", "m3-utils": "^0.1.0", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4" }, "devDependencies": { @@ -19345,6 +19346,7 @@ "m3-utils": "^0.1.0", "prettier": "^2.3.2", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4", "webpack": "^5.51.1", "webpack-merge": "^5.8.0"