diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..d8243ce 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,163 @@ export default class Footer { async init() { await this.selectors(); + this.addProductShelf(); + this.addIconsFooter(); + this.addIconPayment(); + this.addCarrossel(); // this.onUpdate(); + // window.addEventListener("hashchange", () => { + // const isCartRouter = window.location.hash === "#/cart"; + // if (!isCartRouter) { + // document.querySelector(".containerCarousel").style.display = "none"; + // document.querySelector(".title-footer").style.display = "none"; + // } + // }); } async selectors() { - //Para verificar se o carrinho está vazio e remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement + this.footerShelf = await waitElement(".footerCheckout__prateleira"); + this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); + this.footerAddress = await waitElement(".footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.footerCheckoutPayment = await waitElement(".footerCheckout__payments"); } onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver - let target = this.checkoutVazio; + let target = document.querySelector(".empty-cart-content"); + let observer = new MutationObserver(handleMutationObserver); let config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); + function handleMutationObserver(mutations) { + mutations.forEach(function (mutation) { + const carrousel = document.querySelector(".containerCarousel"); + const titleFooter = document.querySelector(".title-footer"); + if (mutation.target.style.display === "none") { + carrousel.style.display = "flex"; + titleFooter.style.display = "flex"; + } else { + carrousel.style.display = "none"; + titleFooter.style.display = "none"; + } + }); + } observer.observe(target, config); } + + addProductShelf() { + const createNode = (element) => { + return document.createElement(element); + }; + + let shelf = this.footerShelf; + shelf.innerHTML = ` + +

Você também pode gostar:

+ + `; + + const url = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + + fetch(url) + .then((resp) => resp.json()) + .then(function (data) { + console.log(data); + return data.map(function (product) { + let li = createNode("li"); + li.setAttribute("id", product.productId); + li.setAttribute("class", "containerCarousel__card"); + li.innerHTML = ` +
+ +

${product.productName}

+
+
+ ${product.items + .map((size) => { + return ` + `; + }) + .join("")} +
+
+ +
+ `; + + shelf.children[1].appendChild(li); + // shelf.classList.add("fetch"); + }); + }); + } + + addIconsFooter() { + this.footerStamps.children[0].innerHTML = ` +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ `; + this.footerStamps.children[2].innerHTML = ` +
+ +
+ `; + } + + addIconPayment() { + this.footerDevelopedBy.children[0].children[0].innerHTML = ` + ${this.footerDevelopedBy.children[0].children[0].children[0].innerHTML} +
+ +
+ `; + this.footerDevelopedBy.children[1].children[0].innerHTML = ` + ${this.footerDevelopedBy.children[1].children[0].children[0].innerHTML} +
+ +
+ `; + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + const elemento = await waitElement(".containerCarousel"); + if (window.innerWidth > 1024) { + $(elemento).slick({ + slidesToShow: 4, + slidesToSrcoll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..065bfe5 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,108 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarHtml(); + this.progressBarProgress(); + this.changeProfileParagraf(); + this.changeContents(); + window.addEventListener("hashchange", () => { + this.progressBarProgress(); + }); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); + this.profileParagraf = await waitElement(".client-notice"); + this.changeLinkHeader = await waitElement("a#cart-choose-products"); + this.changeTextHeader = await waitElement("div.empty-cart-message p"); + } + + progressBarHtml() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` +
+
+

Meu carrinho

+
+
+
+

Dados Pessoais

+
+
+ +
+

Pagamento

+
+
+ +
+
+
+
+
+
+
+ `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + + checkActiveColor(elements, index) { + elements.forEach((element, position) => { + if (index === position) { + if (!element.classList.contains("active")) { + element.classList.add("active"); + } + } else { + if (element.classList.contains("active")) { + element.classList.remove("active"); + } + } }); } + + progressBarProgress() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#circle-progress"); + progressBarLista.forEach((_element, _index, array) => { + const urlCart = "https://m3academy.myvtex.com/checkout/#/cart"; + const urlEmail = "https://m3academy.myvtex.com/checkout/#/email"; + const urlProfile = "https://m3academy.myvtex.com/checkout/#/profile"; + const urlShipping = "https://m3academy.myvtex.com/checkout/#/shipping"; + const urlPayment = "https://m3academy.myvtex.com/checkout/#/payment"; + switch (window.location.href) { + case urlCart: + this.checkActiveColor(array, 0); + break; + case urlEmail: + this.checkActiveColor(array, 1); + break; + case urlProfile: + this.checkActiveColor(array, 1); + break; + case urlShipping: + this.checkActiveColor(array, 1); + break; + case urlPayment: + this.checkActiveColor(array, 2); + break; + default: + } + }); + } + } + + changeProfileParagraf() { + this.profileParagraf.innerHTML = ` +

Identificação

+ `; + } + + changeContents() { + this.changeTextHeader.innerText = ""; + this.changeLinkHeader.innerText = "CONTINUAR COMPRANDO"; + } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..a6d143a 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,6 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira.scss"; @import "./checkout/checkout.scss"; + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..8b76817 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -8,9 +8,20 @@ a { color: $color-black; font-size: 14px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + + /* Black */ + + color: #000000; &:hover { - color: lighen($color-black, 10); + color: lighen($color-black-full, 10); } } } @@ -25,12 +36,36 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; + + @media(max-width:375px) { + font-size: 12px; + line-height: 14px; + width: 343px; + } } small { - color: $color-gray4; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; + + @media(max-width:375px) { + font-size: 12px; + line-height: 14px; + } } } } @@ -40,10 +75,11 @@ input { box-shadow: none; - color: $color-black; + color: $color-black-full; font-family: $font-family; + font-weight: 400; padding: 0 16px; - border: 2px solid $color-gray3; + border: 2px solid $color-black-full; box-sizing: border-box; border-radius: 5px; @@ -53,7 +89,17 @@ } button { - background-color: $color-black; + background-color: $color-blue2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + color:$color-black-full; border-radius: 5px; border: none; font-family: $font-family; @@ -69,19 +115,26 @@ } span.help.error { - color: red; + color: $color-red; + font-size: 12px; + line-height: 16px; + font-weight: 700; } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black-full; + border-radius: 5px; h3 { - color: #303030; + color:$color-black-full; margin: 0 0 8px 0; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; } ul { @@ -89,11 +142,17 @@ li { span { - color: $color-black; + color:$color-black-full; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; + font-size: 12px; + } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; } @@ -112,8 +171,8 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; @@ -123,6 +182,7 @@ margin-bottom: 8px; padding: 0; + i::before { fill: #303030; } @@ -146,20 +206,33 @@ /* General configurations */ .client-notice { - color: $color-black; + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; } p { label { - color: $color-black; - font-weight: 500; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + width: 100%; + } select, input { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray9; box-shadow: none; + + } .help.error { @@ -173,6 +246,7 @@ color: $color-black; font-weight: 500; text-decoration: underline; + display: none; } } @@ -183,17 +257,25 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $color-blue2; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; &:hover { - background: lighten($color-black, 5); + background: lighten($color-blue2, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-blue2, 5); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..95621e9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -48,7 +48,7 @@ } .cart { - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; ul li { border-top: none; @@ -85,18 +85,26 @@ } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + background: $color-green; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($color-green, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-green, 5); } } } @@ -114,7 +122,7 @@ color: $color-black; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -155,7 +163,7 @@ } a { - color: $color-blue; + color: $color-black-full; font-style: normal; font-weight: normal; font-size: 12px; @@ -179,7 +187,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -190,6 +198,12 @@ .product-price { min-width: 100px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black; @include mq(md, max) { min-width: 78px; } @@ -216,13 +230,13 @@ } td.quantity { + border-radius: 8px; align-items: center; border: 1px solid $color-gray3; - border-radius: 0; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 23px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -234,7 +248,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 1px solid transparent; border-radius: 0; border-width: 0 1px; display: block; @@ -242,7 +256,7 @@ margin: 0 !important; padding: 8px 0; width: 38px; - color: $color-gray2; + color: $color-black-full; box-shadow: none; @include mq(lg, max) { @@ -253,7 +267,7 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-white; display: block; font-weight: 500; padding: 1px 12px; @@ -262,15 +276,17 @@ .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + border-radius: 50%; + font-size: 20px; + color: $color-blue2; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 14px; + font-size: 20px; + color: $color-blue2; + border-radius:50%; } } @@ -297,9 +313,9 @@ } span { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; color: $color-black; } } @@ -315,7 +331,7 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray7; font-size: 15px; @include mq(md, max) { @@ -355,8 +371,8 @@ font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black-full; @include mq(md, max) { margin-top: 0; @@ -365,20 +381,21 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-weight: 400; + font-size: 14px; line-height: 18px; margin: 0 0 12px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray8; border: none; border-radius: 5px; - color: $color-gray2; - font-size: 16px; + color: $color-black-full; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: 400; outline: none; padding: 12px 40px; transition: all 0.2s linear; @@ -405,25 +422,26 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + padding: 12px 35px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -439,17 +457,17 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px; text-transform: uppercase; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-full; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black-full; } label { @@ -462,6 +480,9 @@ } .srp-postal-code { + .ship-country { + display: none; + } .ship-postalCode { label { font-family: $font-family; @@ -471,6 +492,7 @@ line-height: 14px; color: $color-black; margin-bottom: 12px; + } input { @@ -485,9 +507,9 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; font-size: 12px; height: 36px; @@ -608,7 +630,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; text-decoration: none; } } @@ -630,7 +652,9 @@ } .coupon-label label { - margin-bottom: 12px; + margin-bottom:0; + text-align: left; + margin-left: 38px; font-family: $font-family; font-style: normal; font-weight: normal; @@ -673,17 +697,16 @@ } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-black-full; + font-size: 14px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; text-transform: uppercase; @include mq(md, max) { @@ -691,11 +714,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -713,7 +736,7 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; @@ -734,9 +757,9 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -776,31 +799,31 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue2, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black-full; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..25476e5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -3,35 +3,47 @@ &-content { color: $color-black; text-align: center; - - @include mq(md, max) { - padding: 0 16px; - } } &-title { - font-size: 20px; - } + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; + + + @media(max-width:375px) { + font-size: 18px; + line-height: 25px; + width: 300px; + margin-right: 15px; + } + + + } + &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: $color-white; + border: 1px solid $color-black-full; transition: ease-in 0.22s all; outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; font-size: 14px; line-height: 16px; text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + text-transform: uppercase; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + color: $color-black-full; &:hover { - background: lighten($color-black, 5); + background: lighten($color-white, 5); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..48e73f3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,11 +9,10 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, -header { +footer .footerCheckout__prateleira { width: 79.53125%; margin: 0 auto; } @@ -49,8 +48,14 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 80%; + + @media(max-width:375px) { + margin-left: 16px; + } } + + } .btn-success { @@ -68,13 +73,13 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black-full; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..1349d4e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,10 +4,19 @@ color: $color-gray2; &__wrapper { - align-items: center; display: flex; + width: 100%; + border-top: 1px solid $color-black-full; + + + .container { + display: flex; + width: 100%; justify-content: space-between; } + } + + &__address { color: $color-gray2; @@ -18,6 +27,12 @@ line-height: 12px; text-transform: capitalize; max-width: 40%; + display: flex; + align-items: center; + + span { + margin-left: 32px; + } @include mq(md, max) { margin-bottom: 24px; @@ -31,6 +46,13 @@ justify-self: center; list-style: none; + li:first-child { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + } @include mq(md, max) { align-self: center; margin-bottom: 12px; @@ -71,4 +93,28 @@ } } } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; + } + } + +figure { + width: 100%; + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + + + diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..aca275c 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,11 +2,96 @@ .headerCheckout { .container { width: auto !important; + + header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } + + .container-progress-bar { + width: 440px; + display: flex; + flex-direction: row; + height: 100px; + justify-content: space-between; + position: relative; + } + + .step-one, .step-two, .step-three { + width: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + p { + font-family: 'Tenor Sans'; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black-full; + } + } + + .box-progress-bar { + position: absolute; + top: 43%; + z-index: -1; + transform: translateY(-50%); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 22px; + width: 100%; + height: 10px; + } + + .bar-one { + width: calc(50% - 50px); + height: 1px; + background-color: #000; + } + + .bar-two { + width: calc(50% - 50px); + height: 1px; + background-color: #000; + } + + .circle-progress1, .circle-progress2, .circle-progress3 { + width: 12px; + height: 12px; + border-radius: 6px; + background-color: #fff; + border: 1px solid #000; + } + + .active { + border: none; + background-color:#000; + } + + .step-one p, .step-two p, .step-three p { + line-height: 15px; + margin-bottom: 15px; + text-align: center; + } + + .line { + position: relative; + width: 100%; + } + } &__wrapper { align-items: center; display: flex; - justify-content: space-between; + justify-content:space-around; + width: 100%; + border-bottom: 1px solid black; } &__logo { @@ -17,6 +102,8 @@ } &__safeBuy { + + display: flex; span { align-items: center; display: flex; @@ -26,7 +113,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-gray; + color: $color-black; } i { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..aefa751 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,148 @@ /* _prateleira.scss */ + .containerCarousel { + display:flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 16px; + width: 100%; + + @include mq(cstm, max) { + display: flex; + flex-direction: column; + } + + + &__card { + width: 95% !important; + margin-bottom: 54px; + } + + &__image { + width: 100%; + height: 242px; + background-color:$color-gray5; + } + + + &__title { + font-family: $font-family; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black-full; + margin-bottom: 20px; + width: 242px; + height: 18px; + } + + &__div { + display: flex; + align-items: center; + justify-content: center; + padding: 0 20px 20px; + gap: 5px; + + } + + &__sku { + min-width: 26px; + height: 28px; + background: $color-blue2; + border-radius: 8px; + padding: 4px; + color: $color-white; + font-weight: 700; + font-size: 13px; + line-height: 18px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + border-width: 0; + display: flex; + flex-direction: row; + } + +} + +.buttonDiv { + display: flex; + align-items: center; + justify-content: center; + + &__card { + background: $color-blue2; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + padding: 12px 0; + width:242px; + height:42px; + border:none; + } +} + +.icon-image { + width: 36.52px; + height: 20px; + display: flex; + flex-direction: row; +} + +.icons { + margin-right: 13.2px; +} + +img { + display: flex; + flex-direction: column; + margin-top: 17px; + margin-right: 8px; + height: 15px; + margin-bottom: 20px; +} + + +hr { + width: 100%; + height: 2px; + border-top: 1px solid $color-black-full; + margin-bottom: 65px; +} + +.title-footer { + display: flex; + justify-content: center; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black-full; +} + + +.slick-prev { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + left: 22px; + top: 41%; + border: none; + height: 30px; +} +.slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + right: 20px; + top: 41%; + border: none; + height: 30px; +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..ab57814 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,23 +6,35 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; - +$color-black-full:#000000; $color-white: #fff; - +$color-white2:#E5E5E5; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #989898; +$color-gray7: #C4C4C4;; +$color-gray8: #ededed; +$color-gray9: #BDBDBD; +$color-gray10:#808080; + + + + + +$color-red: #FF0000; $color-blue: #4267b2; +$color-blue2:#00C8FF; $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - cstm: 400, + cstm: 375px, sm: 576px, md: 768px, lg: 992px, diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..2cf5bfa 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -36,3 +36,4 @@ + diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..16d0f04 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -18,3 +18,6 @@ + + +