diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 357a3c7..69704c0 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -78,21 +78,36 @@ 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"); + + if(localStorage.getItem('title') === '4'){ + title.style.color = 'black'; + title.style.marginBottom = '16px'; + }else{ + 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"); + localStorage.setItem('title', 4) }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/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 072ae2c..4555b4b 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -65,7 +65,6 @@ export default class Header { this.Circle1.classList.add('activeCircle'); this.Circle2.classList.remove("activeCircle") this.Circle3.classList.remove("activeCircle") - console.log('1') } else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2' || window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2' @@ -74,12 +73,10 @@ export default class Header { this.Circle1.classList.remove("activeCircle") this.Circle2.classList.add("activeCircle"); this.Circle3.classList.remove("activeCircle") - console.log('2') } else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){ this.Circle1.classList.remove("activeCircle") this.Circle2.classList.remove("activeCircle") this.Circle3.classList.add("activeCircle"); - console.log('3') } }) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..a9998df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,13 +1,40 @@ .checkout-container { + @media only screen and (min-width: 2500px){ + height: 623px; + } .client-pre-email { - border-color: $color-gray4; + border-color: black; font-family: $font-family; - padding-top: 8px; + padding-top: 14px; .link-cart { + margin: 0 !important; + height: 16px; + line-height: 16px; + @media only screen and (max-width: 1024px){ + line-height: 12px; + } + + @media only screen and (min-width: 2500px){ + height: 33px; + line-height: 33px; + } + a { - color: $color-black; + color: black; + font-family: 'Tenor Sans'; font-size: 14px; + text-transform: uppercase; + font-weight: 400; + + @media only screen and (max-width: 1024px){ + font-size: 10px; + margin-right: 16px; + } + + @media only screen and (min-width: 2500px){ + font-size: 28px; + } &:hover { color: lighen($color-black, 10); @@ -22,88 +49,298 @@ justify-content: center; h3 { - margin-bottom: 16px; + margin: 0 0 21px; - span { - color: #303030; - font-size: 24px; - } + @media only screen and (max-width: 1024px){ + margin-bottom: 38px; + } - small { - color: $color-gray4; - } - } + @media only screen and (max-width: 375px){ + margin-bottom: 22px; + } + + @media only screen and (min-width: 2500px){ + margin-bottom: 23px; + } + + label{ + @media only screen and (max-width: 1024px){ + margin-top: 16.55%; + } + + @media only screen and (max-width: 375px){ + margin-top: 30.4720115%; + } + + @media only screen and (min-width: 2500px){ + margin-top: 4.0008371%; + } + + span { + font-family: 'Tenor Sans'; + color: black; + font-size: 20px; + line-height: 23px; + font-weight: 400; + text-transform: uppercase; + + @media only screen and (max-width: 1024px){ + font-size: 14px; + line-height: 16px; + } + + @media only screen and (max-width: 375px){ + font-size: 12px; + line-height: 14px; + } + + @media only screen and (min-width: 2500px){ + font-size: 40px; + line-height: 47px; + } + } + + small { + padding: 0; + font-family: 'Tenor Sans'; + color: black; + font-size: 20px; + line-height: 23px; + font-weight: 400; + text-transform: uppercase; + + @media only screen and (max-width: 1024px){ + font-size: 14px; + line-height: 16px; + } + + @media only screen and (max-width: 375px){ + font-size: 12px; + line-height: 14px; + } + + @media only screen and (min-width: 2500px){ + font-size: 40px; + line-height: 47px; + } + } + } + + } } .client-email { - margin: 0 0 16px; + margin: 0 0 24.56px; + + @media only screen and (max-width: 1024px){ + width: 96.875%; + margin: 0 16px 22.56px; + } + + @media only screen and (max-width: 375px){ + width: 91.4666667%; + margin-bottom: 20.56px;; + } + + @media only screen and (min-width: 2500px){ + width: 48.549%; + } input { + display: block; box-shadow: none; - color: $color-black; + color: black; font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; + padding: 0 14.09px; + border: 1px solid black; + border-right: 0px; box-sizing: border-box; - border-radius: 5px; + border-radius: 5px 0px 0px 5px; + width: 562px; + height: 52px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + @media only screen and (max-width: 1024px){ + width: 87.2217742%; + } @media (max-width: 490px) { - width: auto; + width: auto; } + + @media only screen and (max-width: 375px){ + width: 62.9737609% !important; + } + @media only screen and (min-width: 2500px){ + width: 78.8285458%; + } } + input::placeholder{ + font-family: 'Open Sans'; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: black; + + @media only screen and (min-width: 2500px){ + font-size: 24px; + line-height: 33px; + } + } + button { - background-color: $color-black; - border-radius: 5px; + background-color: #00C8FF; + border-radius: 0px 8px 8px 0px; border: none; font-family: $font-family; - height: 54px; + text-transform: uppercase; + color: black; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + height: 52px; + padding: 0 14.4px; right: 0; top: 0; + cursor: pointer; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } + @media only screen and (max-width: 375px){ + margin: 0; + position: absolute; + } + + @media only screen and (min-width: 2500px){ + width: 22.5547648%; + font-size: 28px; + line-height: 38px; + + } + + span { + margin: 0 3.3px; + } } span.help.error { + font-family: $font-family; color: red; + margin-top: 3px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media only screen and (max-width: 375px){ + margin-top: 9px; + } + + @media only screen and (min-width: 2500px){ + margin-top: 1px; + font-size: 24px; + line-height: 33px; + } } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid black; + border-radius: 5px; + + @media only screen and (max-width: 1024px){ + padding-top: 19px; + width: 30.1757813%; + } + @media only screen and (max-width: 375px){ + padding: 16px; + margin: 0 16px; + width: 82.4%; + } + @media only screen and (min-width: 2500px){ + width: 38.8185%; + } h3 { + font-family: $font-family; color: #303030; - margin: 0 0 8px 0; + margin: 0 0 9.56px 0; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media only screen and (max-width: 1024px){ + margin-bottom: 6.56px; + } + @media only screen and (max-width: 375px){ + margin-bottom: 9.56px + } + @media only screen and (min-width: 2500px){ + font-size: 24px; + line-height: 33px; + margin-bottom: 14px; + } } ul { - margin: 0; + margin: 0 0 10.56px; + @media only screen and (max-width: 1024px){ + margin-bottom: 7.56px; + } + @media only screen and (max-width: 375px){ + margin-bottom: 10.56px; + } li { span { - color: $color-black; + font-family: $font-family; + color: black; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media only screen and (min-width: 2500px){ + font-size: 24px; + line-height: 33px; + } } i::before { - color: $color-black; + color: #00C8FF; font-size: 1rem; opacity: 1; + + @media only screen and (min-width: 2500px){ + font-size: 24px; + width: 33px; + height: 23.53px; + } + } } } + .icon-lock{ + right: -1px; + bottom: -30px; + + @media only screen and (max-width: 1024px){ + display: none; + } + } i::before { color: $color-black; font-size: 6rem; opacity: 0.5; + + @media only screen and (min-width: 2500px){ + font-size: inherit; + width: 114.55px; + height: 156.94px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..e5ecce9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,17 +6,29 @@ .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; - } + }; + + .item-unit-label { display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 0 16px 16px; + height: 127px; + + @media only screen and (max-width: 1024px){ + border-radius: 0; + border-left: 0; + border-right: 0; + padding: 16px 16px 15px; + height: 93px; + }; @include mq(md, max) { margin: 0px 0 25px 0; @@ -108,15 +120,27 @@ .cart-items { .product-item { padding: 16px 0; + + @media only screen and (max-width: 1024px){ + display: grid; + grid-template: + "image name remove" 25px + "image quantity price" 34px + / 76px 498.5px 417.5px; + height: 60px; + padding: 0; + } } 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 +148,28 @@ display: none; } } + + @media only screen and (max-width: 1024px){ + display: none; + } + + } + td { + padding: 0; + + .total-selling-price{ + font-weight: 700; + } + } + + .shipping-date{ + font-size: 0; + } + th.shipping-date::after{ + content: "Frete"; + font-size: 14px; + display: flex; + flex-direction: column; } .product-image { @@ -135,27 +181,46 @@ width: 72px; } + @media only screen and (max-width: 1024px){ + grid-area: image; + } + img { + transform: scaleX(-1); height: 60px; - max-width: 100%; + min-width: 60px; + max-width: 60px; width: auto; + margin-top: 10px; @include mq(sm, max) { height: 72px; width: auto; } + + @media only screen and (max-width: 1024px){ + margin-top: 0; + } } } .product-name { - padding-right: 0; + width: 300px; + padding: 0 0 0 16px; + + @media only screen and (max-width: 1024px){ + grid-area: name; + padding: 0; + } + @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 +244,7 @@ } td.shipping-date { + width: 94; color: $color-gray2; font-size: 12px; line-height: 14px; @@ -186,10 +252,17 @@ @include mq(md, max) { display: none; } + + @media only screen and (max-width: 1024px){ + display: none; + } } - .product-price { + th.product-price { + font-size: 0; min-width: 100px; + + @include mq(md, max) { min-width: 78px; } @@ -214,34 +287,74 @@ } } } + th.product-price::after { + content: "Unidade"; + font-size: 14px; + display: flex; + flex-direction: column; + } + + td.product-price{ + font-size: initial; + top: 11.5px; + + @media only screen and (max-width: 1024px){ + grid-area: price; + justify-self: end; + top: 0; + } + + .list-price{ + height: 22px; + font-family: 'Tenor Sans'; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + .old-product-price-label{ + text-transform: lowercase; + color: #989898; + } + } + .best-price{ + .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: 23px auto 0; max-height: 38px; max-width: 118px; padding: 0; width: max-content !important; + height: 34px; @media (max-width: 490px) { margin-left: 84px !important; + }; + + @media only screen and (max-width: 1024px){ + grid-area: quantity; + margin: 0; } input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 0; border-radius: 0; - border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; - padding: 8px 0; - width: 38px; + padding: 0; + width: 25px; color: $color-gray2; box-shadow: none; @@ -253,24 +366,16 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: #00C8FF; display: block; font-weight: 500; padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; + width: 16px; + height: 16px; + border-radius: 100px; + padding: 0; + margin: 1px 10px; + cursor: pointer; } } @@ -297,14 +402,16 @@ } span { font-style: normal; - font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: black; } } .quantity-price { + @media only screen and (max-width: 1024px){ + display: none; + } @include mq(md, max) { display: none; } @@ -316,11 +423,27 @@ } .icon::before { color: $color-gray4; - font-size: 15px; + font-size: 13px; + height: 10px; @include mq(md, max) { font-size: 18px; } + + } + + @media only screen and (max-width: 1024px){ + grid-area: remove; + justify-self: end; + height: 11px; + width: 10px; + } + + .item-link-remove{ + @media only screen and (max-width: 1024px){ + font-size: 0; + padding: 0; + } } } @@ -351,12 +474,13 @@ } .srp-main-title { - margin: 32px 0 12px; + margin: 32px 0 11px; 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; @@ -367,14 +491,14 @@ color: $color-gray2; font-size: 12px; line-height: 18px; - margin: 0 0 12px; + margin: 0; } button.shp-open-options { 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 +506,14 @@ outline: none; padding: 12px 40px; transition: all 0.2s linear; + margin-top: 10px; + cursor: pointer; + + @media only screen and (max-width: 1024px){ + width: 157px; + font-size: 14px; + line-height: 19px; + } &:hover { background-color: lighten($color-gray5, 5); @@ -396,6 +528,10 @@ .srp-data { width: 280px; + @media only screen and (max-width: 1024px){ + margin-top: 0; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -405,9 +541,9 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: #00C8FF; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; @@ -415,7 +551,7 @@ font-style: normal; font-weight: 500; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { @@ -429,7 +565,8 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; + padding-bottom: 0; &__wrapper { background-color: $color-white; @@ -444,12 +581,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 { @@ -461,73 +599,96 @@ } } + .srp-postal-code { - .ship-postalCode { - label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-black; - margin-bottom: 12px; - } + .ship-country { + display: none; + } - input { - border: 1px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray3; - font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; - } + .vtex-shipping-preview-0-x-postalCodeForgotten{ + margin-top: 0; - & ~ button { - background-color: $color-black; - 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; - text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); + .ship-postalCode { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black; + margin-bottom: 2px; } - &:active { - background-color: darken($color-black, 5); + input { + border: 1px solid $color-gray3; + border-radius: 5px; + box-shadow: none; + color: $color-gray3; + font-size: 12px; + height: 36px; + padding: 12px 8px; + width: 172px; } - } - small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; - } + & ~ button { + background-color: #00c8fe; + border: none; + border-radius: 5px; + color: $color-white; + font-weight: 700; + font-size: 14px; + line-height: 19px; + height: 36px; + letter-spacing: 1px; + outline: none; + position: absolute; + right: -150px; + top: 16px; + transition: all 0.2s linear; + width: 96px; + text-transform: uppercase; + padding: 8px 8px 9px; - span.help.error { - color: red; - font-size: 12px; - position: absolute; - left: 0; - width: 100%; - top: 17px; + &:hover { + background-color: lighten($color-black, 5); + } + + &:active { + background-color: darken($color-black, 5); + } + } + + small{ + a { + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 0px; + line-height: 12px; + color: black; + margin-top: 7px; + cursor: pointer; + }; + + a::before { + content: 'Não sei meu código postal'; + font-size: 10px; + line-height: 12px; + text-decoration-line: underline; + } + } + + span.help.error { + color: red; + font-size: 12px; + position: absolute; + left: 0; + width: 100%; + top: 17px; + } } } + } .srp-result { @@ -592,23 +753,30 @@ &-totalizers { padding: 0; - width: 346px; + width: 356px; + margin-top: 33px; + + @media only screen and (max-width: 1024px){ + margin: 48px 16px 7px; + width: 96.875%; + } .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 +797,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: 4px; + + 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 +832,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 +848,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 +895,8 @@ font-size: 14px; line-height: 16px; color: $color-black; - padding: 12px 0; + padding: 10px 0; + font-family: 'Tenor Sans'; } &.info { @@ -733,10 +912,11 @@ tfoot { td.info, td.monetary { + font-family: 'Open Sans'; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -747,7 +927,7 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 356px; @include mq(md, max) { padding: 0 16px; @@ -755,6 +935,9 @@ float: none; margin-bottom: 50px; } + .cart-template .cart-links-bottom { + width: 354px; + } @include mq(md, min) { margin: 0; @@ -771,36 +954,33 @@ } 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; - - &:hover { - background-color: darken($color-green, 5); - } + padding: 10.5px 19px; + cursor: pointer; &: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; @@ -809,4 +989,12 @@ } } } + .summary-template-holder{ + .row-fluid{ + @media only screen and (max-width: 1024px){ + display: flex; + flex-direction: column; + } + } + } } 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..36a4584 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -54,6 +54,15 @@ body { .container-order-form, .container-cart { width: 80%; + height: 488px; + + @media only screen and (max-width: 1024px){ + height: 478px; + width: 100%; + }; + @media only screen and (min-width: 2500px){ + height: 536.8px; + } } } @@ -77,7 +86,6 @@ body { font-weight: 700; font-size: 24px; line-height: 33px; - margin: 40px 0 30px; letter-spacing: 0.05em; text-transform: uppercase; margin: 17px 0 16px; @@ -85,8 +93,24 @@ body { @include mq(md, max) { margin-left: 30px; } + + @media only screen and (max-width: 1024px){ + margin: 17px 16px 16px; + } + } +#orderform-title{ + letter-spacing: 0; + + @media only screen and (min-width: 2500px){ + font-size: 48px; + line-height: 37px; + } + +} + + .dropdown { &__content { &--closed { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 215dec9..e1d6d12 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,6 +4,7 @@ }; .footerCheckout { + margin-top: 37px; color: $color-gray2; .footerCheckout__prateleira{