diff --git a/.gitignore b/.gitignore index 351724d..f394f93 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ *node_modules node_modules +yarn.lock # para arquivos sass e scss diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..96fc09d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,195 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.criaFooter(); + this.criaPrateleira(); + this.criaCarrossel(); } 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 + // Containers + this.containerMain = document.querySelector("body .container-main"); + this.cartTemplate = document.querySelector(".cart-template"); + this.checkoutContainer = document.querySelector(".checkout-container"); + // Checkout this.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutTitle = document.querySelector("#cart-title"); + this.checkoutButton = document.querySelector("#cart-choose-products"); + // Footer + this.checkoutAddress = document.querySelector(".footerCheckout__address"); + this.cardsIcons = document.querySelector(".footerCheckout__stamps").firstElementChild; + this.vtexIcon = document.querySelector(".footerCheckout__stamps").lastElementChild; + this.poweredBy = document.querySelector(".footerCheckout__developedBy").firstElementChild; + this.developedBy = document.querySelector(".footerCheckout__developedBy").lastElementChild; + // Prateleira + this.prateleira = document.querySelector(".footerCheckout__prateleira"); } 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 containerMain = this.containerMain; + let cartTemplate = this.cartTemplate; + let checkoutContainer = this.checkoutContainer; + let checkoutTitle = this.checkoutTitle; + let checkoutButton = this.checkoutButton; + let prateleira = this.prateleira; + let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + if (target.style.display != "none") { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "none"; + } + containerMain.style.display = "flex"; + containerMain.style.height = "100%"; + checkoutTitle.style.display = "none"; + checkoutButton.innerHTML = "Continuar comprando"; + cartTemplate.style.display = "flex"; + prateleira.style.display = "none"; + + + } else { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "block"; + } + containerMain.style.display = "block"; + containerMain.style.height = "max-content"; + checkoutTitle.style.display = "block"; + cartTemplate.style.height = "max-content"; + cartTemplate.style.display = "block"; + prateleira.style.display = "block"; + + if (window.location.hash != "#/cart") { + checkoutTitle.style.display = "none"; + prateleira.style.display = "none"; + } + + if (window.location.hash == "#/email") { + containerMain.style.height = "100%"; + checkoutContainer.style.overflow = "initial" + } + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + criaFooter() { + this.checkoutAddress.innerHTML = ` +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ `; + + this.cardsIcons.innerHTML = ` +
+ Mastercard +
+ +
+ Visa +
+ +
+ Amex +
+ +
+ Elo +
+ +
+ HiperCard +
+ +
+ PayPal +
+ +
+ Boleto +
+ `; + + this.vtexIcon.innerHTML = ` +
+ VTEX PCI +
+ `; + + this.poweredBy.innerHTML = ` +
+

Powered By

+ +
+ VTEX +
+
+ `; + + this.developedBy.innerHTML = ` +
+

Developed By

+ +
+ M3 Academy +
+
+ `; + } + + async criaPrateleira() { + const urlAPI = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + + let prateleira = this.prateleira; + + prateleira.innerHTML = ` +

Você também pode gostar:

+ + `; + + fetch(urlAPI) + .then((response) => { + return response.json(); + }) + + .then((data) => { + return data.map((product) => { + let li = document.createElement("li"); + li.setAttribute("id", product.productId); + li.innerHTML = ` + ${ + product.productName + } + +

${product.productName}

