diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index a1c8daa..3f5a34b 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -23,22 +23,26 @@ export default class Header { } setProgressBarHTML() { - this.container_progressBar.innerHTML = ` -
- Meu Carrinho - - -
-
- Dados Pessoais - - -
-
- Pagamento - -
- ` + if(window.innerWidth > 1024) { + this.container_progressBar.innerHTML = ` +
+ Meu Carrinho + + +
+
+ Dados Pessoais + + +
+
+ Pagamento + +
+ ` + } else { + this.container_progressBar.innerHTML = "" + } } setStateCart() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 831c8ce..8f39df2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,301 +1,390 @@ .checkout-container { - .client-pre-email { - border-top: 1px solid $color-black; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-top: 1px solid $color-black; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + color: $color-black; + font-size: 14px; font-family: $font-family-secundary; text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 16px; - span { - font-family: $font-family-secundary; + span { + font-family: $font-family-secundary; text-transform: uppercase; color: $color-black; font-weight: 400; font-size: 1.25rem; - } + } - small { - font-family: $font-family-secundary; + small { + font-family: $font-family-secundary; text-transform: uppercase; color: $color-black; font-weight: 400; font-size: 1.25rem; - } - } - } + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 16px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 1px solid $color-black; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + color: $color-black; + font-family: $font-family; + padding: 0 16px; + border: 1px solid $color-black; + box-sizing: border-box; + border-radius: 5px; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 490px) { + width: auto; + } + } - button { - background-color: $color-blue2; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + button { + background-color: $color-blue2; + border-radius: 5px; + border: none; + font-family: $font-family; + height: 54px; + right: 0; + top: 0; color: $color-black; text-transform: uppercase; font-weight: 700; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { - color: red; - } - } + span.help.error { + color: red; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-black; - border-radius: 0; + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black; + border-radius: 0; - h3 { - color: #303030; - margin: 0 0 8px 0; - } + h3 { + color: #303030; + margin: 0 0 8px 0; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { - color: $color-black; - } + li { + span { + color: $color-black; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + i::before { + color: $color-black; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - //border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0.5rem; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 16px; - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - i::before { - fill: #303030; - } - } + i::before { + fill: #303030; + } + } - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + a { + align-items: center; + background-color: $color-white; + border-radius: 8px; + border: none; + color: $color-blue2; + display: flex !important; + justify-content: center; + padding: 6px 5px 6px 8px; + font-size: 1.197rem; + } + } - .accordion-inner { - padding: 0; + .accordion-inner { + padding: 0; - /* General configurations */ + /* General configurations */ - .client-notice { - color: $color-black; - } + .client-notice { + color: $color-black; + } - p { - label { - color: $color-black; - font-weight: 500; - } + p { + label { + color: $color-gray2; + font-weight: 400; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + select, + input { + border-radius: 5px; + height: 42px; + border: 1px solid $color-gray5; + box-shadow: none; + } - .help.error { - color: red; - } - } + .help.error { + color: red; + } + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - .state-inscription-box span { - font-weight: 500; - } + .state-inscription-box span { + font-weight: 500; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + button.submit { + border: none; + border-radius: 0.5rem; + background: $color-blue2; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; + text-transform: uppercase; + padding: 0.75rem 0; + color: $color-white; + font-weight: 700; + font-family: $font-family; + width: 100%; - &:hover { - background: lighten($color-black, 5); - } + &:hover { + opacity: 0.8; + } - &:active { - background: darken($color-black, 5); - } - } + &:active { + background: darken($color-black, 5); + } + } - /* Shipping configurations */ + /* Shipping configurations */ - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-lean { - //border: 1px solid $color-gray4; - border-radius: 0; + .shp-lean { + //border: 1px solid $color-gray4; + border-radius: 0; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - svg path { - fill: #d8c8ac; - } - } - } - } + svg path { + fill: #d8c8ac; + } + } + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-group-info { - border-color: $color-gray4; - } + .shp-summary-group-info { + width: 100%; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - @include mq(md, max) { - background-position: 8px 9px; - } + @include mq(md, max) { + background-position: 8px 9px; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } - .shp-summary-group-price { - padding-right: 16px; - } + .shp-summary-group-price { + padding-right: 16px; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-package { + padding-left: 16px; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - //border: 1px solid #d8c8ac; - } + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + //border: 1px solid #d8c8ac; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } + +.vtex-omnishipping-1-x-SummaryItemContent { + display: flex; + flex-direction: column; + + span { + font-family: $font-family; + font-weight: 400; + color: $color-gray2; + } +} + +.vtex-omnishipping-1-x-SummaryItemInfo { + border: none !important; +} + +.link-change-shipping.vtex-omnishipping-1-x-summaryChange { + display: none; +} + +/* .step.active, +.cart.active, +.totalizers.active { + //border: 1px solid $color-gray3; +} */ + +.summary-cart-template-holder { + border: none; +} + +.accordion-group.shipping-data .accordion-toggle, +#payments-title .accordion-toggle { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 1rem; + color: $color-black; + .icon-home, + .icon-credit-card { + display: none; + } +} + +.client-profile-data .accordion-heading .accordion-toggle { + .icon-user, + .icon-home span { + display: none; + } +} + +.client-profile-data .accordion-heading .accordion-toggle a { + display: flex !important; +} + +.client-notice.notice, +span[data-i18n="clientProfileData.identification"] { + font-size: 0; + color: $color-black; +} + +span[data-i18n="clientProfileData.identification"]::after { + content: "Identificação"; + font-size: 1rem; + font-family: $font-family-secundary; + font-weight: 400; + color: $color-black; +} + +.checkbox.newsletter-label { + display: flex; + justify-content: space-around; + align-items: center; + + label { + font-family: $font-family; + font-weight: 400; + font-size: 0.75rem; + color: $color-gray4; + } +} + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index ec5be1b..23be8f9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,7 +13,7 @@ display: none; } .cart { - border: 1px solid $color-gray3; + //border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -48,7 +48,7 @@ } .cart { - border: 1px solid $color-gray4; + //border: 1px solid $color-gray4; ul li { border-top: none; @@ -58,7 +58,7 @@ &:not(:first-child) { margin-top: 8px; padding-top: 8px; - border-top: 1px solid #e5e5e5; + //border-top: 1px solid #e5e5e5; } .shipping-date, @@ -677,8 +677,6 @@ } } - - .coupon-fields { margin-bottom: 32px; @@ -693,7 +691,6 @@ } } - /* @include mq(sm, max) { span { display: flex; @@ -770,7 +767,7 @@ font-size: 14px; line-height: 16px; color: $color-black; - padding: 12px 0; + padding: 20px 0; } &.info { @@ -865,3 +862,260 @@ } } } + +.checkout-container { + overflow: initial !important; +} + +.cart-fixed.affix-top.cart-fixed-transition { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + height: auto !important; + border: 1px solid $color-gray5; + border-radius: 0.5rem; +} + +#go-to-cart-button { + font-family: $font-family; + font-weight: 400; + color: $color-black; + display: flex; + justify-content: flex-end; + align-items: center; + border-bottom: 1px solid $color-gray5; + padding: 0.625rem 1rem; +} + +.cart-template.mini-cart.span4 .accordion-inner tr { + border-bottom: 1px solid $color-gray5; +} + +.cart-template.mini-cart.span4 .accordion-inner tr td::before { + content: "oi"; + color: $color-white; +} + +.cart-template.mini-cart.span4 .accordion-inner tr td::after { + content: "oi"; + color: $color-white; +} + +li.hproduct.item.muted { + display: flex; + justify-content: center; + align-items: center; + + a { + flex: 1; + } + + span.fn.product-name { + display: flex; + flex: 2; + width: 100%; + white-space: initial; + color: black; + } + + span.quantity.badge { + display: none; + } + + .description { + flex: 2; + } +} + +/* .step.accordion-group.shipping-data .accordion-heading span::after { + content: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); + font-size: 1.197rem; + display: flex; +} */ + +.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-delivery { + background: white !important; + border: 1px solid $color-black; +} + +.vtex-omnishipping-1-x-deliveryOptionActive { + color: $color-black !important; + text-transform: uppercase; + font-family: $font-family; + font-weight: 400; +} + +.vtex-omnishipping-1-x-deliveryChannelsToggle { + border: 1px solid $color-black !important; +} + +#is-corporate-client { + display: none !important; +} + +.payment-edit-link { + display: block !important; +} + +h2[data-i18n="totalizers.summary"] { + display: flex; + justify-content: flex-start; + align-items: center; + padding-top: 1.5rem; +} + +p.input.ship-postalCode.required.text { + display: flex; + flex-direction: column; + width: 100%; +} + +p.input.ship-postalCode.required.text small { + text-decoration: none; + margin: initial; + margin-top: 10px; +} + +p.input.ship-postalCode.required.text input { + max-width: initial; + width: 100%; + margin: 0; + padding: 0; + border: 1px solid $color-gray6; + border-radius: 0.5rem; + height: 45px; +} + +p.input.ship-postalCode.required.text input::placeholder { + padding: 10px; +} + +.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-pickup.vtex-omnishipping-1-x-deliveryChannelsTogglePickup { + background: white !important; +} + +.vtex-omnishipping-1-x-deliveryOptionInactive { + color: $color-gray6 !important; +} + +p.input.ship-country.text { + display: none !important; +} + +p.vtex-omnishipping-1-x-shippingSectionTitle, +p.vtex-omnishipping-1-x-shippingSectionTitle.delivery-address-title { + font-family: $font-family; + font-weight: 700 !important; + color: $color-gray2 !important; + margin-bottom: 0.688rem; +} + +.vtex-omnishipping-1-x-addressSummary.vtex-omnishipping-1-x-addressSummaryActive { + border: 1px solid $color-gray6; + border-radius: 0.5rem; + margin-bottom: 10px; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + + &::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png) + } +} + +.address-summary.address-summary-BRA { + border: none !important; +} + +.vtex-omnishipping-1-x-address div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +.vtex-omnishipping-1-x-address div label { + font-family: $font-family; + font-weight: 700 !important; +} + +.vtex-omnishipping-1-x-address div input { + all: unset; + width: 100%; +} + +p.input.ship-number.required.text { + margin-right: 0 !important; +} + +button#payment-data-submit { + background-color: $color-green2 !important; + color: $color-white !important; + font-weight: 700; + font-family: $font-family; + text-transform: uppercase; + border-radius: 0.5rem !important; +} + +a#payment-group-custom204PaymentGroupPaymentGroup, +a#payment-group-custom205PaymentGroupPaymentGroup, +a#payment-group-creditControlPaymentGroup, +a#payment-group-creditDirectSalePaymentGroup, +a#payment-group-promissoryPaymentGroup, +a#payment-group-custom203PaymentGroupPaymentGroup, +a#payment-group-PSEPaymentGroup, +a#payment-group-Bancolombia\ TransferPaymentGroup, +a#payment-group-customPrivate_502PaymentGroup, +a#payment-group-custom201PaymentGroupPaymentGroup, +a#payment-group-MercadoPagoPaymentGroup, +a#payment-group-SPEIPaymentGroup, a#show-gift-card-group { + display: none !important; +} + +div#payments-title { + margin-bottom: 1rem; +} + +div#payments-title::after { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + font-weight: 400; + font-family: $font-family; + color: $color-gray2; +} + +.payment-group { + margin-top: 0 !important; +} + +.payment-group-item { + background-color: $color-gray3 !important; + border-color: $color-black; + border-radius: 0.375rem; + margin: 0 !important; + margin-bottom: 0.75rem !important; + border: 1px solid $color-black !important; + + span { + display: flex; + justify-content: center; + align-items: center; + padding: 0.813rem 0; + color: $color-gray7; + background-image: unset !important; + } +} + +.payment-group-item.active { + border-color: $color-orange !important; + + span { + color: $color-orange; + } +} + +.steps-view iframe { + height: 500px !important; +} + diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index b24cef4..3b4618e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,12 +15,18 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #c4c4c4; +$color-gray7: #58595B; $color-blue: #4267b2; $color-blue2: #00C8FF; $color-green: #4caf50; +$color-green2: #298541; + +$color-orange: #F15A31; + + /* Grid breakpoints */ $grid-breakpoints: (