From 639cd513fb3b06cf91c9190bfaa834e96c8d56b9 Mon Sep 17 00:00:00 2001 From: Matheus Date: Fri, 23 Dec 2022 20:26:15 -0300 Subject: [PATCH] feat: carrinho vazio estilizado e responsivo --- checkout/src/arquivos/js/components/Footer.js | 18 ++- .../sass/checkout/_checkout-carrinho.scss | 147 ++++++++++++------ .../sass/checkout/_checkout-vazio.scss | 68 +++++++- .../src/arquivos/sass/checkout/_checkout.scss | 8 + 4 files changed, 184 insertions(+), 57 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 357a3c7..d780651 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -78,21 +78,29 @@ export default class Footer { // 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; + const title = document.getElementById("cart-title"); + title.style.color = 'white'; + title.style['margin-bottom'] = '110px'; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { let removeClassh3 = document.getElementById("removeClassh3"); let removeClassul = document.getElementById("removeClassul"); + mutations.forEach(function (mutation) { const checkoutTarget = mutation.target.attributes.style.nodeValue; if(checkoutTarget === "display: none;"){ - removeClassh3.classList.remove("displayNone") - removeClassul.classList.remove('displayNone') - $(removeClassul).slick("refresh") + title.style.color = 'black'; + title.style.marginBottom = '16px'; + removeClassh3.classList.remove("displayNone"); + removeClassul.classList.remove('displayNone'); + $(removeClassul).slick("refresh"); }else if(checkoutTarget === "display: block;"){ - removeClassh3.classList.add("displayNone") - removeClassul.classList.add("displayNone") + title.style.color = 'white'; + title.style.marginBottom = '110px'; + removeClassh3.classList.add("displayNone"); + removeClassul.classList.add("displayNone"); } }); }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..38dde8e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -16,7 +16,7 @@ border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 0 16px 16px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -112,11 +112,13 @@ th { color: $color-black; - padding: 0 0 16px; + padding: 0 0 7px; font-style: normal; - font-weight: bold; + font-weight: 100; font-size: 14px; line-height: 16px; + font-family: 'Tenor Sans'; + height: 32px; @include mq(md, max) { &.quantity-price, @@ -124,6 +126,20 @@ display: none; } } + + } + td { + padding: 0; + } + + .shipping-date{ + font-size: 0; + } + th.shipping-date::after{ + content: "Frete"; + font-size: 14px; + display: flex; + flex-direction: column; } .product-image { @@ -136,8 +152,10 @@ } img { + transform: scaleX(-1); height: 60px; - max-width: 100%; + min-width: 60px; + max-width: 60px; width: auto; @include mq(sm, max) { @@ -148,14 +166,17 @@ } .product-name { - padding-right: 0; + width: 300px; + padding: 0 0 0 16px; + @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + font-family: 'Tenor Sans'; + color: black; font-style: normal; font-weight: normal; font-size: 12px; @@ -179,6 +200,7 @@ } td.shipping-date { + width: 94; color: $color-gray2; font-size: 12px; line-height: 14px; @@ -189,7 +211,10 @@ } .product-price { + font-size: 0; min-width: 100px; + + @include mq(md, max) { min-width: 78px; } @@ -214,6 +239,16 @@ } } } + th.product-price::after { + content: "Unidade"; + font-size: 14px; + display: flex; + flex-direction: column; + } + td.product-price{ + padding-top: 8px; + + } td.quantity { align-items: center; @@ -222,11 +257,13 @@ box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 23px auto 0; max-height: 38px; max-width: 118px; padding: 0; width: max-content !important; + height: 34px; + border-radius: 8px; @media (max-width: 490px) { margin-left: 84px !important; @@ -296,6 +333,7 @@ display: none; } span { + text-transform: lowercase; font-style: normal; font-weight: normal; font-size: 14px; @@ -355,8 +393,9 @@ font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: black; + font-family: 'Open Sans'; @include mq(md, max) { margin-top: 0; @@ -374,7 +413,7 @@ background-color: $color-gray5; border: none; border-radius: 5px; - color: $color-gray2; + color: black; font-size: 16px; letter-spacing: 0.05em; line-height: 19px; @@ -382,6 +421,7 @@ outline: none; padding: 12px 40px; transition: all 0.2s linear; + cursor: pointer; &:hover { background-color: lighten($color-gray5, 5); @@ -444,12 +484,13 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 100px; } .blue { - color: $color-blue; + color: black; } label { @@ -592,23 +633,25 @@ &-totalizers { padding: 0; - width: 346px; + width: 356px; + margin-top: 33px; .coupon-data { #cart-link-coupon-add { text-decoration: none; + cursor: pointer; &:hover { text-decoration: underline; cursor: pointer; } } span { - font-family: $font-family; + font-family: 'Tenor Sans'; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: black; text-decoration: none; } } @@ -629,19 +672,26 @@ text-decoration: underline; } - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray2; - cursor: none; + .coupon-label{ + margin-bottom: 0; + + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-gray2; + cursor: none; + display: flex; + align-items: initial; + } } .coupon-fields { + display: flex; margin-bottom: 32px; + width: 362px; @include mq(sm, max) { span { @@ -657,14 +707,14 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; color: $color-gray4; font-size: 12px; height: 34px; - padding: 0 12px; - max-width: 160px; + padding: 0 16px; + width: 170px; @include mq(sm, max) { max-width: 100%; @@ -673,18 +723,21 @@ } button { - background: $color-black; + font-family: 'Open Sans'; + background: #00C8FF; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: black; + font-size: 14px; + line-height: 19px; height: 36px; letter-spacing: 1px; - margin-left: 6px; + margin-left: 12px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 134px; text-transform: uppercase; + cursor: pointer; @include mq(md, max) { width: 138px; @@ -717,7 +770,8 @@ font-size: 14px; line-height: 16px; color: $color-black; - padding: 12px 0; + padding: 10px 0; + font-family: 'Tenor Sans'; } &.info { @@ -733,10 +787,11 @@ tfoot { td.info, td.monetary { + font-family: 'Open Sans'; font-style: normal; font-weight: normal; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -747,7 +802,7 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 356px; @include mq(md, max) { padding: 0 16px; @@ -755,6 +810,9 @@ float: none; margin-bottom: 50px; } + .cart-template .cart-links-bottom { + width: 354px; + } @include mq(md, min) { margin: 0; @@ -771,24 +829,25 @@ } a { - font-family: $font-family; + font-family: 'Tenor Sans'; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: black; } } .btn-place-order-wrapper { a { - background: $color-green; + background: #00C8FF; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding: 10.5px 19px; + cursor: pointer; &:hover { background-color: darken($color-green, 5); @@ -797,10 +856,10 @@ &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: black; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..f9a2df5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -7,32 +7,84 @@ @include mq(md, max) { padding: 0 16px; } + .empty-cart-message{ + display: none; + } } &-title { - font-size: 20px; + font-family: 'Open Sans'; + height: 30px; + text-transform: uppercase; + font-size: 24px; + font-weight: 700; + line-height: 33px; + text-align: center; + + @media only screen and (max-width: 1024px){ + font-size: 18px; + line-height: 25px; + } + + @media only screen and (min-width: 2500px){ + height: 60px; + font-size: 48px; + line-height: 65px; + } } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + width: 28.614%; + background: white; + border: 1px solid black; transition: ease-in 0.22s all; outline: none; font-family: $font-family; font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; + font-weight: 400; + font-size: 0px; + line-height: 16px; text-align: center; + text-transform: uppercase; letter-spacing: 0.05em; - color: $color-white; + color: black; text-transform: uppercase; + margin: 22px 0 0; + padding: 15px; + cursor: pointer; + height: 16px; + border-radius: 0; + + @media only screen and (max-width: 1024px){ + line-height: 16px; + margin: 12px 0 0; + width: 26.8557966% + }; + + @media only screen and (max-width: 375px){ + width: auto; + }; + + @media only screen and (min-width: 2500px){ + width: 31.9335%; + line-height: 33px; + height: 36px; + }; &:hover { background: lighten($color-black, 5); } + + &::after{ + content: 'continuar comprando'; + font-size: 14px; + + @media only screen and (min-width: 2500px){ + font-size: 28px; + }; + } + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 37cf71b..12e29bf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -54,6 +54,14 @@ body { .container-order-form, .container-cart { width: 80%; + height: 488px; + + @media only screen and (max-width: 1024px){ + height: 478px; + }; + @media only screen and (min-width: 2500px){ + height: 536.8px; + } } }