From 318c3efcb46387002849f9da0885738322f0d3a3 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 13 Dec 2022 15:19:17 -0300 Subject: [PATCH 1/3] feat: Cria a prateleira --- checkout/src/arquivos/js/components/Footer.js | 68 ++++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- 2 files changed, 68 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..7e1c59a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,13 +6,17 @@ export default class Footer { } async init() { + this.productList = []; + this.carregaProdutos(); await this.selectors(); // this.onUpdate(); + await this.criaProduto(); } 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.prateleira = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -30,11 +34,73 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__prateleira"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, }); } + + async criaProduto() { + let estrutura = "" + let estruturaSkus = "" + if(this.prateleira) { + console.log(this.productList, "Cria HTMl"); + this.productList.forEach((product) => { + estruturaSkus = "" + product.skus.forEach(name => { + estruturaSkus += `${name}` + }) + + + console.log(product.skus); + + estrutura +=` +
+
+ +
+

${product.productName}

+
+ ${estruturaSkus} +
+ Ver Produto +
+
+
` + }) + this.prateleira.innerHTML = estrutura; + } + + this.addCarrossel(); + + } + + carregaProdutos() { + fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") + .then(response => response.json()) + .then(data => { + data.forEach(item => { + const arraySKU = []; + item.items.forEach(sku => { + arraySKU.push(sku.name); + }) + + const product = { + image: item.items[0].images[0].imageUrl, + productName: item.productName, + link: item.link, + skus: arraySKU + }; + + this.productList.push(product); + }) + console.log(this.productList, "Carrega Lista"); + }) + .catch(err => log(err)); + } + + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..1fa3253 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,7 +12,7 @@ footer .footerCheckout__wrapper { width: 94.9734%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, +footer .prateleira, header { width: 79.53125%; margin: 0 auto; From 63a40064dfde76a744341daf44e51667a45af114 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 14 Dec 2022 08:19:43 -0300 Subject: [PATCH 2/3] feat: Cria e estiliza a parte debaixo do footer --- checkout/src/arquivos/js/components/Footer.js | 106 +++++-- .../src/arquivos/sass/checkout/_checkout.scss | 18 +- .../src/arquivos/sass/partials/_footer.scss | 290 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 2 + checkout/src/template-checkout/templates.html | 49 +++ 5 files changed, 399 insertions(+), 66 deletions(-) create mode 100644 checkout/src/template-checkout/templates.html diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7e1c59a..ffbcfce 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,8 +9,11 @@ export default class Footer { this.productList = []; this.carregaProdutos(); await this.selectors(); + await this.criaStamps(); + await this.criaDevelopedBy(); + // this.onUpdate(); - await this.criaProduto(); + // await this.criaProduto(); } async selectors() { @@ -18,6 +21,10 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.prateleira = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); + + this.stamps = await waitElement(".footerCheckout__stamps"); + this.developedBy = await waitElement(".footerCheckout__developedBy"); + this.footer = await waitElement(".footerCheckout__wrapper"); } onUpdate() { @@ -40,24 +47,21 @@ export default class Footer { $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, }); } async criaProduto() { - let estrutura = "" - let estruturaSkus = "" - if(this.prateleira) { - console.log(this.productList, "Cria HTMl"); + let estrutura = ""; + let estruturaSkus = ""; + if (this.prateleira) { this.productList.forEach((product) => { - estruturaSkus = "" - product.skus.forEach(name => { - estruturaSkus += `${name}` - }) + estruturaSkus = ""; + product.skus.forEach((name) => { + estruturaSkus += `${name}`; + }); - - console.log(product.skus); - - estrutura +=` + estrutura += `
@@ -69,38 +73,88 @@ export default class Footer { Ver Produto
- ` - }) + `; + }); this.prateleira.innerHTML = estrutura; } this.addCarrossel(); - } carregaProdutos() { - fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") - .then(response => response.json()) - .then(data => { - data.forEach(item => { + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + data.forEach((item) => { const arraySKU = []; - item.items.forEach(sku => { + item.items.forEach((sku) => { arraySKU.push(sku.name); - }) + }); const product = { image: item.items[0].images[0].imageUrl, productName: item.productName, link: item.link, - skus: arraySKU + skus: arraySKU, }; this.productList.push(product); - }) - console.log(this.productList, "Carrega Lista"); + }); }) - .catch(err => log(err)); + .catch((err) => log(err)); } + async criaStamps() { + if (this.stamps) { + this.stamps.innerHTML = `
  • + lodo da MasterCard +
    • +
  • + logo da Visa +
    • +
  • + logo da Amex +
    • +
  • + logo da Elo +
    • +
  • + logo da HiperCard +
    • +
  • + logo do PayPal +
    • +
  • + logo Boleto +
    • +
  • +
    • +
  • + logo da Vtex PCI +
    • `; + } + } + async criaDevelopedBy() { + + if(this.developedBy) { + this.developedBy.innerHTML = ` +
  • + + Powered by + + +
    • +
  • + + Developed by + + +
    • + `; + + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 1fa3253..651945d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,9 +9,23 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; + border-top: 1px solid $black-500; + + .container { + width: 94.9734%; + margin: 16px auto 16px auto; + + @include mq(tablet, max) { + margin: 0; + width: 100%; + } + + @include mq(desktop4K, min) { + margin: 14px auto 16.54px auto; + } + } } + footer .prateleira, header { width: 79.53125%; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..aba7c6e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,74 +1,288 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + &__prateleira { + display: none; + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + .container { + display: flex; + align-items: center; + justify-content: center; + + @include mq(tablet, max) { + flex-direction: column; + align-items: flex-start; + } + } } &__address { - color: $color-gray2; - font-family: $font-family; + font-family: "Open Sans"; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; - max-width: 40%; + color: $black-300; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(tablet, max) { + order: 2; + + margin: 0 16px 16px; + } + + @include mq(desktop4K, min) { + font-size: 20px; + line-height: 27px; } } &__stamps { - align-items: center; - display: flex; - justify-self: center; - list-style: none; + box-sizing: border-box; + width: 33.234%; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + display: flex; + align-items: center; + justify-content: space-between; + list-style: none; + margin: 0 auto; + + @include mq(tablet, max) { + order: 1; + margin: 0; + + width: 100%; + padding: 16px 8px; + + justify-content: flex-start; } - &__divider { - background-color: $color-gray4; - display: inline-block; + @include mq(desktop4K, min) { + width: 29.0827%; + } + + .divider { height: 24px; - margin: 0 8px; width: 1px; + background-color: $gray-500; + + @include mq(desktop4K, min) { + height: 43px; + } + } + } + + &__li { + &.masterCard { + margin-right: 13.35px; + + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + + &.visa { + margin-right: 13.22px; + + @include mq(tablet, max) { + margin-right: 5.22px; + + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.amex { + margin-right: 13.22px; + @include mq(tablet, max) { + margin-right: 4.22px; + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.elo { + margin-right: 13.38px; + @include mq(tablet, max) { + margin-right: 4.48px; + width: 3.623%; + } + + @include mq(celular, max) { + width: 10.1727%; + } + + @include mq(desktop4K, min) { + margin-right: 13.67px; + } + } + &.hiperCard { + margin-right: 13.22px; + @include mq(tablet, max) { + margin-right: 4.22px; + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.payPal { + margin-right: 13.35px; + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + &.boleto { + margin-right: 13.35px; + + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + &.vtexPCI { + margin-left: 10px; + + @include mq(tablet, max) { + width: 5.593%; + } + + @include mq(celular, max) { + width: 14.76323%; + } } } &__developedBy { - align-items: center; - display: flex; list-style-type: none; margin: 0; + display: flex; + gap: 10.73px; - li:last-child { - margin-left: 16px; + @include mq(tablet, max) { + order: 3; + + // width: 21.527777%; + margin: 0 16px 16px; + justify-content: flex-start; } 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; - text-decoration: none; + align-items: center; + flex-wrap: wrap; - span { - margin-right: 8px; + font-family: "Open Sans"; + font-weight: 400; + font-size: 9px; + line-height: 12px; + + color: $black-300; + + .vtex { + width: 44.92px; + margin-left: 10.12px; + } + + .m3 { + width: 28.66px; + margin-left: 10.97px; } } } + + // &__developedBy { + // box-sizing: border-box; + // display: flex; + // align-items: center; + // justify-content: space-between; + // list-style-type: none; + // margin: 0; + + // width: 17.851%; + // min-width: 205px; + + // @include mq(tablet, max) { + // order: 3; + + // width: 21.527777%; + // margin: 0 16px 16px; + // justify-content: flex-start; + // } + + // li { + // width: 50%; + + // @include mq(tablet, max) { + // width: auto; + // } + // } + + // a { + // display: flex; + // align-items: center; + // justify-content: flex-end; + // gap: 10px; + // font-family: "Open Sans"; + // font-weight: 400; + // font-size: 9px; + // line-height: 12px; + + // color: $black-300; + + // img { + // width: 20px; + // } + + // .vtex { + // width: 36.3%; + // } + + // .m3 { + // width: 30.75%; + // } + // } + // } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ee3b2b2..de6e5aa 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,8 @@ $color-green: #4caf50; $black-500: #000; $black-300: #292929; +$gray-500: #C4C4C4; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, diff --git a/checkout/src/template-checkout/templates.html b/checkout/src/template-checkout/templates.html new file mode 100644 index 0000000..c9b5b2e --- /dev/null +++ b/checkout/src/template-checkout/templates.html @@ -0,0 +1,49 @@ + + + + + + + Document + + + + +
    +
  • + Powered by +
    • +
  • + Developed by +
    • +
    + + From 83e0ba11791f2b63fd6e7dd046a8ea47b183584a Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Thu, 15 Dec 2022 11:07:16 -0300 Subject: [PATCH 3/3] feat: Cria e estiliza o footer para todos os tamanhos --- checkout/src/arquivos/js/components/Footer.js | 83 ++++++++--- checkout/src/arquivos/sass/checkout.scss | 1 + .../src/arquivos/sass/checkout/_checkout.scss | 2 +- checkout/src/arquivos/sass/lib/_slick.scss | 55 +++++++- .../src/arquivos/sass/partials/_footer.scss | 40 +++++- .../arquivos/sass/partials/_prateleira.scss | 131 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 3 + 7 files changed, 283 insertions(+), 32 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ffbcfce..fc87e07 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -11,9 +11,9 @@ export default class Footer { await this.selectors(); await this.criaStamps(); await this.criaDevelopedBy(); - - // this.onUpdate(); - // await this.criaProduto(); + // this.verificaListaDeProdutos(); + this.verificaListaDeProdutos(); + this.onUpdate(); } async selectors() { @@ -32,26 +32,55 @@ export default class Footer { // 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 config = { attributes: true, attributeOldValue: true, attributeFilter: ["style"] }; + + let changeAttrName; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + console.log(mutations); + mutations.forEach((mutation) => { + changeAttrName = mutation.target.style; + if (changeAttrName.display == "block") { + this.prateleira.style.display = "none"; + } else if (changeAttrName.display == "none") { + this.prateleira.style.display = "block"; + } }); }); + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + this.prateleira.style.display = "block"; + } else { + this.prateleira.style.display = "none"; + } + }); + observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement(".footerCheckout__prateleira"); - $(elemento).slick({ + const prateleiraSlick = await waitElement(".prateleira"); + $(prateleiraSlick).slick({ slidesToShow: 4, slidesToScroll: 1, - arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 600, + settings: { + slidesToShow: 2 + } + } + ], }); } - async criaProduto() { + async criaPrateleira() { let estrutura = ""; let estruturaSkus = ""; if (this.prateleira) { @@ -62,23 +91,39 @@ export default class Footer { }); estrutura += ` +
    +

    ${product.productName}

    ${estruturaSkus}
    - Ver Produto +
    - -
    `; - }); - this.prateleira.innerHTML = estrutura; - } - this.addCarrossel(); + + `; + }); + this.prateleira.innerHTML = `

    Você também pode gostar:

    ${estrutura}
    `; + this.addCarrossel(); + } + } + + verificaListaDeProdutos() { + if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && + (this.checkoutVazio.style.display = "none") + ) { + this.criaPrateleira(); + } + if (this.checkoutVazio.style.display === "block") { + this.prateleira.syle.displat = "none"; + } } carregaProdutos() { @@ -138,8 +183,7 @@ export default class Footer { } async criaDevelopedBy() { - - if(this.developedBy) { + if (this.developedBy) { this.developedBy.innerHTML = `
  • @@ -154,7 +198,6 @@ export default class Footer {
    • `; - } } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index d77cd4f..6831663 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,5 +2,6 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/progressBar"; +@import "partials/prateleira"; @import "./partials/footer"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 651945d..ea1c1db 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -26,7 +26,7 @@ footer .footerCheckout__wrapper { } } -footer .prateleira, + header { width: 79.53125%; margin: 0 auto; diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..2f4dd3e 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -40,6 +40,7 @@ } .slick-track { + display: flex !important; position: relative; left: 0; top: 0; @@ -63,9 +64,14 @@ } .slick-slide { float: left; - height: 100%; + height: auto; min-height: 1px; outline: none; + + & > div, + li { + height: 100%; + } [dir="rtl"] & { float: right; } @@ -99,16 +105,53 @@ .slick-arrow { font-size: 0; position: absolute; + border: none; + top: 50%; + width: 30px; + height: 30px; + transform: translateY(-50%); + z-index: 4; + + padding: 0; + cursor: pointer; + + @include mq(tablet, max) { + width: 13.64px; + height: 29.47px; + } + + @include mq(desktop4K, min) { + width: 26px; + height: 58px; + } } .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; - left: 10px; + left: 20px; + + @include mq(tablet, max) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + } + + @include mq(celular, max) { + left: 10px; + } } .slick-next { - z-index: 4; - right: 10px; + right: 20px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + + @include mq(tablet, max) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + } + + @include mq(celular, max) { + right: 10px; + } } .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 aba7c6e..b59fab0 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,7 +1,34 @@ /* _footer.scss */ .footerCheckout { &__prateleira { - display: none; + box-sizing: border-box; + margin: 0 8px; + + @include mq(celular, max) { + margin: 0 8px 0 7px; + } + } + + &__prateleira-title { + font-family: "Tenor Sans"; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + margin: 0; + margin-bottom: 20px; + + color: $black-500; + + @include mq(celular, max) { + font-size: 14px; + line-height: 28px; + } + + @include mq(desktop4K, min) { + font-size: 48px; + line-height: 76px; + } } &__wrapper { @@ -83,7 +110,7 @@ } @include mq(celular, max) { - width: 9.930%; + width: 9.93%; } @include mq(desktop4K, min) { @@ -160,7 +187,7 @@ width: 3.536%; } @include mq(celular, max) { - width: 9.930%; + width: 9.93%; } @include mq(desktop4K, min) { @@ -175,7 +202,7 @@ width: 3.536%; } @include mq(celular, max) { - width: 9.930%; + width: 9.93%; } @include mq(desktop4K, min) { @@ -221,6 +248,11 @@ color: $black-300; + @include mq(desktop4K, min) { + font-size: 18px; + line-height: 25px; + } + .vtex { width: 44.92px; margin-left: 10.12px; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..6ebaa7b 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,130 @@ -/* _prateleira.scss */ +.prateleira { + box-sizing: border-box; + margin: 0 auto 56px auto; + width: 81.5%; + + @include mq(tablet, max) { + width: 100%; + margin: 0 0 54px 0; + } + + @include mq(desktop4K, min) { + width: 80.7%; + } + + &__container { + height: 100%; + display: flex !important; + flex-direction: column; + } + + &__image-wrapper { + margin: 0 8px; + + img { + width: 100%; + } + + @include mq(desktop4K, min) { + margin: 0 8.465px; + } + } + + &__content { + margin: 0 8px; + flex: 1; + + display: flex; + flex-direction: column; + + @include mq(desktop4K, min) { + margin: 0 8.465px; + } + } + + &__title { + font-family: "Open Sans"; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $black-500; + margin: 20px 0; + + flex: 1; + + @include mq(tablet, max) { + margin: 22px 0 18px 0; + } + + @include mq(celular, max) { + margin: 20px 0; + } + + @include mq(desktop4K, min) { + margin: 21.93px 0 20px; + + font-size: 26px; + line-height: 35px; + } + } + + &__name-wrapper { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + margin-bottom: 20px; + + flex: 1; + + @include mq(celular, max) { + margin-bottom: 37px; + flex-wrap: wrap; + } + } + + &__name, &__button a { + font-family: "Open Sans"; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $white-500; + @include mq(desktop4K, min) { + font-size: 26px; + line-height: 35px; + } + + } + + &__name { + background-color: $blue-500; + padding: 5px; + border-radius: 8px; + text-align: center; + + @include mq(desktop4K, min) { + padding: 8.04px 4.38px 8.04px 5.62px; + } + } + + &__button { + width: 100%; + border-radius: 8px; + background-color: $blue-500; + border: none; + padding: 12px 0; + + cursor: pointer; + + a { + &:hover, + &:focus { + color: $blue-500; + text-decoration: none; + } + } + } +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index de6e5aa..31b9f1e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,9 +20,12 @@ $color-blue: #4267b2; $color-green: #4caf50; /*CORES*/ +$white-500: #FFF; $black-500: #000; $black-300: #292929; +$blue-500: #00C8FF; + $gray-500: #C4C4C4; /* Grid breakpoints */