diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 39fffa7..8599ab9 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -160,7 +160,8 @@ export default class Footer { slidesToShow: 4, slidesToScroll: 1, arrows: true, - Infinity: false + Infinity: false, + }); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..37cf71b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -11,9 +11,13 @@ html { footer .footerCheckout__wrapper { width: 94.9734%; margin: auto auto 0 auto; + + @media only screen and (max-width: 1024px){ + margin: auto 8px + } } footer .footerCheckout__prateleira, -header { +header .container { width: 79.53125%; margin: 0 auto; } @@ -68,14 +72,15 @@ body { #cart-title, #orderform-title { - color: $color-gray2; - font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + color: #292929; + font-family: 'Open Sans'; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; + margin: 17px 0 16px; @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 3f2a748..6a4c840 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -100,7 +100,7 @@ }; &__wrapper { - border-top: 1px solid $color-gray2; + border-top: 1px solid black; align-items: center; display: flex; margin: 0; @@ -114,11 +114,21 @@ margin: 0; justify-content: space-between; width: 100%; + + @media only screen and (max-width: 1024px){ + flex-direction: column; + align-items: normal; + justify-content: normal; + padding: 22px 0; + } + @media only screen and (max-width: 375px){ + margin-top: 16px; + } } } &__address { - color: $color-gray2; + color: #292929; font-family: $font-family; font-style: normal; font-weight: normal; @@ -134,6 +144,21 @@ margin-bottom: 24px; max-width: 100%; } + + @media only screen and (min-width: 2500px){ + font-size: 20px; + line-height: 27px; + width: 36.7682673%; + margin-right: 0; + } + + @media only screen and (max-width: 1024px){ + order: 2; + width: 100%; + margin: 16px 0; + line-height: 14px; + margin-left: 8px; + } } &__stamps { @@ -141,13 +166,25 @@ display: flex; justify-self: center; list-style: none; - width: 33.2329763% ; + width: 33.2329763%; margin: 0 15.5471102% 0 0; @include mq(md, max) { align-self: center; margin-bottom: 12px; } + @media only screen and (min-width: 2500px){ + margin: 0; + width: 46.876382%; + } + @media only screen and (max-width: 1024px){ + order: 1; + } + @media only screen and (max-width: 375px){ + width: 100%; + margin-bottom: 0; + align-self: normal; + } .footerCheckout__payments{ .footerCheckout-payments-ul{ @@ -157,17 +194,35 @@ li{ margin-right: 13.35px; + + @media only screen and (max-width: 1024px){ + margin-right: 5px; + } } img{ height: 20px; + + @media only screen and (min-width: 2500px){ + height: 39.06px; + width: 69.63px; + } + @media only screen and (max-width: 1024px){ + min-width: 35px; + } + } } } .footerCheckout__vtexpci{ img{ - width: 53px; + min-width: 53px; height: 33px; + + @media only screen and (min-width: 2500px){ + width: 103.52px; + height: 64.46px; + } } } @@ -187,12 +242,34 @@ margin: 0; width: 17.8598%; + @media only screen and (min-width: 2500px){ + width: 16.3827269%; + } + + @media only screen and (max-width: 1024px){ + order: 3; + width: 100%; + margin-left: 8px; + } + li:last-child { margin-left: 10.73px; + @media only screen and (min-width: 2500px){ + margin-left: 10.23px + } + @media only screen and (max-width: 1024px){ + margin-left: 10.45px; + } + .devolperByM3{ height: 15.65px; width: 28.66px; + + @media only screen and (min-width: 2500px){ + height: 30.56px; + width: 55.98px; + } } } @@ -212,11 +289,21 @@ font-family: 'Open Sans'; font-size: 9px; line-height: 12px; - color: black; + color: #292929; + + @media only screen and (min-width: 2500px){ + font-size: 18px; + line-height: 25px; + } } .devolperByVTEX{ height: 16px; width: 44.92px; + + @media only screen and (min-width: 2500px){ + height: 31.25px; + width: 87.73px; + } } } }