diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 6f1bb40..a90b339 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,6 +1,13 @@ -.container { - @include mq(md, max) { - width: 100%; +// .container { +// @include mq(pg, max) { +// width: 100%; +// } +// } + +body .container-order-form, +body .container-cart { + @include mq(pg, max) { + width: 100% !important; } } @@ -18,7 +25,7 @@ border-radius: 5px; padding: 16px; - @include mq(md, max) { + @include mq(pg, max) { margin: 0px 0 25px 0; border-left: none; border-right: none; @@ -132,6 +139,10 @@ font-size: 14px; line-height: 16px; + @include mq(pg, max) { + display: none; + } + @include mq(xxl, min) { font-size: 28px; line-height: 33px; @@ -191,7 +202,7 @@ max-width: 100%; width: auto; - @include mq(sm, max) { + @include mq(pg, max) { height: 72px; width: auto; } @@ -201,8 +212,8 @@ .product-name { padding-right: 0; - @include mq(lg, max) { - width: 250px; + @include mq(pg, max) { + padding: 0 0 10px !important; } a { @@ -219,6 +230,12 @@ text-decoration: none; } + @include mq(pg, max) { + position: absolute; + top: 25px; + padding: 0 16px; + } + @include mq(xxl, min) { font-size: 28px; line-height: 33px; @@ -245,7 +262,7 @@ line-height: 33px; } - @include mq(md, max) { + @include mq(pg, max) { display: none; } } @@ -257,6 +274,13 @@ @include mq(md, max) { min-width: 78px; } + + @include mq(pg, max) { + position: absolute; + top: 50px; + right: 0; + } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -306,8 +330,12 @@ padding: 0; width: max-content !important; - @media (max-width: 490px) { + @media (max-width: 1024px) { margin-left: 84px !important; + // width: 24px !important; + position: absolute !important; + left: 0 !important; + top: 50px !important; } input { @@ -322,10 +350,6 @@ width: 38px; color: $color-gray2; box-shadow: none; - - @include mq(lg, max) { - width: 24px !important; - } } .icon-plus-sign, @@ -358,12 +382,12 @@ .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; + position: relative; + bottom: 0; + left: 0; + height: auto; + width: auto; + top: 0; } @media (max-width: 490px) { @@ -402,14 +426,18 @@ font-size: 28px; line-height: 38px; } - @include mq(md, max) { + @include mq(pg, max) { display: none; } } .item-remove { - @media (max-width: 490px) { - top: 0; + @media (max-width: 1024px) { + position: absolute; + top: 2px; + right: 0; + width: 24px; + padding: 4px 0; } .icon::before { color: $color-gray4; @@ -443,7 +471,7 @@ .srp-container { padding: 0 0 0 10px; - @include mq(md, max) { + @include mq(pg, max) { padding: 0 16px; } @@ -741,6 +769,11 @@ padding: 0; width: 346px; + @include mq(pg, max) { + width: 100% !important; + padding: 0 16px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -899,7 +932,7 @@ flex-direction: column; width: 343px; - @include mq(md, max) { + @include mq(pg, max) { padding: 0 16px; width: calc(100% - 32px); float: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 00466a1..d223da8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -68,13 +68,14 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + padding: 0 16px; + color: $color-black; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) {