diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 37af741..08ea459 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -214,12 +214,12 @@ p { label { color: $color-gray9; - font-weight: 500; font-family: "Open Sans"; font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; #opt-in-newsletter { width: 18px; @@ -262,9 +262,8 @@ button.submit { border: none; - border-radius: 5px; + border-radius: 8px; background: $color-blue; - margin-top: 8px; outline: none; transition: all 0.2s linear; width: 100%; @@ -306,6 +305,15 @@ font-weight: 500; } + .vtex-omnishipping-1-x-shippingSectionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + } + .shp-lean { border: 1px solid $color-gray11; border-radius: 0; @@ -325,9 +333,13 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray9; } .shp-summary-group-info { @@ -341,13 +353,13 @@ color: #303030; padding: 12px; - &:first-child::before { - content: ""; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - background-size: 21px 20px; - width: 21px; - height: 20px; - } + // &:first-child::before { + // content: ""; + // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + // background-size: 21px 20px; + // width: 21px; + // height: 20px; + // } @include mq(md, max) { background-position: 8px 9px; @@ -358,10 +370,6 @@ font-weight: 500; text-decoration: underline; } - - .ship-street { - display: none !important; - } } .shp-summary-group-price, @@ -424,6 +432,33 @@ max-width: 280px; } } + + .vtex-omnishipping-1-x-address { + .ship-street, + .ship-neighborhood, + .ship-city, + .ship-state { + display: none; + } + + .ship-number { + input { + width: 155%; + height: 25px; + border-radius: 8px; + margin-bottom: 20px; + } + } + + .ship-receiverName { + input { + width: 95%; + border-radius: 8px; + height: 25px; + margin: 0; + } + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2114b41..9a9f90a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,12 +17,16 @@ display: none; } .cart { - // border: 1px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px 16px; margin-bottom: 0 !important; + @media (max-width: 1024px) { + padding: 7px 16px; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -150,6 +154,11 @@ } .cart-items { + @media (max-width: 1024px) { + thead { + display: none; + } + } .shipping-date { font-size: 0; @@ -164,6 +173,10 @@ .product-item { padding: 16px 0; + @media (max-width: 1024px) { + position: relative; + } + .shipping-estimate-date { color: $color-gray6; @@ -218,6 +231,11 @@ padding-right: 0; white-space: normal; + @media (max-width: 1024px) { + position: absolute; + top: 0; + } + @include mq(lg, max) { width: 250px; } @@ -231,6 +249,10 @@ transition: ease-in 0.22s all; margin-left: 11px; + @media (max-width: 1024px) { + margin-left: 16px; + } + &:hover { color: darken($color-blue, 10); text-decoration: none; @@ -263,6 +285,10 @@ width: 7%; } + @media (max-width: 1024px) { + display: none; + } + &::before { content: ""; } @@ -285,6 +311,13 @@ .product-price { font-size: 0; + @media (max-width: 1024px) { + min-width: 130px; + position: absolute; + left: 87.5%; + top: 25%; + } + &::before { content: "Unidade"; font-size: 14px; @@ -293,9 +326,9 @@ margin-left: 35px; } min-width: 100px; - @include mq(md, max) { - min-width: 78px; - } + // @include mq(md, max) { + // min-width: 78px; + // } @media (max-width: 490px) { position: absolute; bottom: 0; @@ -310,6 +343,11 @@ position: absolute; margin: 8px 0 0 35px; left: 2.5%; + + @media (max-width: 1024px) { + margin: 8px 0 0 47px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -339,6 +377,10 @@ width: 64.91% !important; position: relative; + @media (max-width: 1024px) { + margin: 28px 0 0 16px; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -404,6 +446,10 @@ .quantity-price { text-align: left; + @media (max-width: 1024px) { + display: none; + } + .icon-question-sign { display: none; } @@ -466,6 +512,11 @@ color: $color-gray8; font-size: 15px; + @media (max-width: 1024px) { + position: absolute; + top: 0; + } + @include mq(md, max) { font-size: 18px; } @@ -492,7 +543,7 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; + padding: 0 0 0 16px; @include mq(md, max) { padding: 0 16px; @@ -544,6 +595,10 @@ .srp-data { width: 280px; + @media (max-width: 1024px) { + margin-bottom: 48px; + } + .ship-country { display: none; } @@ -570,6 +625,10 @@ line-height: 16px; letter-spacing: 0.05em; + @media (max-width: 1024px) { + width: 122.5%; + } + &:hover { background-color: lighten($color-black, 5); } @@ -583,6 +642,10 @@ .srp-toggle { margin: 0 0 20px; + @media (max-width: 1024px) { + width: 122.5%; + } + &__wrapper { background-color: $color-white; border-radius: 100px; @@ -634,6 +697,10 @@ height: 36px; padding: 12px 8px; width: 132.31%; + + @media (max-width: 1024px) { + width: 165.39%; + } } & ~ button { @@ -653,6 +720,11 @@ width: 76.93%; text-transform: uppercase; + @media (max-width: 1024px) { + width: 92.31%; + right: -213px; + } + // &:hover { // background-color: lighten($color-black, 5); // } @@ -753,6 +825,11 @@ margin-top: 49px; width: 353px; + @media (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 16px; + } .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -825,6 +902,10 @@ padding: 0 12px; width: 50.52%; + @media (max-width: 1024px) { + width: 83.1%; + } + @include mq(sm, max) { max-width: 100%; width: 100%; @@ -843,6 +924,11 @@ width: 37.824%; margin-left: 12px; + @media (max-width: 1024px) { + width: 13.46%; + margin-left: 5px; + } + @include mq(md, max) { width: 138px; } @@ -899,6 +985,11 @@ } } } + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } } .cart-links-bottom { @@ -906,6 +997,11 @@ flex-direction: column; width: 354px; + @media (max-width: 1024px) { + width: 97%; + padding: 0 16px; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f2920f1..20c3763 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,6 +16,10 @@ footer .footerCheckout__prateleira, header { width: 79.53125%; margin: 0 auto; + + @media (max-width: 1024px) { + width: 100%; + } } body { @@ -51,6 +55,10 @@ body { .container-order-form, .container-cart { width: 80%; + + @media (max-width: 1024px) { + width: 100%; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 7dcf708..a1ffcd7 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -78,6 +78,16 @@ margin: 0 2px 0 8px; } + @media (max-width: 1024px) { + &:first-child { + margin: 0 8px 0 16px; + } + + &:last-child { + margin: 0 16px 0 8px; + } + } + [dir="rtl"] & { float: right; } @@ -119,6 +129,10 @@ width: 14px; height: 30px; color: $color-gray6; + + @media (max-width: 1024px) { + left: 2.5%; + } } .slick-next { // z-index: 4; @@ -130,6 +144,10 @@ width: 14px; height: 30px; color: $color-gray6; + + @media (max-width: 1024px) { + left: 96.5%; + } } .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 4d6ef7f..88fdf04 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -150,8 +150,8 @@ height: 65px; @media (max-width: 1024px) { - flex-direction: column; - align-items: flex-start; + display: grid; + padding-top: 16px; } &::before, @@ -169,10 +169,11 @@ font-size: 10px; line-height: 14px; text-transform: capitalize; - max-width: 40%; + max-width: auto; @media (max-width: 1024px) { margin: 15px 0; + order: 2; } @include mq(md, max) { @@ -189,6 +190,11 @@ width: 33.224%; max-width: 404px; + @media (max-width: 1024px) { + width: auto; + order: 1; + } + span { display: flex; justify-content: space-between; @@ -228,6 +234,7 @@ @media (max-width: 1024px) { margin-top: 10px !important; + order: 3; } li:first-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a147cd9..620728d 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,6 +5,11 @@ width: 100%; height: 95px; border-bottom: 1px solid $color-black; + + @media (max-width: 1024px) { + height: 70px; + } + .container { display: flex; justify-content: center;