From 59d940e3fdf1af67fa9cd783c097bde0e6d5900a Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 18 Dec 2022 23:49:20 -0300 Subject: [PATCH] feat:slick mobile --- .../sass/checkout/_checkout-carrinho.scss | 18 +++++- .../sass/checkout/_checkout-pagamento.scss | 2 - .../sass/checkout/_checkout-vazio.scss | 10 +++ .../src/arquivos/sass/checkout/_checkout.scss | 5 ++ .../src/arquivos/sass/partials/_footer.scss | 62 +++++++++++++++++++ 5 files changed, 93 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 1b1de80..ad53583 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -40,6 +40,14 @@ } .cart-template { font-family: $font-family; + .summary-template-holder{ + div{ + border: 0 !important; + @include mq(xll, max) { + width: 100%; + } + } + } @include mq(md, max) { padding: 0 0; } @@ -59,6 +67,9 @@ border-right: none; border-radius: 0; } + @include mq(xll, max) { + margin: 30px 0 25px 0; + } } .cart-fixed.affix { position: relative !important; @@ -804,8 +815,6 @@ color: $color-black; } button{ - border: 0; - right: 0; top: 121px; width: 140%; height: 42px; @@ -817,6 +826,11 @@ letter-spacing: 0.05em; font-family:$font-family; margin-bottom: 44px; + border: 0; + @include mq(xll, max) { + height: 48px; + white-space: nowrap; + } } .flex{ display: flex; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 4ec5ea0..951c6df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -185,8 +185,6 @@ body .container-main.container-order-form .orderform-template.active { } .steps-view{ position: absolute; - // width: 394px; - // height: 292px; right: 0; top: -2px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index a69cb76..6e159da 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -5,6 +5,10 @@ display: grid; align-content: center; padding: 0 0 0 0; + @include mq(xll, max) { + width: 250px; + height: 48px; + } } .empty-cart { font-family: $font-family; @@ -22,6 +26,7 @@ p{ display: none; } + } @@ -30,6 +35,11 @@ line-height: 33px; text-align: center; text-transform: uppercase; + @include mq(xll, max) { + font-size: 18px; + line-height: 25px; + white-space: nowrap; + } } &-links { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index de2ad74..34526e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -103,6 +103,11 @@ body { top: 0; left: 0; letter-spacing: 0.05em; + @include mq(xll, max) { + font-size: 24px; + line-height: 33px; + white-space: nowrap; + } } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index eb1e58e..dabaf54 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -57,6 +57,13 @@ top: 0; margin: 16px 0 0 16px !important; } + span{ + @include mq(IVK, min) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } } &__stamps { @@ -98,10 +105,19 @@ .VtexM3{ width: 44px; height: 16px; + @include mq(IVK, min) { + width: 88px; + height: 30px; + } + } .VtexM3_2{ width: 28px; height: 16px; + @include mq(IVK, min) { + width: 56px; + height: 32px; + } } li:last-child { margin-left: 16px; @@ -119,7 +135,13 @@ text-decoration: none; span { + color: $color-black; margin-right: 8px; + @include mq(IVK, min) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + } } } } @@ -142,12 +164,20 @@ .SLick_title{ font-family: 'Tenor Sans', sans-serif; color: $color-black; + margin-bottom: 20px; + @include mq(xll, max) { + font-size: 14px; + line-height: 28px; + } } .Fakebutton-Prev{ left: 161px; top: 227px; z-index: map-get($map:$z-index, $key: level5); position: absolute; + @include mq(xll, max) { + left: 29px; + } } .Fakebutton-Next{ position: absolute; @@ -155,6 +185,9 @@ right: 161px; z-index: map-get($map:$z-index, $key: level5); top: 227px; + @include mq(xll, max) { + right: 22px; + } } .quadrado{ display: flex !important; @@ -178,10 +211,19 @@ text-align: center; width: 26px; height: 28px; + @include mq(xll, max) { + width: 16px ; + height: 18px; + border-radius: 4px; + } } .cor{ width: 54px !important; height: 28px !important; + @include mq(xll, max) { + width: 46px ; + height: 28px; + } } .verde{ width: 54px !important; @@ -195,6 +237,10 @@ width: 112px !important; height: 28px !important; white-space: nowrap; + @include mq(xll, max) { + width: 164px ; + height: 42px; + } } } .Ver__produto{ @@ -204,13 +250,28 @@ border-radius: 8px; border: 0; background-color: $color-blue-100; + @include mq(xll, max) { + width: 106px; + height: 42px; + } } .imago{ background: #eeeeee; } + + @include mq(xll, max) { + width: 112px !important; + height: 394px !important; + } } .slick-slide{ position: relative; + @include mq(xll, max) { + img{ + width: 164px; + height: 164px; + } + } } .slick-list { // width: 1016px; @@ -222,4 +283,5 @@ height: 466px !important; } } + }