From a56bf31b70dbc6dd26e28f82e01a72143c70b186 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 25 Dec 2022 01:47:34 -0300 Subject: [PATCH] feat:add responsividade cards paymente fechados --- .../sass/checkout/_checkout-autenticacao.scss | 103 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 9 +- .../sass/checkout/_checkout-pagamento.scss | 55 +++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 6 + 4 files changed, 160 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index a74b954..73d42d9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -75,7 +75,7 @@ } .checkout-container { @include mq(IVK, min) { - height: 598px; + height: 133%; } .icon-lock{ @include mq(xll, max) { @@ -253,24 +253,75 @@ } } + #shipping-data{ + .accordion-group{ + .accordion-heading{ + span{ + @include mq(IVK, min) { + font-size: 32px; + margin: 34px; + } + } + } + @include mq(IVK, min) { + .accordion-inner{ + + .box-step{ + .shp-summary-group{ + &-content{ + .shp-summary-group-info{ + .shp-summary-group-address{ + .address-summary{ + span{ + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } + } + } + } + } + } + } + } + } + } .shipping-data, .payment-data, .client-profile-data { .accordion-group { - @include mq(xll, max) { - border: 0 !important; - } + // @include mq(xll, max) { + // border: 0 !important; + // } border-radius: 0; border: 1px solid $color-gray4; font-family: $font-family; padding: 16px; + .client-profile-summary{ + .name{ + + margin-bottom: 6px; + } + } .accordion-heading { + .accordion-toggle{ + + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + @include mq(IVK, min) { + font-size: 32px; + margin: 34px; + } + } + } span { color: #303030; margin-bottom: 8px; padding: 0; - i::before { fill: #303030; } @@ -292,7 +343,31 @@ padding: 0; /* General configurations */ - + .box-step{ + .link-change-shipping{ + display: none; + } + .shp-summary-group{ + &-content{ + @include mq(IVK, min) { + .shp-summary-package{ + .shp-summary-package-time{ + span{ + font-weight: 400; + font-size: 24px; + line-height: 33px; + align-items: center; + letter-spacing: 0.05em; + margin-left: 34px; + } + } + } + align-items: flex-start; + flex-direction: column; + } + } + } + } .client-notice { color: $color-black; } @@ -384,7 +459,10 @@ } .shp-summary-group-info { - border-color: $color-gray4; + border-color: $color-gray6; + @include mq(IVK, min) { + border: none; + } } .address-summary { @@ -412,6 +490,9 @@ background: no-repeat; background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); background-size: 24px; + @include mq(xll, min) { + display: none; + } } @include mq(md, max) { @@ -432,6 +513,14 @@ .shp-summary-group-price { padding-right: 16px; + @include mq(IVK, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + align-items: center; + letter-spacing: 0.05em; + margin-left: 34px; + } } .shp-summary-package { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 8d72333..94dcee4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -104,10 +104,13 @@ .cart-fixed { @include mq(xll, max) { right: 0; + .payment-confirmation-wrap{ + border: none; } - font-family: $font-family; - width: 100%; - height: 100% !important; + } + font-family: $font-family; + width: 100%; + height: 100% !important; h2 { background: $color-white; border: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 5d894aa..6d956b2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -178,6 +178,14 @@ body .container-main.container-order-form .orderform-template.active { color: #7D7D7D; font-weight: 700; } + p{ + @include mq(IVK, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + margin-left: 34px !important; + } + } input, .cart{ border-radius: 4px!important; @@ -214,7 +222,11 @@ body .container-main.container-order-form .orderform-template.active { background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); background-size: 20px; fill: transparent !important; - + @include mq(IVK, min) { + width: 40px !important; + height: 40px !important; + background-size: 40px; + } } } #go-to-shipping, @@ -227,6 +239,10 @@ body .container-main.container-order-form .orderform-template.active { } } #payment-data-submit{ + @include mq(xll, max) { + width: 95% !important; + + } width: 88% !important; background: $color-green_2 !important; text-transform: uppercase !important; @@ -238,7 +254,7 @@ body .container-main.container-order-form .orderform-template.active { @include mq(xll, max) { width: 100%; .accordion-group{ - width: 138%; + width: 137%; } } right: 0; @@ -266,6 +282,9 @@ body .container-main.container-order-form .orderform-template.active { .form-step{ display: flex; height: 452px; + @include mq(xll, max) { + height: 744px; + } } span, a{ @@ -289,7 +308,26 @@ body .container-main.container-order-form .orderform-template.active { .payment-group-item-text{ background-image: none; } + .payment-group{ + @include mq(xll, max) { + .payment-group-list-btn{ + width: 100%; + a{ + width: 100%; + span{ + width: 100%; + } + } + } + width: 100%; + } + } .steps-view{ + @include mq(xll, max) { + right: -8px; + top: 40%; + width: 97%; + } position: absolute; right: 0; top: 33px; @@ -312,9 +350,20 @@ body .container-main.container-order-form .orderform-template.active { height: 164px !important; } } + @include mq(IVK, min) { + // width: 152%; + // .link-cart{ + // margin: 14px 0 100px 0; + // } + height: 628px !important; + .filled{ + width: 90.541% !important; + height: 234px !important; + } + } .filled{ width: 332px; - height: 164px !important; + height: 164px; } } #shipping-data{ diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f2e73f6..65ebaf7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -27,6 +27,9 @@ body { @include mq(md, max) { padding-left: 0; } + @include mq(IVK, min) { + justify-content: space-around; + } &.body-cart { font-family: $font-family; @@ -50,6 +53,9 @@ body { .container-order-form, .container-cart { width: 86%; + @include mq(IVK, min) { + height: 1060px; + } @include mq(xll, max) { width: 90.5%; }