diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 23466a2..3762fa6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,5 +1,9 @@ .checkout-container { padding-bottom: 90px; + + @include mq(dt, max) { + padding-bottom: 0; + } .client-pre-email { border-color: $black; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index fe519e3..40e9999 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -7,7 +7,7 @@ .cart-template { font-family: $font-family-secundary; - @include mq(md, max) { + @include mq(dt, max) { padding: 0 0; } @@ -24,19 +24,21 @@ border-radius: 5px; padding: 30px 17px 0px 17px; - .clearfix::before { - display: none; - } - - @include mq(md, max) { + @include mq(dt, max) { margin: 0px 0 25px 0; + border: 1px solid $gray-100 !important; border-left: none; border-right: none; border-radius: 0; + padding: 0 16px; } - @include mq(dt, max) { - padding: 16px 0 16px 16px; + // @media (max-width: 490px) { + // border: 1px solid $gray-100 !important; + // } + + .clearfix::before { + display: none; } } .cart-fixed.affix { @@ -102,8 +104,18 @@ border-top: none; background: $white; + @include mq(dt, max) { + display: flex; + flex-direction: column; + } + .row-fluid summary { margin-top: 48px; + + @include mq(dt, max) { + display: flex; + flex-direction: column; + } } .row-fluid summary ::after, ::before { @@ -171,12 +183,39 @@ justify-content: center; align-items: center; + @include mq(dt, max) { + display: block; + margin-top: 0; + padding: 0; + position: relative; + } + .fn product-name { line-break: auto; width: 117px; white-space: normal; } + thead { + @include mq(dt, max) { + display: none; + } + } + + tbody { + @include mq(dt, max) { + display: block; + + .product-item { + display: block; + margin: 10px 0; + padding: 0; + position: relative; + // border: 1px solid $gray-100; + } + } + } + th { color: $black; padding: 0 0 16px; @@ -185,7 +224,12 @@ font-size: 14px; line-height: 16px; - @include mq(md, max) { + @include mq(tv, min) { + font-size: 28px; + line-height: 33px; + } + + @include mq(dt, max) { &.quantity-price, &.shipping-date { display: none; @@ -198,8 +242,15 @@ padding: 0; width: 60px; - @include mq(sm, max) { - width: 72px; + @include mq(tv, min) { + width: 146px; + } + + @include mq(dt, max) { + // width: 72px; + position: absolute; + display: inline-block; + left: 0; } img { @@ -207,6 +258,10 @@ max-width: 100%; width: auto; + @include mq(tv, min) { + height: 146px; + } + @include mq(sm, max) { height: 72px; width: auto; @@ -224,6 +279,20 @@ white-space: normal !important; color: $black; + @include mq(tv, min) { + width: 359px; + } + + @include mq(dt, max) { + display: block; + width: auto; + margin-left: 60px; + padding: 0 0 10px !important; + text-align: left; + line-height: 140%; + width: auto; + } + @include mq(lg, max) { width: 250px; } @@ -240,8 +309,16 @@ text-decoration: none; } - @media (max-width: 490px) { + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(dt, max) { + display: block; + padding-right: 20px; margin-left: 23px; + overflow: hidden; } } @@ -252,24 +329,27 @@ } td.shipping-date { - color: $black; + color: $gray-150; font-size: 12px; line-height: 14px; - @include mq(md, max) { + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(dt, max) { display: none; } } .product-price { min-width: 100px; - @include mq(md, max) { - min-width: 78px; - } - @media (max-width: 490px) { - position: absolute; - bottom: 0; - right: 0; + @include mq(dt, max) { + text-align: right; + float: right; + margin-right: 5px; + padding: 0; } span.list-price { @@ -277,6 +357,17 @@ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(dt, max) { + text-align: right; + float: right; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -290,7 +381,7 @@ td.quantity { align-items: center; - border: 1px solid $color-gray3; + border: 1px solid $gray-100; border-radius: 0; box-sizing: border-box; display: flex; @@ -301,8 +392,10 @@ padding: 0; width: max-content !important; - @media (max-width: 490px) { - margin-left: 84px !important; + @media (max-width: 1024px) { + margin-left: 71px !important; + width: 81px; + padding: 0px; } input { @@ -318,6 +411,11 @@ color: $black; box-shadow: none; + @include mq(tv, min) { + font-size: 28px; + line-height: 33px; + } + @include mq(lg, max) { width: 24px !important; } @@ -337,13 +435,21 @@ &:before { color: $blue; font-size: 16px; + + @include mq(tv, min) { + font-size: 24px; + } } } .icon-plus-sign { &:before { color: $blue; - font-size: 14px; + font-size: 16px; + + @include mq(tv, min) { + font-size: 24px; + } } } @@ -357,7 +463,7 @@ top: inherit; } - @media (max-width: 490px) { + @media (max-width: 1024px) { padding: 0; } } @@ -368,31 +474,46 @@ .icon-question-sign { display: none; } + @include mq(tv, min) { + min-width: 154px; + } + span { font-style: normal; font-weight: 700; font-size: 14px; line-height: 16px; color: $gray-500; + + @include mq(tv, min) { + font-size: 28px; + line-height: 33px; + } } } .quantity-price { - @include mq(md, max) { + @include mq(dt, max) { display: none; } } .item-remove { - @media (max-width: 490px) { - top: 0; + @include mq(dt, max) { + position: absolute; + display: inline-block; + padding: 4px 0; + top: 2px; + right: 0; + width: 24px; + text-align: center; } .icon::before { - color: $gray-200; - font-size: 15px; + color: $gray-125; + font-size: 12px; - @include mq(md, max) { - font-size: 18px; + @include mq(tv, min) { + font-size: 26px; } } } @@ -419,8 +540,9 @@ .srp-container { padding: 0 0 0 16px; - @include mq(md, max) { + @include mq(dt, max) { padding: 0 16px; + margin-bottom: 48px; } .srp-main-title { @@ -432,6 +554,11 @@ line-height: 33px; color: $black; + @include mq(tv, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-top: 0; } @@ -443,6 +570,13 @@ font-size: 12px; line-height: 18px; margin: 0 0 12px; + + @include mq(tv, min) { + width: 552px; + max-width: none; + font-size: 28px; + line-height: 36px; + } } button.shp-open-options { @@ -458,6 +592,11 @@ outline: none; padding: 12px 40px; transition: all 0.2s linear; + + @include mq(tv, min) { + font-size: 28px; + line-height: 38px; + } } .ship-country { @@ -509,6 +648,11 @@ text-transform: uppercase; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); color: $gray-125; + + @include mq(tv, min) { + font-size: 28px; + line-height: 38px; + } } &__current { @@ -545,6 +689,15 @@ line-height: 14px; color: $black; margin-bottom: 12px; + + @include mq(tv, min) { + font-size: 24px; + line-height: 33px; + } + + @include mq(dt, max) { + margin-bottom: 2px; + } } input { @@ -556,6 +709,21 @@ height: 36px; padding: 12px 8px; width: 172px; + + @include mq(tv, min) { + width: 333.96px; + font-size: 28px; + line-height: 38px; + height: 55px; + } + + @include mq(dt, max) { + width: 215px; + } + + @include mq(Gf, max) { + width: 122px; + } } & ~ button { @@ -573,6 +741,25 @@ transition: all 0.2s linear; width: 96px; text-transform: uppercase; + + @include mq(tv, min) { + width: 194.16px; + height: 55px; + font-size: 28px; + line-height: 38px; + top: 56px; + right: -415px; + } + + @include mq(dt, max) { + width: 120px; + top: 26px; + right: -213px; + } + + @include mq(Gf, max) { + right: -117px; + } } small a { @@ -585,6 +772,15 @@ color: $black; margin-top: 7px; cursor: pointer; + + @include mq(tv, min) { + font-size: 20px; + line-height: 23px; + } + + @include mq(dt, max) { + text-decoration: underline; + } } small:hover { @@ -668,6 +864,10 @@ padding: 0; width: 346px; + @include mq(tv, min) { + width: 688.35px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -683,10 +883,15 @@ line-height: 14px; color: $black; text-decoration: none; + + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } } } - @include mq(md, max) { + @include mq(dt, max) { padding: 0 16px; width: 100%; } @@ -718,11 +923,11 @@ .coupon-fields { margin-bottom: 32px; - @include mq(sm, max) { + @include mq(dt, max) { span { display: flex; flex-direction: row; - justify-content: space-between; + gap: 5px; i { position: absolute; right: 91px; @@ -731,8 +936,14 @@ } } + @include mq(sm, max) { + span { + gap: 8px; + } + } + input { - border: 2px solid $color-gray3; + border: 2px solid $gray-100; border-radius: 5px; box-shadow: none; font-family: $font-family-secundary !important; @@ -745,10 +956,20 @@ padding: 0 16px; width: 51%; - @include mq(sm, max) { + @include mq(dt, max) { + padding: 0 12.5px; max-width: 100%; width: 100%; } + + // @include mq(sm, max) { + // max-width: 100%; + // width: 100%; + // } + + @include mq(Gf, max) { + width: 43%; + } } button { @@ -773,6 +994,12 @@ @include mq(md, max) { width: 138px; + min-width: fit-content; + } + + @include mq(dt, max) { + width: 138px; + margin-left: 0; } } } @@ -790,11 +1017,20 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $gray-600; padding: 25px 0; + + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(dt, max) { + padding: 10px 0; + } } &.info { @@ -827,11 +1063,8 @@ flex-direction: column; width: 343px; - @include mq(md, max) { - padding: 0 16px; - width: calc(100% - 32px); - float: none; - margin-bottom: 50px; + @include mq(tv, min) { + width: 688.35px; } @include mq(md, min) { @@ -839,6 +1072,12 @@ padding-bottom: 50px; } + @include mq(dt, max) { + padding: 0 16px; + width: calc(100% - 32px); + float: none; + margin-bottom: 50px; + } .link-choose-more-products-wrapper { display: block; text-align: center; @@ -855,6 +1094,11 @@ font-size: 12px; line-height: 14px; color: $black; + + @include mq(tv, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -880,6 +1124,11 @@ text-transform: uppercase; vertical-align: middle; text-shadow: none; + + @include mq(tv, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 925ada3..f3b0f93 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -22,6 +22,10 @@ footer .footerCheckout__prateleira { @include mq(dt, min) { width: 79.376%; } + + @include mq(mm, max) { + width: 91.2%; + } } header { @@ -98,6 +102,11 @@ body { letter-spacing: 0.05em; text-transform: uppercase; + @include mq(tv, min) { + font-size: 48px; + line-height: 65px; + } + @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 f6bccbe..b74e933 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -54,7 +54,7 @@ font-size: 20px; line-height: 27px; min-width: 537px; - margin-left: 0; + margin-left: 63px; } } @@ -180,7 +180,7 @@ @include mq(tv, min) { min-width: 388.98px; - margin-right: 0; + margin-right: 62px; a { font-size: 18px; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index f673ba9..086bd5b 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,20 +1,19 @@ .headerCheckout { .container { width: auto !important; + @media (min-width: 1025px) { + padding: 0 10%; + border-bottom: 1px solid $black; + } } &__wrapper { display: flex; align-items: center; - justify-content: space-around; + justify-content: space-between; padding: 16px; - border-bottom: 1px solid $black; @media (min-width: 1025px) { - padding: 33.5px 0; - } - - @media (min-width: 2500px) { - padding: 33.5px 0; + padding: 16px 0; } } .progress-bar { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 546a547..2eeed93 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -6,6 +6,16 @@ line-height: 38px; text-align: center; margin: 20px 0; + + @include mq(tv, min) { + font-size: 48px; + line-height: 76px; + } + + @include mq(mm, max) { + font-size: 14px; + line-height: 28px; + } } footer .footerCheckout__prateleira { @@ -26,6 +36,11 @@ footer .footerCheckout__prateleira { margin: 0 7.5px; } + @include mq(mm, max) { + width: 95.91% !important; + margin: 0 7px; + } + .img-container { margin: 0; background: #ededed; @@ -40,6 +55,17 @@ footer .footerCheckout__prateleira { line-height: 18px; color: $black; margin: 20px 0 !important; + justify-content: center; + + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + } + + @include mq(mm, max) { + text-align: center; + flex-wrap: wrap; + } } .itemSku { @@ -47,12 +73,33 @@ footer .footerCheckout__prateleira { gap: 5px; list-style: none; margin-bottom: 20px; + justify-content: center; + text-align: center; + align-items: center; p { border-radius: 8px; background: $blue; color: $white; padding: 5px; + min-width: 18px; + height: 18px; + + @include mq(tv, min) { + min-width: 32px; + height: 35px; + } + } + + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + } + + @include mq(mm, max) { + flex-wrap: wrap; + margin: 16px 0 36px; + height: 76px; } } @@ -64,6 +111,11 @@ footer .footerCheckout__prateleira { text-align: center; color: $white; cursor: pointer; + + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + } } } } @@ -77,9 +129,22 @@ footer .footerCheckout__prateleira { border: none; height: 30px; + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center center; + width: 28px; + height: 58px; + left: 0px; + } + @include mq(dt, min) { left: 10px; } + + @include mq(mm, max) { + top: 47%; + left: 7px; + } } .slick-next { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") @@ -93,5 +158,19 @@ footer .footerCheckout__prateleira { @include mq(dt, min) { right: 20px; } + + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + + width: 28px; + height: 58px; + right: 29px; + } + + @include mq(mm, max) { + top: 47%; + right: 0; + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 73aec97..54ac3a4 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -26,7 +26,6 @@ $blue: #00c8ff; $orange: #f15a31; $color-gray: #6c6c6c; -$color-gray3: #f0f0f0; $color-blue: #4267b2; @@ -36,6 +35,7 @@ $color-green: #298541; $grid-breakpoints: ( xs: 0, Gf: 328px, + mm: 376px, cstm: 400, sm: 576px, md: 768px,