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: (