From a6e8552951463865177446e77a65835db1482346 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 26 Dec 2022 11:20:19 -0300 Subject: [PATCH] feat: Aplica css mobile --- .../sass/checkout/_checkout-autenticacao.scss | 4 +- .../sass/checkout/_checkout-carrinho.scss | 130 +++++++++++++++++- .../sass/checkout/_checkout-vazio.scss | 2 +- .../src/arquivos/sass/checkout/_checkout.scss | 9 ++ 4 files changed, 135 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index c21feca..ed7b3cd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -286,7 +286,7 @@ padding: 12px 17px; } - @media (max-width: 490px) { + @media (max-width: 490px) { height: 48px; margin: 0; position: absolute; @@ -713,7 +713,7 @@ color: #303030; padding: 12px; - @include mq(md, max) { + @include mq(md, max) { background-position: 8px 9px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 53b83d2..993f5c7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -10,12 +10,15 @@ .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0; } + .item-unit-label { display: none; } + .cart { border: 1px solid $color-gray3; box-sizing: border-box; @@ -27,6 +30,10 @@ padding: 16px 31px; } + @media (max-width: 1024px) { + height: 91px; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -34,6 +41,7 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } @@ -169,6 +177,11 @@ .cart-items { .product-item { padding: 16px 0; + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } } th { @@ -186,6 +199,10 @@ line-height: 33px; } + @media (max-width: 1024px) { + display: none; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -229,6 +246,14 @@ height: 146px; } + @media (max-width: 1024px) { + margin-top: -17px; + } + + @media (max-width: 490px) { + margin-top: -27px; + } + img { height: 60px; max-width: 60px; @@ -256,6 +281,7 @@ font-size: 12px; line-height: 14px; color: $color-black2; + width: auto; @include mq(xg, min) { width: 600px; @@ -283,16 +309,26 @@ margin-left: 31px; } - &:hover { - color: darken($color-blue, 10); - text-decoration: none; + @media (max-width: 1024px) { + display: flex; + margin-left: 76px; + margin-top: -60px; } @media (max-width: 490px) { margin-left: 23px; + margin-top: -26px; + } + + @media (max-width: 310px) { + margin-left: 12px; + } + + &:hover { + color: darken($color-blue, 10); + text-decoration: none; } } - .brand, .seller { display: none !important; @@ -312,6 +348,10 @@ line-height: 28px; } + @media (max-width: 1024px) { + display: none; + } + @include mq(md, max) { display: none; } @@ -321,13 +361,18 @@ min-width: 100px; text-align: left; + @media (max-width: 1024px) { + text-align: right; + bottom: 40px; + } + @include mq(md, max) { min-width: 78px; } @media (max-width: 490px) { position: absolute; - bottom: 0; + bottom: 5px; right: 0; } @@ -400,8 +445,19 @@ padding: 21px 62px; } + @media (max-width: 1024px) { + display: flex; + margin-left: 76px; + margin-top: -100px; + } + @media (max-width: 490px) { margin-left: 84px !important; + margin-top: -10px; + } + + @media (max-width: 310px) { + margin-left: 75px !important; } input { @@ -490,6 +546,11 @@ } .quantity-price { + + @media (max-width: 1024px) { + display: none; + } + .total-selling-price { font-family: $font-family; font-weight: 700; @@ -507,9 +568,17 @@ } .item-remove { + @media (max-width: 1024px) { + text-align: right; + margin-top: -92px; + width: auto; + } + @media (max-width: 490px) { top: 0; + margin-top: -25px; } + .icon::before { color: $color-gray6; font-size: 15px; @@ -521,6 +590,11 @@ @include mq(md, max) { font-size: 18px; } + + @media (max-width: 490px) { + font-size: 13.5px; + } + } } @@ -539,17 +613,26 @@ } .summary { + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + .cart-more-options { margin: 0; width: max-content; + @media (max-width: 1024px) { + margin-bottom: 48px; + } + .srp-container { padding: 0 0 0 10px; @include mq(md, max) { padding: 0 16px; } - .srp-main-title { margin: 0 0 11px 0; font-style: normal; @@ -586,6 +669,10 @@ max-width: none; margin-bottom: 11px; } + + @media (max-width: 310px) { + max-width: 17rem; + } } button.shp-open-options { @@ -941,6 +1028,10 @@ width: 692px; } + @media (max-width: 1024px) { + width: 100%; + } + .coupon-data { margin-bottom: 0 0 10px 0; @@ -1024,6 +1115,10 @@ width: 398px; } + @media (max-width: 1024px) { + width: 100%; + } + &::placeholder { padding: 1px 1px; } @@ -1059,6 +1154,10 @@ padding: 8px 50px; } + @media (max-width: 1024px) { + margin-left: 5px; + } + &:hover { background-color: $color-blue3; } @@ -1071,6 +1170,12 @@ } .accordion-group { + @media (max-width: 767px) { + width: 96.8%; + margin: auto; + padding: 0 4px; + } + tr { border-color: #e5e5e5; @@ -1149,9 +1254,12 @@ width: 688px; } + @media (max-width: 1024px) { + width: 100%; + } + @include mq(md, max) { padding: 0 16px; - width: calc(100% - 32px); float: none; } @@ -1202,6 +1310,14 @@ padding: 12px 175px; } + @media (max-width: 384px) { + padding: 12px 95px; + } + + @media (max-width: 370px) { + padding: 12px 45px; + } + &:hover { background: $color-blue3; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index a0f9ced..016a9b5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -12,7 +12,7 @@ color: $color-black; text-align: center; - @include mq(md, max) { + @include mq(md, max) { padding: 0 16px; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 1d90d05..1098283 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -67,6 +67,10 @@ body { @include mq(xpp, max) { width: 91.4666%; } + + @media (max-width: 767px) { + width: 100%; + } } } @@ -103,6 +107,11 @@ body { @include mq(xm, min) { margin: 17px 0 16px; } + + @media (max-width: 767px) { + padding: 0 16px; + } + } #orderform-title {