From 85a79388694d825337010769f7989db0eb0054cd Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Thu, 15 Dec 2022 22:49:57 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Finaliza=C3=A7=C3=A3o=20do=20CSS=20Mobi?= =?UTF-8?q?le/Tablet=20e=20Desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 7 + .../sass/checkout/_checkout-autenticacao.scss | 370 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 295 +++++++++++--- .../sass/checkout/_checkout-pagamento.scss | 27 ++ .../sass/checkout/_checkout-vazio.scss | 3 +- .../src/arquivos/sass/checkout/_checkout.scss | 38 +- checkout/src/arquivos/sass/lib/_slick.scss | 9 + .../src/arquivos/sass/partials/_footer.scss | 103 ++++- 8 files changed, 725 insertions(+), 127 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b069740..66e8a02 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -73,6 +73,13 @@ export default class Footer { infinite: true, arrows: true, }); + } else if (window.screen.width < 640) { + $(elemento).slick({ + slidesToShow: 2, + slidesToScroll: 1, + infinite: true, + arrows: true, + }); } else { $(elemento).slick({ slidesToShow: 3, diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index adf7449..7bc4bf5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,8 +1,8 @@ .checkout-container { .client-pre-email { - border-color: $color-black-neutra; font-family: $font-family; - padding-top: 8px; + padding-top: 14px; + border-top: 1px solid $color-black-neutra; small { font-family: $color-black-neutra; @@ -15,13 +15,16 @@ } .link-cart { + margin: 0; a { - color: $color-black; + color: $color-black-neutra; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } + line-height: 16px; + text-align: center; + text-transform: uppercase; } } @@ -71,7 +74,7 @@ box-sizing: border-box; border: 1px solid $color-black-neutra; border-radius: 5px 0px 0px 5px; - width: 90%; + width: 90% !important; margin: 0; font-size: 12px; @@ -118,12 +121,12 @@ } .emailInfo { - padding: 16px 0px 28px 16px; + padding: 16px 0px 27px 16px; background-color: $color-white; border: 1px solid $color-black-neutra; border-radius: 5px; - width: 37.306%; + width: 39.064%; margin-bottom: 94px; h3 { @@ -163,9 +166,93 @@ opacity: 0.5; } } + + @media (max-width: 1024px) { + padding: 14px 16px 0; + .link-cart { + a { + font-size: 10px; + line-height: 12px; + } + } + + .pre-email { + h3 { + margin: 0; + + label { + line-height: 0; + margin: 94px 0 38px; + } + + span { + &::before { + font-size: 14px; + line-height: 16px; + } + } + } + + @media (max-width: 640px) { + h3 { + label { + margin: 100px 0 22px; + } + span { + &::before { + font-size: 12px; + line-height: 14px; + } + } + } + } + } + + .client-email { + width: 100%; + justify-content: space-between; + align-items: center; + + input { + height: 50px; + } + + button { + height: 52px; + top: -1px; + } + } + + .emailInfo { + box-sizing: border-box; + width: 343px; + padding: 19px 0 30px 16px; + margin-bottom: 115px; + + i { + &::before { + font-size: 0; + } + } + + @media (max-width: 380px) { + width: 100%; + padding: 16px; + } + } + } } .client-profile-data { + .form-page.client-pre-email { + .pre-email { + .client-pre-email-h { + label { + margin-top: 50px; + } + } + } + } .accordion-group { border: 1px solid $color-gray3; border-radius: 8px; @@ -178,6 +265,7 @@ justify-content: space-between; font-size: 0; padding: 0; + line-height: 0; &::before { content: "Identificação"; font-family: $font-family-secundary; @@ -238,7 +326,7 @@ display: flex; align-items: center; justify-content: space-between; - flex-direction: row-reverse; + flex-direction: row; font-family: $font-family-secundary; font-style: normal; font-weight: 400; @@ -266,18 +354,27 @@ } } + .icon-home { + display: none !important; + } + a { background: transparent; z-index: 10; + position: initial; + opacity: 1; + width: 20px; + height: 20px; i { display: flex; background: transparent; - position: absolute; + position: inherit; padding: 0; font-size: 0; opacity: 1; top: 66%; right: 60%; + &::after { content: ""; background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); @@ -287,6 +384,11 @@ z-index: 20; background-color: #fff; } + + @media (max-width: 1024px) { + top: 0; + right: 0; + } } } } @@ -304,7 +406,7 @@ display: flex; align-items: center; justify-content: space-between; - flex-direction: row-reverse; + flex-direction: row; font-family: $font-family-secundary; font-style: normal; font-weight: 400; @@ -332,13 +434,29 @@ } } + .icon-credit-card { + display: none !important; + } + + .payment-edit-link { + width: 20px; + height: 20px; + z-index: 20; + a { + position: initial; + opacity: 1; + width: 20px; + height: 20px; + } + } + a { background: transparent; z-index: 10; i { display: flex; background: transparent; - position: absolute; + position: static; padding: 0; font-size: 0; opacity: 1; @@ -353,6 +471,11 @@ z-index: 20; background-color: #fff; } + + @media (max-width: 1024px) { + top: 0; + right: 0; + } } } } @@ -384,7 +507,7 @@ } fieldset { - width: 32.5038%; + width: 32.608%; margin-top: 16px; .payment-group-list-btn { width: 100%; @@ -475,12 +598,20 @@ } } } + + @media (max-width: 1024px) { + width: 100%; + } } .steps-view { - width: 61.1197%; + width: 61.314%; margin-top: 16px; box-sizing: border-box; + + @media (max-width: 1024px) { + width: 100%; + } } } } @@ -493,6 +624,31 @@ .shipping-data, .payment-data, .client-profile-data { + @media (max-width: 1024px) { + .step.accordion-group.shipping-data.active { + .accordion-heading .accordion-toggle { + .icon-home { + display: none !important; + } + } + } + .step.accordion-group.client-profile-data.active { + .accordion-heading .accordion-toggle { + a { + display: none !important; + } + } + } + + .step.accordion-group.store-country-BRA.active { + .accordion-heading .accordion-toggle { + .icon-credit-card { + display: none !important; + } + } + } + } + .accordion-group { border: 1px solid $color-gray3; border-radius: 8px; @@ -521,6 +677,10 @@ .box-client-info-pf { margin-top: 34px; + + .client-email { + margin-bottom: 16px; + } } .shipping-summary-info, @@ -575,6 +735,8 @@ line-height: 16px; letter-spacing: 0.05em; color: $color-gray2; + + margin-bottom: 11px; } .vtex-omnishipping-1-x-addressSummary { @@ -675,21 +837,19 @@ } .client-first-name { - width: 47.47%; - margin-right: 13px; + width: 100%; } .client-last-name { - width: 47.47%; + width: 100%; } .client-document { - width: 47.47%; + width: 100%; margin: 0; - margin-right: 13px; } .client-phone { - width: 47.47%; + width: 100%; } .newsletter { @@ -704,7 +864,7 @@ .checkbox.newsletter-label { padding: 0; input { - width: 18px; + min-width: 18px !important; height: 18px; margin: 2px; } @@ -740,11 +900,12 @@ height: 42px; padding: 0 12px; box-sizing: border-box; - width: 100%; + min-width: 100% !important; } .help.error { color: red; + width: 100%; } } @@ -802,11 +963,14 @@ font-size: 14px; line-height: 19px; color: $color-gray2; + + margin-bottom: 11px; } .shp-lean { border: 1px solid #e0e0e0; border-radius: 8px; + margin-bottom: 15px; .shp-option-text.vtex-omnishipping-1-x-leanShippingText { border-right: 1px solid #e0e0e0; @@ -827,39 +991,6 @@ letter-spacing: 0.05em; } - // .vtex-omnishipping-1-x-leanShippingIcon { - // // border: 1px solid #828282; - // // border-radius: 3px; - // // width: 18px; - // // height: 18px; - // // background: $color-white; - - // background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); - - // svg { - // background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - - // // &::before { - // // content: ""; - // // background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - // // width: 18px; - // // height: 18px; - // // } - - // path { - // fill: $color-white; - // display: none; - - // &::before { - // // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - // background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - // width: 12px; - // height: 12px; - // } - // } - // } - // } - label { background-color: $color-white; box-shadow: none; @@ -998,6 +1129,26 @@ .vtex-omnishipping-1-x-isActive { border: 1px solid #f5f5f5; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + + margin: 25px 0; + + @media (max-width: 1024px) { + max-width: 309px; + } + + @media (min-width: 375px) and (max-width: 376px) { + width: 309px; + } + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-postalCode { + margin: 0; + } + } + + .vtex-omnishipping-1-x-deliveryGroup { + margin-top: 25px; } .vtex-omnishipping-1-x-addressFormPart1 { @@ -1038,11 +1189,114 @@ } } } + + @media (max-width: 1024px) { + margin: 0px 16px 18px; + + .box-client-info-pf { + width: 100%; + margin-right: 0; + + display: grid; + grid-template-areas: + "email email" + "name lastName" + "cpf tel"; + column-gap: 14px; + + .client-email { + grid-area: email; + input { + min-width: 100%; + } + } + + .client-first-name, + .client-last-name, + .client-document, + div .client-phone { + width: 100%; + margin-right: 0; + } + + .client-first-name { + grid-area: name; + } + + .client-last-name { + grid-area: lastName; + } + + .client-document { + grid-area: cpf; + } + + div .client-phone { + grid-area: tel; + } + } + } } } } .row-fluid .orderform-template { margin-top: 11px; - margin-bottom: 94px; + margin-bottom: 0; + + @media (max-width: 1024px) { + margin: 0; + } +} + +.row-fluid.orderform-template.span12.active { + margin-top: 0; +} + +.row-fluid { + #payment-data { + margin-bottom: 133px; + } + .box-client-info-pf { + width: 100%; + margin-right: 0; + + display: grid; + grid-template-areas: + "email email" + "name lastName" + "cpf tel"; + column-gap: 15px; + + .client-email { + grid-area: email; + input { + min-width: 100%; + } + } + + .client-first-name, + .client-last-name, + .client-document, + div .client-phone { + width: 100%; + margin-right: 0; + } + + .client-first-name { + grid-area: name; + } + + .client-last-name { + grid-area: lastName; + } + + .client-document { + grid-area: cpf; + } + + div .client-phone { + grid-area: tel; + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 641f8f9..ec62785 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -20,6 +20,9 @@ margin-bottom: 48px; @media (max-width: 1024px) { + border-radius: 0px; + border-left: none; + border-right: none; .table.cart-items { thead { display: none; @@ -31,14 +34,23 @@ grid-template-areas: "colunaOne colunaTwo colunaThree"; grid-template-columns: 60px 1fr 1fr; justify-content: space-between; + margin: 0; .product-image { grid-area: colunaOne; + position: relative; } .product-name { grid-area: colunaTwo; + padding: 0 !important; padding-left: 16px; + margin: 0; + width: max-content; + + @media (max-width: 340px) { + width: 180px; + } } .quantity { @@ -48,6 +60,7 @@ input { padding: 16px 0; + width: 30.13px; } } @@ -58,6 +71,7 @@ flex-direction: column; justify-content: flex-end; padding: 0; + margin: 0; .list-price { display: flex; @@ -125,12 +139,15 @@ font-weight: 500; text-align: left; padding: 0; - border: 0; padding: 24px 17px 0 17px; border: 1px solid #e5e5e5; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: none; + + @media (max-width: 1024px) { + margin: 0; + } } .item-unavailable { @@ -147,6 +164,7 @@ margin: 0; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; + ul li { border-top: none; margin-top: 34px; @@ -233,6 +251,7 @@ margin: 0; margin-top: 19px; padding-right: 17px; + margin-bottom: 10px; } #go-to-cart-button a { @@ -344,20 +363,12 @@ height: 60px; min-width: 60px; object-fit: cover; - - @include mq(sm, max) { - height: 72px; - width: auto; - } } } .product-name { - padding-right: 0; - - @include mq(lg, max) { - width: 250px; - } + padding: 0; + width: max-content; a { font-family: $font-family-secundary; @@ -367,8 +378,8 @@ font-size: 12px; line-height: 14px; - @media (max-width: 490px) { - margin-left: 23px; + @media screen and (max-width: 1024px) { + margin-left: 16px; } } @@ -414,7 +425,22 @@ } .old-product-price-label { - text-transform: lowercase; + font-size: 0; + } + + .old-product-price.muted { + &::before { + content: "de "; + text-transform: lowercase; + color: #989898; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-decoration-line: line-through; + } + color: #989898; } } } @@ -423,8 +449,24 @@ vertical-align: middle; span { display: flex; - gap: 5px; margin-top: 2px; + + .new-product-price-label { + font-size: 0; + } + + .new-product-price { + &::before { + content: "por "; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + color: #292929; + padding-right: 5px; + } + } } br { @@ -449,10 +491,6 @@ padding: 0; width: max-content !important; - @media (max-width: 490px) { - margin-left: 84px !important; - } - input { background-color: $color-white; border: 0; @@ -460,7 +498,7 @@ border-top: 1px solid $color-gray3; border-bottom: 1px solid $color-gray3; display: block; - max-height: 38px; + height: 34px; margin: 0 !important; padding: 5px 0; width: 31px; @@ -472,10 +510,6 @@ font-weight: 400; font-size: 14px; line-height: 16px; - - @include mq(lg, max) { - width: 24px !important; - } } .icon-plus-sign, @@ -541,6 +575,10 @@ .icon { display: flex; align-items: center; + + @media (max-width: 1024px) { + height: 14px; + } } .icon::before { color: $color-gray7; @@ -578,19 +616,51 @@ .summary-totalizers.cart-totalizers { width: 100%; margin: 0; + margin-top: 2px; + + div { + .accordion-group { + .accordion-body { + .accordion-inner { + padding: 0 16px; + } + } + } + } } } .cart-more-options { margin: 0; width: max-content; + @media (max-width: 1024px) { + margin-left: 16px; + width: 100%; + padding-bottom: 48px; + } + + @media (max-width: 640px) { + padding: 0 16px 48px; + margin: 0; + .srp-container { + max-width: 100%; + .srp-content.onda-v1 { + .srp-data.mt4 { + width: 100%; + + .vtex-shipping-preview-0-x-pc.srp-postal-code { + .srp-postal-code__form { + width: 100%; + } + } + } + } + } + } + .srp-container { padding: 0; - @include mq(md, max) { - padding: 0 16px; - } - .srp-main-title { font-family: $font-family; margin: 0 0 11px; @@ -641,6 +711,10 @@ .srp-data.mt4 { margin: 0; + + @media screen and (max-width: 1024px) { + width: 343px; + } } .srp-data { @@ -675,6 +749,7 @@ .srp-toggle { margin: 0 0 20px; + padding: 0; &__wrapper { background-color: $color-white; @@ -689,6 +764,10 @@ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); color: $color-gray7; + + @media screen and (max-width: 1024px) { + max-width: 343px; + } } &__current { @@ -762,6 +841,8 @@ small a { font-size: 0; + text-decoration: underline; + color: $color-black-neutra; &::before { content: "Não sei meu código postal"; font-family: $font-family-secundary; @@ -783,6 +864,56 @@ top: 17px; } } + + @media screen and (max-width: 1024px) { + .ship-postalCode { + input { + width: 215px; + } + & ~ button { + padding: 0 13px; + width: 120px; + right: -213px; + } + } + } + + @media screen and (max-width: 640px) { + .vtex-shipping-preview-0-x-postalCodeForgotten { + display: grid; + grid-template-areas: "colunaOne colunaTwo"; + grid-template-columns: 62.6822% 1fr; + max-width: 343px; + .ship-postalCode { + grid-area: colunaOne; + width: 100%; + height: 93.39px; + input { + width: 100%; + } + & ~ button { + padding: 0 13px; + width: 120px; + grid-area: colunaTwo; + margin-bottom: 23px; + margin-left: 8px; + position: static; + } + } + } + } + + @media screen and (max-width: 374px) { + .vtex-shipping-preview-0-x-postalCodeForgotten { + grid-template-columns: 53.9822% 1fr; + .ship-postalCode { + & ~ button { + padding: 0; + width: 93%; + } + } + } + } } .srp-result { @@ -875,16 +1006,40 @@ color: $color-black-neutra; text-decoration: none; } - } - @include mq(md, max) { - padding: 0 16px; - width: 100%; + @media screen and (max-width: 1024px) { + // margin-top: 48px; + } } .coupon-column { .coupon { margin: 0; + @media screen and (max-width: 1024px) { + padding: 0 16px; + + .coupon-fields { + span { + display: flex; + width: 100%; + + #cart-coupon { + width: 100%; + margin-right: 8px; + } + + #cart-coupon-add { + width: 66.7755%; + max-width: 133px; + margin: 0; + } + + i { + display: none; + } + } + } + } } .link-coupon-add { @@ -907,6 +1062,10 @@ line-height: 14px; color: $color-gray2; cursor: none; + + @media screen and (max-width: 1024px) { + text-align: left; + } } .coupon-fields { @@ -944,11 +1103,6 @@ &::placeholder { color: $color-gray7; } - - @include mq(sm, max) { - max-width: 100%; - width: 100%; - } } button { @@ -964,15 +1118,24 @@ height: 36px; letter-spacing: 0.05em; text-transform: uppercase; - margin-left: 15px; + margin-left: 13px; outline: none; width: 37.7146%; box-sizing: border-box; padding: 0; text-shadow: none; + } - @include mq(md, max) { - width: 138px; + @media screen and (max-width: 1024px) { + span { + input { + width: 85.99%; + } + + button { + width: 13.3783%; + margin-left: 3px; + } } } } @@ -1029,10 +1192,13 @@ display: flex; flex-direction: column; width: 354px; + margin: 17px 0 43px 0; @media screen and (max-width: 1024px) { width: 100%; - padding-bottom: 43px; + padding: 0 16px 43px; + margin: 0; + float: right; } .link-choose-more-products-wrapper { @@ -1040,10 +1206,6 @@ text-align: center; margin-bottom: 15px; - @include mq(md, max) { - margin-bottom: 0px; - } - a { font-family: $font-family-secundary; font-style: normal; @@ -1051,6 +1213,7 @@ font-size: 12px; line-height: 14px; color: $color-black-neutra; + margin: 0; } } @@ -1063,6 +1226,7 @@ font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; + margin: 0; &:after { content: "finalizar compra"; @@ -1084,3 +1248,44 @@ .forms.coupon-column.summary-coupon-wrap.text-center { text-align: left; } + +.cart-template.mini-cart .cart-fixed.cart-fixed-transition .summary-template-holder { + .summary { + @media (max-width: 1024px) { + .summary-totalizers.cart-totalizers { + div { + .accordion-group { + .accordion-body { + .accordion-inner { + padding: 0; + } + } + } + } + } + } + } +} + +.full-cart .cart table tbody tr td.item-remove { + position: relative; + top: 0; +} + +.full-cart .cart table tbody tr td.product-name a { + display: block; + padding: 0; + margin: 0; + margin-left: 16px; + + font-family: "Tenor Sans", sans-serif; + color: #000; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @media (min-width: 1025px) { + margin: 0; + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index f3edc30..54c4206 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,10 +4,34 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + @media (max-width: 1024px) { + width: 100%; + .cart-fixed { + margin: 0 16px 0; + width: auto; + height: auto !important; + margin-bottom: 100px; + } + + .cart-fixed.cart-fixed-transition.affix-top { + margin: 0 16px 0; + height: auto !important; + margin-bottom: 100px; + } + } } .orderform-template-holder { width: 66.1132%; margin-top: 0; + + @media (max-width: 1024px) { + width: 100%; + + .row-fluid .span6 { + width: 100%; + } + } } } @@ -73,7 +97,10 @@ body .container-main.container-order-form .orderform-template.active { } .cart-template.mini-cart.span4 .cart-fixed .payment-confirmation-wrap { + padding: 0; + border-top: none; .payment-submit-wrap { + margin: 0; #payment-data-submit { margin-top: 20px; padding: 12px 0 11px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 7f9c978..e20e660 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -6,7 +6,8 @@ width: 100%; @include mq(md, max) { - padding: 0 16px; + padding: 0 16px 262px; + margin-bottom: 0; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 4f595e7..6153079 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -29,37 +29,27 @@ body { min-height: 100% !important; padding-top: 0 !important; - @include mq(md, max) { - padding-left: 0; - } - &.body-cart { font-family: $font-family; } - &.body-cart, - &.body-order-form { - @include mq(xl, min) { - padding-top: 0; - } - - @include mq(lg, max) { - padding-bottom: 0 !important; - } - - @include mq(md, max) { - padding-right: 0; - padding-left: 0; - } - } .container-order-form, .container-cart { width: 80%; @media screen and (max-width: 1024px) { width: 100%; - padding: 16px; } + + .checkout-container { + padding-top: 11px; + } + } + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0; + margin: 0; } } @@ -87,8 +77,12 @@ body { letter-spacing: 0.05em; text-transform: uppercase; - @include mq(md, max) { - margin-left: 30px; + @media screen and (max-width: 1024px) { + padding: 0 16px; + } + + @media screen and (max-width: 300px) { + font-size: 22px; } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index ac64c77..943bbf5 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -124,6 +124,15 @@ left: 29px; } } + +@media (max-width: 480px) { + .slick-next { + right: 14px; + } + .slick-prev { + left: 21px; + } +} .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 2706e87..7221afa 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -14,7 +14,7 @@ align-items: center; width: 94.9734%; margin: auto auto 0 auto; - padding: 16px 0; + padding: 16px 0 !important; &::before, &::after { @@ -30,6 +30,10 @@ width: 100%; gap: 16px; } + + @media (max-width: 360px) { + padding-right: 16px !important; + } } } @@ -74,6 +78,10 @@ width: 35.65px; height: 20px; margin-right: 13.35px; + + @media (max-width: 640px) { + margin-right: 4.35px; + } } .vtexIcon { @@ -140,6 +148,11 @@ text-align: center; color: $color-black-neutra; margin-bottom: 20px; + + @media (max-width: 440px) { + font-size: 14px; + line-height: 28px; + } } .sliderPratileira { @@ -179,6 +192,11 @@ margin: 20px 0; overflow-y: scroll; word-wrap: break-word; + + @media (max-width: 640px) { + height: 36px; + word-wrap: normal; + } } } @@ -259,12 +277,95 @@ } } } + + @media (max-width: 640px) { + .slick-track { + gap: 16px; + } + + .card-list-pratileira { + .wrapper-list-variables { + width: 100%; + height: 61px; + display: inline-block; + text-align: center; + + @media (max-width: 300px) { + height: 100px; + } + + .variable-pratileira { + display: inherit; + word-wrap: normal; + max-height: auto; + min-width: max-content; + } + } + + figure { + .image-card-pratileira { + height: 295px; + } + } + } + } + + @media (max-width: 480px) { + padding: 0 16px; + .card-list-pratileira { + @media (min-width: 375px) and (max-width: 376px) { + width: 164px !important; + } + figure { + .image-card-pratileira { + height: 164px; + @media (max-width: 300px) { + height: 100px; + } + } + } + } + } + + @media (max-width: 340px) { + padding: 0 8px; + // .card-list-pratileira { + // @media (min-width: 375px) and (max-width: 376px) { + // width: 164px !important; + // } + // figure { + // .image-card-pratileira { + // height: 164px; + // @media (max-width: 300px) { + // height: 100px; + // } + // } + // } + // } + } + + // @media (min-width: 375px) and (max-width: 376px) { + // padding: 0 16px; + // .card-list-pratileira { + // width: 195px !important; + // figure { + // .image-card-pratileira { + // height: 164px; + // width: 195px; + // } + // } + // } + // } } .slick-track { display: flex; gap: 16px; justify-content: center; left: -0.2%; + + @media (min-width: 375px) and (max-width: 376px) { + left: 7%; + } } } }