diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index da3bb99..0837ca5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -289,10 +289,195 @@ } .container-order-form { + .checkout-container { + overflow: initial; + } + #orderform-title { padding: 0 16px; } + #shipping-data, + #payment-data, + .cart-template.mini-cart { + padding: 0 16px; + } + + #shipping-data { + margin: 0; + } + + #client-profile-data .client-profile-data.active { + margin: 0 16px 16px; + } + + #shipping-data, + #payment-data, + #client-profile-data .client-profile-data.active { + float: none; + } + + #find-pickups-manualy-button-denied { + @include btn-primary-blue-white(); + } + + #postalCode-finished-loading { + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $clr-common-white; + border: 1px solid $clr-common-black; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: $clr-common-black; + text-shadow: none; + } + + .vtex-omnishipping-1-x-isLoading { + background: $clr-primary-blue-500; + } + } + + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $clr-primary-blue-500; + border: 1px solid $clr-primary-blue-500; + } + + .checkout-container .shipping-data .accordion-group, + .checkout-container .payment-data .accordion-group, + .checkout-container .client-profile-data .accordion-group, + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryGroup + .shp-lean, + .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary, + .cart-template.mini-cart .cart-fixed { + border: 1px solid $clr-gray-100; + border-radius: 8px; + } + + .checkout-container .form-page.client-pre-email { + padding: 5px; + box-sizing: content-box; + } + + .checkout-container .client-profile-data .accordion-group { + padding: 16px 16px 44px; + } + + .client-profile-data .accordion-group .accordion-heading span i.icon-user { + display: none; + } + + .client-profile-data .accordion-group .accordion-heading span span[data-i18n] { + font-size: 0px; + + &::before { + content: "IdentificaĆ§Ć£o"; + font-size: 16px; + line-height: 18.72px; + font-family: $font-family-200; + } + } + + .checkout-container .shipping-data .accordion-group .accordion-inner p label, + .checkout-container .payment-data .accordion-group .accordion-inner p label, + .checkout-container .client-profile-data .accordion-group .accordion-inner p label { + color: #7d7d7d; + font-size: 12px; + line-height: 19.07px; + } + + .checkout-container .shipping-data .accordion-group .accordion-inner p select, + .checkout-container .shipping-data .accordion-group .accordion-inner p input, + .checkout-container .payment-data .accordion-group .accordion-inner p select, + .checkout-container .payment-data .accordion-group .accordion-inner p input, + .checkout-container .client-profile-data .accordion-group .accordion-inner p select, + .checkout-container .client-profile-data .accordion-group .accordion-inner p input { + border: 1px solid #f0f0f0; + padding: 0 11px; + border-radius: 5px; + height: 42px; + width: 100%; + max-width: none; + background-position: right 50%; + } + + .checkout-container .payment-data .accordion-group .accordion-heading a, + .checkout-container .shipping-data .accordion-group .accordion-heading a, + .checkout-container .client-profile-data .accordion-group .accordion-heading a { + background-color: $clr-common-white; + font-size: 24px; + color: $clr-primary-blue-500; + } + + .box-client-info-pf { + width: 100%; + + display: grid; + grid-template-columns: 50% 50%; + } + + p.client-phone, + p.client-document, + p.client-first-name, + p.client-last-name { + float: none !important; + width: 100%; + margin: 0; + } + + p.client-first-name, + p.client-document { + padding-right: 8px; + } + + p.client-phone, + p.client-last-name { + padding-left: 8px; + } + + p.client-email { + grid-column: 1/3; + margin-bottom: 16px; + } + + p.client-first-name, + p.client-last-name { + margin-bottom: 16px; + } + + p.client-document, + p.client-phone { + margin-bottom: 16px; + } + + p.newsletter { + margin: 0 0 45px; + } + + .checkbox.newsletter-label { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + + #opt-in-newsletter { + width: 16px; + height: 16px; + } + } + + .links.unstyled, + .client-notice.notice { + display: none; + } + .checkout-container .client-pre-email { padding: 8px 16px 0; } @@ -306,7 +491,160 @@ line-height: 16.34px; } - .orderform-template { + .cart-template.mini-cart { + padding: 0 16px; + width: 100% !important; + margin: 0; + + h2 { + padding: 0 16px; + } + + #go-to-cart-button { + padding: 0 16px; + + a { + font-size: 12px; + line-height: 16.34px; + text-decoration: none; + color: $clr-common-black; + } + } + + .cart { + border: none; + margin: 0; + } + + .cart-fixed { + padding-top: 16px; + height: auto !important; + } + + .cart-totalizers.totalizers { + padding: 0; + margin-bottom: 0; + + tr { + border-top: 1px solid $clr-gray-200; + border-bottom: 1px solid $clr-gray-200; + } + + tbody { + td.info, + td.monetary { + color: $clr-gray-400; + } + + td.info { + padding: 25px 0 25px 16px; + } + td.monetary { + padding: 25px 16px 25px 0; + } + } + + tfoot { + tr { + border: none; + } + + td.info, + td.monetary { + color: $clr-gray-600; + } + + td.info { + padding: 30px 0 22px 16px; + font-size: 18px; + line-height: 19.07px; + } + td.monetary { + padding: 30px 16px 22px 0; + font-size: 14px; + line-height: 24.51px; + } + } + } + } + + .ship-country { + display: none; + } + + .orderform-template.active { + display: grid; + grid-template-columns: 1fr; + + .orderform-template-holder { + width: 100%; + } + + @media screen and (min-width: 1025px) { + grid-template-columns: fluid(677px, 1018px) fluid(331px, 1018px); + gap: 0 16px; + + .orderform-template-holder { + grid-column: 1/2; + } + } + + div.row-fluid { + width: 100%; + display: grid; + grid-template-columns: 1fr; + + #shipping-data { + .shipping-data { + width: 100%; + } + } + + #client-profile-data, + #shipping-data, + #payment-data { + width: 100%; + } + + .client-profile-data.filled { + margin: 0 16px 16px; + } + + &::before, + &::after { + content: none; + } + + @media screen and (min-width: 1025px) { + grid-template-columns: fluid(331px, 677px) fluid(330px, 677px); + grid-template-rows: auto auto auto; + gap: 0 16px; + + #shipping-data, + #payment-data { + margin: 0; + padding: 0; + } + + #client-profile-data { + grid-column: 1/2; + grid-row: 1/4; + } + + #payment-data { + grid-column: 2/3; + } + + .client-profile-data.filled { + margin: 0; + } + } + } + + .form-step.box-edit .row-fluid { + display: initial; + } + .client-pre-email { .link-cart a { font-size: 10px; @@ -323,6 +661,18 @@ .client-pre-email .client-email button { @include btn-primary-blue-black(); } + + .checkout-container .shipping-data .accordion-group .accordion-inner button.submit, + .checkout-container .payment-data .accordion-group .accordion-inner button.submit, + .checkout-container .client-profile-data .accordion-group .accordion-inner button.submit, + #btn-go-to-payment { + @include btn-primary-blue-white(); + } + + #btn-go-to-payment { + width: 100%; + } + .client-pre-email-h { label { span, @@ -338,9 +688,73 @@ } } + .checkout-container .accordion-group .accordion-heading span > i, .client-pre-email .emailInfo .icon-lock { display: none; } + + .submit.btn-submit-wrapper { + button#go-to-shipping, + button#go-to-payment { + @include btn-primary-blue-white(); + + width: 100%; + } + } + + .vtex-omnishipping-1-x-address { + display: grid; + grid-template-columns: 1fr; + + .input { + float: none; + margin: 0; + } + } + + .checkout-container + .shipping-data + .accordion-group + .accordion-inner + .vtex-omnishipping-1-x-deliveryGroup + .shp-lean + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: #f2f2f2; + } + + .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + svg { + display: none !important; + } + + &::before { + content: ""; + width: 16px; + height: 16px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png") + center; + background-size: cover; + } + } + } + + .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + svg { + display: none !important; + } + + &::before { + content: ""; + width: 16px; + height: 16px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png") + center; + background-size: cover; + } + } + } } .container-order-form { @@ -352,14 +766,64 @@ .container-order-form { width: 100%; + #shipping-data, + #payment-data { + float: none; + } + + @media screen and (max-width: 490px) { + .orderform-template-holder .client-profile-data input[type="text"] { + width: 100%; + } + + .orderform-template-holder .client-profile-data { + p.client-phone, + p.client-document, + p.client-first-name, + p.client-last-name { + float: none !important; + width: 100%; + margin: 0; + + input { + width: 100% !important; + } + } + } + } + + @media screen and (min-width: 375px) { + .checkout-container .shipping-data .accordion-group .accordion-inner p label, + .checkout-container .payment-data .accordion-group .accordion-inner p label, + .checkout-container .client-profile-data .accordion-group .accordion-inner p label { + font-size: 14px; + } + } + @media screen and (min-width: 600px) { .checkout-container .client-pre-email .emailInfo { width: fluid(343px, 992px); } } + @media screen and (min-width: 1025px) { + #shipping-data, + #payment-data { + float: none; + } + + #client-profile-data .client-profile-data.active { + margin: 0; + } + + .cart-template.mini-cart { + padding: 0; + } + } + @media screen and (min-width: 1280px) { width: fluid(1018px, 1280px); + min-height: calc(100vh - 175px); .checkout-container .client-pre-email { padding: 8px 0 0; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 1b9807d..45edb57 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -2,12 +2,14 @@ border: none; color: $clr-common-black; background: $clr-primary-blue-500; + text-transform: uppercase; } @mixin btn-primary-blue-white() { border: none; color: $clr-common-white; background: $clr-primary-blue-500; + text-transform: uppercase; } .cart-template { @@ -999,10 +1001,6 @@ } .cart-more-options { - .srp-container { - padding: 0 16px; - } - .srp-data { width: 343px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..dd0ea41 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,11 +1,3 @@ body .container-main.container-order-form .orderform-template.active { - .mini-cart { - width: 32.3242%; - margin-left: unset; - margin-right: 0; - float: right; - } - .orderform-template-holder { - width: 66.1132%; - } + --none-rules: #000; }