+ +
${product.items + .map((name) => { + return `${name.name}`; + }) + .join("")} +
+ + + `; + prateleira.children[1].appendChild(li); + }); + }); + } + + async criaCarrossel() { + const prateleira = await waitElement(".carrossel-items"); + + setTimeout(() => { + $(prateleira).slick({ + slidesToShow: 4, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, + }); + }, 600); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..dfbc0ad 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,18 +4,75 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + this.criaBarraProgresso(); } async init() { await this.selectors(); - console.log(this.item); + this.monitoraBarraProgresso(); } 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.barraProgresso = document.querySelector(".progress-bar"); + this.circulo1 = await waitElement(".progress-bar__circle1"); + this.circulo2 = await waitElement(".progress-bar__circle2"); + this.circulo3 = await waitElement(".progress-bar__circle3"); + } + + criaBarraProgresso() { + this.barraProgresso.innerHTML = ` + + + + + + `; + } + + monitoraBarraProgresso() { + setInterval(() => { + if (window.location.hash == "#/cart") { + this.circulo1.classList.add("active"); + this.circulo2.classList.remove("active"); + this.circulo3.classList.remove("active"); + } else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") { + this.circulo1.classList.remove("active"); + this.circulo2.classList.add("active"); + this.circulo3.classList.remove("active"); + } else if (window.location.hash == "#/payment") { + this.circulo1.classList.remove("active"); + this.circulo2.classList.remove("active"); + this.circulo3.classList.add("active"); + } + }, 100); } } 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..559a356 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,822 @@ -.checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } - } - } - - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; - - h3 { - margin-bottom: 16px; - - span { - color: #303030; - font-size: 24px; - } - - small { - color: $color-gray4; - } - } - } - - .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; - - @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; - - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } - - span.help.error { - color: red; - } - } - - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; - - h3 { - color: #303030; - margin: 0 0 8px 0; - } - - ul { - margin: 0; - - li { - span { - color: $color-black; - } - - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } - - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } - - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; - - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - - i::before { - fill: #303030; - } - } - - 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; - } - - p { - label { - color: $color-black; - font-weight: 500; - } - - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } - - .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; - } - - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } - } - - /* Shipping configurations */ - - .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; - } - - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; - - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - - svg path { - fill: #d8c8ac; - } - } - } - } - - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-summary-group-info { - border-color: $color-gray4; - } - - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; - - @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; - } - - .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); - } - } - } - } +.mini-cart { + .cart { + @include mq(xl, min) { + max-height: initial; + } + } +} + + +.checkout-container { + .mini-cart { + .affix-top, + .affix { + height: 409px !important; + + @include mq(xl, min) { + height: 630px !important; + } + + .summary-cart-template-holder { + height: 36% !important; + + @include mq(xl, min) { + height: auto !important; + } + } + + .cart { + border: none; + + ul li:not(:first-child) { + padding: 0; + margin: 0; + } + } + + .summary-template-holder { + .accordion-group { + .accordion-inner { + tbody { + tr { + border: 1px solid $color-gray9; + border-left: 0; + border-right: 0; + + td.info, + td.monetary { + padding: 20px 17px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: $color-gray2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + td.info { + width: -webkit-fill-available; + + @include mq(xl, min) { + width: max-content; + } + } + + td.monetary { + width: 100%; + + @include mq(xl, min) { + width: 20px; + } + } + } + } + + tfoot { + td.info, + td.monetary { + padding: 25px 17px 0 17px; + } + + td.info { + width: -webkit-fill-available; + + @include mq(xl, min) { + width: max-content; + } + } + + td.monetary { + width: 100%; + } + } + } + } + } + } + #go-to-cart-button { + a { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black2; + text-decoration: none; + margin: 10px 17px 5px 0; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + + &:hover { + text-decoration: underline; + } + } + } + } + + .client-pre-email { + border-color: $color-black2; + font-family: $font-family; + + .link-cart { + margin-top: 9px; + + a { + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + color: $color-black2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + + span, + small { + font-family: $font-family-secundary; + font-size: 20px; + font-weight: 400; + line-height: 23px; + text-transform: uppercase; + color: $color-black2; + + @include mq(xl, min) { + font-size: 40px; + line-height: 47px; + } + } + } + + .client-email { + margin: 6px 0 9px; + max-width: 562px; + + @include mq(xl, min) { + max-width: 971px; + } + + i { + right: 130px; + top: 6px; + } + + input { + font-size: 12px; + font-weight: 400; + line-height: 16px; + height: 50px; + box-shadow: none; + color: $color-black1; + font-family: $font-family; + padding: 0 15px; + border: 1px solid $color-black2; + box-sizing: border-box; + border-radius: 5px 10px 10px 5px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + + @media (max-width: 490px) { + width: auto; + } + } + + button { + height: 50px; + width: 126px; + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + right: 0; + top: 0; + outline: 0; + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-black2; + text-transform: uppercase; + } + + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } + + span.help.error { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + color: red; + text-transform: capitalize; + margin-top: 3px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + .emailInfo { + margin: 11px auto 0 auto; + padding: 16px; + background-color: $color-white1; + border: 1px solid $color-black2; + color: $color-black2; + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + max-width: 400px; + border-radius: 5px; + + @include mq(xl, min) { + max-width: 776px; + font-size: 24px; + line-height: 33px; + } + + h3 { + margin: 0 0 8px 0; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + + ul { + margin: 0; + + li { + span { + color: $color-black2; + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + width: 17px; + height: 10px; + + @include mq(xl, min) { + font-size: 25px; + width: 33px; + height: 23px; + } + } + } + } + + i::before { + color: $color-black1; + font-size: 7rem; + opacity: 0.5; + + @include mq(xl, min) { + font-size: 150px; + } + } + } + + label { + margin-top: 45px; + } + } + + .client-profile-data.filled { + height: 106px; + } + + .shipping-data, + .payment-data, + .client-profile-data { + #client-email { + width: 96.4%; + + @include mq(xl, min) { + height: 61px; + width: 97.7%; + } + } + + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray9; + font-family: $font-family; + padding: 20px 16px; + + @include mq(xl, min) { + padding: 24px 34px; + } + + &:nth-child(1) { + padding: 20px 16px 24px 16px; + + @include mq(xl, min) { + padding: 24px 34px; + } + } + + .accordion-heading { + margin-bottom: 8px; + + .accordion-toggle { + span { + @include mq(xl, min) { + margin: 0; + } + } + } + + .collapsed { + a { + padding: 8px 8px 6px 0px; + } + } + + span { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + padding: 0; + font-family: $font-family-secundary; + font-size: 16px; + font-weight: 400; + line-height: 19px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 32px; + line-height: 37px; + margin-bottom: 15px; + } + + .link-box-edit { + background-color: transparent; + outline: 0; + opacity: 100%; + border: none; + box-shadow: none; + } + + [class^="icon-"]:not(.icon-user:first-child) { + content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + cursor: pointer; + width: 20px; + height: 20px; + + @include mq(xl, min) { + width: 40px; + height: 40px; + } + } + + i::before { + display: none; + } + } + + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white1; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } + + ul { + display: none; + } + + .accordion-inner { + padding: 0; + margin-top: 8px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + + .box-info { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + letter-spacing: 0em; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + + .client-profile-email { + margin: 15px 0 0; + } + + .client-profile-summary { + .name { + display: flex; + flex-direction: column; + margin: 5px 0; + } + + .tel { + margin-bottom: 20px; + } + } + + br { + display: none; + } + } + + /* General configurations */ + + .client-notice { + display: none; + color: $color-black1; + } + + .newsletter { + @include mq(xl, min) { + margin: 12px 0; + } + } + + p { + label { + display: flex; + align-items: center; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: $color-gray2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + .newsletter-label { + height: 18px; + margin-top: -5px; + + #opt-in-newsletter { + margin-right: 8px; + width: 18px; + height: 18px; + min-width: auto; + + @include mq(xl, min) { + width: 35px; + height: 35px; + } + } + + .newsletter-text { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + select, + input { + border-radius: 5px; + border: 1px solid $color-gray9; + box-shadow: none; + height: 42px; + padding: 0 0 0 11px; + margin-bottom: 4px; + min-width: 143px; + + @include mq(xl, min) { + min-width: 270px; + height: 61px; + font-size: 28px; + line-height: 38px; + } + } + + .help.error { + color: red; + margin-top: 0; + + @include mq(xl, min) { + font-size: 23px; + width: auto; + } + } + } + + .client-first-name, + .client-document { + margin-right: 15px; + } + + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black1; + font-weight: 500; + text-decoration: underline; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + button.submit { + border: none; + border-radius: 8px; + background: $color-blue2; + margin: 44px 0 24px 0; + outline: none; + display: block; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + height: 61px; + } + } + + /* Shipping configurations */ + + .ship-postalCode { + label { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + color: $color-gray2; + } + + input { + min-width: 96%; + } + + small { + margin: 1px 0 0 0; + + a { + font-weight: 500; + text-decoration: underline; + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black1; + } + } + } + .vtex-omnishipping-1-x-deliveryGroup { + p { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + color: $color-gray2; + margin: -7px 0 7px 0; + } + + .shp-lean { + border: 1px solid $color-gray9; + border-radius: 8px; + + label { + background-color: $color-white1; + box-shadow: none; + color: #303030; + padding: 8px 12px; + } + + .vtex-omnishipping-1-x-leanShippingOption { + svg { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); + + width: 18px; + height: 18px; + border-radius: 3px; + + path { + fill: transparent; + } + } + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: $color-white2; + + svg { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + + path { + fill: transparent; + } + } + + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray9; + .shp-option-text-label, + .shp-option-text-time { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + } + } + + .vtex-omnishipping-1-x-optionPrice { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + padding-left: 6px; + } + } + } + + .delivery-address-title { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.05em; + text-align: left; + color: $color-gray2; + margin: -12px 0 7px 0; + } + + .shp-summary-group-info { + border-color: $color-gray4; + } + + .address-summary { + background: $color-white1; + border-color: $color-gray9; + border-radius: 8; + padding: 12px 12px 12px 44px; + + @include mq(md, max) { + background-position: 8px 9px; + } + + span { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + } + + a { + font-family: $font-family; + text-transform: lowercase; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-blue2; + text-decoration: none; + margin-left: 56px; + } + + :nth-child(6) { + display: none; + } + } + + .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-address { + input { + width: 314px; + height: 35px; + margin-bottom: 2px; + } + + label { + display: inline-flex; + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.05em; + } + + #ship-state { + display: block; + width: 314px; + outline: none; + } + } + + .vtex-omnishipping-1-x-submitPaymentButton { + button { + margin: -11px 0 20px 0; + } + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + } + + .vtex-omnishipping-1-x-addressSummaryActive { + .address-summary { + background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") + no-repeat; + background-size: 25px; + background-position: 10px 19px; + } + } + + .vtex-omnishipping-1-x-deliveryChannelsWrapper { + margin: 22px 0 25px; + } + + .vtex-omnishipping-1-x-summaryChange { + color: $color-gray6; + } + + .vtex-omnishipping-1-x-deliveryChannelsOption { + color: $color-gray6; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white1; + border: 1px solid $color-black2; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: $color-black2; + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..2adfc49 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -4,19 +4,39 @@ } } +.cart-items { + .product-name { + width: auto; + } +} + .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; } + + .summary-totalizers { + // Voltar + @include mq(xl, min) { + min-width: 688px; + } + } + + .ship-country { + display: none; + } + .item-unit-label { display: none; } + .cart { - border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 17px; + border: 1px solid $color-gray3; @include mq(md, max) { margin: 0px 0 25px 0; @@ -25,18 +45,38 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { + height: 370px !important; + border: 1px solid $color-gray5; + border-radius: 8px; font-family: $font-family; - width: 100%; + width: 99%; + h2 { - background: $color-white; + font-family: $font-family-secundary; + font-size: 16px; + font-weight: 400; + line-height: 19px; + background: $color-white1; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + text-align: left; + color: $color-black1; + margin: 16px 0 1px 10px; + + @include mq(xl, min) { + font-size: 32px; + line-height: 37px; + } + } + + .summary-cart-template-holder { + height: 46% !important; + overflow: hidden; } .item-unavailable { @@ -48,8 +88,6 @@ } .cart { - border: 1px solid $color-gray4; - ul li { border-top: none; margin-top: 0; @@ -60,17 +98,12 @@ padding-top: 8px; border-top: 1px solid #e5e5e5; } - - .shipping-date, - .price { - color: #7d7d7d; - } } } .summary-template-holder { border-top: none; - background: $color-white; + background: $color-white1; } #go-to-cart-button a { @@ -85,24 +118,32 @@ } #payment-data-submit { - background: $color-black; + width: 100%; + height: 42px; + margin-top: 28px; + background: $color-green2; border: none; - border-radius: 0; - color: $color-white; + border-radius: 8px; + color: $color-white1; outline: none; - transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; } - &:active { - background: darken($color-black, 5); + i { + display: none; } } } .lookatme { - background-color: $color-white; + background-color: $color-white1; } .cart-items { @@ -111,12 +152,17 @@ } th { - color: $color-black; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; + font-family: $font-family-secundary; font-size: 14px; + font-weight: 400; line-height: 16px; + text-align: left; + color: $color-black1; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -126,10 +172,16 @@ } } + th.product, + th.shipping-date, + th.product-price, + th.quantity, + th.quantity-price { + padding: 0 0 18px 0; + } + .product-image { - height: auto; padding: 0; - width: 60px; @include mq(sm, max) { width: 72px; @@ -137,8 +189,15 @@ img { height: 60px; - max-width: 100%; + min-width: 60px; width: auto; + margin-right: 15px; + + @include mq(xl, min) { + min-width: 146px; + height: 146px; + margin-right: 31px; + } @include mq(sm, max) { height: 72px; @@ -147,52 +206,134 @@ } } - .product-name { - padding-right: 0; + .hproduct { + display: flex; + align-items: center; - @include mq(lg, max) { - width: 250px; + img { + min-width: 60px; + height: 60px; + + @include mq(xl, min) { + min-width: 116px; + height: 116px; + } } + .description { + width: 80%; + margin-top: 0; + + .shipping-date { + display: none; + } + + strong { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + .quantity { + display: none; + } + + .product-name { + white-space: normal; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + + a { + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + margin-left: 16px; + + @media (max-width: 490px) { + margin-left: 23px; + } + } + + .brand, + .seller { + display: none !important; + } + } + } + + td { + padding: 0; + a { - color: $color-blue; - font-style: normal; - font-weight: normal; + color: $color-black2; font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; + font-weight: 400; + text-align: left; + font-family: $font-family-secundary; - &:hover { - color: darken($color-blue, 10); - text-decoration: none; + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; } - - @media (max-width: 490px) { - margin-left: 23px; - } - } - - .brand, - .seller { - display: none !important; } } td.shipping-date { - color: $color-gray2; font-size: 12px; + text-align: left; + font-weight: 400; line-height: 14px; + vertical-align: initial; + padding-right: 50px; + color: $color-gray7; + text-transform: lowercase; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + vertical-align: inherit; + } @include mq(md, max) { display: none; } } - .product-price { + td.product-price { min-width: 100px; + text-align: left; + + .best-price { + span { + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -200,10 +341,17 @@ } span.list-price { - color: $color-gray2; - font-size: 12px; - line-height: 14px; + color: $color-gray7; text-decoration-line: line-through; + font-size: 12px; + font-weight: 400; + line-height: 14px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -216,61 +364,73 @@ } 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; - max-height: 38px; max-width: 118px; + max-height: 38px; padding: 0; width: max-content !important; + @include mq(xl, min) { + max-height: 50px; + margin-top: 38px; + } + @media (max-width: 490px) { margin-left: 84px !important; } input { - background-color: $color-white; - border: 1px solid $color-gray3; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + background-color: $color-white1; + border: none; border-radius: 0; - border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; padding: 8px 0; width: 38px; - color: $color-gray2; + color: $color-black2; box-shadow: none; @include mq(lg, max) { width: 24px !important; } - } - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $color-black; - display: block; - font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; + @include mq(xl, min) { + font-size: 28px; + line-height: 32px; } } .icon-plus-sign { + &::before { + padding: 9px 11px 9px 3px; + } + } + + .icon-minus-sign { + &::before { + padding: 9px 3px 9px 11px; + } + } + + .icon-plus-sign, + .icon-minus-sign { &:before { - content: "+"; - font-size: 14px; + color: $color-blue2; + font-size: 18px; + display: block; + + @include mq(xl, min) { + font-size: 32px; + } } } @@ -295,28 +455,58 @@ .icon-question-sign { display: none; } + span { - font-style: normal; - font-weight: normal; font-size: 14px; + font-weight: 400; line-height: 16px; - color: $color-black; + color: $color-black1; + } + + .new-product-price-label { + text-transform: lowercase; } } - .quantity-price { + td.quantity-price { + vertical-align: initial; + text-align: left; + + @include mq(xl, min) { + min-width: 154px; + } + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + @include mq(md, max) { display: none; } } .item-remove { + vertical-align: initial; + @media (max-width: 490px) { top: 0; } + .icon::before { - color: $color-gray4; - font-size: 15px; + color: $color-gray6; + font-size: 13px; + + @include mq(xl, min) { + font-size: 25px; + } @include mq(md, max) { font-size: 18px; @@ -326,7 +516,7 @@ .item-unavailable-message { background-color: #d8c8ac; - color: $color-white; + color: $color-white1; .icon-warning-sign { color: #bb4f4f; @@ -350,51 +540,72 @@ padding: 0 16px; } - .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; - font-size: 24px; - line-height: 28px; - color: $color-gray2; - - @include mq(md, max) { - margin-top: 0; - } - } - - .srp-description { - color: $color-gray2; - font-size: 12px; - line-height: 18px; - margin: 0 0 12px; - } - - button.shp-open-options { - background-color: $color-gray5; - border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten($color-gray5, 5); + .srp-content { + @include mq(xl, min) { + max-width: 552px; } - &:active { - background-color: darken($color-gray5, 5); + .srp-main-title { + font-family: $font-family; + font-size: 24px; + font-weight: 400; + line-height: 33px; + line-height: 32px; + color: $color-black2; + margin-bottom: 11px; + + @include mq(xl, min) { + font-size: 48px; + line-height: 65px; + } + + @include mq(md, max) { + margin-top: 0; + } + } + + .srp-description { + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: $color-gray2; + margin: 0 0 0; + max-width: 18rem; + + @include mq(xl, min) { + font-size: 28px; + line-height: 36px; + min-width: 552px; + } + } + + button.shp-open-options { + background-color: $color-gray8; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-black2; + border: none; + border-radius: 8px; + outline: none; + width: 157px; + height: 44px; + + @include mq(xl, min) { + font-size: 28px; + width: 230px; + height: 44px; + } } } } .srp-data { width: 280px; + margin-top: 0; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -405,58 +616,50 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; + border-radius: 8px; + color: $color-white1; outline: none; width: 100%; - - font-style: normal; - font-weight: 500; + height: 42px; + font-family: $font-family; font-size: 14px; - line-height: 16px; + font-weight: 700; + line-height: 19px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + margin-top: 6px; } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; &__wrapper { - background-color: $color-white; + background-color: $color-white1; border-radius: 100px; width: 100%; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; text-transform: uppercase; + font-size: 14px; + font-weight: 400; + line-height: 19px; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black2; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black2; } label { width: 50%; &:active { - background-color: #f0f0f0; + background-color: $color-white1; } } } @@ -469,15 +672,14 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; - margin-bottom: 12px; + color: $color-black1; + margin-bottom: 2px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray6; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; height: 36px; padding: 12px 8px; @@ -485,38 +687,31 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-white1; height: 36px; - letter-spacing: 1px; outline: none; position: absolute; right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + bottom: 21px; + width: 100px; text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 10px; + font-weight: 400; line-height: 12px; - color: $color-blue; - margin-top: 7px; + color: $color-black1; + margin-top: 4px; } span.help.error { @@ -525,7 +720,7 @@ position: absolute; left: 0; width: 100%; - top: 17px; + top: 85px; } } } @@ -597,19 +792,24 @@ .coupon-data { #cart-link-coupon-add { text-decoration: none; + &:hover { text-decoration: underline; - cursor: pointer; } } + span { - font-family: $font-family; - font-style: normal; - font-weight: normal; + margin-bottom: 20px; + font-family: $font-family-secundary; font-size: 12px; + font-weight: 400; line-height: 14px; - color: $color-blue; - text-decoration: none; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -623,13 +823,8 @@ margin: 0; } - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - .coupon-label label { + text-align: left; margin-bottom: 12px; font-family: $font-family; font-style: normal; @@ -641,7 +836,7 @@ } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 38px; @include mq(sm, max) { span { @@ -657,14 +852,17 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; - color: $color-gray4; - font-size: 12px; - height: 34px; + color: $color-gray7; padding: 0 12px; - max-width: 160px; + width: 193px; + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 14px; + height: 36px; @include mq(sm, max) { max-width: 100%; @@ -673,37 +871,32 @@ } button { - background: $color-black; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; + border-radius: 8px; + color: $color-black2; + margin-left: 12px; outline: none; - transition: all 0.2s linear; - width: 94px; text-transform: uppercase; + padding: 9px 15px; + height: 36px; + max-width: 133px; @include mq(md, max) { width: 138px; } - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } } } } .accordion-group { tr { - border-color: #e5e5e5; + border-color: $color-gray5; td { &.empty { @@ -712,12 +905,17 @@ &.info, &.monetary { - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 14px; + font-weight: 400; line-height: 16px; - color: $color-black; - padding: 12px 0; + color: $color-black1; + padding: 7px 0; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -733,11 +931,17 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + padding-top: 9px; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 24px; + color: $color-black1; + + @include mq(xl, min) { + font-size: 36px; + line-height: 49px; + width: 200px; + } } } } @@ -749,6 +953,10 @@ flex-direction: column; width: 343px; + @include mq(xl, min) { + width: 688px; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -758,7 +966,7 @@ @include mq(md, min) { margin: 0; - padding-bottom: 50px; + //padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -771,40 +979,44 @@ } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; + font-weight: 400; line-height: 14px; - color: $color-blue; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } .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); - } + max-width: 100%; &: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-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; text-shadow: none; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..144b3a9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -5,7 +5,116 @@ body .container-main.container-order-form .orderform-template.active { margin-right: 0; float: right; } + .orderform-template-holder { width: 66.1132%; } + + .shipping-summary-placeholder { + .address-summary-BRA { + // Alterar depois + display: grid; + grid-template-columns: repeat(3, max-content); + grid-template-rows: repeat(2, max-content); + padding: 0; + margin: 10px 0 18px 0; + + .postalCode { + grid-column: 2; + } + + span { + .number-delimiter { + display: none; + } + } + } + + .link-change-shipping { + display: none; + } + + .shp-summary-package { + padding: 0; + margin-bottom: 14px; + } + + .shp-summary-group { + padding: 0; + } + + .shp-summary-group-info { + border: none; + } + + .shp-summary-group-price { + display: none; + } + } + + .payment-data.span12 { + .accordion-heading { + display: flex; + + .accordion-toggle { + flex-direction: row; + } + + i { + display: none; + } + } + + .accordion-inner { + .box-step-content { + .payment-group-list-btn { + margin-top: -31px; + } + + .payment-group { + a { + width: 209px; + height: 50px; + border-radius: 6px; + margin: 0 1px 12px; + padding: 0 0 0 0; + border: 1px solid #000; + text-decoration: none; + + span { + font-family: $font-family; + color: $color-gray10; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + padding: 13px 0px; + } + } + + .payment-group-item-text { + background-image: none !important; + } + + .payment-group-item.active { + border: 1px solid $color-orange1; + background-color: $color-white3; + + span { + color: $color-orange1; + } + } + } + + .link-gift-card { + display: none !important; + } + + .steps-view { + margin-top: 3px; + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..b7b7eab 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,64 @@ -.empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; - - @include mq(md, max) { - padding: 0 16px; - } - } - - &-title { - font-size: 20px; - } - - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - 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; - - &:hover { - background: lighten($color-black, 5); - } - } - } +.checkout-container { + .cart-template { + align-items: center; + flex-direction: column; + justify-content: center; + } +} + +.empty-cart { + &-content { + h2 { + margin-bottom: 32px; + font-family: $font-family; + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + color: $color-black1; + line-height: 0; + text-align: center; + + @include mq(xl, min) { + font-size: 48px; + line-height: 65px; + } + } + + @include mq(md, max) { + padding: 0 16px; + } + } + + &-message { + display: none; + } + + &-title { + font-size: 20px; + } + + &-links { + .link-choose-products { + background: $color-white1; + border: none; + outline: none; + border: 1px solid $color-black2; + border-radius: 0; + color: $color-black2; + padding: 16px 65px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-align: center; + text-transform: uppercase; + margin-top: 0; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + padding: 16px 121px; + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..a9038c5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,26 +3,21 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; +.transactions-container { + display: none; +} + html { height: 100%; min-height: 100%; } -footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; -} -footer .footerCheckout__prateleira, -header { - width: 79.53125%; - margin: 0 auto; -} - body { display: flex; flex-direction: column; min-height: 100% !important; padding-top: 0 !important; + overflow-x: hidden; @include mq(md, max) { padding-left: 0; @@ -47,36 +42,49 @@ body { padding-left: 0; } } + .container-order-form, .container-cart { - width: 80%; + width: 83.5%; + + @include mq(xl, min) { + margin: 0 256px; + width: 80%; + } + } + + .container-main { + min-height: max-content; + display: flex; + align-items: center; } } .btn-success { - background: $color-black; + background: $color-black1; text-shadow: none; - - &:hover { - background: lighten($color-black, 15%); - } } .emailInfo h3 { - color: $color-black !important; + color: $color-black1 !important; } #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-size: 24px; + font-weight: 700; + line-height: 33px; + letter-spacing: 0.05em; + color: $color-black2; + margin: 17px 0; text-transform: uppercase; + @include mq(xl, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-left: 30px; } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..fc2d2eb 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -71,6 +71,11 @@ } img { display: block; + + @include mq(xl, min) { + height: 485px; + width: 485px; + } } &.slick-loading img { display: none; @@ -100,19 +105,49 @@ font-size: 0; position: absolute; } + +.slick-prev, +.slick-next { + z-index: 4; + border: none; + outline: none; +} + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; - z-index: 4; + left: 10px; + top: 185px; + width: 13px; + height: 29px; + + @include mq(xl, min) { + width: 26px; + height: 58px; + top: 313px; + } } + .slick-next { - z-index: 4; - right: 10px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + right: 31px; + top: 185px; + width: 13px; + height: 29px; + + @include mq(xl, min) { + width: 26px; + height: 58px; + top: 313px; + } } + .slick-arrow.slick-hidden { display: none; } + .slick-dots { li { margin: 0.5em; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..7251a0e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,23 +1,52 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + figure { + margin: 0; + } + + ul { + padding: 0; + margin: 0 0 0 0; + } + + p { + margin: 0; + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + .container { + border-top: 1px solid $color-black2; + display: flex; + align-items: center; + justify-content: space-between; + width: 95%; + padding: 23px 32px; + + @include mq(xl, min) { + padding: 29px 63px; + } + } + + .container::before, + .container::after { + display: none; + } } &__address { - color: $color-gray2; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 10px; - line-height: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black1; text-transform: capitalize; - max-width: 40%; + max-width: 269px; + + @include mq(xl, min) { + font-size: 20px; + line-height: 27px; + max-width: 537px; + } @include mq(md, max) { margin-bottom: 24px; @@ -31,40 +60,103 @@ justify-self: center; list-style: none; + li { + display: flex; + } + + li:nth-child(1) { + display: flex; + } + + li:last-child { + img { + max-width: 53px; + height: 33px; + margin: 0 0 0 10px; + + @include mq(xl, min) { + max-width: 103px; + height: 64px; + } + } + } + + img { + height: 20px; + max-width: 34px; + margin-right: 13px; + + @include mq(xl, min) { + max-width: 69px; + height: 39px; + } + } + @include mq(md, max) { align-self: center; margin-bottom: 12px; } &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; width: 1px; + height: 24px; + background-color: $color-gray6; + + @include mq(xl, min) { + height: 43px; + } } } &__developedBy { - align-items: center; display: flex; + align-items: center; list-style-type: none; margin: 0; - li:last-child { + li { margin-left: 16px; + img { + margin-left: 11px; + } } - a { - align-items: center; - color: $color-gray2; + li:first-child { + img { + max-width: 44px; + height: 16px; + + @include mq(xl, min) { + max-width: 87px; + height: 31px; + } + } + } + + li:last-child { + img { + max-width: 28px; + height: 15px; + + @include mq(xl, min) { + max-width: 55px; + height: 30px; + } + } + } + + div { display: flex; + align-items: center; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; + font-size: 9px; + font-weight: 400; + color: $color-black1; + + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } span { margin-right: 8px; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..db823f6 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,18 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black2; + .container { width: auto !important; + margin: 0; + padding: 24px 131px; + + @include mq(xl, min) { + padding: 29px 256px; + } } + &__wrapper { align-items: center; display: flex; @@ -11,26 +21,127 @@ &__logo { img { - height: 52px; - width: auto; + width: 155px; + height: 37px; + + @include mq(xl, min) { + width: 382px; + height: 91px; + } } } &__safeBuy { + display: flex; + align-items: center; + span { - align-items: center; - display: flex; + font-weight: 400; + line-height: 16px; text-transform: uppercase; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + color: $color-black1; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } } - i { + img { + width: 12px; + height: 14px; margin-right: 8px; + + @include mq(xl, min) { + width: 29px; + height: 41px; + } + } + } + + .progress-bar { + display: flex; + width: 439px; + height: 35px; + justify-content: space-between; + + @include mq(xl, min) { + width: 1078px; + height: 67px; + } + + &__container-items { + list-style: none; + } + + &__container-item { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + &__circle1, + &__circle2, + &__circle3 { + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid $color-black2; + + @include mq(xl, min) { + height: 24px; + width: 24px; + } + } + + &__line1, + &__line2 { + position: absolute; + background-color: $color-black2; + height: 1px; + bottom: 6px; + + @include mq(xl, min) { + bottom: 12px; + } + } + + &__line1 { + left: 59%; + width: 162px; + + @include mq(xl, min) { + width: 437px; + } + } + + &__line2 { + right: 60%; + width: 155px; + + @include mq(xl, min) { + width: 420px; + } + } + + .active { + background-color: $color-black2; + } + + &__text { + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..2c32363 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,98 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + display: none; + padding: 0 110px 0 132px; + + @include mq(xl, min) { + padding: 0 256px; + } + + .prateleiraTitle { + font-family: $font-family-secundary; + font-size: 24px; + font-weight: 400; + line-height: 38px; + text-align: center; + + @include mq(xl, min) { + font-size: 48px; + line-height: 76px; + } + } + + div { + margin-right: 8px; + + li { + .product-name { + font-family: $font-family; + font-size: 13px; + font-weight: 400; + line-height: 18px; + text-align: center; + margin: 20px 0; + color: $color-black2; + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + + .product-variation { + display: flex; + justify-content: center; + margin-bottom: 25px; + + &__item { + font-size: 13px; + font-weight: 700; + line-height: 18px; + letter-spacing: 0.05em; + text-align: center; + background-color: $color-blue2; + padding: 5px; + border-radius: 8px; + margin-right: 5px; + color: $color-white1; + font-family: $font-family; + outline: none; + border: none; + text-transform: uppercase; + + &:last-child { + margin-right: 0; + } + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + .product-button { + width: 100%; + font-family: $font-family; + font-size: 13px; + font-weight: 700; + line-height: 18px; + letter-spacing: 0.05em; + text-align: center; + text-transform: uppercase; + padding: 12px 72px; + border-radius: 8px; + outline: none; + border: none; + color: $color-white1; + background-color: $color-blue2; + margin-bottom: 56px; + + @include mq(xl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + } +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..e30e820 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,38 +1,51 @@ -/* fonts */ +/* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; +$color-black1: #292929; +$color-black2: #000000; -$color-white: #fff; +$color-white1: #fff; +$color-white2: #f2f2f2; +$color-white3: #DCDDE34D; -$color-gray: #6c6c6c; +$color-gray1: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #c4c4c4; +$color-gray7: #989898; +$color-gray8: #ededed; +$color-gray9: #e0e0e0; +$color-gray10: #585858; -$color-blue: #4267b2; +$color-blue1: #4267b2; +$color-blue2: #00C8FF; -$color-green: #4caf50; +$color-green1: #4caf50; +$color-green2: #298541; + +$color-orange1: #F15A31; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400px, + sm: 600px, + md: 1024px, + lg: 1280px, + xl: 2500px, ) !default; +/* Z-index */ $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;