diff --git a/checkout/gulpfile.js b/checkout/gulpfile.js index ccb4ca1..25df93e 100644 --- a/checkout/gulpfile.js +++ b/checkout/gulpfile.js @@ -62,7 +62,8 @@ function styles() { ) .pipe( autoprefixer({ - cascade: false, + cascade: true, + add: true, }) ) .pipe( diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..8bec4fe 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,5 +1,11 @@ import { waitElement } from "m3-utils"; +const insertImage = (name, options) => { + const domain = "https://agenciamagma.vteximg.com.br"; + + return ``; +}; + export default class Footer { constructor() { this.init(); @@ -7,34 +13,257 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + + this.createdToPaymentsInFooter(); + this.createdToDevelopedBy(); + + this.onloadWindowVerificatedShelf(); + + this.onUpdate(); } 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.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutEmpty = await waitElement(".empty-cart-content"); + this.paymentContainer = await waitElement(".footerCheckout__stamps"); + this.developedByContainer = await waitElement(".footerCheckout__developedBy"); + this.checkoutContainer = await waitElement(".container-main"); + this.shelf = await waitElement(".footerCheckout__prateleira"); + } + + createdToPaymentsInFooter() { + if (this.isExistElement(this.paymentContainer)) { + const paymentCreditContent = this.paymentContainer.children[0].children[0]; + const verificatedVtexPCI = this.paymentContainer.children[2].children[0]; + + let verifacatedContents = + this.isExistElement(paymentCreditContent) && + this.isExistElement(verificatedVtexPCI); + + if (verifacatedContents) { + let creditStructure = ""; + let verificatedVtexStructure = insertImage( + "vtexPCI", + 'class="footerCheckout__verificatedVtex"' + ); + + let creditTypes = this.creditPaymentsName(); + + creditTypes.forEach((creditType) => { + creditStructure += `
  • ${insertImage( + creditType, + 'class="footerCheckout__creditImage"' + )}
    • `; + }); + + paymentCreditContent.innerHTML = ``; + verificatedVtexPCI.innerHTML = verificatedVtexStructure; + } + } + } + + createdToDevelopedBy() { + if (this.isExistElement(this.developedByContainer)) { + const poweredByContent = this.developedByContainer.children[0].children[0]; + const developedByContent = this.developedByContainer.children[1].children[0]; + + let verificatedContents = + this.isExistElement(poweredByContent) && this.isExistElement(developedByContent); + + if (verificatedContents) { + poweredByContent.innerHTML = `Powered By${insertImage( + "logoVTEX", + 'class="footerCheckout__logo footerCheckout__logo--vtex"' + )}`; + + developedByContent.innerHTML = `Developed By${insertImage( + "logoM3", + 'class="footerCheckout__logo footerCheckout__logo--m3"' + )}`; + } + } + } + + onloadWindowVerificatedShelf() { + let checkoutEmpty = this.checkoutEmpty; + let checkoutContainer = this.checkoutContainer; + + if (checkoutEmpty.style.display === "none") { + this.addClassToElement(checkoutContainer, "container-cart-fill"); + } else { + this.removeClassToElement(checkoutContainer, "container-fill"); + } + + if ( + this.getElementClass(checkoutContainer, "container-cart-fill") && + this.getElementClass(checkoutContainer, "container-cart") && + window.location.href.endsWith("#/cart") + ) { + this.createdInitialShelfList(); + this.createdProductsToShelf(); + this.addCarrossel(); + } else { + this.shelf.innerHTML = ""; + } } 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 config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + + let verificatedContents = + this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer); + + if (verificatedContents) { + let target = this.checkoutEmpty; + let config = { childList: true, attributes: true }; + let observer = new MutationObserver((mutations) => { + /* prettier-ignore */ + for (let i = 0; i < mutations.length; i++) { + if (mutations[i].attributeName === "style") { + if (this.checkoutEmpty.style.display === "none") { + this.addClassToElement(this.checkoutContainer, "container-cart-fill"); + } else { + this.removeClassToElement(this.checkoutContainer,"container-cart-fill"); + } + + this.onloadWindowVerificatedShelf(); + + break; + } + } }); + + observer.observe(target, config); + + window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this)); + } + } + + addCarrossel() { + $(this.shelf.children[1]).slick({ + slidesToShow: 4, + arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + + { + breakpoint: 600, + settings: { + slidesToShow: 2, + }, + }, + ], + }); + } + + async requestAPIProducts() { + let url = (name) => { + let domain = "https://m3academy.myvtex.com/"; + return domain + name; + }; + + let featchProducts = fetch( + url("api/catalog_system/pub/products/search/?fq=productClusterIds:319") + ); + + let response = await featchProducts.then((res) => res.json()); + + return response; + } + + async createdProductsToShelf() { + let datas = await this.requestAPIProducts(); + + datas.forEach(() => { + $(this.shelf.children[1]).slick("unslick"); + + this.createdCardsProducts(datas); + + this.addCarrossel(); + }); + } + + createdCardsProducts(data) { + let structure = ""; + + data.forEach((data) => { + structure += `
  • +
    +
    +
    + +
    + +

    + ${data.productName} +

    +
    + +
    + ${data.items.reduce((acc, item) => { + return (acc += `
    + ${item.name} +
    `); + }, "")} +
    + + + + Ver Produto + + +
    • `; }); - observer.observe(target, config); + this.shelf.children[1].innerHTML = ` + ${structure.trim()} + `; } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + createdInitialShelfList() { + this.shelf.innerHTML = ` +
    +

    Você também pode gostar:

    +
    + + `; + } + + addClassToElement(element, name) { + element.classList.add(name); + } + + removeClassToElement(element, name) { + element.classList.remove(name); + } + + getElementClass(element, name) { + return element.classList.contains(name); + } + + isExistElement(element) { + return !!element; + } + + creditPaymentsName() { + const creditPaymentsTypes = [ + "masterCard", + "visa", + "amex", + "elo", + "hiperCard", + "payPal", + "boleto", + ]; + + return creditPaymentsTypes; } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..844fd82 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,6 +1,115 @@ // import waitForEl from "../helpers/waitForEl"; import { waitElement } from "m3-utils"; +/** + * @param {Object} options + * @param {HTMLAllElement} target + * @return {Object} + */ + +function OnProgress(target) { + if (!target) { + return; + } + + const innerElement = () => { + target.innerHTML = ``; + }; + + const verifyCurrentRoute = () => { + let bullets = target.querySelectorAll(".progress-bullet"); + + bullets.forEach((bullet) => { + if (window.location.href.endsWith("#/cart")) { + bullets[0].classList.add("active"); + } + + if ( + window.location.href.endsWith("#/email") || + window.location.href.endsWith("#/shipping") || + window.location.href.endsWith("#/profile") + ) { + bullets[1].classList.add("active"); + } + + if (window.location.href.endsWith("#/payment")) { + bullets[2].classList.add("active"); + } + + window.addEventListener("hashchange", () => { + if (window.location.href.endsWith("#/cart")) { + bullets[0].classList.add("active"); + + if (bullet != bullets[0]) { + bullet.classList.remove("active"); + } + } + + if ( + window.location.href.endsWith("#/email") || + window.location.href.endsWith("#/shipping") || + window.location.href.endsWith("#/profile") + ) { + bullets[1].classList.add("active"); + if (bullet != bullets[1]) { + bullet.classList.remove("active"); + } + } + + if (window.location.href.endsWith("#/payment")) { + bullets[2].classList.add("active"); + if (bullet != bullets[2]) { + bullet.classList.remove("active"); + } + } + }); + }); + }; + + const init = () => { + innerElement(); + verifyCurrentRoute(); + }; + + const remove = () => { + target.innerHTML = ""; + }; + + return { + ref: target, + init, + remove, + }; +} + export default class Header { constructor() { this.init(); @@ -8,14 +117,19 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.innerToProgressBar(); } 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.progressBar = await waitElement("#progressBar", { + timeout: 5000, + interval: 1000, }); } + + innerToProgressBar() { + let progress = OnProgress(this.progressBar); + + progress.init(); + } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..14b62ba 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..94bb886 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,2080 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + .accordion-inner { + /* General configurations */ - .link-cart { - a { - color: $color-black; - font-size: 14px; + .client-notice { + color: $clr-gray-600; + } - &:hover { - color: lighen($color-black, 10); - } - } - } + p { + .help.error { + color: red; + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $clr-gray-600; + font-weight: 500; + text-decoration: underline; + } + } - h3 { - margin-bottom: 16px; + .state-inscription-box span { + font-weight: 500; + } - span { - color: #303030; - font-size: 24px; - } + /* Shipping configurations */ - small { - color: $color-gray4; - } - } - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .client-email { - margin: 0 0 16px; + .vtex-omnishipping-1-x-deliveryGroup { + .shp-lean { + border: 1px solid $clr-gray-300; + border-radius: 0; - 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; + label { + background-color: $clr-common-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - @media (max-width: 490px) { - width: auto; - } - } + svg path { + fill: #d8c8ac; + } + } + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + .shp-summary-group-info { + border-color: $clr-gray-300; + } - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - span.help.error { - color: red; - } - } + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } - .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); - } - } - } - } + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($clr-gray-600, 50); + } + } + } + } +} + +.container-order-form { + .checkout-container { + overflow: initial; + } + + #orderform-title { + padding: 0 16px; + } + + #shipping-data, + #payment-data, + .cart-template.mini-cart { + padding: 0 16px; + } + + #shipping-data { + margin: 0; + } + + #client-profile-data .client-profile-data.active { + margin: 0 16px 16px; + } + + #shipping-data, + #payment-data, + #client-profile-data .client-profile-data.active { + float: none; + } + + #postalCode-finished-loading { + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $clr-common-white; + border: 1px solid $clr-common-black; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: $clr-common-black; + text-shadow: none; + } + + .vtex-omnishipping-1-x-isLoading { + background: $clr-primary-blue-500; + } + } + + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $clr-primary-blue-500; + border: 1px solid $clr-primary-blue-500; + } + + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryGroup + .shp-lean { + border: 1px solid $clr-gray-100; + border-radius: 8px; + } + + .client-profile-data .accordion-group .accordion-heading span i.icon-user { + display: none; + } + + .links.unstyled, + .client-notice.notice { + display: none; + } + + .checkout-container .client-pre-email { + padding: 8px 16px 0; + } + + .checkout-container .client-pre-email .emailInfo h3 { + line-height: 16.34px; + } + + .cart-template.mini-cart { + padding: 0 16px; + width: 100% !important; + margin: 0; + + h2 { + padding: 0 16px; + } + + .cart { + border: none; + margin: 0; + } + + .cart-fixed { + height: auto !important; + + &.affix { + position: sticky; + top: 0; + } + } + + @media screen and (min-width: 1025px) { + position: relative; + + .cart-fixed { + &.affix { + top: 60px; + transform: translateY(60px); + } + } + } + } + + .ship-country { + display: none; + } + + .orderform-template.active { + display: grid; + grid-template-columns: 1fr; + + .orderform-template-holder { + width: 100%; + } + + @media screen and (min-width: 1025px) { + grid-template-columns: fluid(677px, 1018px) fluid(331px, 1018px); + gap: 0 16px; + + .orderform-template-holder { + grid-column: 1/2; + } + } + + @media screen and (min-width: 2500px) { + grid-template-columns: fluid(1314.75px, 1988.28px) fluid(642.7px, 1988.28px); + gap: 0 30.3px; + } + + div.row-fluid { + width: 100%; + display: grid; + grid-template-columns: 1fr; + gap: 17px; + margin-bottom: 17px; + + #client-profile-data, + #shipping-data, + #payment-data { + width: 100%; + } + + .client-profile-data.filled { + margin: 0px 16px; + } + + &::before, + &::after { + content: none; + } + + @media screen and (min-width: 1025px) { + grid-template-columns: fluid(331px, 677px) fluid(330px, 677px); + grid-template-rows: auto auto auto; + margin: 0; + gap: 16px; + + #shipping-data, + #payment-data { + margin: 0; + padding: 0; + } + + #client-profile-data { + grid-column: 1/2; + grid-row: 1/4; + } + + #payment-data { + grid-column: 2/3; + } + + .client-profile-data.filled { + margin: 0; + } + } + @media screen and (min-width: 2500px) { + grid-template-columns: fluid(642.7px, 1314.75px) fluid(640.75px, 1314.75px); + gap: 16px 31.3px; + } + } + + .form-step.box-edit .row-fluid { + display: initial; + } + } + + .checkout-container .accordion-group .accordion-heading span > i, + .client-pre-email .emailInfo .icon-lock { + display: none; + } + + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryGroup + .shp-lean + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: #f2f2f2; + } +} + +.container-order-form { + @media screen and (min-width: 1200px) { + width: inherit; + } +} + +.container-order-form { + width: 100%; + + #shipping-data, + #payment-data { + float: none; + } + + #payment-data { + margin: 0; + } + + @media screen and (min-width: 1025px) { + #shipping-data, + #payment-data { + float: none; + } + + #client-profile-data .client-profile-data.active { + margin: 0; + } + + .cart-template.mini-cart { + padding: 0; + } + } + + @media screen and (min-width: 1025px) { + width: fluid(1018px, 1280px); + min-height: calc(100vh - 175px); + + .checkout-container .client-pre-email { + padding: 8px 0 0; + } + + #orderform-title { + padding: 0; + } + + .client-pre-email .emailInfo .icon-lock { + display: block; + } + } +} + +// Default styles +.orderform-template-holder .client-profile-data #client-pre-email { + @media screen and (max-width: 490px) { + width: auto; + } +} + +/*===---------------------===*\ +|H| STYLES ROUTE EMAIL |H| +\*---=====================---*/ +.checkout-container { + .client-profile-data { + .link-cart a { + @include font-size("s-100"); + line-height: 11.7px; + font-weight: 400; + font-family: $font-family-200; + text-transform: uppercase; + + &:hover { + color: lighen($clr-gray-600, 10); + } + + @media screen and (min-width: 1025px) { + @include font-size("s-300"); + line-height: 16.38px; + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 32.76px; + } + } + } +} + +.checkout-container { + .client-pre-email-h { + margin-bottom: 22px; + + label * { + @include font-size("s-200"); + line-height: 16.38px; + font-family: $font-family-200; + font-weight: 400; + padding: 0; + display: inline; + color: $clr-common-black; + text-transform: uppercase; + text-align: center; + } + } +} + +.checkout-container { + .client-pre-email-h { + @media screen and (min-width: 600px) { + margin-bottom: 38px; + + label * { + @include font-size("s-300"); + line-height: 16.38px; + } + } + + @media screen and (min-width: 1025px) { + margin-bottom: 21px; + + label * { + @include font-size("s-600"); + line-height: 23.4px; + } + } + + @media screen and (min-width: 2500px) { + margin-bottom: 23px; + + label * { + @include font-size("splus-900"); + line-height: 46.8px; + } + } + } +} + +.checkout-container { + .client-pre-email { + border-color: $clr-gray-300; + font-family: $font-family-100; + padding-top: 8px; + padding: 0 16px; + + .pre-email { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .client-email { + margin: 0 0 16px; + } + } +} + +.checkout-container { + .pre-email .client-email { + position: relative; + width: 100%; + + input { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + + width: 100%; + padding: 0 16px; + border: 2px solid $clr-gray-100; + border-right: none; + height: 52px; + border-radius: 5px 0px 0px 5px; + + box-shadow: none; + color: #292929; + + box-sizing: border-box; + } + + .btn.btn-success { + @include btn-primary-blue-black(); + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + height: 52px; + letter-spacing: 0.05em; + + max-width: 126.76px; + border-radius: 0px 8px 8px 0px; + + text-transform: uppercase; + } + + .help.error { + @include font-size("s-200"); + line-height: 16.34px; + text-align: center; + font-weight: 700; + color: red; + } + } +} + +.checkout-container { + .pre-email .client-email { + @media screen and (min-width: 1025px) { + width: fluid(562px, 1018px); + } + + @media screen and (min-width: 2500px) { + width: fluid(970.98px, 1988.28px); + + input { + @include font-size("splus-100"); + line-height: 32.68px; + } + + .btn.btn-success { + @include font-size("splus-300"); + line-height: 38.13px; + + width: fluid(219px, 970.98px); + max-width: none; + } + + .help.error { + @include font-size("splus-100"); + line-height: 32.68px; + text-align: center; + font-weight: 700; + } + } + } +} + +.checkout-container { + .emailInfo { + width: 100%; + } +} + +.checkout-container { + .emailInfo { + ul { + margin: 0; + + li { + i::before { + color: $clr-primary-blue-500; + font-size: 1rem; + opacity: 1; + } + } + } + + i::before { + color: $clr-gray-600; + font-size: 6rem; + opacity: 0.5; + } + } +} + +.checkout-container { + .emailInfo { + padding: 16px; + border: 1px solid $clr-common-black; + border-radius: 5px; + + background-color: $clr-common-white; + + h3, + span { + @include font-size("s-200"); + line-height: 16.34px; + color: $clr-common-black; + } + + h3 { + margin: 0 0 9.56px 0; + } + + span { + font-weight: 700; + margin-bottom: 0.56px; + } + } +} + +.checkout-container { + .emailInfo { + min-height: 150px; + @media screen and (min-width: 600px) { + width: fluid(343px, 992px); + } + + @media screen and (min-width: 1025px) { + width: fluid(400px, 1018px); + } + + @media screen and (min-width: 2500px) { + min-height: 238.56px; + + ul li i::before { + font-size: 2rem; + } + + h3, + span { + @include font-size("splus-100"); + line-height: 32.68px; + } + + h3 { + margin-bottom: 14px; + } + + span { + margin-bottom: 1px; + } + + i::before { + font-size: 9.5rem; + } + } + } +} + +// Default Styles + +@media screen and (max-width: 490px) { + .orderform-template-holder .client-profile-data input[type="text"] { + width: 100%; + } + + .orderform-template-holder .client-profile-data { + p.client-phone, + p.client-document, + p.client-first-name, + p.client-last-name { + float: none !important; + width: 100%; + margin: 0; + + input { + width: 100% !important; + } + } + } +} + +/*===----------------------===*\ +|H| STYLES ROUTE PROFILE |H| +\*---======================---*/ +.checkout-container { + .client-pre-email { + border-color: $clr-gray-300; + font-family: $font-family-100; + padding-top: 8px; + + .link-cart { + a { + position: relative; + z-index: 1000; + color: $clr-gray-600; + font-size: 14px; + + &:hover { + color: lighen($clr-gray-600, 10); + } + } + } + } +} + +.checkout-container { + .client-profile-data, + .shipping-data, + .payment-data { + .accordion-inner { + padding: 0; + } + + .accordion-group { + padding: 16px; + border: 1px solid #f0f0f0; + border-radius: 8px; + font-family: $font-family-100; + } + } + + .client-profile-data { + .accordion-group { + @media screen and (min-width: 2500px) { + padding: 24px 35.51px 36px 34px; + } + } + } + + .payment-data .accordion-group { + @media screen and (min-width: 2500px) { + padding: 24px 33.51px 28px 34px; + } + } + + .cart-template.mini-cart .cart-fixed { + border-top: 1px solid $clr-gray-100; + border-radius: 8px; + + .summary-cart-template-holder, + .row-fluid.summary, + h2 { + border-left: 1px solid $clr-gray-100; + border-right: 1px solid $clr-gray-100; + } + + h2 { + padding-top: 16px; + padding-bottom: 34px; + } + .summary-template-holder { + padding: 0px; + } + + .row-fluid.summary { + border-radius: 0 0 8px 8px; + border-bottom: 1px solid $clr-gray-100; + } + } +} + +.checkout-container { + .accordion-heading span { + @include font-size("s-400"); + line-height: 18.72px; + + padding: 0; + margin-bottom: 16px; + + font-family: $font-family-200; + color: $clr-common-black; + + &[data-i18n="clientProfileData.identification"] { + font-size: 0px; + + margin-bottom: 36px; + + &::before { + @include font-size("s-400"); + line-height: 18.72px; + + content: "Identificação"; + } + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-500"); + line-height: 37.44px; + + &[data-i18n="clientProfileData.identification"] { + &::before { + @include font-size("splus-500"); + line-height: 37.44px; + } + } + } + } +} + +.checkout-container { + .accordion-inner { + .shipping-summary-placeholder, + .notification { + @include font-size("s-300"); + line-height: 19.07px; + + font-weight: 400; + font-family: $font-family-100; + + color: $clr-gray-400; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + .client-profile-data, + .shipping-data, + .payment-data { + p input, + p select { + @include font-size("s-300"); + line-height: 19.07px; + font-family: $font-family-100; + + width: 100%; + height: 42px; + padding: 0 11px; + max-width: none; + border: 1px solid $clr-gray-100; + border-radius: 5px; + + background-color: $clr-common-white; + background-position: right 50%; + + &:focus { + box-shadow: none; + } + } + } +} + +.checkout-container { + .client-profile-data { + p label { + @include font-size("s-300"); + color: $clr-gray-400; + font-weight: 400; + font-family: $font-family-100; + line-height: 19.07px; + } + } +} + +.checkout-container { + .client-profile-data { + @media screen and (min-width: 2500px) { + p label { + @include font-size("splus-300"); + line-height: 38.13px; + } + + p input { + @include font-size("splus-300"); + line-height: 38.13px; + height: 61px; + } + } + } +} + +.checkout-container { + .client-profile-data { + .newsletter-label { + @include font-size("s-200"); + line-height: 16.34px; + + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + + input[type="checkbox"] { + width: 18px; + height: 18px; + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-200"); + line-height: 32.68px; + + input[type="checkbox"] { + width: 34.95px; + height: 34.95px; + } + } + } + } +} + +.checkout-container { + .btn-submit-wrapper button, + #find-pickups-manualy-button-denied, + .btn-go-to-payment { + @include btn-primary-blue-white(); + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + + transition: all 0.2s linear; + + &:hover { + background: lighten($clr-gray-600, 5); + } + + &:active { + background: darken($clr-gray-600, 5); + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } +} + +.checkout-container { + .client-profile-data.filled { + .form-step.box-info { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.checkout-container { + .shipping-data { + .shipping-container { + padding: 0; + } + + .accordion-group { + width: 100%; + + padding: 24px 17.8px 36px 17px; + + margin: 0; + + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + padding: 34px 34px 44px; + } + } + } +} + +.checkout-container { + .payment-data .accordion-heading a, + .shipping-data .accordion-heading a, + .client-profile-data .accordion-heading a { + top: 0px; + right: 0px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0px; + border: none; + + .icon-edit { + width: 20.26px; + height: 20.89px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") + center center / cover; + } + + outline: none; + background-color: $clr-common-white; + + @media screen and (min-width: 2500px) { + .icon-edit { + width: 39.24px; + height: 40.58px; + } + } + } +} + +.container-order-form { + .box-client-info-pf { + width: 100%; + + display: grid; + grid-template-columns: 50% 50%; + } + + p { + &.client-phone, + &.client-document, + &.client-first-name, + &.client-last-name { + float: none !important; + width: 100%; + margin: 0; + } + + &.client-first-name, + &.client-document { + padding-right: 8px; + } + + &.client-phone, + &.client-last-name { + padding-left: 8px; + } + + &.client-email { + grid-column: 1/3; + margin-bottom: 16px; + } + + &.client-first-name, + &.client-last-name { + margin-bottom: 16px; + } + + &.client-document, + &.client-phone { + margin-bottom: 16px; + } + + &.newsletter { + margin: 0 0 45px; + } + } +} + +.checkout-container { + .shp-method-option { + .shp-method-option-text { + @include font-size("s-300"); + text-transform: uppercase; + line-height: 19.07px; + display: block; + padding: 8px 0; + } + + &.shp-method-option-active { + color: $clr-common-black; + } + + @media screen and (min-width: 2500px) { + .shp-method-option-text { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + .shipping-data { + .ship-postalCode { + label { + font-size: 0px; + + &::before { + content: "Cep:"; + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 700; + font-family: $font-family-100; + + text-transform: uppercase; + + color: $clr-gray-400; + } + } + + input { + @include font-size("s-300"); + line-height: 19.07px; + + height: 45px; + border-color: $clr-gray-250; + } + + small { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + color: $clr-gray-400; + margin: 0; + } + } + } +} + +.checkout-container { + .shipping-data { + .ship-postalCode { + @media screen and (min-width: 2500px) { + label { + &::before { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + input { + @include font-size("splus-300"); + line-height: 38.13px; + + height: 61px; + } + + small { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-deliveryGroup { + p { + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-leanShippingTextLabel, + .vtex-omnishipping-1-x-optionPrice, + .shp-option-text-time { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + } + + .vtex-omnishipping-1-x-leanShippingIcon { + margin-left: 8px; + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + letter-spacing: 0.05em; + } + } + } +} + +.checkout-container { + .shipping-data { + @media screen and (min-width: 2500px) { + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-leanShippingTextLabel, + .vtex-omnishipping-1-x-leanShippingTextLabelSingle, + .vtex-omnishipping-1-x-optionPrice, + .shp-option-text-time { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } +} + +.checkout-container { + .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + svg { + display: none !important; + } + + &::before { + content: ""; + width: 16px; + height: 16px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png") + center; + background-size: cover; + } + } + } + + .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + svg { + display: none !important; + } + + &::before { + content: ""; + width: 16px; + height: 16px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png") + center; + background-size: cover; + } + } + } +} + +.checkout-container { + @media screen and (min-width: 2500px) { + .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + &::before { + width: 32px; + height: 32px; + } + } + } + + .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + &::before { + width: 32px; + height: 32px; + } + } + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-geolocationTitle.ask-for-geolocation-title { + @include font-size("s-300"); + line-height: 19.07px; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + + .vtex-omnishipping-1-x-subtitle.ask-for-geolocation-subtitle { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + + .vtex-omnishipping-1-x-imageAsk.ask-for-geolocation-image-ask { + background-color: $clr-primary-blue-500; + + @media screen and (min-width: 2500px) { + width: 220px; + height: 220px; + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-shippingSectionTitle { + @include font-size("s-200"); + line-height: 16.34px; + + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + + .address-summary-BRA { + span { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } + + .vtex-omnishipping-1-x-addressSummary { + position: relative; + display: flex; + align-items: center; + gap: 9.98px; + border: 1px solid #f0f0f0; + border-radius: 8px; + padding: 20.96px 17px 15px 16.38px; + + .address-summary { + padding: 0; + margin: 0; + border: none; + font-weight: 400; + color: $clr-gray-400; + background: none; + } + + &::before { + content: ""; + + min-width: 21px; + height: 21px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center + center/ cover; + } + + @media screen and (min-width: 2500px) { + padding: 15px 28px 15px 28.66px; + + &::before { + min-width: 46.45px; + height: 46.45px; + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-linkEdit.link-edit { + @include font-size("s-200"); + line-height: 16.34px; + + color: $clr-primary-blue-500; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-address { + display: grid; + grid-template-columns: 1fr; + + * .input + .input { + margin: 15px 0 0; + } + + .input { + float: none; + + label { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + color: $clr-gray-400; + } + + input { + @include font-size("s-300"); + line-height: 19.07px; + height: 35px; + border-color: #e0e0e0; + } + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-addressForm { + @media screen and (min-width: 2500px) { + .vtex-omnishipping-1-x-address { + .input { + label { + @include font-size("splus-100"); + line-height: 32.68px; + } + + input { + @include font-size("splus-300"); + line-height: 38.13px; + height: 61px; + } + } + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + border-color: $clr-gray-300; + font-family: $font-family-100; + + .link-cart { + position: relative; + z-index: 1000; + a { + color: $clr-gray-600; + font-size: 14px; + + &:hover { + color: lighen($clr-gray-600, 10); + } + } + } + } +} + +.checkout-container { + .shipping-data { + height: 100%; + + .box-info { + .shp-summary-group, + .shipping-container { + padding: 0; + } + + .vtex-omnishipping-1-x-summaryChange { + display: none; + } + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + + span { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } + } + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-summaryPackage .shp-summary-package-time span.shp-option-text { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-SummaryItemPrice { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } +} + +.checkout-container { + .summary-cart-template-holder.cart-fixed-transition { + @media screen and (max-width: 1024px) { + overflow: initial; + } + } +} + +.container-cart.container-cart-fill { + @media screen and (min-width: 1025px) { + $width-container: 1018px; + + width: fluid($width-container, 1280px); + + .cart-template { + display: grid; + grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid( + 354px, + $width-container + ); + + .cart-template-holder { + grid-area: item; + } + + .summary-template-holder { + grid-area: actions; + + .row-fluid.summary { + display: grid !important; + grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid( + 354px, + $width-container + ); + + .cart-more-options { + grid-area: options; + padding: 0; + } + + .totalizers { + padding: 0; + grid-area: total; + } + } + } + + .cart-links-bottom { + grid-area: button; + padding: 0; + } + } + } +} + +.container-cart.container-cart-fill { + @media screen and (min-width: 2500px) { + $width-container: 1988.28px; + + width: fluid($width-container, 2500px); + + .cart-template { + grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid( + 688.35px, + $width-container + ); + + .summary-template-holder { + .row-fluid.summary { + grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid( + 688.35px, + $width-container + ); + } + } + } + } +} + +//autentication + +.cart-fixed { + width: 100% !important; + + h2 { + @include font-size("s-400"); + line-height: 18.72px; + + margin: 0; + border: none; + + font-weight: 500; + font-family: $font-family-200; + background-color: transparent; + + color: #303030; + @media screen and (min-width: 2500px) { + @include font-size("splus-500"); + line-height: 37.44px; + } + } + + .item-unavailable { + padding: 0; + + &-message { + padding: 8px; + } + } +} + +.cart-fixed { + .cart { + overflow: initial; + border: 1px solid $clr-gray-300; + } +} + +.cart-fixed { + .cart .cart-items .item { + $width-container: 309px; + + display: grid; + grid-template: + "product-image product-name space product-price" auto / fluid(60px, $width-container) + minmax(auto, fluid(115px, $width-container)) auto auto; + + align-items: center; + + .fn { + overflow: initial; + text-overflow: initial; + white-space: initial; + float: none; + } + + .url, + .product-name, + .description { + width: 100%; + } + + .description { + grid-area: product-price; + } + + .url { + grid-area: product-image; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .product-name { + grid-area: product-name; + } + } +} + +.cart-fixed { + .cart .cart-items .item { + .product-name { + @include font-size("s-200"); + line-height: 14.04px; + font-weight: 400; + font-family: $font-family-200; + + margin-left: 7px; + + color: $clr-common-black; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + + margin-left: 13.5px; + } + } + + .description { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + font-weight: 400; + + color: $clr-gray-600; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.86px; + } + } + } +} + +.cart-fixed { + .cart .cart-items { + .item { + .description { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; + height: 100%; + span, + strong { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + + color: $clr-gray-600; + } + + .shipping-date { + display: none; + } + } + + margin-top: 0; + padding-top: 0; + border-top: none; + + &:not(:first-child) { + padding-top: 8px; + margin-top: 8px; + border-top: 1px solid $clr-gray-200; + } + + .quantity.badge { + display: none; + } + + .shipping-date, + .price { + color: $clr-gray-400; + } + .price { + text-align: right; + margin: 0; + } + } + } +} + +.cart-fixed { + @media screen and (min-width: 600px) { + .cart .cart-items .item { + $width-container: 976px; + + grid-template: + "product-image product-name space product-price" auto / fluid( + 60px, + $width-container + ) + minmax(fluid(115px, $width-container), auto) auto minmax(fluid(62px, $width-container), auto); + } + } + + @media screen and (min-width: 1025px) { + .cart .cart-items .item { + $width-container: 298px; + + grid-template: + "product-image product-name space product-price" auto / fluid( + 60px, + $width-container + ) + fluid(115px, $width-container) auto min(fluid(62px, $width-container)); + } + } + + @media screen and (min-width: 2500px) { + .cart .cart-items .item { + $width-container: 612.484px; + + height: 116.5px; + + .url { + height: 116.5px; + } + + grid-template: + "product-image product-name space product-price" auto / fluid( + 116.5px, + $width-container + ) + fluid(227px, $width-container) auto min(fluid(124px, $width-container)); + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + padding: 0; + margin-bottom: 0; + + tr { + border-top: 1px solid $clr-gray-200; + border-bottom: 1px solid $clr-gray-200; + } + + tbody { + td.info, + td.monetary { + @include font-size("s-300"); + line-height: 19.07px; + + color: $clr-gray-400; + } + + td.info { + padding: 25px 0 25px 16px; + text-align: left; + } + td.monetary { + text-align: right; + padding: 25px 16px 25px 0; + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + @media screen and (min-width: 2500px) { + tbody { + td.info, + td.monetary { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .payment-confirmation-wrap { + border: none !important; + padding: 0; + } + + .cart-totalizers.totalizers { + tfoot { + tr { + border: none; + } + + td.info, + td.monetary { + color: $clr-gray-600; + } + + td.info { + @include font-size("s-500"); + line-height: 19.07px; + text-align: left; + + width: 100%; + padding: 30px 0 22px 16px; + } + td.monetary { + @include font-size("s-300"); + line-height: 19.07px; + text-align: right; + + width: 50%; + padding: 30px 16px 22px 0; + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + @media screen and (min-width: 2500px) { + tfoot { + td.info { + @include font-size("splus-700"); + line-height: 49.03px; + } + td.monetary { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } + } +} + +.checkout-container { + #payment-data-submit { + display: flex; + align-items: center; + justify-content: center; + + margin-top: 20px; + border-radius: 8px; + + transition: 200ms linear; + + background-color: #298541; + + span { + @include font-size("s-300"); + font-family: $font-family-100; + letter-spacing: 0.05em; + line-height: 19.07px; + font-weight: 700; + color: $clr-common-white; + text-transform: uppercase; + } + + i { + display: none; + } + + &:hover { + background: lighten(#298541, 5); + } + + &:active { + background: darken(#298541, 5); + } + + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + #go-to-cart-button { + padding: 0 16px; + margin: 0 0 10px; + a { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + color: $clr-common-black; + font-family: $font-family-100; + } + @media screen and (min-width: 2500px) { + margin: 19.5 0 10px; + a { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.container-order-form { + .store-country-BRA.active span.accordion-toggle.collapsed.accordion-toggle-active::after { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + display: block; + margin-top: 12px; + font-family: $font-family-100; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + color: $clr-gray-400; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 48px; + } + } +} + +.container-order-form .orderform-template.active div.row-fluid #payment-data.span12 { + @media screen and (min-width: 1025px) { + grid-column: 1/3; + grid-row: 2/3; + } +} + +.checkout-container { + #payment-group-creditCardPaymentGroup .payment-group-item-text { + background: none; + } + + #payment-data { + &.payment-data { + .form-step.box-new { + .steps-view { + width: 100%; + + @media screen and (min-width: 1025px) { + $width-container: 642px; + + width: fluid(393px, $width-container); + } + + @media screen and (min-width: 2500px) { + $width-container: 1247.25px; + width: fluid(800.25px, $width-container); + } + } + } + + .link-gift-card { + margin: 0px; + left: 0px; + margin-bottom: 10px; + + @media screen and (min-width: 1025px) { + left: 9px; + } + } + + .payment-group { + width: 100%; + + @media screen and (min-width: 1025px) { + $width-container: 642px; + + width: fluid(209px, $width-container); + } + + @media screen and (min-width: 2500px) { + $width-container: 1247.25px; + width: fluid(406.48px, $width-container); + } + } + + .payment-group-list-btn { + width: 100%; + + .payment-group-item { + width: 100%; + + display: flex; + align-items: center; + justify-content: center; + + border: 1px solid $clr-common-black; + padding: 13px; + color: $clr-common-black; + border-radius: 6px; + margin: 0; + opacity: 0.3; + + &.active { + border-color: #f15a31; + color: #f15a31; + opacity: 1; + } + + &-text { + @include font-size("s-300"); + padding: 0; + font-family: $font-family-100; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + background-image: none; + } + + @media screen and (min-width: 2500px) { + &-text { + @include font-size("splus-300"); + line-height: 24px; + } + } + } + + .payment-group-item { + margin-bottom: 12px; + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..cfda45e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,76 +1,33 @@ -.container { - @include mq(md, max) { - width: 100%; +.cart-template { + font-family: $font-family-100; + padding: 0; + + .item-unit-label { + display: none; + } + + .cart { + padding: 0 16px; + margin: 0 0 25px 0; + border: 1px solid $clr-gray-100; + border-left: none; + border-right: none; + + box-sizing: border-box; + + @media screen and (min-width: 1025px) { + margin: 0; + border-radius: 5px; + border: 1px solid $clr-gray-100; + } } } .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; - - @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; - } - } - .cart-fixed.affix { - position: relative !important; - } .cart-fixed { - font-family: $font-family; - width: 100%; - h2 { - background: $color-white; - border: none; - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .item-unavailable { - padding: 0; - - &-message { - padding: 8px; - } - } - - .cart { - border: 1px solid $color-gray4; - - ul li { - border-top: none; - margin-top: 0; - padding-top: 0; - - &:not(:first-child) { - margin-top: 8px; - padding-top: 8px; - border-top: 1px solid #e5e5e5; - } - - .shipping-date, - .price { - color: #7d7d7d; - } - } - } - .summary-template-holder { border-top: none; - background: $color-white; + background: $clr-common-white; } #go-to-cart-button a { @@ -83,26 +40,10 @@ width: 100%; } } - - #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; - color: $color-white; - outline: none; - transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } - } } .lookatme { - background-color: $color-white; + background-color: $clr-common-white; } .cart-items { @@ -110,22 +51,6 @@ padding: 16px 0; } - th { - color: $color-black; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; - font-size: 14px; - line-height: 16px; - - @include mq(md, max) { - &.quantity-price, - &.shipping-date { - display: none; - } - } - } - .product-image { height: auto; padding: 0; @@ -148,30 +73,10 @@ } .product-name { - padding-right: 0; - @include mq(lg, max) { width: 250px; } - a { - color: $color-blue; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; - - &:hover { - color: darken($color-blue, 10); - text-decoration: none; - } - - @media (max-width: 490px) { - margin-left: 23px; - } - } - .brand, .seller { display: none !important; @@ -179,7 +84,7 @@ } td.shipping-date { - color: $color-gray2; + color: $clr-gray-400; font-size: 12px; line-height: 14px; @@ -200,7 +105,7 @@ } span.list-price { - color: $color-gray2; + color: $clr-gray-400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; @@ -217,77 +122,18 @@ td.quantity { align-items: center; - border: 1px solid $color-gray3; + border: 1px solid $clr-gray-100; border-radius: 0; box-sizing: border-box; display: flex; justify-content: center; margin: 6px auto 0; - max-height: 38px; - max-width: 118px; padding: 0; width: max-content !important; @media (max-width: 490px) { margin-left: 84px !important; } - - input { - background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; - display: block; - max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $color-gray2; - 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; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } - - .item-quantity-change { - @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; - } - - @media (max-width: 490px) { - padding: 0; - } - } } .quantity-price, @@ -300,7 +146,7 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $clr-gray-600; } } @@ -315,7 +161,7 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $clr-gray-300; font-size: 15px; @include mq(md, max) { @@ -326,7 +172,7 @@ .item-unavailable-message { background-color: #d8c8ac; - color: $color-white; + color: $clr-common-white; .icon-warning-sign { color: #bb4f4f; @@ -341,6 +187,7 @@ .summary { .cart-more-options { margin: 0; + float: none; width: max-content; .srp-container { @@ -349,93 +196,14 @@ @include mq(md, max) { 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); - } - - &:active { - background-color: darken($color-gray5, 5); - } - } - } - - .srp-data { - width: 280px; - - @include mq(cstm, max) { - width: calc(100vw - 32px); - } - - @include mq(md, max) { - margin-bottom: 40px; - } - - .srp-pickup-my-location__button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - outline: none; - width: 100%; - - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } - } } .srp-toggle { - margin: 0 0 34px; - &__wrapper { - background-color: $color-white; + background-color: $clr-common-white; border-radius: 100px; width: 100%; - font-family: $font-family; + font-family: $font-family-100; font-style: normal; font-weight: normal; font-size: 14px; @@ -444,12 +212,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $clr-common-black; border-radius: 100px; } .blue { - color: $color-blue; + color: $clr-common-black; } label { @@ -463,62 +231,6 @@ .srp-postal-code { .ship-postalCode { - label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-black; - margin-bottom: 12px; - } - - input { - border: 1px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray3; - font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; - } - - & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; - text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } - } - - small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; - } - span.help.error { color: red; font-size: 12px; @@ -549,7 +261,7 @@ } .srp-shipping-current-single { - border: 1px solid $color-gray4; + border: 1px solid $clr-gray-300; border-radius: 0; color: #303030; margin: 16px 0 0; @@ -561,13 +273,10 @@ } .srp-delivery-select { - border: 1px solid $color-gray4; + border: 1px solid $clr-gray-300; } .srp-delivery-select-container { - border: 1px solid $color-gray4; - border-radius: 0; - .srp-shipping-current-many { &__name { color: #303030; @@ -583,16 +292,16 @@ } &__arrow svg { - fill: $color-gray4; + fill: $clr-gray-300; } } } } } - &-totalizers { + &-totalizers.totalizers { padding: 0; - width: 346px; + float: none; .coupon-data { #cart-link-coupon-add { @@ -602,15 +311,6 @@ cursor: pointer; } } - span { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-blue; - text-decoration: none; - } } @include mq(md, max) { @@ -623,26 +323,7 @@ margin: 0; } - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray2; - cursor: none; - } - .coupon-fields { - margin-bottom: 32px; - @include mq(sm, max) { span { display: flex; @@ -655,110 +336,23 @@ } } } - - input { - border: 2px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray4; - font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; - - @include mq(sm, max) { - max-width: 100%; - width: 100%; - } - } - - button { - background: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; - outline: none; - transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; - - @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; - - td { - &.empty { - display: none; - } - - &.info, - &.monetary { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: $color-black; - padding: 12px 0; - } - - &.info { - text-align: left; - } - - &.monetary { - text-align: right; - } - } - } - - tfoot { - td.info, - td.monetary { - font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; - color: $color-black; - } } } } } - .cart-links-bottom { + .cart-links-bottom.cart-links { display: flex; + float: none; flex-direction: column; - width: 343px; @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); - float: none; - margin-bottom: 50px; } @include mq(md, min) { margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -769,42 +363,1084 @@ @include mq(md, max) { margin-bottom: 0px; } - - a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-blue; - } } .btn-place-order-wrapper { a { - background: $color-green; - border: none; - border-radius: 5px; - display: block; - font-size: 0; - transition: ease-in 0.22s all; + @include btn-primary-blue-black(); + + display: flex; + align-items: center; + justify-content: center; + padding: 12px 19px; + border-radius: 5px; + + font-size: 0; + + transition: ease-in 0.22s all; &:hover { - background-color: darken($color-green, 5); - } - - &:after { - content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; - line-height: 19px; - text-shadow: none; + background-color: darken($clr-green-500, 5); + } + } + } + } +} + +.container-cart { + .ship-country { + display: none; + } +} + +.container-cart.container-cart-fill { + width: 100%; + padding: 0 !important; + + #cart-title { + display: flex !important; + + width: 100%; + padding: 0 16px; + text-align: left; + + @media screen and (min-width: 1025px) { + padding: 0; + } + } +} + +.container-cart { + .cart-template { + .item-quantity-change { + position: relative; + display: flex; + align-items: center; + justify-content: center; + + width: 16px; + height: 16px; + border-radius: 100%; + + .icon-plus-sign, + .icon-minus-sign { + position: relative; + + color: $clr-primary-blue-500; + width: 100%; + height: 100%; + } + } + } +} + +.container-cart { + .cart-template { + @media (max-width: 490px) { + .item-quantity-change { + padding: 0; + } + } + + @media screen and (max-width: 979px) and (min-width: 768px) { + .item-quantity-change { + position: inherit; + bottom: inherit; + left: inherit; + height: inherit; + width: inherit; + top: inherit; + } + } + + @media screen and (min-width: 2500px) { + .item-quantity-change { + width: 32px; + height: 32px; + + .icon-minus-sign, + .icon-plus-sign { + width: 32px; + height: 32px; + font-size: 1.72em; + } + } + } + } +} + +.container-cart { + .link-coupon-add, + .link-choose-more-products { + &, + span { + color: $clr-common-black; + } + } +} + +.container-cart { + .cart-more-options { + padding: 0 16px; + } + + .cart-more-options .srp-data, + .cart-more-options, + .srp-container { + width: 100%; + } + + .srp-container { + max-width: 343px; + margin-bottom: 48.35px; + } + + .srp-data { + margin: 0; + } +} + +.container-cart { + .srp-data { + .srp-delivery-select-container { + border: 1px solid $clr-gray-300; + border-radius: 8px; + } + + .srp-pickup-my-location__button { + @include btn-primary-blue-white(); + + width: 100%; + border-radius: 5px; + + outline: none; + + span { + @include font-size("s-400"); + font-weight: 700; + line-height: 19.07px; + font-family: $font-family-100; + letter-spacing: 0.05em; + } + + &:hover { + background-color: lighten($clr-gray-600, 5); + color: $clr-common-white; + } + + &:active { + background-color: darken($clr-gray-600, 5); + color: $clr-common-white; + } + + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } +} + +.container-cart { + .cart { + margin-bottom: 48px; + + @media screen and (min-width: 1025px) { + padding-top: 16px; + } + } + + .srp-postal-code__form { + width: 100%; + } + + .vtex-shipping-preview-0-x-postalCodeForgotten { + gap: 8px; + + width: 100%; + margin: 0; + + .ship-postalCode { + width: fluid(215px, 343px); + + input { + @include font-size("s-200"); + + width: 100%; + height: 36px; + padding: 12px 8px; + border: 1px solid $clr-gray-250; + border-radius: 5px; + + box-shadow: none; + + color: $clr-gray-600; + } + } + + small { + margin-top: 4px; + + a { + font-size: 0px; + + &::before { + content: "Não sei meu código postal"; + font: normal normal 10px / 11.7px $font-family-200; + + text-decoration: underline; + color: $clr-common-black; + } + } + } + + .srp-pc-input.btn { + width: fluid(120px, 343px); + margin: -8px 0 0; + } + } +} + +.container-cart { + .ship-postalCode { + label { + @include font-size("s-200"); + line-height: 14.04px; + font-style: normal; + font-weight: normal; + + margin-bottom: 2px; + + color: $clr-gray-600; + } + } +} + +.container-cart { + .ship-postalCode { + & ~ button { + @include btn-primary-blue-white(); + @include font-size("s-200"); + font-weight: 700; + line-height: 19.07px; + letter-spacing: 1px; + + height: 36px; + border-radius: 5px; + + outline: none; + transition: all 0.2s linear; + text-transform: uppercase; + + &:hover { + background-color: lighten($clr-gray-600, 5); + } + + &:active { + background-color: darken($clr-gray-600, 5); + } + } + } +} + +.container-cart { + .vtex-shipping-preview-0-x-postalCodeForgotten { + .ship-postalCode { + @media screen and (min-width: 2500px) { + input, + & ~ button { + height: 55px; + } + + label { + @include font-size("splus-100"); + line-height: 32.68px; + } + + input { + @include font-size("splus-100"); + } + + small a { + &::before { + font: normal normal 20px / 23.4px $font-family-200; + } + } + + & ~ .srp-pc-input.btn { + @include font-size("splus-300"); + line-height: 38.13px; + + margin-top: 12px; + } + } + } + } +} + +.container-cart { + .cart-template { + .cart-more-options { + float: none; + width: 100%; + padding: 0 16px; + + .srp-container { + padding: 0; + } + } + + .totalizers { + float: none; + width: 100%; + padding: 0 16px; + margin: 0; + } + + .cart-links-bottom { + width: 100%; + padding: 0 16px; + margin: 20px 0 0; + } + } +} + +.container-cart { + .cart-items { + .product-item { + padding: 16px 0; + margin: 0; + + .product-name { + @media screen and (min-width: 1025px) { + padding-left: 16px; + } + + @media screen and (min-width: 2500px) { + padding-left: 31px; + } + + a { + @include font-size("s-200"); + line-height: 14.04px; + + color: $clr-common-black; + font-family: $font-family-200; + transition: ease-in 0.22s all; + + &:hover { + color: darken($clr-primary-blue-500, 10); + text-decoration: none; + } + + @media screen and (min-width: 1025px) { + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + } + + .quantity { + @media screen and (min-width: 1025px) { + margin: 15px 0 0; + } + + @media screen and (min-width: 2500px) { + margin: 54px 0 0; + } + } + + .product-price { + margin: 0; + height: 36px; + + @media screen and (min-width: 1025px) { + } + + span.best-price { + height: 14.04px; + + @media screen and (min-width: 2500px) { + height: 28.08px; + } + } + + span { + @include font-size("s-200"); + line-height: 14.04px; + font-family: $font-family-200; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + } + + .shipping-estimate-date { + @include font-size("s-200"); + line-height: 14.04px; + font-family: $font-family-200; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + + .quantity-price span { + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + + .product-image { + width: 60px; + height: 60px; + + a { + display: block; + width: auto; + height: auto; + } + + img { + width: 100%; + height: 60px; + object-fit: cover; + + @media screen and (min-width: 2500px) { + width: 146px; + height: 146px; + } + } + } + + .item-remove { + position: absolute; + top: 22px; + right: 6px; + transform: translate(50%, -50%); + + .icon-remove { + color: #c4c4c4; + } + } + } + } +} + +.container-cart { + .full-cart .cart { + td.product-name { + width: auto; + } + + td.quantity { + padding: 9px 9px 9px 11px; + border-radius: 8px; + height: 34px; + + .item-quantity-change { + box-sizing: content-box; + } + + input { + @include font-size("s-300"); + line-height: 16.38px; + + font-family: $font-family-200; + font-weight: 400; + + display: block; + + width: 38px; + height: auto; + margin: 0 !important; + border: none; + border-radius: 0; + + color: $clr-common-black; + background-color: $clr-common-white; + box-shadow: none; + box-sizing: content-box; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 32.76px; + + padding: 0 5px; + width: 37px; + } + } + } + } +} + +.container-cart { + @media screen and (max-width: 1024px) { + .full-cart .cart { + table { + display: block; + + thead { + display: none; + } + + tbody { + display: block; + + tr { + width: 100%; + display: block; + position: relative; + + td.shipping-date, + td.quantity-price { + display: none; + } + + td.product-image { + left: 0; + position: absolute; + } + + td.quantity { + margin-left: 76px !important; + } + + .product-name { + display: block; + margin-left: 76px; + text-align: left; + line-height: 140%; + width: auto; + } + + .item-remove { + position: absolute; + top: 22px; + right: 6px; + transform: translate(50%, -50%); + } + + .product-price { + position: absolute; + bottom: 16px; + padding: 0; + right: 0; + } + } + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 1025px) { + padding: 16px 0 0; + + .product-item { + height: 76px; + } + + thead { + th { + @include font-size("s-300"); + line-height: 16.38px; + color: $clr-gray-600; + font-style: normal; + font-weight: 400; + padding: 0 0 16px; + font-family: $font-family-200; + text-align: left; + + &.product-price, + &.shipping-date { + font-size: 0px; + + &::before { + @include font-size("s-300"); + line-height: 16.38px; + } + } + + &.product-price { + &::before { + content: "Unidade"; + } + } + + &.shipping-date { + &::before { + content: "Frete"; + } + } + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 2500px) { + .product-item { + height: 162px; + } + + thead { + th { + &.product-price, + &.shipping-date { + &::before { + @include font-size("splus-300"); + line-height: 32.76px; + } + } + + &.quantity-price { + min-width: 170px; + } + + @include font-size("splus-300"); + line-height: 32.76px; + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 1025px) { + tbody { + td { + text-align: left; + vertical-align: middle; + } + + td.product-price { + vertical-align: middle; + } + + td.quantity { + margin: 0; + } + + td.shipping-date { + padding: 5px 0; + } + } + } + } +} + +.container-cart { + .cart-items { + .product-item { + .item-remove { + position: static; + top: initial; + right: initial; + transform: none; + + .icon-remove { + color: #c4c4c4; + } + } + } + } +} + +.container-cart { + .cart-template { + .cart-more-options { + #shipping-preview-container { + width: 100%; + max-width: none; + } + } + } +} + +.container-cart { + .cart-more-options { + .srp-data, + .srp-toggle { + width: 100%; + } + + .srp-toggle { + margin-bottom: 20px; + + label { + @include font-size("s-300"); + line-height: 19.07px; + } + } + + .srp-main-title { + @include font-size("splus-100"); + line-height: 32.68px; + font-family: $font-family-100; + + margin-bottom: 11px; + + color: $clr-common-black; + } + + .srp-description { + @include font-size("s-300"); + font-weight: 400; + line-height: 18px; + font-family: $font-family-100; + + max-width: none; + margin-bottom: 10.65px; + + color: $clr-gray-400; + } + } +} + +.container-cart { + .cart-more-options { + .shp-open-options { + @include font-size("s-300"); + line-height: 19.07px; + letter-spacing: 0.05em; + + background-color: $clr-gray-200; + color: $clr-common-black; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.container-cart { + @media screen and (min-width: 2500px) { + .cart-more-options { + .srp-toggle label { + @include font-size("splus-300"); + line-height: 38.13px; + } + + .srp-main-title { + @include font-size("sxplus"); + line-height: 65px; + } + + .srp-description { + @include font-size("splus-300"); + line-height: 36px; + } + } + } +} + +.container-cart { + .cart-links-bottom { + .link-choose-more-products-wrapper a { + @include font-size("s-200"); + line-height: 14.04px; + font-weight: 400; + font-family: $font-family-200; + + text-align: center; + } + + .btn-place-order-wrapper a { + font-size: 0px; + + &::before { + @include font-size("s-300"); + + content: "Finalizar Compra"; + + font-weight: 700; + line-height: 19.07px; + font-family: $font-family-100; + letter-spacing: 0.05em; + + text-shadow: none; + color: $clr-common-black; + } + } + } +} + +.container-cart { + .coupon-label label { + @include font-size("s-200"); + font-style: normal; + font-weight: normal; + line-height: 14.04px; + font-family: $font-family-100; + + margin-bottom: 12px; + + text-align: left; + + color: $clr-gray-400; + cursor: none; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } +} + +.container-cart { + .coupon-fieldset { + span { + position: relative; + display: inline-flex; + gap: 8px; + width: 100%; + white-space: nowrap; + text-align: left; + + i { + position: absolute; + } + } + + .coupon-value { + @include font-size("s-200"); + line-height: 14.04px; + + width: 100%; + height: 36px; + padding: 0 12px; + border: 2px solid #f0f0f0; + border-radius: 5px; + + font-size: 12px; + + box-shadow: none; + color: #8d8d8d; + } + } +} + +.container-cart { + .coupon-fieldset { + @media screen and (min-width: 2500px) { + span { + gap: 30px; + } + + .coupon-value { + @include font-size("splus-100"); + line-height: 28.08px; + + width: fluid(398.42px, 688.35px); + height: 55px; + } + } + } +} + +.container-cart { + .coupon-form { + margin-bottom: 30px; + } +} + +.container-cart { + @media screen and (min-width: 1025px) { + .coupon-form { + margin-bottom: 35px; + } + } +} + +.container-cart { + .link-coupon-add { + display: inline; + text-align: center; + + span { + @include font-size("s-200"); + line-height: 14.04px; + text-decoration: none; + + position: initial; + display: inline; + text-align: initial; + } + } +} + +.container-cart { + .link-coupon-add { + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 28.08px; + } + } + } +} + +.container-cart { + .coupon-fieldset { + button { + @include btn-primary-blue-black(); + @include font-size("s-200"); + font-weight: 700; + line-height: 19.07px; + letter-spacing: 1px; + + width: fluid(133.51px, 343px); + height: 36px; + max-width: 133.51px; + border-radius: 5px; + + transition: all 0.2s linear; + + outline: none; + text-shadow: none; + text-transform: uppercase; + cursor: pointer; + + &:hover { + background-color: lighten($clr-gray-600, 5); + } + + &:active { + background-color: darken($clr-gray-600, 5); + } + } + } +} + +.container-cart { + .coupon-fieldset { + @media screen and (min-width: 2500px) { + button { + @include font-size("splus-100"); + line-height: 28.08px; + + width: fluid(260.34px, 688.35px); + height: 55px; + max-width: none; + } + } + + @media screen and (min-width: 600px) { + $width-container: 992px; + + .coupon-value { + width: fluid(853px, $width-container); + } + } + } +} + +.container-cart { + @media screen and (min-width: 2500px) { + .cart-links-bottom { + .link-choose-more-products-wrapper a { + @include font-size("splus-100"); + line-height: 28px; + } + + .btn-place-order-wrapper a { + &::before { + @include font-size("splus-300"); + line-height: 38px; + } + } + } + } +} + +.container-cart { + .cart-template .summary-totalizers { + td { + &.empty { + display: none; + } + + &.info { + text-align: left; + width: 50%; + } + + &.monetary { + text-align: right; + width: 50%; + } + } + + tbody td { + @include font-size("s-300"); + font-style: normal; + font-weight: normal; + + font-family: $font-family-200; + line-height: 16.38px; + + color: #292929; + padding: 10px 0; + } + + tfoot { + tr { + td.info, + td.monetary { + @include font-size("s-500"); + + font-style: normal; + font-weight: 700; + padding: 0; + + line-height: 24.51px; + font-family: $font-family-100; + color: $clr-gray-600; + } + } + } + } +} + +.container-cart { + .cart-template .summary-totalizers { + @media screen and (min-width: 2500px) { + tbody td { + @include font-size("splus-300"); + line-height: 32.76px; + } + + tfoot { + tr { + td.info, + td.monetary { + @include font-size("splus-700"); + + line-height: 49.03px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..dd0ea41 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,11 +1,3 @@ body .container-main.container-order-form .orderform-template.active { - .mini-cart { - width: 32.3242%; - margin-left: unset; - margin-right: 0; - float: right; - } - .orderform-template-holder { - width: 66.1132%; - } + --none-rules: #000; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..2cd2c42 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,152 @@ -.empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; +@mixin btn-secondary { + display: flex; + align-items: center; + justify-content: center; - @include mq(md, max) { - padding: 0 16px; - } - } + border: 1px solid $clr-common-black; + border-radius: 0; - &-title { - font-size: 20px; - } + font-weight: 400; + font-family: $font-family-200; - &-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); - } - } - } + color: $clr-common-black; + background-color: $clr-common-white; +} + +.container-main.container-cart { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + width: 100%; + height: 100%; + padding: 0 16px !important; + + #cart-title { + display: none !important; + } + + .checkout-container, + .cart-template { + min-height: auto; + margin: 0; + } + + .link-choose-products { + width: fluid(250px, 343px); + max-width: 250px; + margin: 0 auto; + } + + .transactions-container { + display: none; + } + + @include mq("lg") { + width: fluid(400px, 1280px); + padding: 0 !important; + max-width: none; + + .link-choose-products { + width: fluid(327px, 400px); + max-width: 327px; + } + } + + @include mq("xxl") { + width: fluid(659px, 2500px); + } +} + +.empty-cart { + &-message { + display: none; + } +} + +.container-main.container-cart { + .empty-cart { + font-family: $font-family-100; + &-content { + color: $clr-gray-600; + text-align: center; + + .empty-cart-title { + font-size: 0px; + + &::before { + @include font-size("s-500"); + line-height: 24.51px; + + content: "Seu carrinho está vazio."; + text-align: center; + text-transform: uppercase; + } + } + } + + &-links { + .link-choose-products { + @include btn-secondary(); + + transition: ease-in 0.22s all; + font-size: 0px; + padding: 16px 0; + + &::before { + @include font-size("s-300"); + line-height: 16px; + + content: "Continuar Comprando"; + + font-style: normal; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + &:hover { + background: lighten($clr-gray-600, 5); + } + } + } + + &-content { + @include mq("lg") { + padding: 0; + } + + @include mq("xl") { + .empty-cart-title { + &::before { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } + + @include mq("xxl") { + &-content { + .empty-cart-title { + &::before { + @include font-size("sxplus"); + line-height: 65.37px; + } + } + } + + &-links { + .link-choose-products { + width: fluid(638.67px, 659px); + max-width: none; + + &::before { + @include font-size("splus-200"); + line-height: 32.76px; + } + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..0cbe5d3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,21 +3,6 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; -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; @@ -29,7 +14,7 @@ body { } &.body-cart { - font-family: $font-family; + font-family: $font-family-100; } &.body-cart, @@ -47,38 +32,38 @@ body { padding-left: 0; } } - .container-order-form, - .container-cart { - width: 80%; - } +} + +.container-cart { + min-height: 70vh; } .btn-success { - background: $color-black; + background: $clr-gray-600; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($clr-gray-600, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $clr-gray-600 !important; } #cart-title, #orderform-title { - color: $color-gray2; - font-family: $font-family; - font-weight: 500; - font-size: 36px; + color: $clr-common-black; + font-family: $font-family-100; + font-weight: 700; + font-size: 24px; line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + margin: 16px 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 48px; - @include mq(md, max) { - margin-left: 30px; + line-height: 65px; } } @@ -96,7 +81,7 @@ body { &::before, &::after { content: ""; - background: $color-gray2; + background: $clr-gray-400; display: block; float: right; height: 2px; diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..33a427d 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -101,14 +101,32 @@ position: absolute; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; z-index: 4; left: 10px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + + @media screen and (min-width: 2500px) { + height: 57.99px; + width: 26px; + + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center center / cover; + } } .slick-next { z-index: 4; right: 10px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + + @media screen and (min-width: 2500px) { + height: 57.99px; + width: 26px; + + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center / cover; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..e28f695 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,54 +1,168 @@ -/* _footer.scss */ +/* prettier-ignore*/ .footerCheckout { - border-top: none; - color: $color-gray2; + color: $clr-gray-400; &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + border-top: 1px solid $clr-common-black; + padding: 16px 25px 18.88px 8px; + } + + &__stamps { + order: 0; + margin: 0 0 16px; } &__address { - color: $color-gray2; - font-family: $font-family; + order: 1; + margin: 0 0 16px; + } + + &__developedBy { + order: 2; + } +} + +/* prettier-ignore*/ +.footerCheckout { + .container { + display: flex; + flex-direction: column; + width: 100%; + + &::before, + &::after { + content: none; + } + } +} + +.footerCheckout { + &__developedBy a, + &__developedBy, + &__wrapper, + &__stamps { + display: flex; + align-items: center; + } + + &__wrapper { + justify-content: space-between; + } +} + +.footerCheckout { + @include mq("md") { + &__stamps { + width: 34.510595358%; + } + + &__wrapper { + padding: 16px 0; + + .container { + width: 94.9734%; + margin: 0 auto; + } + } + } + + @include mq("lg") { + .container { + align-items: center; + justify-content: space-between; + flex-direction: row; + } + + &__wrapper { + width: 100%; + } + + &__address { + order: 0; + + margin: 0; + } + + &__stamps { + order: 1; + + width: 33.223684211%; + margin: 0; + } + + &__developedBy { + order: 2; + } + } + + @include mq("xxl") { + &__address { + span { + font-size: 20px; + } + } + + &__stamps { + width: 29.074771156%; + } + + &__developedBy { + span { + font-size: map-get($text-sizes, "s-500"); + line-height: 24.51px; + } + } + } +} + +.footerCheckout { + &__creditList { + display: flex; + align-items: center; + gap: 4px; + + width: 100%; + } + + &__creditItem, + &__verificatedVtex { + max-width: 100%; + + img { + width: 100%; + height: auto; + } + } +} + +.footerCheckout { + &__address { font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; - } + color: $clr-gray-400; } +} +.footerCheckout { &__stamps { - align-items: center; - display: flex; - justify-self: center; - list-style: none; - - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; - } - &__divider { - background-color: $color-gray4; display: inline-block; + + width: 1px; height: 24px; margin: 0 8px; - width: 1px; + + background-color: $clr-gray-300; } } +} +.footerCheckout { &__developedBy { - align-items: center; - display: flex; - list-style-type: none; margin: 0; li:last-child { @@ -56,19 +170,23 @@ } a { - align-items: center; - color: $color-gray2; - display: flex; - font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; + font-family: $font-family-100; text-decoration: none; + color: $clr-gray-400; + span { margin-right: 8px; } + + img { + width: 32px; + height: auto; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..f39d459 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,300 @@ /* _header.scss */ -.headerCheckout { - .container { - width: auto !important; + +body { + margin: 0; + padding: 0; +} + +body * { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body :where(ul, li, ol) { + list-style: none; + margin: 0; +} + +@function fluid($width, $design-width) { + $width: calc($width / $design-width * 100); + + $width: quote($width + "%"); + + @return unquote($width); +} + +@mixin font-size($size) { + $content: $text-sizes; + + @if map-has-key($content, $size) { + font-size: map-get($content, $size); } - &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; +} + +.headerCheckout { + position: sticky; + position: -webkit-sticky; + top: 0; + left: 0; + background: $clr-common-white; + width: 100%; + padding: 16px; + border-bottom: 1px solid $clr-common-black; + z-index: 10000; + + .container { + width: 100%; + height: auto; + margin: 0; } - &__logo { - img { - height: 52px; - width: auto; - } + &__wrapper, + &__safeBuy { + display: flex; + align-items: center; + } + + &__wrapper { + justify-content: space-between; + width: 100%; } &__safeBuy { - span { - align-items: center; - display: flex; - text-transform: uppercase; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray; + gap: 8px; + + width: 100%; + max-width: 119px; + } +} + +.headerCheckout__safeBuy { + span { + @include font-size("s-200"); + line-height: 16.34px; + + font-style: normal; + font-weight: normal; + font-family: $font-family-100; + text-transform: uppercase; + } + + img { + width: 12px; + height: 13px; + } +} + +.headerCheckout__logo { + width: fluid(155.58px, 343px); + height: auto; + max-width: 155.58px; + + img { + width: 100%; + height: 100%; + } +} + +.headerCheckout { + .progress-bar { + display: none; + } +} + +.headerCheckout { + @include mq("lg") { + padding: 29px 0; + + &__wrapper { + width: fluid(1018px, 1280px); + margin: 0 auto; } - i { - margin-right: 8px; + .progress-bar { + display: flex; + } + } + + @include mq("xxl") { + $width-container: 1988.28px; + + &__wrapper { + width: fluid($width-container, 2500px); + } + + &__logo { + width: fluid(382.07px, $width-container); + max-width: none; + height: auto; + } + + &__safeBuy { + width: fluid(235.28px, $width-container); + max-width: none; + + span { + @include font-size("splus-100"); + line-height: 32.68px; + font-family: $font-family-100; + } + + img { + width: 29.47px; + height: 41.46px; + } + } + } +} + +.headerCheckout { + .progress-bar { + width: 439px; + } + + .progress-list, + .progress-item, + .progress-container, + .progress-content { + display: flex; + align-items: center; + } + + .progress-list { + justify-content: space-between; + width: 100%; + margin: 0; + } + + .progress-item, + .progress-container, + .progress-content { + flex-direction: column; + justify-content: center; + } + + .progress-container { + position: relative; + + width: 100%; + } + + .progress-content { + gap: 16px; + } + + .progress-item { + @include font-size("s-200"); + line-height: 14.04px; + + font-family: $font-family-200; + + &--left, + &--right { + width: 40%; + + .progress-line { + position: absolute; + bottom: 6px; + + width: 100%; + height: 1px; + border-bottom: 1px solid #000; + } + } + + &--left { + .progress-container { + align-items: flex-start; + } + + .progress-line { + left: 75%; + transform: translateX(-50%); + } + } + + &--center { + width: 90px; + } + + &--right { + .progress-container { + align-items: flex-end; + } + + .progress-line { + right: 72%; + transform: translateX(50%); + } + } + } + + .progress-bullet { + $square-size: 12px; + + position: relative; + z-index: 10; + + width: $square-size; + height: $square-size; + border: 1px solid $clr-common-black; + border-radius: 100%; + + background-color: $clr-common-white; + + &.active { + background-color: $clr-common-black; + } + } +} + +.headerCheckout { + @include mq("xxl") { + .progress-bar { + width: 1078.86px; + } + + .progress-list { + justify-content: initial; + } + + .progress-item { + @include font-size("splus-100"); + line-height: 28.08px; + + &--left, + &--right { + width: fluid(444px, 1078.86px); + + .progress-line { + bottom: 12px; + } + } + + &--left { + .progress-line { + left: 67%; + } + } + + &--center { + width: auto; + max-width: none; + } + + &--right { + .progress-line { + right: 67%; + } + } + } + + .progress-bullet { + $square-size: 24px; + + width: $square-size; + height: $square-size; } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..41b9f63 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,175 @@ /* _prateleira.scss */ + +.footerCheckout__prateleira { + width: 100%; + padding: 0 8px; + margin: 43.42px 0 54px; + + .slick-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + + width: 13.64px; + height: 29.47px; + + border: none; + background-color: transparent; + } +} + +.footerCheckout__prateleira { + &-title { + width: 100%; + padding: 0 8px; + margin-bottom: 20px; + + font-size: 14px; + font-weight: 400; + font-family: $font-family-200; + text-align: center; + + color: $clr-common-black; + } +} + +.footerCheckout__prateleira { + .product-item-container { + margin: 0 8px; + } +} + +.footerCheckout__prateleira { + .product-item { + &-figure { + width: 100%; + margin-bottom: 20px; + + img { + max-width: 100%; + width: 100%; + height: auto; + } + } + } +} + +.footerCheckout__prateleira { + .product-item { + &-name, + &-link, + .type-name { + @include font-size("s-250"); + line-height: 24px; + font-family: $font-family-100; + } + } +} + +.footerCheckout__prateleira { + .product-item { + &-name { + min-height: 36px; + height: 36px; + font-weight: 400; + font-family: $font-family-100; + text-overflow: ellipsis; + text-align: center; + + @media screen and (max-width:410px) { + height: 53px; + } + } + + &-types { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 5px; + min-height: 68px; + height: 68px + } + } +} + +.footerCheckout__prateleira { + .product-item { + &-link { + @include btn-primary-blue-white(); + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + padding: 12px 0; + border-radius: 8px; + + font-weight: 700; + letter-spacing: 5; + + color: $clr-common-white; + } + } + + .product-type-container { + display: flex; + align-items: center; + justify-content: center; + + height: 28px; + border-radius: 8px; + + background-color: $clr-primary-blue-500; + } + + .type-name { + padding: 5px; + + font-weight: 700; + letter-spacing: 5; + font-family: $font-family-100; + + color: $clr-common-white; + } +} + +.footerCheckout__prateleira { + @include mq("lg") { + width: fluid(1034px, 1280px); + margin: 43.42px auto 56px; + padding: 0; + } + + @include mq("md") { + &-title { + @include font-size("splus-100"); + line-height: 38px; + } + } + + @include mq("xxl") { + &-title { + @include font-size("sxplus"); + line-height: 76px; + + padding: 0; + } + + .product-item { + &-name, + &-link, + .type-name { + @include font-size("splus-200"); + line-height: 35.41px; + + font-family: $font-family-100; + } + } + + .product-item-container { + margin: 0 9.965px; + } + } +} diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 8d969d6..14ffda3 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -1,183 +1,217 @@ +@use "sass:meta"; + +@mixin btn-primary-blue-black() { + border: none; + color: $clr-common-black; + background: $clr-primary-blue-500; + text-transform: uppercase; +} + +@mixin btn-primary-blue-white() { + border: none; + color: $clr-common-white; + background: $clr-primary-blue-500; + text-transform: uppercase; +} + +@mixin text-size($size) { + @if map_has_key($text-sizes, $size) { + $size: map_get($text-sizes, $size); + + font-size: $size; + } +} + /** * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) */ @mixin push--auto { - margin: { - left: auto; - right: auto; - } + margin: { + left: auto; + right: auto; + } } -@mixin pseudo($display: block, $pos: absolute, $content: ''){ - content: $content; - display: $display; - position: $pos; +@mixin pseudo($display: block, $pos: absolute, $content: "") { + content: $content; + display: $display; + position: $pos; } - -@mixin position($top: false,$right: false, $bottom:false, $left: false){ - @if( $top ){ - top:$top; - } - @if( $right ){ - right:$right; - } - @if( $left ){ - left:$left; - } - @if( $bottom ){ - bottom:$bottom; - } +@mixin position($top: false, $right: false, $bottom: false, $left: false) { + @if ($top) { + top: $top; + } + @if ($right) { + right: $right; + } + @if ($left) { + left: $left; + } + @if ($bottom) { + bottom: $bottom; + } } -@mixin responsive-ratio($x,$y, $pseudo: false) { - $padding: unquote( ( $y / $x ) * 100 + '%' ); - @if $pseudo { - &:before { - @include pseudo($pos: relative); - width: 100%; - padding-top: $padding; - } - } @else { - padding-top: $padding; - } +@mixin responsive-ratio($x, $y, $pseudo: false) { + $padding: unquote(($y / $x) * 100 + "%"); + @if $pseudo { + &:before { + @include pseudo($pos: relative); + width: 100%; + padding-top: $padding; + } + } @else { + padding-top: $padding; + } } -@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){ - @include pseudo($pos: $position); - width: 0; - height: 0; - @if $round { - border-radius: 3px; - } - @if $direction == down { - border-left: $size solid transparent; - border-right: $size solid transparent; - border-top: $size solid $color; - margin-top: 0 - round( $size / 2.5 ); - } @else if $direction == up { - border-left: $size solid transparent; - border-right: $size solid transparent; - border-bottom: $size solid $color; - margin-bottom: 0 - round( $size / 2.5 ); - } @else if $direction == right { - border-top: $size solid transparent; - border-bottom: $size solid transparent; - border-left: $size solid $color; - margin-right: -$size; - } @else if $direction == left { - border-top: $size solid transparent; - border-bottom: $size solid transparent; - border-right: $size solid $color; - margin-left: -$size; - } +@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) { + @include pseudo($pos: $position); + width: 0; + height: 0; + @if $round { + border-radius: 3px; + } + @if $direction == down { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-top: $size solid $color; + margin-top: 0 - round($size / 2.5); + } @else if $direction == up { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-bottom: $size solid $color; + margin-bottom: 0 - round($size / 2.5); + } @else if $direction == right { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-left: $size solid $color; + margin-right: -$size; + } @else if $direction == left { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-right: $size solid $color; + margin-left: -$size; + } } @mixin input-placeholder { - &.placeholder { @content; } - &:-moz-placeholder { @content; } - &::-moz-placeholder { @content; } - &:-ms-input-placeholder { @content; } - &::-webkit-input-placeholder { @content; } + &.placeholder { + @content; + } + &:-moz-placeholder { + @content; + } + &::-moz-placeholder { + @content; + } + &:-ms-input-placeholder { + @content; + } + &::-webkit-input-placeholder { + @content; + } } @mixin hardware($backface: true, $perspective: 1000) { - @if $backface { - backface-visibility: hidden; - } - perspective: $perspective; + @if $backface { + backface-visibility: hidden; + } + perspective: $perspective; } @mixin truncate($truncation-boundary) { - max-width: $truncation-boundary; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + max-width: $truncation-boundary; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } @mixin appearance($val: none) { - -webkit-appearance: $val; - -moz-appearance: $val; - appearance: $val; + -webkit-appearance: $val; + -moz-appearance: $val; + appearance: $val; } - -@mixin separador($cor,$p-right: 5px) { - position: relative; - padding-right: $p-right; - display: inline-block; - &:after{ - content:' '; - display: block; - width: 1px; - height: 100%; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - background-color: $cor; - } - &:last-child:after{ - display: none; - } +@mixin separador($cor, $p-right: 5px) { + position: relative; + padding-right: $p-right; + display: inline-block; + &:after { + content: " "; + display: block; + width: 1px; + height: 100%; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + background-color: $cor; + } + &:last-child:after { + display: none; + } } @mixin mq($width, $type: min) { - @if map_has_key($grid-breakpoints, $width) { - $width: map_get($grid-breakpoints, $width); - @if $type == max { - $width: $width - 1px; - } - @media only screen and (#{$type}-width: $width) { - @content; - } - } + @if map_has_key($grid-breakpoints, $width) { + $width: map_get($grid-breakpoints, $width); + @if $type == max { + $width: $width - 1px; + } + @media only screen and (#{$type}-width: $width) { + @content; + } + } } @mixin mq_range($min, $max) { - @if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) { - - $width_max: map_get($grid-breakpoints, $max); - $width_min: map_get($grid-breakpoints, $min); - $width_max: $width_max - 1px; - @media only screen and (min-width: $width_min) and (max-width:$width_max) { - @content; - } - } + @if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) { + $width_max: map_get($grid-breakpoints, $max); + $width_min: map_get($grid-breakpoints, $min); + $width_max: $width_max - 1px; + @media only screen and (min-width: $width_min) and (max-width: $width_max) { + @content; + } + } } -@mixin z-index($nome:'',$soma:0){ - @if map_has_key($z-index, $nome) { - z-index: (map_get($z-index,$nome )+$soma) ; - } +@mixin z-index($nome: "", $soma: 0) { + @if map_has_key($z-index, $nome) { + z-index: (map_get($z-index, $nome) + $soma); + } } -@mixin scrollbar($width:8px,$bg-color:#eee, $trak-color:#aaa,$trak-color-hover:#999,$border-radius:0 ){ - &::-webkit-scrollbar { - width: $width; - } +@mixin scrollbar( + $width: 8px, + $bg-color: #eee, + $trak-color: #aaa, + $trak-color-hover: #999, + $border-radius: 0 +) { + &::-webkit-scrollbar { + width: $width; + } - &::-webkit-scrollbar-track { - background-color: $bg-color; - border-radius: $border-radius; - } + &::-webkit-scrollbar-track { + background-color: $bg-color; + border-radius: $border-radius; + } - &::-webkit-scrollbar-thumb { - background-color: $trak-color; - border-radius: $border-radius; - &:hover { - background: $trak-color-hover; - } - } + &::-webkit-scrollbar-thumb { + background-color: $trak-color; + border-radius: $border-radius; + &:hover { + background: $trak-color-hover; + } + } } @function map-get-next($map, $key, $fallback: false, $return: value) { - // Check if map is valid @if type-of($map) == map { - // Check if key exists in map @if map-has-key($map, $key) { - // Init index counter variable $i: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..2603bd7 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,38 +1,61 @@ /* 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-100: "Open Sans", sans-serif; +$font-family-200: "Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; +$clr-common-black: #000; +$clr-common-white: #fff; -$color-white: #fff; +$clr-gray-600: #292929; +$clr-gray-500: #6c6c6c; +$clr-gray-400: #7d7d7d; +$clr-gray-300: #8d8d8d; +$clr-gray-250: #c4c4c4; +$clr-gray-200: #e5e5e5; +$clr-gray-100: #f0f0f0; -$color-gray: #6c6c6c; -$color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; -$color-gray4: #8d8d8d; -$color-gray5: #e5e5e5; +$clr-blue-500: #4267b2; -$color-blue: #4267b2; +$clr-green-500: #4caf50; -$color-green: #4caf50; +$clr-primary-blue-500: #00c8ff; + +/*prettier-ignore*/ +$text-sizes: ( + "s-050": 9px, + "s-100": 10px, + "s-200": 12px, + "s-250": 13px, + "s-300": 14px, + "s-400": 16px, + "s-500": 18px, // MAIN + "s-600": 20px, + "splus-100": 24px, + "splus-200": 26px, + "splus-300": 28px, + "splus-500": 32px, + "splus-700": 36px, + "splus-900": 40px, + "sxplus": 48px, +) !default; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xxs: 0, + xs: 280px, + sm: 375px, + md: 600px, + lg: 1025px, + xl: 1280px, + xxl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level-100: 5, + level-200: 10, + level-300: 15, + level-400: 20, + level-500: 25, ) !default; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..d69c3da 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -1,20 +1,31 @@ -
    -
    -
    - -
    Aqui entra a barra de progresso -
    -
    - Cadeado - Compra segura -
    +
    +
    +
    + + +
    +
      +
      + +
      + Cadeado + Compra segura
      -
      +
      +
      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"