diff --git a/bash.exe.stackdump b/bash.exe.stackdump new file mode 100644 index 0000000..0dbf51a --- /dev/null +++ b/bash.exe.stackdump @@ -0,0 +1,16 @@ +Stack trace: +Frame Function Args +000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) +000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) +000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3) +000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) +000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) +000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) +000FFFFCD30 0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF) +000FFFFCD30 0021005B335 (00210358290, 00000001000, 00000000004, 00210355C90) +000FFFFCD30 0021005B847 (002100DF51E, 00000000000, 00000000000, 00000000000) +000FFFFCD30 0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000) +000FFFFCD30 00210048C0C (00000000000, 00000000000, 00000000000, 00000000000) +000FFFFFFF0 00210047716 (00000000000, 00000000000, 00000000000, 00000000000) +000FFFFFFF0 002100477C4 (00000000000, 00000000000, 00000000000, 00000000000) +End of stack trace diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..34c946a 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -32,9 +32,7 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); - event.target.nextElementSibling.classList.toggle( - "dropdown__content--closed" - ); + event.target.nextElementSibling.classList.toggle("dropdown__content--closed"); } init() { @@ -56,14 +54,7 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr( - "src", - alterarTamanhoImagemSrcVtex( - $el.attr("src"), - this.width, - this.height - ) - ); + $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..5e34d3a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,116 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + await this.carrinho(); + this.prateleira(); + 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"); + //CARRINHO VAZIO + this.fraseCarrinhoVazio = await waitElement(".empty-cart-title"); + this.continuarCompra = await waitElement("#cart-choose-products"); + //carrinho + this.frete = await waitElement(".shipping-date"); + this.unidade = await waitElement(".product-price"); + this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); + //pagamento + this.notification = await waitElement(".notification"); } - onUpdate() { + async prateleira() { + if (this.checkoutVazio.style.display == "none") { + this.requestApi(); + this.addCarrossel(); + window.addEventListener("hashchange", () => { + if (window.location.hash !== "#/cart") { + this.removePrateleira(); + } + if (window.location.hash == "#/cart") { + this.requestApi(); + this.addCarrossel(); + } + }); + } + } + + async removePrateleira() { + let prateleira = this.footerPrateleira; + prateleira.innerHTML = ``; + } + + async requestApi() { + let prateleira = this.footerPrateleira; + prateleira.innerHTML = `

Você também pode gostar:

+ `; + + const url = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`; + fetch(url) + .then((response) => { + return response.json(); + }) + .then((data) => { + return data.map(function (product) { + let li = document.createElement("li"); + li.setAttribute("id", product.productId); + li.innerHTML = ` + ${ + product.productName + } +

${product.productName}

+
${product.items + .map((name) => { + return `${name.name}`; + }) + .join("")}
+ `; + prateleira.children[1].appendChild(li); + }); + }); + } + + async addCarrossel() { + const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); + + if (window.screen.width > 1024) { + $(prateleira).slick({ + slidesToShow: 4, + slidesToScroll: 1, + infinite: true, + arrows: true, + }); + } + } + + async 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); + mutations.map((mutation) => { + const display = mutation.target.attributes.style.nodeValue; + console.log(mutation); + + if (display == "display: none;") { + this.prateleira(); + } else if (display == "display: block;") { + this.removePrateleira(); + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + carrinho() { + this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; + this.continuarCompra.innerHTML = `continuar comprando`; + this.frete.innerHTML = `Frete`; + this.unidade.innerHTML = `Unidade`; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..2e7ce42 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,1137 @@ -.checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; - - .link-cart { - a { - color: $color-black; - font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } - } - } - - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; - - h3 { - margin-bottom: 16px; - - span { - color: #303030; - font-size: 24px; - } - - small { - color: $color-gray4; - } - } - } - - .client-email { - margin: 0 0 16px; - - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; - - @media (max-width: 490px) { - width: auto; - } - } - - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; - - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } - - span.help.error { - color: red; - } - } - - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; - - h3 { - color: #303030; - margin: 0 0 8px 0; - } - - ul { - margin: 0; - - li { - span { - color: $color-black; - } - - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } - - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } - - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; - - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - - i::before { - fill: #303030; - } - } - - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } - - .accordion-inner { - padding: 0; - - /* General configurations */ - - .client-notice { - color: $color-black; - } - - p { - label { - color: $color-black; - font-weight: 500; - } - - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } - - .help.error { - color: red; - } - } - - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } - - .state-inscription-box span { - font-weight: 500; - } - - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } - } - - /* Shipping configurations */ - - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; - - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - - svg path { - fill: #d8c8ac; - } - } - } - } - - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-summary-group-info { - border-color: $color-gray4; - } - - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; - - @include mq(md, max) { - background-position: 8px 9px; - } - - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } - - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } - - .shp-summary-group-price { - padding-right: 16px; - } - - .shp-summary-package { - padding-left: 16px; - } - - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } - - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } - - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } +h1#orderform-title { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black-500; + margin: 17px 0; +} + +.checkout-container { + .client-pre-email { + border-color: $color-black-500; + font-family: $font-family; + padding-top: 8px; + + .link-cart { + a { + font-family: $font-family-secundary; + margin-top: 6px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: $color-black-500; + font-size: 14px; + + &:hover { + color: lighen($color-black-500, 10); + } + } + } + + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + + h3 { + margin-bottom: 21px; + + span { + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-family: $font-family-secundary; + } + + small { + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-family: $font-family-secundary; + } + } + } + + .client-email { + /*left: -61px;*/ + margin: 0 0 24.56px; + + input { + /*width: 65.8%;*/ + width: 82%; + height: 50px; + box-shadow: none; + color: $color-black-500; + font-family: $font-family; + padding: 0 14px; + border: 1px solid $color-black-500; + border-radius: 5px 0px 0px 5px; + box-sizing: border-box; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + &::placeholder { + color: $color-black-500; + } + + @media (max-width: 490px) { + width: auto; + } + } + + button { + background-color: $color-blue2; + color: $color-black-500; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + width: 126.76px; + height: 52px; + right: 45px; + top: -1px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + + &:hover { + background: lighten($color-blue2, 5); + } + + &:active { + background: darken($color-blue2, 5); + } + + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } + + span.help.error { + color: $color-red; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + } + } + + .emailInfo { + width: 366px; + height: 116px; + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black-500; + border-radius: 5px; + + h3 { + color: $color-black-500; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + margin: 0 0 9.56px 0; + } + + ul { + margin: 0; + + li { + span { + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black-500; + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + margin-right: 6px; + } + } + } + + i.icon-lock { + right: 0; + bottom: -30px; + } + + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } + + .shipping-data, + .payment-data, + .client-profile-data { + /*margin-top: 10px;*/ + .accordion-group { + margin-top: 10px; + border: 1px solid $color-gray3; + border-radius: 8px; + font-family: $font-family; + padding: 24px 16px 16px 16px; + + .accordion-heading { + span { + &.accordion-toggle-active { + i { + display: none; + } + } + + display: flex; + font-family: $font-family-secundary; + color: $color-black; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin-bottom: 14px; + padding: 0; + + i::before { + display: none; + /*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 { + margin-top: 8px; + padding: 0; + + .shipping-summary-info, + .notification { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + } + + /* General configurations */ + + .client-notice { + display: none; + font-family: $font-family-secundary; + color: $color-black; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin-bottom: 36px; + } + + p { + label { + color: $color-gray2; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-bottom: 1px; + } + } + + select, + input { + border: 1px solid $color-gray9; + border-radius: 5px; + box-shadow: none; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray10; + height: auto; + box-sizing: border-box; + padding: 13px 12px; + + &::placeholder { + color: $color-gray10; + } + } + + .help.error { + color: $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; + } + + .newsletter { + margin-bottom: 44px; + .newsletter-text { + color: $color-gray11; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + + button.submit { + margin-top: 0; + margin-bottom: 22px; /*tem 15de pad e 7 de p*/ + width: 100%; + height: 42px; + text-transform: uppercase; + border: none; + border-radius: 8px; + background: $color-blue2; + + outline: none; + transition: all 0.2s linear; + letter-spacing: 0.05em; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + &:hover { + background: lighten($color-blue2, 5); + } + + &:active { + background: darken($color-blue2, 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: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") + no-repeat; + background-size: 21.25px 20.07px; + background-position-x: 12.38px; + background-position-y: center; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px 12px 12px 43px; + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-transform: lowercase; + color: $color-blue2; + } + } + + .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); + } + } + } + } + + /*IDENTIFICAÇÃO*/ + .client-profile-data { + .accordion-group { + padding: 24px 17px; + + .accordion-heading { + span { + span { + font-size: 0; + &::before { + content: "Identificação"; + font-size: 16px; + } + } + + display: flex; + font-family: $font-family-secundary; + color: $color-black; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin-bottom: 14px; + padding: 0; + + i::before { + display: none; + /*fill: #303030;*/ + } + + #edit-profile-data { + display: contents !important; + width: 20.26px !important; + height: 20.89px !important; + opacity: 0; + padding: 0; + color: unset; + font-size: 0; + + i.icon-edit { + margin-left: auto; + background-size: contain; + width: 21px !important; + height: 21px !important; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + } + } + } + } + + /*IDENTIFICAÇÃO FECHADA*/ + &.filled { + height: 164px; + box-sizing: border-box; + + .form-step.box-info { + position: relative; + margin-top: 11px; + + .client-profile-email { + position: absolute; + top: 20px; + } + + .client-profile-summary { + .tel { + position: absolute; + top: 40px; + } + } + } + } + + #client-email { + width: 100%; + } + + .checkbox { + padding: 0; + } + + #opt-in-newsletter { + height: 18px; + width: 18px; + margin: 2px 8px 2px 0px; + border: 1px solid $color-gray12; + border-radius: 3px; + } + } + } + + /*PAGAMENTO*/ + .payment-data { + /*ICONE DE EDITAR CAIXA*/ + .payment-edit-link { + display: flex !important; + margin-left: auto; + + .link-box-edit { + display: contents !important; + width: 20.26px !important; + height: 20.89px !important; + opacity: 0; + padding: 0; + color: unset; + font-size: 0; + + i.icon-edit { + background-size: contain; + width: 21px !important; + height: 21px !important; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + } + } + } + + .accordion-group { + margin-top: 0; + padding: 24px 17px; + + .accordion-heading { + span { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + color: $color-black; + margin-bottom: 0; + } + } + .accordion-body { + .accordion-inner { + margin-top: 12px; + + .box-new.row-fluid { + &::before { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + display: block; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: $color-gray2; + margin-bottom: 16px; + } + } + + .link-gift-card { + display: none !important; + } + + .payment-group { + margin-top: 0; + width: 30.9171%; + + .payment-group-list-btn { + width: 100%; + .payment-group-item { + &.active { + background: rgba(220, 221, 227, 0.3); + border: 1px solid $color-orange; + opacity: 1; + text-decoration: none; + + span { + color: $color-orange; + } + } + + display: flex; + align-items: center; + justify-content: center; + background: rgba(240, 240, 240, 0.3); + mix-blend-mode: normal; + border: 1px solid $color-black-500; + border-radius: 6px; + width: 100%; + margin: 0 0 12px 0; + padding: 0; + height: 50px; + + span { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + color: $color-gray14; + margin: 0; + padding: 0; + + background-image: none !important; + } + } + + /*.pg-transferencia-bancaria, + #payment-group-creditControlPaymentGroup, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + #payment-group-custom203PaymentGroupPaymentGroup, + #payment-group-instantPaymentPaymentGroup, + #payment-group-PSEPaymentGroup, + #TransferPaymentGroup, + #payment-group-customPrivate_502PaymentGroup, + #payment-group-custom201PaymentGroupPaymentGroup, + #payment-group-MercadoPagoPaymentGroup, + #payment-group-SPEIPaymentGroup { + display: none; + }*/ + } + } + + .steps-view { + width: 61.32%; + } + } + } + } + } + + .box-client-info-pj { + display: none; + } +} + +//ENTREGA +#shipping-data { + .step.accordion-group.shipping-data { + padding: 24px 17px 17px 17px; + + //ICONE + #edit-shipping-data { + display: contents !important; + width: 20.26px !important; + height: 20.89px !important; + opacity: 0; + padding: 0; + color: unset; + font-size: 0; + + i.icon-edit { + margin-left: auto; + background-size: contain; + width: 21px !important; + height: 21px !important; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + } + } + + /*BOTOES DA ENTREGA*/ + .vtex-omnishipping-1-x-deliveryChannelsWrapper { + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + border: 1px solid #f5f5f5; + border-radius: 100px; + margin-bottom: 25px; + + .shipping-method-toggle { + background-color: $color-white; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + border: 1px solid #292929; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; + color: #41115d; + text-shadow: none; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #c4c4c4; + } + } + .input.ship-country.text { + display: none; + } + + .input.ship-postalCode { + label { + font-size: 0; + + &::before { + content: "CEP:"; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + } + #ship-postalCode { + border: 1px solid $color-gray7; + border-radius: 8px; + min-width: 100%; + margin-bottom: 10px; + } + + small { + margin-left: 0; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-black; + } + } + /*FORMA DE ENTREGA*/ + .vtex-omnishipping-1-x-deliveryGroup { + margin-top: 25px; + + p { + margin-bottom: 11px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + } + + #delivery-packages-options { + border: 1px solid $color-gray9; + border-radius: 8px; + margin-bottom: 15px; + + label { + .shp-option-text-label { + text-transform: uppercase; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + } + + .shp-option-text-time, + .shp-option-text-price { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + } + + //INATIVO + .vtex-omnishipping-1-x-leanShippingOption { + svg { + width: 18px; + height: 18px; + /*border: 1px solid #c4c4c4; acho q nao precisa*/ + border-radius: 3px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); + + path { + fill: transparent; + } + } + } + + /*ATIVO*/ + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: $color-gray13; + + svg { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + } + } + } + //ENTREGA FECHADA + .box-info { + padding: 11px 0 0 0; + + .shp-summary-group { + padding: 0; + margin-bottom: 21px; + + .shp-summary-group-info { + border: none; + + .address-summary { + background: none; + padding: 0; + border: none; + display: flex; + flex-flow: wrap; + column-gap: 2px; + margin-bottom: 25px; + + .neighborhood { + display: none; + } + } + } + + .shp-summary-package { + padding: 0; + display: flex; + justify-content: end; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + + &::after { + content: "-"; + margin-left: 2px; + } + } + + .shp-summary-group-price { + padding: 0; + margin-top: auto; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + } + } + + .link-change-shipping { + display: none; + } + } + + //ENDEREÇO DE ENTREGA + .delivery-address-title { + margin-bottom: 11px; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + } + + .address-summary { + border: 1px solid #e0e0e0; + border-radius: 8px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + + .vtex-omnishipping-1-x-address { + margin-bottom: 0; + + div { + display: flex; + flex-direction: column; + + p { + margin: 0 0 15px 0; + + label { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + } + + input { + width: 100%; + + &::placeholder { + font-size: 0; + } + } + } + } + } + .btn-ask-for-geolocation-cta { + border: none; + border-radius: 8px; + background: $color-blue2; + + &:hover { + background: lighten($color-blue2, 5); + } + + &:active { + background: darken($color-blue2, 5); + } + } + } +} + +//RESUMO DO PEDIDO (MINI CART CARRINHO) +.cart-fixed.cart-fixed-transition { + height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO + + box-sizing: border-box; + border: 1px solid $color-gray5; + margin-top: 10px; + padding: 24px 0px 0px; + border-radius: 8px; + + h2 { + padding: 0; + margin-bottom: 34px; + margin-left: 17px; + margin-right: 17px; + text-align: start; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } + + .summary-cart-template-holder { + height: auto; + + .cart { + padding: 0 17px; + border: 0; + + li { + display: flex; + + span.badge { + display: none; + } + + a { + margin-right: 0; + width: 60px; + height: 60px; + + img { + max-width: 60px; + height: 60px; + width: 60px; + object-fit: cover; + } + } + + .description { + margin-left: auto; + margin-top: 0; + display: flex; + flex-direction: column; + align-items: end; + justify-content: center; + + .shipping-date { + width: max-content; + } + + .price { + margin-right: 0; + } + } + + span.fn.product-name { + white-space: normal; + align-self: center; + padding: 0; + margin-left: 7px; + width: 115px; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black; + } + + strong { + font-family: $font-family; + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + } + } + + #go-to-cart-button { + margin-bottom: 5px; + + a { + font-family: $font-family; + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + margin-right: 17px; + } + } + + .summary { + margin: 0; + } + + .accordion-group { + tr { + border-top: 1px solid $color-gray9; + display: flex; + + td { + /*&.empty { + }*/ + + &.info, + &.monetary { + font-family: $font-family; + color: $color-gray2; + font-weight: 400; + font-size: 14px; + line-height: 19px; + padding-top: 25px; + padding-bottom: 25px; + } + + &.info { + margin-left: 17px; + } + + &.monetary { + margin-right: 17px; + } + } + } + + tfoot { + td.info, + td.monetary { + padding-top: 30px; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: $color-black; + } + + td.monetary { + font-size: 14px; + line-height: 19px; + } + } + } + + .payment-submit-wrap { + margin: 0; + } + + #payment-data-submit { + background: $color-green2; + border-radius: 8px; + position: absolute; + top: 20px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + color: $color-white; + height: 42px; + margin: 0; + + i { + display: none; + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..b299a40 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -2,9 +2,50 @@ @include mq(md, max) { width: 100%; } + + h1#cart-title.hide { + font-weight: 700; + font-size: 24px; + line-height: 33px; + letter-spacing: 0.05em; + color: $color-black; + margin: 17px 0 16px; + } + + .cart-template .cart-items th { + font-family: $font-family-secundary; + font-weight: 400; + padding: 0 0 17px; + text-align: start; + } } .cart-template { + .empty-cart-title { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + margin: 0 0 32px; + } + + .empty-cart-message { + display: none; + } + + #cart-choose-products { + color: $color-black-500; + border: 1px solid $color-black-500; + background: $color-white; + font-family: $font-family-secundary; + font-weight: 400; + letter-spacing: normal; + border-radius: 0%; + padding: 15px 64px 17px 65px; + margin: 0; + } + font-family: $font-family; @include mq(md, max) { padding: 0 0; @@ -13,7 +54,8 @@ display: none; } .cart { - border: 3px solid $color-gray3; + font-family: $font-family-secundary; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -106,8 +148,13 @@ } .cart-items { - .product-item { - padding: 16px 0; + tr.product-item { + position: relative; + } + + td { + text-align: start; + padding: 0; } th { @@ -127,7 +174,7 @@ } .product-image { - height: auto; + height: 60px; padding: 0; width: 60px; @@ -136,9 +183,10 @@ } img { + max-width: 60px; height: 60px; - max-width: 100%; - width: auto; + width: 60px; + object-fit: cover; @include mq(sm, max) { height: 72px; @@ -148,25 +196,20 @@ } .product-name { - padding-right: 0; + padding: 0 0 0 16px; @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + color: $color-black-500; 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; } @@ -179,7 +222,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -188,8 +231,10 @@ } } - .product-price { + td.product-price { min-width: 100px; + top: 13px; + @include mq(md, max) { min-width: 78px; } @@ -200,7 +245,6 @@ } span.list-price { - color: $color-gray2; font-size: 12px; line-height: 14px; text-decoration-line: line-through; @@ -210,22 +254,32 @@ } .old-product-price-label { + color: $color-gray6; text-transform: lowercase; } + + .muted { + color: $color-gray6; + } + } + + .new-product-price-label { + text-transform: lowercase; } } td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 13px 0 0; + height: 34px; max-height: 38px; max-width: 118px; - padding: 0; + padding: 9px 0; width: max-content !important; @media (max-width: 490px) { @@ -234,15 +288,13 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; + border: 0; display: block; max-height: 38px; margin: 0 !important; - padding: 8px 0; + padding: 0; width: 38px; - color: $color-gray2; + color: $color-black-500; box-shadow: none; @include mq(lg, max) { @@ -253,24 +305,24 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-blue2; display: block; font-weight: 500; - padding: 1px 12px; + padding: 1px 11px; } } .icon-minus-sign { &:before { - content: "-"; font-size: 16px; + padding-right: 0; } } .icon-plus-sign { &:before { - content: "+"; font-size: 14px; + padding-left: 0; } } @@ -308,6 +360,13 @@ @include mq(md, max) { display: none; } + + .total-selling-price { + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } } .item-remove { @@ -315,8 +374,10 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray7; font-size: 15px; + width: 10px; + height: 10px; @include mq(md, max) { font-size: 18px; @@ -339,24 +400,25 @@ } .summary { + margin-top: 48px; + .cart-more-options { + padding: 0; margin: 0; width: max-content; .srp-container { - padding: 0 0 0 10px; - @include mq(md, max) { padding: 0 16px; } .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px; font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black-500; @include mq(md, max) { margin-top: 0; @@ -365,30 +427,37 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-weight: 400; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10.65px; + width: 276px; + max-width: 276px; } button.shp-open-options { - background-color: $color-gray5; + width: 157px; + height: 44px; + background-color: $color-gray8; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black-500; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: 400; outline: none; - padding: 12px 40px; + padding: 12px 41px; transition: all 0.2s linear; + mix-blend-mode: normal; + margin-top: 0; &:hover { - background-color: lighten($color-gray5, 5); + background-color: lighten($color-gray4, 5); } &:active { - background-color: darken($color-gray5, 5); + background-color: darken($color-gray4, 5); } } } @@ -405,31 +474,32 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + margin-top: 10px; + height: 42px; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; - - font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; + font-style: normal; letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; &__wrapper { background-color: $color-white; @@ -439,17 +509,23 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px; text-transform: uppercase; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + left: 1px; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-500; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black-500; + } + + &__pickup { + color: $color-gray7; } label { @@ -466,18 +542,17 @@ label { font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; - line-height: 14px; - color: $color-black; - margin-bottom: 12px; + line-height: 16px; + color: $color-black-500; + margin-bottom: 2px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray7; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; height: 36px; padding: 12px 8px; @@ -485,51 +560,64 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; + font-weight: 700; + font-size: 14px; + line-height: 19px; color: $color-white; - font-size: 12px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; outline: none; position: absolute; right: -150px; - top: 36px; + top: 28px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; + padding-top: 8px; + padding-bottom: 9px; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0px; + + &::before { + content: "Não sei meu código postal"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-decoration-line: underline; + color: $color-black-500; + margin-top: 4px; + } } span.help.error { - color: red; + color: $color-red; font-size: 12px; position: absolute; left: 0; width: 100%; - top: 17px; } } } + .vtex-shipping-preview-0-x-pc .ship-country { + display: none; + } + .srp-result { strong, .srp-items { @@ -592,9 +680,12 @@ &-totalizers { padding: 0; - width: 346px; + width: 354px; + margin-bottom: 5px; .coupon-data { + margin-bottom: 8px; + #cart-link-coupon-add { text-decoration: none; &:hover { @@ -603,12 +694,12 @@ } } span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; text-decoration: none; } } @@ -621,6 +712,11 @@ .coupon-column { .coupon { margin: 0; + width: 362px; + + div { + text-align: start; + } } .link-coupon-add { @@ -630,10 +726,10 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; + margin-bottom: 4px; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; color: $color-gray2; @@ -641,7 +737,8 @@ } .coupon-fields { - margin-bottom: 32px; + position: relative; + margin-bottom: 42px; @include mq(sm, max) { span { @@ -657,14 +754,23 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; - color: $color-gray4; + /*color: $color-gray4;*/ font-size: 12px; - height: 34px; + height: 36px; + width: 178px; + max-width: 204.32px; padding: 0 12px; - max-width: 160px; + + &::placeholder { + color: $color-gray7; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + } @include mq(sm, max) { max-width: 100%; @@ -673,17 +779,21 @@ } button { - background: $color-black; + font-family: $font-family; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + letter-spacing: 0.05em; + margin-left: 15px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 133px; text-transform: uppercase; @include mq(md, max) { @@ -691,19 +801,33 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } + + &::after { + content: "Adicionar cupom de desconto"; + position: absolute; + top: 54px; + right: 98px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black-500; + } } } .accordion-group { tr { border-color: #e5e5e5; + padding: 0; td { &.empty { @@ -722,10 +846,12 @@ &.info { text-align: left; + font-family: $font-family-secundary; } &.monetary { text-align: right; + font-family: $font-family-secundary; } } } @@ -733,10 +859,11 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -747,7 +874,7 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 352px; @include mq(md, max) { padding: 0 16px; @@ -764,46 +891,51 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 14.91px; @include mq(md, max) { margin-bottom: 0px; } a { - font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; + font-family: $font-family-secundary; } } .btn-place-order-wrapper { a { - background: $color-green; - border: none; - border-radius: 5px; + background: $color-blue2; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding: 13px 19px; + border: 0; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue2, 5); + } + + &:active { + background-color: darken($color-blue2, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black-500; text-transform: uppercase; vertical-align: middle; - line-height: 19px; text-shadow: none; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae3bc1d..b8e5e08 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,7 +16,7 @@ footer .footerCheckout__prateleira, header { @include mq(tablet, min) { width: 79.53125%; - margin: 0 auto; + margin: 0 auto 56px auto; } @include mq(tablet, max) { @@ -74,13 +74,11 @@ body { #cart-title, #orderform-title { - color: $color-gray2; font-family: $font-family; font-weight: 500; font-size: 36px; line-height: 42px; margin: 40px 0 30px; - letter-spacing: 0.1em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..5446c03 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,3 +1,18 @@ +.footerCheckout { + &__prateleira { + h2 { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black-500; + margin-bottom: 20px; + } + } +} + /* Slider */ .slick-slider { @@ -13,12 +28,13 @@ -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; + margin: 0; } .slick-list { position: relative; overflow: hidden; display: block; - margin: 0; + margin: 0 -8px; padding: 0; &:focus { @@ -61,7 +77,10 @@ visibility: hidden; } } + .slick-slide { + margin: 0 8px; + float: left; height: 100%; min-height: 1px; @@ -69,9 +88,64 @@ [dir="rtl"] & { float: right; } - img { - display: block; + li { + text-align: center; + + img { + display: block; + margin-bottom: 20px; + } + + p { + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + color: $color-black-500; + } + + .product-variation { + display: flex; + justify-content: center; + margin-bottom: 20px; + + &__variation { + margin: 0 2.5px; + background: $color-blue2; + border-radius: 8px; + padding: 5px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + } + } + + .product-btn { + width: 100%; + height: 42px; + justify-content: center; + text-align: center; + background: $color-blue2; + border-radius: 8px; + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + } } + &.slick-loading img { display: none; } @@ -99,15 +173,22 @@ .slick-arrow { font-size: 0; position: absolute; + width: 13.64px; + height: 29.47px; + border: none; + z-index: 4; + top: 45%; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") no-repeat center center; - z-index: 4; + background-size: contain; left: 10px; } .slick-next { - z-index: 4; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + background-size: contain; right: 10px; } .slick-arrow.slick-hidden { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 9711df4..81acfde 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,7 +1,10 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black-500; + .container { - width: auto !important; + width: 79.53125% !important; } &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 48f351e..de298d1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,10 +15,25 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #989898; +$color-gray7: #c4c4c4; +$color-gray8: #ededed; +$color-gray9: #e0e0e0; +$color-gray10: #bdbdbd; +$color-gray11: #808080; +$color-gray12: #828282; +$color-gray13: #f2f2f2; +$color-gray14: #58595b; $color-blue: #4267b2; +$color-blue2: #00c8ff; + +$color-red: #ff0000; + +$color-orange: #f15a31; $color-green: #4caf50; +$color-green2: #298541; /* Grid breakpoints */ $grid-breakpoints: (