diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 925bf10..03e9e33 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -339,20 +339,33 @@ margin-bottom: 8px; padding: 0; - i::before { - fill: #303030; - } + // i::before { + // fill: #303030; + // } } a { align-items: center; - background-color: #303030; + background-color: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; padding: 6px 5px 6px 8px; + + &::before { + content: ""; + width: 20.21px; + height: 20.89px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") no-repeat + center center; + display: block; + + background-size: 100%; + border: none; + cursor: pointer; + } } } @@ -791,8 +804,6 @@ button#shipping-option-pickup-in-point { color: #c4c4c4; } - - p.input.ship-postalCode.required.text { display: flex; flex-direction: column; @@ -892,9 +903,9 @@ label#FASTEST { background: $color-gray11 !important; } -p.input.ship-neighborhood.required.text { - display: none; -} +// p.input.ship-neighborhood.required.text { +// display: none; +// } .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary { border: 1px solid $color-gray10; @@ -960,7 +971,7 @@ a#force-shipping-fields { .checkout-container .shipping-data .accordion-group .accordion-heading a { background-color: transparent; - visibility: hidden; + // visibility: hidden; } a#show-gift-card-group, @@ -1051,7 +1062,7 @@ p.PaymentCardHolderDocument.input.text.required.mask { line-height: 24px; text-align: center; letter-spacing: -0.01em; - + color: transparent; & span { opacity: unset; color: #58595b; @@ -1067,7 +1078,10 @@ a#edit-profile-data { } input#client-email { - width: 95%; + width: 96%; + @media (max-width: $checkout1024px) { + width: 99%; + } } .client-pre-email .emailInfo .icon-lock { @@ -1076,15 +1090,9 @@ input#client-email { } } -div#shipping-data { - @media (max-width: $checkout1024px) { - width: 100%; - } -} - .step.accordion-group.client-profile-data.active { @media (max-width: $checkout1024px) { - width: 100%; + width: 96.36%; } } @@ -1102,7 +1110,7 @@ body .container-main.container-order-form .orderform-template.active .mini-cart body .container-main.container-order-form .orderform-template.active .orderform-template-holder { @media (max-width: $checkout1024px) { - width: 95%; + width: 100%; } } @@ -1114,12 +1122,63 @@ p.input.ship-country.text { width: 100%; } +// área do carrinho .row-fluid { @media (max-width: $checkout1024px) { display: flex; flex-direction: column; justify-content: center; } + div#shipping-data { + @media (max-width: $checkout1024px) { + width: 100%; + margin-left: 0; + } + .step.accordion-group.shipping-data { + @media (max-width: $checkout1024px) { + margin-bottom: 17px; + } + & .accordion-heading { + // & span.accordion-toggle.collapsed { + + // a#edit-shipping-data:before{ + // content: ""; + // background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + // background-repeat: no-repeat; + // background-size: 16px; + // background-position: 100% 50%; + // cursor: pointer; + // font-family: "Tenor Sans"; + // font-style: normal; + // font-weight: 400; + // font-size: 16px; + // line-height: 19px; + // color: $color-black; + // } + // } + + & a { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } + } + } + } + div#payment-data { + @media (max-width: $checkout1024px) { + width: 100%; + margin-left: 0; + } + .step.accordion-group.store-country-BRA.filled { + @media (max-width: $checkout1024px) { + margin-bottom: 17px; + } + } + } } // ícones ou imagens @@ -1139,46 +1198,6 @@ i.icon-credit-card { display: none; } -.step.accordion-group.shipping-data { - & .accordion-heading { - & span.accordion-toggle.collapsed { - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - cursor: pointer; - font-family: "Tenor Sans"; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 19px; - color: $color-black; - } - } -} - -.payment-data { - & .accordion-group { - & .accordion-heading { - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - cursor: pointer; - } - } -} - i.icon-edit { - position: relative; - color: transparent; - &::before { - position: relative; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - width: 16px; - height: 16px; - } + display: none; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 133490b..b2cf11e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -524,6 +524,7 @@ } .summary { + // display: block; .cart-more-options { margin: 0; width: max-content; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 39b5f8b..cef6aa8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -70,8 +70,52 @@ body { body .container-order-form { width: 81%; + // @media (max-width: $checkout1024px) { + // width: 96.87%; + // display: flex; + // flex-direction: column; + // justify-content: center; + // } @media (max-width: $checkout1024px) { width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } +} + +#cart-title, +#orderform-title { + color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + letter-spacing: 0.05em; + text-transform: uppercase; + @media (min-width: $checkout2500px) { + font-weight: 700; + font-size: 48px; + line-height: 65px; + } + + @include mq(md, max) { + margin-left: 30px; + @media (max-width: $checkout1024px) { + margin-left: 16px; + } + } +} + +#cart-title { + @media (max-width: $checkout1024px) { + margin: 17px 16px; + } +} +h1#orderform-title { + @media (max-width: $checkout1024px) { + margin: 17px 16px; } } @@ -88,34 +132,6 @@ body .container-order-form { color: $color-black !important; } -#cart-title, -#orderform-title { - color: $color-black; - font-family: $font-family; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - letter-spacing: 0.05em; - margin: 17px 0 16px; - text-transform: uppercase; - @media (min-width: $checkout2500px) { - font-weight: 700; - font-size: 48px; - line-height: 65px; - } - @media (max-width: $checkout1024px) { - margin: 17px 16px 16px; - } - - @include mq(md, max) { - margin-left: 30px; - @media (max-width: $checkout1024px) { - margin-left: 16px; - } - } -} - .dropdown { &__content { &--closed { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..d0c6de9 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -101,14 +101,16 @@ position: absolute; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center + center; z-index: 4; left: 10px; + transform: translateY(-100%); } .slick-next { z-index: 4; right: 10px; + transform: translateY(-100%); } .slick-arrow.slick-hidden { display: none;