diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..5ac7bfe 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -1,3 +1,4 @@ +/* eslint-disable prettier/prettier */ import { isSmallerThen768 } from "../helpers/MediasMatch"; import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils"; import waitForEl from "../helpers/waitForEl"; @@ -32,6 +33,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" ); @@ -39,6 +41,7 @@ export default class CheckoutUI { init() { this.configThumb(); + this.removerTitulo(); waitForEl(".product-image img", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); } @@ -56,6 +59,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( @@ -66,4 +70,25 @@ export default class CheckoutUI { ); }); } + + async removerTitulo(){ + let orderForm = await window.vtexjs.Checkout.getOrderForm(); + let items = orderForm.items.length; + let idCart = document.querySelector("#cart-title"); + + $(window).on("orderFormUpdated.vtex", (evt, of) => { + if(of.items.length <= 0){ + idCart.style.display = "none"; + } + else { + idCart.style.display = "block"; + } + if( window.location.hash === '#/shipping' || window.location.hash === '#/payment' ){ + idCart.style.display = "none"; + } + }); + if(items === 0){ + idCart.style.display = "none"; + } + } } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..f46fd3e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,40 +1,228 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable prettier/prettier */ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); + } + async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.mostraFooter(); + this.addCarrossel(); + this.titles(); + this.events(); } 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.footerPratileira = await waitElement(".footerCheckout__prateleira"); + this.footerAddress = await waitElement(".footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); + this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.cartTitulo = await waitElement("#cart-title"); } + + + + events() { + window.addEventListener("hashchange", () => { + this.onUpdate(); + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.mostraFooter.style.display = "flex"; + + } + if (window.location.hash != "#/cart") { + this.mostraFooter.style.display = "block"; + } + }); + } 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 prateleiraItens = this.footerPratileira; + let titulo = this.cartTitulo; + if (target.style.display == "none" && window.location.hash == "#/cart") { + titulo.style.display = "block"; + + + } else { + titulo.style.display = "none"; + prateleiraItens.style.display = "none"; + } + let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + + mutations.forEach(function (mutation) { - console.log(mutation.type); + + if (target.style.display != "none") { + + prateleiraItens.style.display = "none"; + titulo.style.display = "none"; + } else { + prateleiraItens.style.display = "flex"; + + titulo.style.display = "block"; + } }); }); observer.observe(target, config); } + + + + + mostraFooter() { + let pratileira = this.footerPratileira; + pratileira.innerHTML = ` + +

Você Também pode gosta:

+ + + ` + + fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") + + .then((Response) => Response.json()) + .then(function (data) { + return data.map(function (produto) { + + let li = document.createElement("li") + li.setAttribute("id", produto.productId) + li.innerHTML = ` + + + Imagem + +

${produto.productName}

+
+ + ${produto.items.map((name) => { + return ` ${name.name} + + ` }).join(" ")} +
+ + + + + ` + pratileira.children[1].appendChild(li) + // console.log(pratileira) + + }); + + }).then(() => { this.addCarrossel();}); + + + this.footerStamps.innerHTML = ` + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    • +
  • + +
    • + + + `; + + + this.footerDevelopedBy.innerHTML = ` + +
  • + Power By + + + Developed By + +
    • + + + + + + + `; + } + + titles(){ + const test = document.querySelector(".empty-cart-title"); + test.innerHTML = ` +

    Seu Carrinho está vazio.

    ` + + const vv = document.getElementById("cart-choose-products"); + vv.innerHTML = ` +

    Continuar comprando.

    ` + + + + + + + } + + + + + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carrossel-item"); $(elemento).slick({ + + infinite: false, + arrows: true, + variabreWidth: true, slidesToShow: 4, slidesToScroll: 1, + responsive: [ + + { + breakpoint: 1025, + settings: + {slidesToShow: 3, + slidesToScroll: 1,} + }, + { + breakpoint:376, + settings: + {slidesToShow: 2, + slidesToScroll: 1,} + } + ] + + }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..18fd35c 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,21 +1,219 @@ -// import waitForEl from "../helpers/waitForEl"; +/* eslint-disable prettier/prettier */ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + this.progressBarHTML(); + + } async init() { await this.selectors(); - console.log(this.item); + this.progressBarHTML(); + await this.progressBarProgress(); + this.Carrinho(); + } 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"); + console.log(this.header); + this.progressBar = await waitElement("#progressBar"); + console.log(this.progressBar); } + // Primeira parte para coloca o html na page + progressBarHTML() { + // eslint-disable-next-line no-empty + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + + + + + `; + } + + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + + circle1(li) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + li.children[0].children[0].children["progress-bar-circle-1"].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); + } + } + } + } + + circle2(li) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + li.children[0].children[0].children["progress-bar-circle-2"].classList.add("active"); + } + + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); + } + } + } + + circle3(li) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children["progress-bar-circle-3"].classList.add("active"); + } + } + + async progressBarProgress() { + + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#progressBar ul li"); + progressBarLista.forEach((li) => { + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + this.circle1(li); + } + else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + this.circle2(li); + } + else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + this.circle3(li); + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + this.circle1(li); + } + else if (window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping"){ + this.circle2(li); + } + else if (window.location.hash == "#/payment"){ + this.circle3(li); + } + + }) + + + + + + }); + + + + + } + ; } + + Carrinho(el){ + + +const ggs = document.querySelector(".empty-cart-content") + + if(el.children[0].children[0].children["empty-cart-content"] ){ + + document.getElementById("cart-title").style.display = 'block'; + }{ + document.getElementById("cart-title").style.display = 'none'; + + console.log("dhd", ggs) +} + // const cart = document.querySelectorAll(".checkout-container"); + // cart.forEach((li) =>{ + // if( li.children[0].children[0].children["empty-cart-content"].classList.contains ("none" ) ) { + // li.children[0].children[0].children["hide"].style.display = "block"; + // console.log(sgsgsh) + + // } + // { + // li.children[0].children[0].children["hide"].style.display = "none"; + // } + + // }) +}; + +} +; diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..c533b61 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,3 +3,4 @@ @import "./partials/header"; @import "./partials/footer"; @import "./checkout/checkout.scss"; +@import "./partials/prateleira"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..404892e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,560 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-gray4; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + color: $color-black; + font-size: 14px; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 16px; - span { - color: #303030; - font-size: 24px; - } + span { + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-liPonto; + } - small { - color: $color-gray4; - } - } - } + small { + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-liPonto; + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 16px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + color: $color-black; + font-family: $font-family; + padding: 0 16px; + border: 2px solid $color-gray3; + box-sizing: border-box; + border-radius: 5px; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 490px) { + width: auto; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + button { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + background-color: $color-finalizar; + border-radius: 5px; + border: none; + // font-family: "Open Sans",sans-serif; + height: 54px; + right: 0; + top: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { - color: red; - } - } + span.help.error { + color: red; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-gray4; + border-radius: 0; - h3 { - color: #303030; - margin: 0 0 8px 0; - } + h3 { + color: #303030; + margin: 0 0 8px 0; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { - color: $color-black; - } + li { + span { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + align-items: center; - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + color: $color-liPonto; + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + i::before { + color: $color-finalizar; + font-size: 1rem; + opacity: 1; + } + } + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - i::before { - fill: #303030; - } - } + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 16px; - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } - .accordion-inner { - padding: 0; - /* General configurations */ - .client-notice { - color: $color-black; - } + @media (max-width: 375px) { + margin: 28px 16px 17px 0px; + border: 1px solid #F0F0F0; + border-radius: 8px; + width: 87% !important; - p { - label { - color: $color-black; - font-weight: 500; - } + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + @media (max-width: 1024px) { + width: 96%; + } - .help.error { - color: red; - } - } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } - .state-inscription-box span { - font-weight: 500; - } + .accordion-heading { + .accordion-toggle-active{ + i::after{ + content: ""; + } + } + span { - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + margin-bottom: 8px; + padding: 0; + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; - &:hover { - background: lighten($color-black, 5); - } + i::before { + content: ""; + // fill: #303030; + // display: none; + } - &:active { - background: darken($color-black, 5); - } - } + i::after { - /* Shipping configurations */ + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") ; + background-repeat: no-repeat; + background-size: 100% 100%; + width: 20px; + height: 20px; + display: block; + content: ""; + float: right; - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + } + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + a { + align-items: center; + // background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + opacity: 0; + cursor: pointer; + } + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + .accordion-inner { + // margin: 0 0 0 17px; + padding: 0; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + /* General configurations */ - svg path { - fill: #d8c8ac; - } - } - } - } + .client-notice { + color: $color-black; - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + @media (max-width: 1024px) { + display: none; - .shp-summary-group-info { - border-color: $color-gray4; - } + } + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .vtex-omnishipping-1-x-SummaryItemContent { + display: block; - @include mq(md, max) { - background-position: 8px 9px; - } + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + p { + label { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + margin-bottom: 3px; - .shp-summary-group-price { - padding-right: 16px; - } + } + + select, + input { + width: 97%; + border-radius: 8px; + border: 1px solid #E0E0E0; + box-shadow: none; + } + + .help.error { + color: red; + } + } + + .box-client-info-pj { + + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-gray2; + font-weight: 500; + text-decoration: underline; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + button.submit { + width: 100%; + border: none; + border-radius: 5px; + background: $color-finalizar; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + &:hover { + background: lighten($color-black, 5); + } + + &:active { + background: darken($color-black, 5); + } + } + + /* Shipping configurations */ + + .ship-postalCode small a { + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: #292929; + + // color: #303030; + // font-weight: 500; + // text-decoration: underline; + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + margin-bottom: 11px; + // color: #303030; + // font-size: 14px; + // font-weight: 500; + } + + .shp-lean { + + border: 1px solid #E0E0E0; + border-radius: 8px; + // border: 1px solid $color-gray4; + // border-radius: 0; + + label { + // background-color: $color-white; + // box-shadow: none; + // color: #303030; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + /* Neutras/Cinza */ + + color: #7D7D7D; + padding: 8px 12px; + + svg path { + fill: transparent; + // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + } + } + } + + .delivery-address-title { + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + padding: 11px; + // color: #303030; + // font-size: 14px; + // font-weight: 500; + } + + .shp-summary-group-info { + border-color: $color-gray4; + } + + .address-summary { + background: none; + border-color: $color-gray4; + color: #303030; + padding: 12px; + + border-radius: 8px; + + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } + + .shp-summary-group-price { + padding-right: 16px; + } + + .shp-summary-package { + padding-left: 16px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + display: none; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background: #FFFFFF; + + // background-color: #d8c8ac; + // border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-gray2; + + // text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } + + .shp-option-text-label { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + } - .shp-summary-package { - padding-left: 16px; - } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } +} + +.street, +.city, +.state-delimiter, +.state { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; +} + +.link-edit { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: none; + color: #00C8FF; + text-decoration: none; +} + +.vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingTextLabe { + color: $color-gray2; + } +} + +.client-profile-data { + .accordion-group { + .accordion-heading { + .accordion-toggle { + &::after { + content: "Identificação"; + font-size: 16px; + + @media (max-width: 1024px) { + margin-left: 12px; + } + } + } + + + } + + + span { + color: #303030; + margin-bottom: 25px; + padding: 0; + font-size: 0 !important; + + + + i::before { + display: none; + fill: #303030 + } + } + + // // a { + // // align-items: center; + // // background: transparent; + // // background-color: white; + // // border-radius: 8px; + // // border: none; + // // color: white; + // // display: flex; + // // justify-content: center; + // // padding: 0; + // // margin-top: 10px; + + // // &::after { + // // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + // // background-size: 20px; + // // width: 20px; + // // height: 20px; + // // content: ""; + // // } + + // // img { + // // width: 20px; + // // height: 20px; + // // } + // // } + + // // } + } + + +} + + + + + +.row-fluid { + @media (max-width: 1024px) { + width: 99%; + margin-left: 5px; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..11b4b9c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,18 +6,30 @@ .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; } + .item-unit-label { display: none; } + .cart { border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + @media (max-width: 375px) { + padding: 7px 16px; + + .product-name { + margin: 0; + } + + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -25,18 +37,38 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; - width: 100%; + width: 99%; + height: 397px !important; + border: 1px solid #E5E5E5; + + @media (max-width: 1024px) { + width: 99%; + margin-left: 5px; + height: 397px !important; + margin-top: 17px; + border: 1px solid #E5E5E5; + border-radius: 8px; + } + h2 { + margin: 24px 0 0 17px; + text-align: start; background: $color-white; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + // color: #303030; + // font-size: 14px; + // font-weight: 500; } .item-unavailable { @@ -49,8 +81,10 @@ .cart { border: 1px solid $color-gray4; + border: none; ul li { + margin: 0 0 0 7px; border-top: none; margin-top: 0; padding-top: 0; @@ -63,7 +97,13 @@ .shipping-date, .price { - color: #7d7d7d; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + color: $color-liPonto; } } } @@ -71,26 +111,53 @@ .summary-template-holder { border-top: none; background: $color-white; + + .accordion-inner { + padding: 0; + margin: 0 0 0 5px; + + @media (max-width: 1024px) { + margin: 19px -14px 0px 18px; + + } + } } #go-to-cart-button a { - color: #303030; - text-decoration: underline; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + text-decoration-line: underline; + color: $color-liPonto; + margin: 0 17px 0 0; } .summary-totalizers { td.info { width: 100%; + padding: 50px 5px 0 0; } + } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + background: #298541; + border-radius: 8px; color: $color-white; - outline: none; - transition: all 0.2s linear; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + &:hover { background: lighten($color-black, 5); } @@ -106,24 +173,61 @@ } .cart-items { + .product-item { padding: 16px 0; } + span, + .product-name, + .total-selling-price, + .old-product-price, + .new-product-price, + .new-product-price-label, + .best-price, + .quantity-price span, + .product-name a { + @media (min-width: 2500px) { + font-weight: 400 !important; + font-size: 24px !important; + line-height: 28px !important; + + + } + } + + .quantity {} + th { color: $color-black; - padding: 0 0 16px; + padding: 0 0 30px 0; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; @include mq(md, max) { + &.quantity-price, &.shipping-date { display: none; } } + + @media (max-width: 1024px) { + display: none; + + + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + + + } + } .product-image { @@ -131,6 +235,11 @@ padding: 0; width: 60px; + @media (max-width: 1024px) { + padding: 5px; + } + + @include mq(sm, max) { width: 72px; } @@ -140,6 +249,13 @@ max-width: 100%; width: auto; + @media (max-width: 1024px) { + height: 90px; + max-width: 100%; + width: 60px; + + } + @include mq(sm, max) { height: 72px; width: auto; @@ -148,16 +264,37 @@ } .product-name { + width: 36.796%; + white-space: normal; + white-space: normal; + margin: 15px 0 0 7px; padding-right: 0; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + color: #000000; + + @media (max-width: 375px) { + margin: 0; + + } + + @media (max-width: 1024px) { + display: block; + + } @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + color: black; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; @@ -168,7 +305,7 @@ } @media (max-width: 490px) { - margin-left: 23px; + margin-left: 16px; } } @@ -190,11 +327,13 @@ .product-price { min-width: 100px; + @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { - position: absolute; + // position: absolute; bottom: 0; right: 0; } @@ -204,6 +343,7 @@ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -227,14 +367,24 @@ max-width: 118px; padding: 0; width: max-content !important; + border: 1px solid #f0f0f0; + border-radius: 8px; @media (max-width: 490px) { - margin-left: 84px !important; + margin-left: 74px !important; + } + + @media (max-width: 1024px) { + margin: 0 auto 0 0; + } + + @media (min-width: 2500px) { + margin-top: 35px; } input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 1px solid transparent; border-radius: 0; border-width: 0 1px; display: block; @@ -257,24 +407,35 @@ display: block; font-weight: 500; padding: 1px 12px; + } } .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + // content: "-"; + + font-size: 20px; + color: $color-finalizar; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 14px; + // content: "+"; + + font-size: 20px; + color: $color-finalizar; } } .item-quantity-change { + + // margin: 0 11px; + // background: #00C8FF; + // width: 16px; + // height: 16px; + // border-radius: 8px; @media (max-width: 979px) and (min-width: 768px) { position: inherit; bottom: inherit; @@ -295,12 +456,24 @@ .icon-question-sign { display: none; } - span { + + .total-selling-price { + font-family: 'Open Sans'; font-style: normal; - font-weight: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #292929; + + } + + span { + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; + color: #292929; } } @@ -308,12 +481,18 @@ @include mq(md, max) { display: none; } + + @media (min-width: 2500px) { + padding-right: 20px; + + } } .item-remove { @media (max-width: 490px) { top: 0; } + .icon::before { color: $color-gray4; font-size: 15px; @@ -346,17 +525,33 @@ .srp-container { padding: 0 0 0 10px; + @media (min-width: 375px) { + padding: 0 !important; + margin: 0 !important; + + } + + @media (max-width: 1024px) { + padding: 0; + margin: 16px; + + } + @include mq(md, max) { padding: 0 16px; } .srp-main-title { margin: 32px 0 12px; + font-family: "Open Sans"; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + display: flex; + align-items: center; + text-align: center; + color: $color-liPonto; @include mq(md, max) { margin-top: 0; @@ -375,10 +570,10 @@ border: none; border-radius: 5px; color: $color-gray2; - font-size: 16px; + font-size: 14px; letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; + line-height: 18px; + font-weight: 400; outline: none; padding: 12px 40px; transition: all 0.2s linear; @@ -405,17 +600,18 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-finalizar; border: none; border-radius: 5px; color: $color-white; outline: none; width: 100%; + font-family: "Open Sans"; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { @@ -444,17 +640,37 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-liPonto; border-radius: 100px; } .blue { - color: $color-blue; + ont-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + align-items: center; + text-transform: uppercase; + color: #000; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + + } } label { width: 50%; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + } + &:active { background-color: #f0f0f0; } @@ -466,11 +682,11 @@ label { font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; - line-height: 14px; - color: $color-black; - margin-bottom: 12px; + line-height: 16px; + + color: $color-liPonto; } input { @@ -484,8 +700,8 @@ width: 172px; } - & ~ button { - background-color: $color-black; + &~button { + background-color: $color-finalizar; border: none; border-radius: 5px; color: $color-white; @@ -498,6 +714,11 @@ top: 36px; transition: all 0.2s linear; width: 96px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; text-transform: uppercase; &:hover { @@ -531,6 +752,7 @@ } .srp-result { + strong, .srp-items { color: #303030; @@ -594,14 +816,25 @@ padding: 0; width: 346px; + @media (max-width: 1024px) { + width: 100%; + + } + + @media (min-width: 2500px) { + width: 688px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; + &:hover { text-decoration: underline; cursor: pointer; } } + span { font-family: $font-family; font-style: normal; @@ -630,6 +863,7 @@ } .coupon-label label { + display: flex; margin-bottom: 12px; font-family: $font-family; font-style: normal; @@ -638,9 +872,16 @@ line-height: 14px; color: $color-gray2; cursor: none; + + @media (max-width: 1024px) { + display: flex; + margin-left: 15px; + + } } .coupon-fields { + display: flex; margin-bottom: 32px; @include mq(sm, max) { @@ -648,6 +889,7 @@ display: flex; flex-direction: row; justify-content: space-between; + i { position: absolute; right: 91px; @@ -662,9 +904,14 @@ box-shadow: none; color: $color-gray4; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + height: 32px; + width: 204px; + + @media (max-width: 1024px) { + width: 100%; + max-width: 853px; + + } @include mq(sm, max) { max-width: 100%; @@ -673,26 +920,33 @@ } button { - background: $color-black; + background: $color-finalizar; border: none; border-radius: 5px; - color: $color-white; - font-size: 12px; + color: $color-liPonto; + height: 36px; letter-spacing: 1px; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + // width: 94px; text-transform: uppercase; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + @include mq(md, max) { width: 138px; } - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } &:active { background-color: darken($color-black, 5); @@ -704,6 +958,7 @@ .accordion-group { tr { border-color: #e5e5e5; + // border-top: 1px solid; td { &.empty { @@ -715,29 +970,62 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; - color: $color-black; - padding: 12px 0; + // border-bottom: 1px solid #f4f4f4; + // padding: 50px 5px 0 0; + + @media (max-width: 1024px) { + padding: 0 17px 10px 16px; + + } + + @media (max-width: 375px) { + padding: 10px; + + } + + @media (min-width: 2500px) { + + font-weight: 400 !important; + font-size: 28px !important; + line-height: 33px !important; + } } &.info { text-align: left; + + @media (max-width: 1024px) { + margin-top: 43px; + + } } &.monetary { text-align: right; + + @media (min-width: 2500px) { + width: 153px; + + } } } } tfoot { + td.info, td.monetary { + // padding: 0 17px 0 0; font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; + font-weight: 400; + font-size: 14px; + line-height: 19px; color: $color-black; + font-family: "Open Sans"; + // font-style: normal; + // font-weight: 700; + // font-size: 18px; + color: #292929; } } } @@ -749,6 +1037,26 @@ flex-direction: column; width: 343px; + @media only screen and (min-width: 375px) { + padding: 0 !important; + + } + + + @media only screen and (max-width: 1024px) { + width: 97%; + padding-bottom: 0; + margin: 0 15px; + + } + + @media only screen and (min-width: 2500px) { + width: 688px; + + } + + + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -757,8 +1065,8 @@ } @include mq(md, min) { - margin: 0; - padding-bottom: 50px; + // margin: 0; + // padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -777,12 +1085,20 @@ font-size: 12px; line-height: 14px; color: $color-blue; + + @media (min-width: 2500px) { + + font-weight: 400; + font-size: 24px; + line-height: 28px; + + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-finalizar; border: none; border-radius: 5px; display: block; @@ -790,6 +1106,9 @@ transition: ease-in 0.22s all; padding: 12px 19px; + + + &:hover { background-color: darken($color-green, 5); } @@ -797,16 +1116,112 @@ &: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-liPonto; text-transform: uppercase; vertical-align: middle; line-height: 19px; text-shadow: none; + + @media (min-width: 2500px) { + + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } } } + +.coupon-fieldset { + padding-top: 40px; +} + +.item-remove { + + display: block; + margin: -20px; +} + +.coupon-data { + margin-bottom: 20px; +} + + +.icon-lock { + &::before { + display: none; + content: ""; + } +} + +.ship-number, +.ship-complement, +.ship-receiverName { + width: 100%; + margin-bottom: 15px; + + +} + +.vtex-shipping-preview-0-x-pc .ship-country { + display: none; +} + +.description { + + span.pull-left { + display: none; + } +} + +.cart-items tbody td { + vertical-align: middle; + padding: 0px; + margin: 0px; +} + +.vtex-omnishipping-1-x-svg { + // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + border: 1px solid #C4C4C4; + border-radius: 3px; +} + +.vtex-omnishipping-1-x-leanShippingOptionActive { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); +} + + +p.client-document { + margin-right: 4px; +} + +.ship-postalCode { + display: contents; +} + +.input-small { + @media (max-width: 1024px) { + width: 97% !important; + max-width: unset; + } + +} + +.vtex-omnishipping-1-x-addressFormPart1 input { + @media (max-width: 1024px) { + width: 97% !important; + max-width: unset !important; + } +} + +.srp-main-title { + @media (min-width: 2500px) { + font-size: 48px !important; + line-height: 65px !important; + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..f6c59b5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,8 +4,176 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + @media (max-width: 1024px) { + width: 100%; + } + + @media (max-width: 375px) { + margin: 0 18px; + width: 95%; + border-bottom: 0; + + } } + .orderform-template-holder { width: 66.1132%; + + @media (max-width: 1024px) { + width: 100%; + } + + @media (max-width: 375px) { + width: 100%; + } + + } + .link-gift-card{ + #show-gift-card-group + { display: none;} + } + + .payment-body{ + .accordion-inner{ + .box-step{ + display: flex; + + .form-step{ + display: flex; + + @media (max-width: 1024px) { + display: block; + + } + + .payment-group{ + + .pg-deposito, + .pg-transferencia-bancaria, + .pg-money, + .pg-promisory---monica, + .pg-desconto-em-folha, + #payment-group-creditControlPaymentGroup, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + #payment-group-PSEPaymentGroup, + #payment-group-SPEIPaymentGroup, + + [data-name= "Bancolombia Transfer"]{ + display: none; + } + + span{ + background-image: none !important; + font-family: $font-family; + color: $color-liPonto; + font-size: 14px; + line-height: 24px; + text-align: center; + padding: 13px; + } + + a{ + background: $color-gray3; + border: 1px solid $color-liPonto; + border-radius: 6px; + margin-bottom: 12px; + padding: 0; + width: 209px; + text-decoration: none; + @media (max-width: 1024px) { + width: 958px; + + } + @media (max-width: 375px) { + width: 309px !important; + margin: 7px; + + } + + } + + .active{ + border: 1px solid #F15A31; + background: rgba(220, 221, 227, 0.3); + margin-left: 5px; + span{ + color:#F15A31 ; + } + } + + + } + + } + } + } } } + +.row-fluid { + .span6 { + @media (max-width: 1024px) { + width: 100%; + } + } + +} + +.steps-view{ + width: 397px !important; + margin-left: 115px; + margin-top: 34px; + + @media (max-width: 1024px) { + width: 934px !important; + margin: 7px; + + } + + @media (max-width: 375px) { + width: 286px !important; + margin-left: 6px !important; + + } + + + + +} + + +.box-step-content{ + @media (max-width: 1024px) { + margin-left: -10px; + + } +} +.shipping-data +{ + width: 330px; +} +.container-order-form{ +width: 88%;} +.PaymentCardHolderDocument{ + display: none; +} + +p.client-first-name, +.client-last-name{ + @media (max-width: 1024px) { + width: 471px; + margin-top: 17px; + + } +} + +#client-document, +#client-phone{ + @media (max-width: 1024px) { + width: 460px; + + } +} + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..ce97d7a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -3,21 +3,36 @@ &-content { color: $color-black; text-align: center; + margin-top: 266px; @include mq(md, max) { padding: 0 16px; } } + &-message{ + display: none; + } + &-title { font-size: 20px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: #000000; } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + width: 400px; + background: $color-white; + border-radius: 0px; + border: 1px solid; + // border-radius: 5px; transition: ease-in 0.22s all; outline: none; font-family: $font-family; @@ -27,12 +42,30 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-liPonto; + text-transform: uppercase; + cursor: pointer; + + // &:hover { + // background: lighten($color-black, 5); + // } + } + h2 { + 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-liPonto; text-transform: uppercase; - &:hover { - background: lighten($color-black, 5); - } - } + } } + + } + + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..503d166 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,19 +3,21 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; + html { height: 100%; min-height: 100%; } footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; + width: 100%; + // margin: auto auto 0 auto; } footer .footerCheckout__prateleira, header { - width: 79.53125%; - margin: 0 auto; + // width: 79.53125%; + // margin: 0 auto; + border-bottom: 1px solid; } body { @@ -49,7 +51,32 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 88%; + + @media (max-width: 375px) { + width: 100%; + .full-cart .cart table tbody tr{ + padding: 0; + margin: 0; + } + + + } + @media (max-width: 1024px) { + width: 100%; + margin: 0; + + .product, + .product-price, + // .quantity-price, + .shipping-date{ + display: none; + } + + + + } + } } @@ -57,9 +84,9 @@ body { background: $color-black; text-shadow: none; - &:hover { - background: lighten($color-black, 15%); - } + // &:hover { + // background: lighten($color-black, 15%); + // } } .emailInfo h3 { @@ -68,15 +95,27 @@ body { #cart-title, #orderform-title { - color: $color-gray2; - font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-transform: uppercase; + color: $color-liPonto; + + @media (max-width: 1024px) { + + margin-left: 16px; + + + } + + @media (max-width: 375px) { + margin-left: 15px; + + } @include mq(md, max) { margin-left: 30px; } @@ -124,3 +163,4 @@ body { } } } + diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..13d84db 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,6 +1,7 @@ /* Slider */ .slick-slider { + position: relative; display: block; box-sizing: border-box; @@ -62,6 +63,7 @@ } } .slick-slide { + float: left; height: 100%; min-height: 1px; @@ -103,12 +105,21 @@ .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; + border: none; + background-color: transparent; + top: 38%; z-index: 4; - left: 10px; + left: 6px; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + border: none; + background-color: transparent; + bottom: 57%; + right: 22px; z-index: 4; - right: 10px; + } .slick-arrow.slick-hidden { display: none; @@ -133,4 +144,9 @@ } } } + + + + + } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..0ef19bb 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,14 +2,52 @@ .footerCheckout { border-top: none; color: $color-gray2; + margin-top: auto; &__wrapper { align-items: center; display: flex; - justify-content: space-between; + border-top: 1px solid black; + // justify-content: space-between; + // position: fixed; + // bottom: 0; + // left: 0; } + .container { + display: flex; + align-items: center; + margin: 0; + justify-content: space-between; + + @media (min-width: 1200px) { + width: 100%; + + } + + @media (max-width: 1024px) { + margin: 0 0 0 9px; + display: grid; + + + } + + } + + .color-img { + background-color: rgb(238, 238, 238); + + } + + &__listImage { + // margin: 0 12px; + } + + + &__address { + margin: 27px 0 24px 0; + width: 269px; color: $color-gray2; font-family: $font-family; font-style: normal; @@ -17,15 +55,45 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; + // max-width: 40%; @include mq(md, max) { margin-bottom: 24px; max-width: 100%; } + + + @media (min-width: 2500px) { + width: 537px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 27px; + text-transform: capitalize; + color: #292929; + + + } + + @media (max-width: 1024px) { + margin: 0px 0 16px 7px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-transform: capitalize; + color: #292929; + width: 269px; + + + } } &__stamps { + width: 404px; + margin: 16px 189px 16px 137px; align-items: center; display: flex; justify-self: center; @@ -43,18 +111,67 @@ margin: 0 8px; width: 1px; } + + @media (min-width: 2500px) { + width: 690px; + + } + + @media (max-width: 1024px) { + width: 342px; + margin: 16px 0 16px 0; + order: -1; + + + } + + + } &__developedBy { + width: 217px; align-items: center; display: flex; list-style-type: none; margin: 0; li:last-child { - margin-left: 16px; + // margin-left: 16px; } + .vtex-rigth1 { + width: 15%; + + } + + .vtex-rigth2 { + width: 8%; + } + + .list { + @media (min-width: 2500px) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + width: 388px; + } + + @media (max-width: 1024px) { + margin: 0 0 16px 7px; + + + } + + + + // color: #292929; + + } + + a { align-items: center; color: $color-gray2; @@ -69,6 +186,13 @@ span { margin-right: 8px; } + } + + } } + +.desativaSlick{ + display: none; +} diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..86c2c64 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,163 @@ /* _header.scss */ .headerCheckout { + .container { - width: auto !important; + // width: auto !important; + width: 79.53125%; + margin: 30px auto; + + @media (max-width: 1024px) { + width: 97%; + // margin: 30px 16px; + margin: 16px; + + } + + @media (max-width: 375px) { + margin: 16px; + width: 92%; + } + + + #progressBar { + width: 439px; + + @media (min-width: 2500px) { + width: 1078px; + + } + + @media (max-width: 375px) { + width: 68px; + + } + + + + + 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 { + width: 40%; + 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: 2500px) { + 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 solid $color-liPonto; + border-radius: 50%; + + @media (min-width: 2500px) { + 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: 26%; + transform: translateY(-50%); + bottom: 4px; + width: 98%; + height: 1px; + border-top: 1px solid $color-liPonto; + + @media (min-width: 2500px) { + left: 21%; + bottom: 9px; + width: 102%; + } + + } + + li .progress-bar-line-2 { + position: absolute; + right: 22%; + transform: translateY(-50%); + bottom: 4px; + width: 98%; + height: 1px; + border-top: 1px solid $color-liPonto; + + @media (min-width: 2500px) { + right: 18%; + bottom: 10px; + width: 103%; + } + } + + + } + + + + + + } + &__wrapper { align-items: center; display: flex; @@ -13,11 +168,32 @@ img { height: 52px; width: auto; + + @media (max-width: 1024px) { + width: 50%; + height: auto; + + } + + @media (max-width: 375px) { + // margin: 16px; + width: 155px; + height: auto; + + } } } &__safeBuy { + display: flex; + img{ + width: 12px; + height: 15px; + margin-bottom: 5px; + } + span { + padding-left: 8px; align-items: center; display: flex; text-transform: uppercase; @@ -32,5 +208,21 @@ i { margin-right: 8px; } + + img { + @media (max-width: 1024px) { + width: 18%; + + } + @media (max-width: 375px) { + width: 10.05%; + + } + + } } } + +.ship-country{ + display: none; +} diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..bb4264a 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,182 @@ /* _prateleira.scss */ + +.footerCheckout{ + + .container-carrossel-item{ + margin: 0 132px; + + @media (max-width: 1024px) { + margin: 0 16px; + + } + } +.slick-slide{ + width: 242px; + margin: 0 16px 0 0; +} + +.text-foot{ + display: flex; + justify-content: center; + margin: 0 0 20px 0; + font-family: 'Tenor Sans'; + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + /* identical to box height, or 158% */ + + text-align: center; + + color: #000000; + + @media (min-width: 2500px) { + + font-family: 'Tenor Sans'; +font-style: normal; +font-weight: 400; +font-size: 48px; +line-height: 76px; +/* identical to box height, or 158% */ + +text-align: center; + +color: #000000; + + } + + @media (max-width: 375px){ + font-size: 14px; +line-height: 28px + } +} + +.container-tamanho-cores{ + margin-bottom: 20px; + display: flex; + justify-content: center; + + @media (max-width: 375px) { + flex-wrap: wrap + } + + + .tamanho{ + // width: 26px; + // background: #00C8FF; + // border-radius: 8px; + margin-left: 5px; + background: #00C8FF; + border-radius: 8px; + min-width: 9.3%; + padding: 4px; + justify-content: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + text-decoration: none; + + @media (min-width: 2500px) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + color: #FFFFFF; + + + } + + @media (max-width: 375px){ + margin-bottom: 10px; + } + } + +} + +.numeProduct{ + margin: 20px 0; + display: flex; + justify-content: center; + text-align: center; + + @media (min-width: 2500px) { + font-family: 'Open Sans'; +font-style: normal; +font-weight: 400; +font-size: 26px; +line-height: 35px; +text-align: center; + +color: #000000; + } + + @media (max-width: 375px) { + font-size: 13px; +line-height: 18px; +text-align: center; + + + } +} + + + + +.bottons { + margin-bottom: 56px; +// display: flex; +// justify-content: center; + width: 100%; + height: 42px; + background: #00c8ff; + border: none; + border-radius: 8px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + + @media (min-width: 2500px) {font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + color: #FFFFFF;} + + + +} + +} + + + + diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..71d8ef2 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; @@ -16,6 +17,7 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-finalizar: #00C8FF; $color-green: #4caf50; 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"