From 564da8285f5761f3ec9d23302afbe9c73f1a2a86 Mon Sep 17 00:00:00 2001 From: Caroline Moran Date: Wed, 21 Dec 2022 12:46:55 -0400 Subject: [PATCH] fix: ajustes css mobile --- checkout/src/arquivos/js/components/Footer.js | 17 +- .../sass/checkout/_checkout-carrinho.scss | 1109 ++++++++++++----- .../sass/checkout/_checkout-vazio.scss | 28 +- .../src/arquivos/sass/checkout/_checkout.scss | 42 +- 4 files changed, 853 insertions(+), 343 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9a47a16..596e4de 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,15 +7,16 @@ export default class Footer { async init() { await this.selectors(); - this.onUpdateReload(); + // this.onUpdateReload(); this.onUpdate(); + this.body.onresize = this.onUpdateResize(); await this.footerItens(); - this.body.onresize = this.onUpdate(); } async selectors() { this.footerContainerPrateleira = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.body = await waitElement("#checkoutMainContainer"); } onUpdateReload() { @@ -33,6 +34,11 @@ export default class Footer { checkoutVazioTitle.style.display = "none"; } } + onUpdateResize() { + console.log("oioioio"); + this.removeCarrossel(); + this.onUpdateReload(); + } onUpdate() { let observer = new MutationObserver((mutations) => { mutations.forEach((mutationRecord) => { @@ -108,7 +114,6 @@ export default class Footer { infinite: false, }, }, - { breakpoint: 769, settings: { @@ -127,6 +132,12 @@ export default class Footer { }); } } + async removeCarrossel() { + const prateleira = await waitElement("#prateleiraCheckout"); + if ($(prateleira)) { + $(prateleira).slick("unslick"); + } + } async footerItens() { const checkoutPayments = await waitElement(".footerCheckout__payments", { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index d210dce..bdaf892 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,23 +6,23 @@ .cart-template { font-family: $font-family; - @include mq(md, max) { - padding: 0 0; + @media (max-width: 1200px) { + padding: 0 16px; } .item-unit-label { display: none; } .cart { - border: none !important; box-sizing: border-box; + border: 1px solid #f0f0f0 !important; border-radius: 5px; - padding: 16px; - - @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; + padding: 16px 29px 6px 16px; + margin-bottom: 48px; + @media (max-width: 1024px) { + padding: 6px 16px; + } + @media (max-width: 320px) { + padding: 0 6px; } } .cart-fixed.affix { @@ -78,14 +78,6 @@ text-decoration: underline; } - // .summary-totalizers { - // border-top: 1px solid #e0e0e0; - // border-radius: 0; - // td.info { - // width: 100%; - // } - // } - #payment-data-submit { background: $color-black; border: none; @@ -108,72 +100,157 @@ } .cart-items { + thead { + @media (max-width: 1024px) { + display: none; + } + } .product { width: auto; - } - .product-item { - padding: 16px 0; - } - - th { - color: $color-black; - padding: 0 0 16px; + font-family: $font-family-secundary; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; - - @include mq(md, max) { - &.quantity-price, - &.shipping-date { - display: none; + color: #292929; + width: 40.5515832%; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + .product-item { + padding: 0; + display: flex; + align-items: center; + @media (max-width: 1024px) { + position: relative; + align-items: flex-start; + } + @media (max-width: 320px) { + height: 80px; + } + } + tr { + display: flex; + align-items: center; + } + th { + width: auto; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #292929; + padding: 0; + text-align: left; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + th.shipping-date { + width: 15.0153218%; + // min-width: 147px; + font-size: 0; + &::before { + content: "Frete"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #292929; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; } } } - + th.product-price { + width: 15.11746%; + // min-width: 148px; + font-size: 0; + &::before { + content: "Unidade"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #292929; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + th.quantity { + width: 18.4882533%; + } + th.quantity-price { + width: 11.1123596%; + } + td { + padding: 0; + text-align: left; + display: flex; + align-items: center; + } .product-image { height: auto; padding: 0; - width: 60px; - - @include mq(sm, max) { - width: 72px; + width: 7.76302349%; + @media (max-width: 1024px) { + width: auto; } + @media (max-width: 320px) { + width: 20%; + } + a { + width: 100%; + } img { - height: 60px; - max-width: 100%; - width: auto; - - @include mq(sm, max) { - height: 72px; - width: auto; + height: auto; + max-width: unset; + width: 78.9473684%; + @media (max-width: 1024px) { + width: 60px; + margin-right: 16px; + } + @media (max-width: 320px) { + width: 40px; + margin-right: 6px; } } } - .product-name { + td.product-name { padding-right: 0; - - @include mq(lg, max) { - width: 250px; + width: 32.7885598%; + @media (max-width: 1024px) { + order: 1; + margin-top: 10px; + } + @media (max-width: 599px) { + width: 74.9271137%; + } + @media (max-width: 320px) { + width: 70%; } a { - color: $color-blue; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; 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; + color: #000000; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } } @@ -184,147 +261,281 @@ } td.shipping-date { - color: $color-gray2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - - @include mq(md, max) { + color: #989898; + width: 15.0153218%; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @media (max-width: 1024px) { display: none; } + @media (max-width: 1024px) { + order: 4; + } } - .product-price { - min-width: 100px; - @include mq(md, max) { - min-width: 78px; + td.product-price { + width: 15.11746%; + flex-direction: column; + align-items: flex-start; + row-gap: 4px; + justify-content: center; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } - @media (max-width: 490px) { + @media (max-width: 1024px) { + order: 5; position: absolute; - bottom: 0; right: 0; + bottom: -10px; + align-items: flex-end; + justify-content: flex-end; + } + + @media (max-width: 599px) { + width: 28.8629738%; + } + @media (max-width: 360px) { + width: 34%; + row-gap: 0px; + } + @media (max-width: 320px) { + width: 42%; } span.list-price { - color: $color-gray2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; - @include mq(sm, max) { - font-size: 12px; - line-height: 14px; + color: #989898; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } .old-product-price-label { text-transform: lowercase; } } + br { + display: none; + } + span.best-price { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #292929; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + .new-product-price-label { + text-transform: lowercase; + } + .icon-question-sign { + display: none; + } + } } td.quantity { align-items: center; - border: 1px solid $color-gray3; - border-radius: 0; box-sizing: border-box; display: flex; - justify-content: center; - margin: 6px auto 0; - max-height: 38px; - max-width: 118px; + justify-content: flex-start; + margin: 0; + height: 34px; padding: 0; - width: max-content !important; + width: 18.1818182%; + @media (min-width: 2500px) { + height: 50px; + } + @media (max-width: 1024px) { + order: 2; + position: absolute; + bottom: 10px; + left: 76px; + width: 99px; + } - @media (max-width: 490px) { - margin-left: 84px !important; + @media (max-width: 320px) { + bottom: 0px; + left: 20%; } input { background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; + border-left: none; + border-right: none; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; + border-radius: 0px; + box-sizing: border-box; display: block; - max-height: 38px; + height: 34px; margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $color-gray2; - box-shadow: none; + padding: 0; + width: 49px; - @include mq(lg, max) { - width: 24px !important; + box-shadow: none; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: #000000; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + height: 50px; + width: 45px; + } + @media (max-width: 1024px) { + width: 45px; + } + @media (max-width: 320px) { + height: 24px; + } + } + a.item-quantity-change { + max-height: 34px; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; + box-sizing: border-box; + display: flex; + align-items: center; + @media (min-width: 2500px) { + max-height: 50px; + } + @media (max-width: 979px) and (min-width: 768px) { + position: unset; + height: 34px; + width: auto; + } + @media (max-width: 320px) { + max-height: 24px; } } + .item-quantity-change-decrement { + border-radius: 8px 0 0 8px; + border-right: 0; + border-left: 1px solid #f0f0f0; + padding: 9px 0 9px 11px; + justify-content: flex-end; + @media (max-width: 320px) { + padding: 6px 0 6px 11px; + } + } + .item-quantity-change-increment { + padding: 9px 11px 9px 0; + border-radius: 0 8px 8px 0; + border-right: 1px solid #f0f0f0; + border-left: 0; + justify-content: flex-start; + @media (max-width: 320px) { + padding: 6px 11px 6px 0; + } + } .icon-plus-sign, .icon-minus-sign { + display: flex; + align-items: center; + width: 16px; + height: 16px; + border-radius: 50%; + background: #00c8ff; + justify-content: center; + @media (min-width: 2500px) { + width: 32px; + height: 32px; + } + @media (max-width: 320px) { + width: 12px; + height: 12px; + } &::before { - color: $color-black; - display: block; - font-weight: 500; - padding: 1px 12px; + color: #fff; + font-weight: 900; + display: flex; + align-items: center; + justify-content: center; + font-size: unset; + width: 10px; + height: 10px; + margin-right: 0.5px; + margin-bottom: 0.5px; + @media (min-width: 2500px) { + width: 20px; + height: 20px; + } + @media (max-width: 320px) { + width: 8px; + height: 8px; + margin-bottom: 2px; + } } } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; } } .icon-plus-sign { &:before { content: "+"; - font-size: 14px; - } - } - - .item-quantity-change { - @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; - } - - @media (max-width: 490px) { - padding: 0; } } } - .quantity-price, - .best-price { - .icon-question-sign { - display: none; + td.quantity-price { + width: 10.1123596%; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #292929; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; } - span { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: $color-black; - } - } - - .quantity-price { - @include mq(md, max) { + @media (max-width: 1024px) { display: none; } } - .item-remove { - @media (max-width: 490px) { - top: 0; + td.item-remove { + width: auto; + @media (max-width: 1024px) { + order: 6; + position: absolute; + top: 10px; + right: 0; } + .item-link-remove { + padding: 0; + } + .icon::before { color: $color-gray4; - font-size: 15px; - - @include mq(md, max) { - font-size: 18px; + font-size: 12px; + @media (min-width: 2500px) { + font-size: 25px; } } } @@ -342,102 +553,140 @@ } } } - + .totalizers { + margin-bottom: 0; + } .summary { + @media (max-width: 1200px) { + display: flex; + flex-direction: column; + } .cart-more-options { margin: 0; - width: max-content; + width: 27.34375%; + @media (min-width: 2500px) { + width: 27.761712%; + } + + @media (max-width: 1024px) { + width: 34.578%; + } + @media (max-width: 768px) { + width: 100%; + } .srp-container { - padding: 0 0 0 10px; - - @include mq(md, max) { - padding: 0 16px; - } + padding: 0; + max-width: unset; .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px; + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + display: flex; + align-items: center; + text-align: center; - @include mq(md, max) { - margin-top: 0; + color: #000000; + @media (min-width: 2500px) { + font-size: 48px; + line-height: 65px; } + // @include mq(md, max) { + // margin-top: 0; + // } } .srp-description { - color: $color-gray2; - font-size: 12px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + color: #7d7d7d; + margin: 0 0 10.55px; + max-width: 100%; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 36px; + } + @media (max-width: 1024px) { + max-width: 80.47%; + } } button.shp-open-options { - background-color: $color-gray5; + background: #ededed; + mix-blend-mode: normal; + border-radius: 8px; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; line-height: 19px; - font-weight: 500; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #000000; outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten($color-gray5, 5); + // padding: 0px 40px; + display: flex; + align-items: center; + justify-content: center; + width: 56.0714286%; + height: 44px; + margin-top: 0 !important; + @media (min-width: 2500px) { + width: 41.6666667%; + font-size: 28px; + line-height: 38px; } - - &:active { - background-color: darken($color-gray5, 5); + @media (max-width: 1024px) { + width: 45.777%; } } } .srp-data { - width: 280px; - - @include mq(cstm, max) { - width: calc(100vw - 32px); - } - - @include mq(md, max) { - margin-bottom: 40px; - } + width: 100%; + margin-top: 11px; + // @include mq(cstm, max) { + // width: calc(100vw - 32px); + // } .srp-pickup-my-location__button { - background-color: $color-black; + background: #00c8ff; + border-radius: 8px; border: none; - border-radius: 5px; color: $color-white; outline: none; width: 100%; - + height: 42px; + font-family: $font-family; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); + text-transform: uppercase; + @media (min-width: 2500px) { + height: 60.98px; + font-size: 28px; + line-height: 38px; } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; &__wrapper { background-color: $color-white; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); border-radius: 100px; width: 100%; font-family: $font-family; @@ -449,73 +698,129 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid #000000; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 100px; } .blue { - color: $color-blue; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: #000000; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } label { width: 50%; - + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #c4c4c4; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } &:active { - background-color: #f0f0f0; + background-color: #fff; } } } .srp-postal-code { .ship-postalCode { + width: 61.4285714%; + + @media (max-width: 1024px) { + width: 62.686%; + } 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: #000000; + margin-bottom: 2px; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } input { - border: 1px solid $color-gray3; + border: 1px solid #c4c4c4; border-radius: 5px; box-shadow: none; - color: $color-gray3; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; font-size: 12px; + line-height: 14px; + text-align: left; + color: #c4c4c4; + width: 100%; height: 36px; padding: 12px 8px; - width: 172px; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + height: 55px; + } } & ~ button { - background-color: $color-black; + background: #00c8ff; + border-radius: 8px; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); + color: #ffffff; + outline: none; + text-transform: uppercase; + width: 35.7142857%; + height: 36px; + margin-left: 8px; + padding: 8px 11px 9px; + cursor: pointer; + position: absolute; + right: 0; + bottom: 25px; + display: flex; + align-items: center; + justify-content: center; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + height: 55px; } - - &:active { - background-color: darken($color-black, 5); + @media (max-width: 1024px) { + width: 35.57%; } } small a { font-size: 0px; + margin-top: 5px; &::before { content: "Não sei meu código postal"; font-family: $font-family-secundary; @@ -525,6 +830,10 @@ line-height: 12px; text-decoration-line: underline; color: #000000; + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } } } @@ -532,9 +841,45 @@ color: red; font-size: 12px; position: absolute; - left: 0; width: 100%; - top: 17px; + bottom: -10px; + @media (min-width: 2500px) { + bottom: -30px; + font-size: 24px; + } + } + } + &__form { + width: 100%; + .ship-country { + label { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + margin-bottom: 2px; + color: #000000; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + select { + border: 1px solid #c4c4c4; + border-radius: 5px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #c4c4c4; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + height: 55px; + } + } } } } @@ -546,6 +891,9 @@ font-weight: 400; font-size: 14px; } + .srp-delivery-info { + margin-bottom: 0 !important; + } #deliver-at-text a { color: #303030; @@ -601,12 +949,11 @@ &-totalizers { padding: 0; - // width: 346px; .totalizers-list { - border-top: 1px solid #e0e0e0; + border-top: none; border-radius: 0; tr { - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid #e5e5e5; border-radius: 0; } } @@ -614,6 +961,7 @@ width: 100%; } .coupon-data { + margin-bottom: 10px; #cart-link-coupon-add { text-decoration: none; &:hover { @@ -622,105 +970,133 @@ } } 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; - text-decoration: none; + color: #000000; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } - @include mq(md, max) { - padding: 0 16px; - width: 100%; - } - .coupon-column { .coupon { margin: 0; } - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; + margin-bottom: 4px; + margin-top: 1px; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-gray2; + color: #7d7d7d; cursor: none; + text-align: left; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 54px; + span { + width: 100%; + display: flex; + justify-content: space-between; + } - @include mq(sm, max) { - span { - display: flex; - flex-direction: row; - justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; + input { + border: 1px solid #e5e5e5; + border-radius: 5px; + box-shadow: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-align: left; + color: #c4c4c4; + padding: 0 16.8px; + width: 57.715141%; + height: 36px; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + height: 55px; + } + @media (max-width: 1024px) { + padding: 0 12.18px; + width: 82.4%; + } + @media (max-width: 600px) { + width: 51.8904%; + } + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-align: left; + color: #c4c4c4; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } } } - input { - border: 2px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray4; - font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; - - @include mq(sm, max) { - max-width: 100%; - width: 100%; + button { + background: #00c8ff; + border-radius: 8px; + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #000000; + margin-left: 15.17px; + outline: none; + width: 37.7146893%; + height: 36px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + padding: 4px 0; + @media (min-width: 2500px) { + height: 55px; + font-size: 28px; + line-height: 38px; + } + @media (max-width: 1024px) { + margin-left: 5px; + width: 13.458%; + } + @media (max-width: 600px) { + margin-left: 5.17px; + width: 38.925%; } } - - button { - background: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; - outline: none; - transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; - - @include mq(md, max) { - width: 138px; - } - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + .loading-inline { + display: none; } } } .accordion-group { + margin-bottom: 0; tr { border-color: #e5e5e5; @@ -731,12 +1107,18 @@ &.info, &.monetary { + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; - padding: 12px 0; + color: #292929; + padding: 10px 0; + width: 50%; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -752,11 +1134,17 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 25px; + color: #292929; + padding: 14px 0 0; + @media (min-width: 2500px) { + font-size: 36px; + line-height: 49px; + } } } } @@ -766,64 +1154,76 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; - - @include mq(md, max) { - padding: 0 16px; - width: calc(100% - 32px); - float: none; - // margin-bottom: 50px; + width: 34.5703125%; + margin: 0 !important; + @media (min-width: 2500px) { + width: 34.6191566%; } - - @include mq(md, min) { - margin: 0; - padding-bottom: 13px; + @media (max-width: 1200px) { + width: 100%; } .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; - - @include mq(md, max) { - margin-bottom: 0px; - } + margin-bottom: 14.91px; a { - 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; + text-align: center; + color: #000000; + width: 100%; + margin-right: 0 !important; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: #00c8ff; + border-radius: 8px; border: none; - border-radius: 5px; + display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 5); + @media (min-width: 2500px) { + padding: 0; + height: 54px; + display: flex; + align-items: center; + justify-content: center; + } + @media (max-width: 490px) { + margin-top: 0; } &: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; + text-align: center; letter-spacing: 0.05em; - color: $color-white; text-transform: uppercase; vertical-align: middle; - line-height: 19px; + color: #000000; text-shadow: none; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } } } @@ -871,4 +1271,71 @@ .cart-template.full-cart { margin-bottom: 0; + .cart { + table { + tbody { + tr { + @media (max-width: 599px) { + margin-top: 0; + } + } + td { + @media (max-width: 599px) { + padding: 0; + } + } + td.product-image { + display: flex; + @media (max-width: 599px) { + position: inherit; + } + } + td.product-name { + display: flex; + @media (max-width: 599px) { + display: unset; + margin-left: 0px; + line-height: unset; + a { + padding-right: 0; + } + } + @media (max-width: 490px) { + width: 70%; + } + } + td.quantity { + display: flex; + @media (max-width: 599px) { + padding: 0px; + margin-left: unset; + } + } + td.item-remove { + display: flex; + @media (max-width: 599px) { + top: 5px; + right: 0; + width: auto; + } + } + td.product-price { + @media (max-width: 599px) { + margin-right: 0; + } + } + } + } + } +} +.full-cart .summary-totalizers { + width: 34.5703125%; + margin-left: 0 !important; + @media (min-width: 2500px) { + width: 34.6191566%; + } + @media (max-width: 1024px) { + width: 100%; + margin-top: 48.35px; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 6d49d82..6cadc0b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -11,31 +11,39 @@ &-title { font-weight: 700; - font-size: 24px; - line-height: 33px; text-align: center; text-transform: uppercase; + font-size: 24px; + line-height: 33px; color: #000000; + margin: 0 0 32px; + @media (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } } &-message { display: none; } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; + border: 1px solid #000000; + background: transparent; + border-radius: 0px; outline: none; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; + font-weight: 400; font-size: 14px; line-height: 16px; text-align: center; - letter-spacing: 0.05em; - color: $color-white; text-transform: uppercase; + color: #000000; + width: 31.989%; + padding: 15px 0; + margin-top: 0; + max-width: 327px; + cursor: pointer; &:hover { background: lighten($color-black, 5); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 62d633d..8037c99 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -29,23 +29,32 @@ header { } footer .footerCheckout__prateleira { width: 79.375%; - margin: 0 auto; + margin: 13px auto 0; min-width: 1016px; - @media (min-width: 2500px) { - width: 79.76%; - max-width: 1994px; - } @media (min-width: 1280px) { width: 79.76%; max-width: 1016px; } + @media (min-width: 2500px) { + width: 79.76%; + max-width: 1994px; + } @media (max-width: 1024px) { width: 96.77%; min-width: unset; } - @media (max-width: 490px) { + @media (max-width: 1000px) { + max-width: 657px; + } + @media (max-width: 689px) { + max-width: 477px; + } + @media (max-width: 509px) { + max-width: 344px; width: 91.73%; - min-width: 344; + } + @media (max-width: 360px) { + max-width: 256px; } } body { @@ -64,6 +73,7 @@ body { } &.body-cart { font-family: $font-family; + justify-content: space-between; } &.body-cart, @@ -84,8 +94,12 @@ body { .container-order-form, .container-cart { width: 80%; - @media (max-width: 490px) { - width: auto; + @media (min-width: 2500px) { + width: 79.534%; + } + @media (max-width: 1024px) { + width: 100%; + padding: 0 !important; } } } @@ -114,6 +128,16 @@ body { letter-spacing: 0.05em; text-transform: uppercase; color: #292929; + text-align: left; + margin: 17px 0 16px; + @media (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + margin: 17px 0 18px; + } + @media (max-width: 1024px) { + margin: 17px 16px; + } } .dropdown {