From 101a190c1515566f8056e913740fcf0964dd7388 Mon Sep 17 00:00:00 2001 From: Nathalia Sardou Date: Sun, 18 Dec 2022 02:47:38 -0300 Subject: [PATCH] tentando ajustar progress bar --- checkout/src/arquivos/js/components/Footer.js | 243 +++++++------ checkout/src/arquivos/js/components/Header.js | 134 +++---- .../sass/checkout/_checkout-autenticacao.scss | 121 +++++-- .../sass/checkout/_checkout-carrinho.scss | 66 ++-- .../src/arquivos/sass/checkout/_checkout.scss | 11 +- .../src/arquivos/sass/partials/_footer.scss | 334 ++++++------------ .../arquivos/sass/partials/_prateleira.scss | 104 ++++++ 7 files changed, 537 insertions(+), 476 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index bab3f28..30daaa8 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -17,11 +17,14 @@ export default class Footer { events() { window.addEventListener("hashchange", () => { + this.onUpdate(); if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { this.listaPrateleira.style.display = "flex"; + this.titleSlick.style.display = "block"; } if (window.location.hash != "#/cart") { this.listaPrateleira.style.display = "none"; + this.titleSlick.style.display = "none"; } }); addEventListener("resize", () => { @@ -50,7 +53,9 @@ export default class Footer { if (target.style.display == "none" && window.location.hash == "#/cart") { list.style.display = "flex"; list.style.display = "block"; - this.fetchApi(); + if (!this.listaPrateleira.classList.contains("fetch")) { + this.fetchApi(); + } } else { this.cartTitulo.style.display = "none"; list.style.display = "none"; @@ -70,6 +75,7 @@ export default class Footer { } else { cartTitle.style.display = "block"; list.style.display = "flex"; + slickTitle.style.display = "block"; } }); }); @@ -99,127 +105,142 @@ export default class Footer { }); } } + createPaymentsIcons() { this.payments.innerHTML = ` + `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +
    • - - -`; -} -createVtexpciIcon() { - this.vtexpci.innerHTML = ` -
    - -
    - `; -} -createDevIcons() { - this.devIncons.innerHTML = ` -
  • - - Powered By -
    - -
    -     -
    • +
  • + + Developed By +
    + +
    +     +
    • + `; + } -
  • - - Developed By -
    - -
    -     -
    • - `; -} + async fetchApi() { + this.titulo.innerHTML = ` +

    Você também pode gostar:

    + `; -async fetchApi() { - this.titulo.innerHTML = ` -

    Você também pode gostar:

    - `; + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + const ul = document.createElement("ul"); + ul.classList.add("slick-list"); + this.listaPrateleira.appendChild(ul); - fetch( - "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" - ) - .then((response) => response.json()) - .then((data) => { - const ul = document.createElement("ul"); - ul.classList.add("slick-list"); - this.listaPrateleira.appendChild(ul); + data.map((item) => { + let cores = ""; + for (let i = 0; i < item.items.length; i++) { + cores += `

    ${item.items[i].name}

    `; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("slick-list__itemList"); - data.map((item) => { - let cores = ""; - for (let i = 0; i < item.items.length; i++) { - cores += `

    ${item.items[i].name}

    `; - } - const li = document.createElement("li"); - li.setAttribute("name", item.itemId); - li.classList.add("slick-list__itemList"); - - li.innerHTML = ` -
    - -
    -
    ${item.productName}
    -
    - ${cores} -
    - VER PRODUTO - `; - ul.appendChild(li); - this.listaPrateleira.classList.add("fetch"); + li.innerHTML = ` +
    + +
    +
    ${item.productName}
    +
    + ${cores} +
    + VER PRODUTO + `; + ul.appendChild(li); + this.listaPrateleira.classList.add("fetch"); + }); + }) + .then(() => { + this.addCarrossel(); }); - }) - .then(() => { - this.addCarrossel(); - }); -} + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 4a2be30..06569f2 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,36 +8,46 @@ export default class Header { async init() { await this.selectors(); - this.progressBarHTML(); + this.createProgressBar(); await this.progressBarProgress(); } async selectors() { - // this.item = await waitElement("#my-element", { - // //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - // timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - // interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - //}); this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); } - progressBarHTML() { + createProgressBar() { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = ` -
    -
    -
    -
    -

    MeuCarrinho

    -
    -
    -

    DadosPessoais

    -
    -
    -

    Pagamento

    -
    -
    -
    `; + + `; } if (this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ``; @@ -45,15 +55,14 @@ export default class Header { } async progressBarProgress() { if (this.progressBar && window.innerWidth > 1024) { - const progressBarLista = document.querySelectorAll("#progressBar ul li"); - progressBarLista.forEach((li) => { - if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + progressBarList.forEach((li) => { + if (window.location.href == "https://m3academy.myvtex.com/checkout/#/cart") { if (li.children[0].children[0].children["progress-bar-circle-1"]) { li.children[0].children[0].children["progress-bar-circle-1"].classList.add( "active" ); } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { if ( li.children[0].children[0].children[ @@ -65,7 +74,6 @@ export default class Header { ].classList.remove("active"); } } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { if ( li.children[0].children[0].children[ @@ -78,9 +86,9 @@ export default class Header { } } } else if ( - window.location.href === "http://m3academy.myvtex.com/checkout/#/email" || - window.location.href == "http://m3academy.myvtex.com/checkout/#/profile" || - window.location.href === "http://m3academy.myvtex.com/checkout/#/shipping" + window.location.href == "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" ) { if (li.children[0].children[0].children["progress-bar-circle-1"]) { if ( @@ -89,16 +97,16 @@ export default class Header { ].classList.contains("active") ) { li.children[0].children[0].children[ - "progress-bar-circle-3" + "progress-bar-circle-1" ].classList.remove("active"); } } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { li.children[0].children[0].children["progress-bar-circle-2"].classList.add( "active" ); } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { if ( li.children[0].children[0].children[ @@ -111,7 +119,7 @@ export default class Header { } } } else if ( - window.location.href === "http://m3academy.myvtex.com/checkout/#/payment" + window.location.href == "https://m3academy.myvtex.com/checkout/#/payment" ) { if (li.children[0].children[0].children["progress-bar-circle-1"]) { if ( @@ -120,7 +128,7 @@ export default class Header { ].classList.contains("active") ) { li.children[0].children[0].children[ - "progress-bar-circle-3" + "progress-bar-circle-1" ].classList.remove("active"); } } @@ -135,7 +143,6 @@ export default class Header { ].classList.remove("active"); } } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { li.children[0].children[0].children["progress-bar-circle-3"].classList.add( "active" @@ -160,7 +167,6 @@ export default class Header { ].classList.remove("active"); } } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { if ( li.children[0].children[0].children[ @@ -184,16 +190,17 @@ export default class Header { ].classList.contains("active") ) { li.children[0].children[0].children[ - "progress-bar-circle-3" + "progress-bar-circle-1" ].classList.remove("active"); } } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + console.log("teste 1"); li.children[0].children[0].children[ "progress-bar-circle-2" ].classList.add("active"); } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { if ( li.children[0].children[0].children[ @@ -204,36 +211,35 @@ export default class Header { "progress-bar-circle-3" ].classList.remove("active"); } - } else if (window.location.hash == "#/payment") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - - if (li.children[0].children[0].children["progress-bar-circle-3"]) { + } + } else if (window.location.hash == "#/payment") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.add("active"); + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); } } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.add("active"); + } } }); }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..7dccc00 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,8 +1,9 @@ .checkout-container { .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + border-color: $color-black; + font-family: $font-family-secundary; + font-size: 20px; + padding-top: 0px; .link-cart { a { @@ -26,26 +27,34 @@ span { color: #303030; - font-size: 24px; + font-size: 20px; + text-transform: uppercase; + letter-spacing: 2px; } small { - color: $color-gray4; + display: none; } } } .client-email { - margin: 0 0 16px; + display: flex; + justify-content: flex-end; + margin-left: -200px; input { box-shadow: none; color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 2px solid $color-black; + border-right: 6px solid $color-blue-2; box-sizing: border-box; border-radius: 5px; + font-size: 12px; + width: inherit; + cursor: pointer; @media (max-width: 490px) { width: auto; @@ -53,12 +62,12 @@ } button { - background-color: $color-black; + background-color: $color-blue-2; border-radius: 5px; border: none; font-family: $font-family; + color: $color-black; height: 54px; - right: 0; top: 0; @media (max-width: 490px) { @@ -70,30 +79,47 @@ span.help.error { color: red; + position: absolute; + top: 50px; + right: 320px; + font-size: 12px; } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black; + border-radius: 5px; h3 { + font-family: $font-family; + font-weight: 700; color: #303030; - margin: 0 0 8px 0; + margin: 0 0 18px 0; + position: relative; + bottom: 10px; + right: 15px; } ul { margin: 0; + position: relative; + bottom: 10px; li { + font-family: $font-family; + line-height: 20px; + margin-bottom: 5px; + font-weight: 700; + font-size: 12px; + right: 15px; span { color: $color-black; } i::before { - color: $color-black; + color: $color-blue-2; font-size: 1rem; opacity: 1; } @@ -102,8 +128,11 @@ i::before { color: $color-black; - font-size: 6rem; + font-size: 4rem; opacity: 0.5; + padding: 0px 5px 0px 5px; + position: relative; + bottom: 5px; } } } @@ -112,19 +141,17 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; .accordion-heading { span { - color: #303030; - margin-bottom: 8px; - padding: 0; + display: none; - i::before { - fill: #303030; + &::before { + display: none; } } @@ -146,20 +173,25 @@ /* General configurations */ .client-notice { - color: $color-black; + display: none; } p { label { - color: $color-black; - font-weight: 500; + color: $color-gray2; + font-weight: 400; + font-size: 14px; } select, input { + :first-child{ + display: none; + } border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray7; box-shadow: none; + } .help.error { @@ -183,18 +215,14 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $color-blue-2; + color: $color-white; margin-top: 8px; outline: none; transition: all 0.2s linear; - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } + width: 100%; + font-weight: 700; + font-family: $font-family; } /* Shipping configurations */ @@ -276,13 +304,32 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color: $color-black; } + .vtex-omnishipping-1-x-addressFormPart1 { + p:first-child{ + + display: none !important; + } + select{ + display: none !important; + } + + p{ + font-size: 12px; + font-family: $font-family; + font-weight: 700; + color: $color-gray2; + } + #ship-postalCode{ + width: 80% !important; + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 69b0654..e839b3f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -48,7 +48,7 @@ } .cart { - border: 1px solid $color-gray4; + border: 1px solid $color-gray5; ul li { border-top: none; @@ -71,16 +71,23 @@ .summary-template-holder { border-top: none; background: $color-white; + border: 1px solid #e5e5e5; } #go-to-cart-button a { color: #303030; - text-decoration: underline; + position: relative; + bottom: 30px; + right: 5px; + text-decoration: none; } .summary-totalizers { td.info { width: 100%; + font-family: $font-family; + font-weight: 400; + font-size: 14px; } } @@ -543,25 +550,25 @@ height: 36px; text-transform: uppercase; - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } } small a { + color: transparent; + + &::before{ + content: "Não sei meu código postal"; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; - color: $color-blue; + color: $color-black; + cursor: pointer; margin-top: 7px; + } } + span.help.error { color: red; font-size: 12px; @@ -646,12 +653,13 @@ } } span { - font-family: $font-family; + font-family: $font-family-secundary; + color: $color-black; + font-weight: 400; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; text-decoration: none; } } @@ -667,7 +675,7 @@ } .link-coupon-add { - color: #303030; + font-size: 12px; text-decoration: underline; } @@ -716,10 +724,12 @@ } button { - background: $color-black; + font-family: $font-family; + background: $color-blue-2; + font-weight: 400; border: none; border-radius: 5px; - color: $color-white; + color: $color-black; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -728,18 +738,11 @@ transition: all 0.2s linear; width: 94px; text-transform: uppercase; + cursor: pointer; @include mq(md, max) { width: 138px; } - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } } } } @@ -747,6 +750,12 @@ .accordion-group { tr { border-color: #e5e5e5; + font-family: $font-family; + font-weight: 700; + border-bottom: 1px solid #e5e5e5; + &:last-child{ + border-bottom: none; + } td { &.empty { @@ -776,11 +785,13 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; color: $color-black; + font-weight: 700; } } } @@ -825,7 +836,7 @@ .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue-2; border: none; border-radius: 5px; display: block; @@ -833,17 +844,14 @@ transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 5); - } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; + font-weight: 700; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 1b41379..f2a0568 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -1,4 +1,5 @@ @import "./checkout-vazio"; +@import "../partials/prateleira"; @import "./checkout-carrinho"; @import "./checkout-pagamento"; @import "./checkout-autenticacao"; @@ -13,14 +14,14 @@ footer { } -footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; -} +// footer .footerCheckout__wrapper { +// width: 94.9734%; +// margin: auto auto 0 auto; +// } footer .footerCheckout__prateleira, header { width: 79.53125%; - margin: 0 auto; + margin: 42px auto; } body { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 75d7603..7617ffd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,79 +1,104 @@ -/* _footer.scss */ .footerCheckout { - display: flex; - border-top: 1px solid #292929; - .container{ - position: static; - display: flex; - max-width: max-content; - justify-content: space-between; - margin-top: 16px; - margin-bottom: 16px; - margin-right: 400px; + .container { + display: flex; + width: 100%; + padding: 7px 0; + margin: 0; + justify-content: space-between; + } - &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; - } - &__address { - color: $color-gray2; - font-family: "Open Sans",sans-serif; - font-style: normal; - font-weight: normal; + &__wrapper { + border-top: 1px solid $color-black; + width: 100%; + margin-top: 10px; + } + + &__address { + color: $color-gray5; + font-family: $font-family; + font-weight: 400; + line-height: 14px; font-size: 10px; - line-height: 12px; text-transform: capitalize; - min-width: 280px; - margin-top: 8px; - position: static; - } - .payments-icons-wrapper{ - display: flex; - list-style: none; - } - - img { - max-width: 100%; - width: 36px; - height: 20px; - vertical-align: middle; - border: 0; - } - - &__stamps { - width: 404px; - align-items: center; - display: flex; - list-style: none; - margin-left: 150px; - - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + span { + margin-left: 16px; } + } + + &__stamps { + display: flex; + height: 33px; + align-items: center; + list-style: none; + margin: 0 0 0 5px; + + li { + height: 33px; + } + + .payments-icons-wrapper { + display: flex; + width: 100%; + list-style: none; + margin: 0; + gap: 4px; + + figure { + padding: 6px 0 7px; + width: 35.65px; + height: 20px; + margin: 0; + } + } + + .footerCheckout__stamps__divider { + border-left: 1px solid $color-gray; + margin: 0 10px; + height: 33px; + padding: 0 0 9px; + } + + .footerCheckout__vtexpci { + .vtex-icon { + width: 53px; + margin: 0; + } + } } &__developedBy { align-items: center; display: flex; list-style-type: none; - margin-left: 145px; -} + margin-right: 15px; + + li { + margin-left: 16px; + + figure { + margin: 0; + } + } + + .vtex-icon { + max-width: 19px; + margin: 0; + } + .m3-icon { + max-width: 19px; + margin: 0; + } a { align-items: center; - color: $color-gray2; + color: $color-gray5; display: flex; font-family: $font-family; font-style: normal; - font-weight: normal; - font-size: 10px; + font-weight: 400; + font-size: 9px; line-height: 12px; text-decoration: none; @@ -81,184 +106,33 @@ margin-right: 8px; } } - .li-2{ - margin-left: 35px; - } - } - -@media (min-width: 2000px){ - .footerCheckout { - .container{ - display: flex; - margin-left: 0px; - margin-right: 850px; - justify-content: space-between; - } - - &__address { - position: relative; - right: 300px; - font-size: large; - min-width: 550px; - } - - img { - max-width: 100%; - min-width: 69px; - min-height: 39px; - } - - &__stamps { - position: relative; - right: 300px; - - } - - &__developedBy { - position: relative; - } - a { - span { - font-size: large; - } + font-size: 9px; + line-height: 25px; + } + + li { + margin-left: 10px; + } + + .vtex-icon { + width: 88px; + } + .m3-icon { + width: 56px; } } -} -// + .footerCheckout::after, + ::before { + display: none; + content: none; + } -@media (min-width: 491px) and (max-width: 1024px){ - - .footerCheckout { - display: flex; - &__prateleira{ - display: none; - } - .container{ - display: flex; - position: static; - flex-direction: column; - margin-left: 0px; - } - &__address { - position: relative; - min-width: 269px; - top: 30px; - } - &__stamps { - width: auto; - width: 342px; - position: relative; - bottom: 25px; - margin-left: -30px; - img{ - max-width: 35px !important; - height: 20px; - } - } - - &__developedBy { - max-width: 222px; - margin-left: 0px; - margin-top: 16px; - img{ - width: 18px; - height: 13px; - } - } - } -} - -@media (min-width: 300px) and (max-width: 490px){ - .footerCheckout { - max-height: 111px; - display: flex; - &__prateleira{ - display: none; - } - .container{ - display: flex; - position: static; - flex-direction: column; - align-items: center; - margin-left: auto; - margin-right: auto; - } - &__address { - position: relative; - min-width: 269px; - top: 30px; - align-self: center; - } - &__stamps { - max-width: 100%; - align-self: flex-end; - position: relative; - bottom: 25px; - margin-left: -30px; - img{ - max-width: 35px !important; - height: 20px; - } - } - - &__developedBy { - max-width: 222px; - margin-left: 0px; - margin-top: 16px; - align-self: center; - img{ - width: 17px; - height: 13px; - } - } - } -} - -@media (max-width: 299px){ - .footerCheckout { - max-height: 111px; - display: flex; - &__prateleira{ - display: none; - } - .container{ - display: flex; - position: static; - flex-direction: column; - align-items: center; - margin-left: auto; - margin-right: auto; - } - &__address { - position: relative; - min-width: 269px; - top: 30px; - align-self: center; - } - &__stamps { - max-width: 100%; - align-self: flex-end; - position: relative; - bottom: 25px; - margin-right: 30px; - img{ - max-width: 30px !important; - height: 20px; - } - } - - &__developedBy { - max-width: 222px; - margin-left: 0px; - margin-top: 16px; - align-self: flex-start; - img{ - width: 17px; - height: 13px; - } - } + .footerCheckout::before, + ::after { + display: none; + content: none; } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..6c08c42 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,105 @@ /* _prateleira.scss */ +.title_slick { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + margin: 20px 0; +} + + footer .footerCheckout__prateleira { + max-width: 80%; + + .slick-list { + width: 100%; + &__itemList { + display: flex !important; + flex-direction: column; + list-style: none; + align-items: center; + justify-content: center; + width: 95.28% !important; + margin: 0; + display: flex; + @include mq(dt, max) { + width: 97% !important; + margin: 0 7.5px; + } + + .img-container { + margin: 0; + background: #ededed; + .itemImg{ + display: block; + width: 100%; + height: 100%; + } + } + + .itemtName { + height: 36px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + color: $color-black; + margin: 20px 0 !important; + + } + + .itemSku { + display: flex; + gap: 5px; + list-style: none; + margin-bottom: 20px; + + p { + border-radius: 8px; + background: $color-blue-2; + color: $color-white; + padding: 5px; + } + } + + .itemLink { + width: 100%; + border-radius: 8px; + background: $color-blue-2; + padding: 12px 0; + text-align: center; + color: $color-white; + cursor: pointer; + } + } + } + + .slick-prev { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + top: 41%; + left: 14px; + border: none; + height: 30px; + + @include mq(dt, min) { + left: 10px; + } + } + .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + top: 41%; + right: 9px; + border: none; + height: 30px; + + @include mq(dt, min) { + right: 20px; + } + } +}