diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 016af08..2ed2122 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -124,32 +124,22 @@ } .product-image { - height: auto; + height: 60px; + object-fit: cover; padding: 0; + max-width: 100%; width: 60px; - @include mq(sm, max) { - width: 72px; - } - img { height: 60px; max-width: 100%; width: auto; - - @include mq(sm, max) { - height: 72px; - width: auto; - } } } .product-name { padding-right: 0; - - @include mq(lg, max) { - width: 250px; - } + width: 250px; a { color: #4267b2; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 72afa18..e4f804b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,15 +1,31 @@ .checkout-container { .orderform-template { - .orderform-template-holder { - width: 66%; + @include mq(mobile, max) { + flex-direction: column; + } + .orderform-template-holder { .row-fluid { position: relative; + @include mq(mobile, max) { + display: flex; + flex-direction: column; + } + .client-profile-data { + @include mq(mobile, max) { + width: 100%; + margin-bottom: 10px; + } + .client-profile-data.filled { max-width: 331px; + @include mq(mobile, max) { + max-width: -webkit-fill-available; + } + .accordion-heading { .accordion-toggle { margin-bottom: 25px; @@ -81,6 +97,11 @@ .payment-data { position: static; + @include mq(mobile, max) { + width: 100%; + margin: 0; + } + .accordion-group { &.active { padding: 24px 17px 36px; @@ -132,6 +153,10 @@ margin: 0; position: static; + @include mq(mobile, max) { + width: 100%; + } + .payment-group-list-btn { width: 100%; @@ -232,6 +257,12 @@ .steps-view { flex: 1; margin-left: 40px; + + @include mq(mobile, max) { + margin: 0; + width: 100%; + max-width: -webkit-fill-available; + } } } } @@ -247,6 +278,10 @@ } .shipping-data { + @include mq(mobile, max) { + width: 100%; + } + .shipping-data.active { .accordion-heading { span { @@ -350,27 +385,17 @@ padding: 14px 12px 12px; .vtex-omnishipping-1-x-leanShippingIcon { + display: flex; + align-items: center; + justify-content: center; margin-right: 8px; width: 18px; height: 18px; border: 1px solid #c4c4c4; border-radius: 3px; - svg { - opacity: 0; - } - - &.active { - display: flex; - align-items: center; - justify-content: center; - - &::before { - background: #00c8ff; - border-radius: 3px; - width: 12px; - height: 12px; - } + .vtex-omnishipping-1-x-svg { + display: none; } } @@ -393,6 +418,16 @@ color: #7d7d7d; } } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingIcon::before { + content: ""; + width: 12px; + height: 12px; + background-color: #00c8ff; + border-radius: 3px; + } + } } } @@ -407,16 +442,35 @@ } .vtex-omnishipping-1-x-addressSummary { + position: relative; + .address-summary { + padding-left: 47px; border: 1px solid #e0e0e0; border-radius: 8px; font-weight: 400; font-size: 12px; line-height: 16px; color: #7d7d7d; + position: relative; margin-bottom: 15px; + &::before { + content: ""; + width: 21px; + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + height: 20px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-repeat: no-repeat; + background-size: contain; + } + .vtex-omnishipping-1-x-linkEdit { + position: absolute; + right: 15px; font-weight: 400; font-size: 12px; line-height: 16px; diff --git a/checkout/src/arquivos/sass/partials/_autenticacao.scss b/checkout/src/arquivos/sass/partials/_autenticacao.scss index af69fe1..396b7e1 100644 --- a/checkout/src/arquivos/sass/partials/_autenticacao.scss +++ b/checkout/src/arquivos/sass/partials/_autenticacao.scss @@ -32,6 +32,8 @@ .orderform-template-holder { margin-bottom: 14px; + width: 100%; + max-width: -webkit-fill-available; } #orderform-title { @@ -45,6 +47,11 @@ font-size: 24px; line-height: 33px; + @include mq(mobile, max) { + margin: 0; + padding-left: 16px; + } + &.border { border-bottom: 1px solid $black-500; } @@ -56,11 +63,19 @@ padding: 0 121px; margin-bottom: 125px; + @include mq(mobile, max) { + padding: 0 16px; + } + .form-page.client-pre-email.anim-death.anim-current { position: absolute; width: 100%; left: 0; padding-bottom: 100px; + + @include mq(mobile, max) { + padding-bottom: 345px; + } } &.dados-pessoais { @@ -81,6 +96,11 @@ line-height: 16px; text-transform: uppercase; color: $black-500; + + @include mq(mobile, max) { + font-size: 10px; + line-height: 12px; + } } } @@ -99,6 +119,16 @@ font-size: 20px; line-height: 23px; text-transform: uppercase; + + @include mq(tablet, max) { + font-size: 12px; + line-height: 14px; + } + + @include mq(mobile, max) { + font-size: 14px; + line-height: 16px; + } } small { @@ -107,6 +137,16 @@ line-height: 23px; text-transform: uppercase; color: $black-500; + + @include mq(tablet, max) { + font-size: 12px; + line-height: 14px; + } + + @include mq(mobile, max) { + font-size: 14px; + line-height: 16px; + } } } } @@ -116,6 +156,10 @@ margin-bottom: 24px; margin-left: 0; + @include mq(mobile, max) { + width: 100%; + } + .input-block-level { font-weight: 400; font-size: 12px; @@ -163,6 +207,7 @@ border: 1px solid $black-500; border-radius: 5px; padding: 16px 16px 26px; + max-width: -webkit-fill-available; h3 { font-weight: 700; @@ -189,6 +234,7 @@ .step.accordion-group.client-profile-data.active { border: 1px solid $gray-300; + max-width: -webkit-fill-available; padding: 24px 17px 44px; border-radius: 8px; margin-bottom: 0; @@ -217,9 +263,19 @@ .accordion-body { p { + @include mq(mobile, max) { + width: 100%; + max-width: -webkit-fill-available; + } + &.client-email { width: 100%; margin-bottom: 16px; + + @include mq(mobile, max) { + position: absolute; + bottom: 100%; + } } &.client-document { @@ -234,6 +290,12 @@ } } + &.client-last-name { + @include mq(mobile, max) { + margin-right: 15px; + } + } + &.client-first-name, &.client-last-name { display: flex; @@ -277,12 +339,26 @@ flex-wrap: wrap; gap: 15px; + @include mq(mobile, max) { + margin: 64px 0 0px; + display: grid; + grid-template-columns: repeat(2, 50%); + width: 100%; + position: relative; + } + .client-notice { display: none; } div { width: 46%; + + @include mq(mobile, max) { + width: 100%; + max-width: -webkit-fill-available; + margin-right: 15px; + } } } @@ -447,6 +523,11 @@ border-radius: 8px; height: 427px; + @include mq(mobile, max) { + margin: 0; + width: 100%; + } + @include mq(1100, min) { min-width: 331px; } @@ -456,6 +537,10 @@ height: auto !important; padding: 24px 0px 22px; + .summary-cart-template-holder { + height: auto !important; + } + h2 { font-weight: 400; display: block; diff --git a/checkout/src/arquivos/sass/partials/_menu.scss b/checkout/src/arquivos/sass/partials/_menu.scss index 711b8a4..8aa0c8e 100644 --- a/checkout/src/arquivos/sass/partials/_menu.scss +++ b/checkout/src/arquivos/sass/partials/_menu.scss @@ -33,6 +33,11 @@ text-transform: uppercase; letter-spacing: 0.05em; color: $black-400; + + @include mq(mobile, max) { + margin: 17px 0; + padding-left: 16px; + } } .hide-cart-title { @@ -123,12 +128,20 @@ } .cart-template-holder { + @include mq(mobile, max) { + margin: 0; + } + .cart { margin: 0; border: 1px solid $gray-100; border-radius: 5px; padding: 16px 29px 16px 16px; + @include mq(mobile, max) { + padding: 16px 16px 15px; + } + .cart-items { thead { font-weight: 400; @@ -137,6 +150,10 @@ font-family: $font-family-secundary; color: $black-400; + @include mq(mobile, max) { + display: none; + } + th { padding-bottom: 17px; text-align: left; @@ -172,6 +189,45 @@ text-align: left; } + .product-item { + @include mq(mobile, max) { + margin: 0; + position: relative; + display: block; + } + } + + .product-image { + @include mq(mobile, max) { + left: 0; + position: absolute; + } + } + + .product-price { + @include mq(mobile, max) { + margin: 0; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; + float: right; + position: static; + } + + br { + @include mq(mobile, max) { + display: none; + } + } + } + + .shipping-date { + @include mq(mobile, max) { + display: none; + } + } + .product-name a, .shipping-estimate-date, .list-price { @@ -185,6 +241,23 @@ color: $gray-500; } + .product-name { + @include mq(mobile, max) { + position: static; + width: 250px; + padding: 0 0 11px !important; + margin-left: 76px; + display: block; + } + + a { + @include mq(mobile, max) { + margin: 0; + display: block; + } + } + } + .product-name a, input { color: $black-500; @@ -206,6 +279,21 @@ display: flex; } + .quantity-price { + @include mq(mobile, max) { + display: none; + } + } + + .item-remove .item-link-remove .item-remove-ico { + @include mq(mobile, max) { + position: absolute; + top: 0; + right: 0; + transform: translateY(calc(100% - 5px)); + } + } + .quantity { padding: 0 11px; margin: 0; @@ -213,6 +301,14 @@ border: 1px solid $gray-300; border-radius: 8px; + @include mq(mobile, max) { + margin-left: 76px !important; + max-width: 99px; + justify-content: space-between; + transform: none; + width: 35% !important; + } + .item-quantity-change { background-color: $blue-500; width: 16px; @@ -276,6 +372,10 @@ display: flex; justify-content: space-between; + @include mq(mobile, max) { + flex-direction: column; + } + &::before, &::after { display: none; @@ -284,6 +384,10 @@ .cart-more-options { margin: 0 0 0 128px; + @include mq(mobile, max) { + margin: 0 0 48px; + } + .srp-content { display: flex; flex-direction: column; @@ -438,6 +542,11 @@ .cart-totalizers { margin: 0 128px 0 0; + @include mq(mobile, max) { + width: 100%; + padding: 0 16px 0 17px; + } + .coupon-fieldset { .coupon-label { font-weight: 400; @@ -523,7 +632,7 @@ .totalizers-list { td { - padding: 0 0 10px 0; + padding: 10px 0 10px 0; font-weight: 400; font-size: 14px; line-height: 16px; @@ -557,6 +666,14 @@ padding: 0; align-self: flex-end; + @include mq(mobile, max) { + display: flex; + width: 100%; + margin: 0; + max-width: -webkit-fill-available; + padding: 0 15px 0 16px; + } + .link-choose-more-products-wrapper { margin: 17px 0 15px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 70d775d..d8e675e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -33,6 +33,7 @@ $grid-breakpoints: ( cstm: 400, sm: 375px, md: 478px, + tablet: 768px, lg: 992px, mobile: 1025px, xl: 1200px,